// Global Cockpit overrides for PatternFly variables

// Fonts
@import (inline, once) "../../node_modules/@redhat/redhat-font/webfonts/red-hat-font.css";
@font-family-base: "RedHatText", "Open Sans", Helvetica, Arial, sans-serif;
@font-family-mono: SFMono-Regular, menlo, monaco, consolas, "Liberation Mono", Courier New, monospace;

//
// Variables
// --------------------------------------------------


//== Colors
//
//## Gray and brand colors for use across Bootstrap.

@gray-base:              #000;
@gray-darker:            lighten(@gray-base, 13.5%); // #222
@gray-dark:              lighten(@gray-base, 20%);   // #333
@gray:                   lighten(@gray-base, 33.5%); // #555
@gray-light:             lighten(@gray-base, 46.7%); // #777
@gray-lighter:           lighten(@gray-base, 93.5%); // #eee

@brand-primary:         #06c;
@brand-success:         #92d400;
@brand-info:            #73bcf7;
@brand-warning:         #f0ab00;
@brand-danger:          #c9190b;


//== Scaffolding
//
//## Settings for some of the most global styles.

//** Background color for `<body>`.
@body-bg:               #fafafa;
//** Global text color on `<body>`.
@text-color:            #151515;


@navbar-pf-vertical-bg-color: @text-color;

//** Global textual link color.
//@link-color:            var(--pf-global--link--Color);
//** Link hover color set via `darken()` function.
//@link-hover-color:      var(--pf-global--link--Color--hover);
@link-color: #06c;
@link-hover-color: #004080;
//** Link hover decoration.
@link-hover-decoration: underline;

//** Global color for active items (e.g., navs or dropdowns).
@component-active-color:    var(--pf-global--active-color--100);
//** Global background color for active items (e.g., navs or dropdowns).
@component-active-bg:       @brand-primary;

//== Buttons
//
//## For each of Bootstrap's buttons, define text, background and border color.

@btn-font-weight:                normal;

@btn-default-color:              @brand-primary;
@btn-default-bg:                 #fff;
@btn-default-border:             @brand-primary;

@btn-primary-color:              #fff;
@btn-primary-bg:                 @brand-primary;
@btn-primary-border:             @brand-primary;

@btn-success-color:              #fff;
@btn-success-bg:                 @brand-success;
@btn-success-border:             @btn-success-bg;

@btn-info-color:                 #fff;
@btn-info-bg:                    @brand-info;
@btn-info-border:                @btn-info-bg;

@btn-warning-color:              #fff;
@btn-warning-bg:                 @brand-warning;
@btn-warning-border:             @btn-warning-bg;

@btn-danger-color:               #fff;
@btn-danger-bg:                  @brand-danger;
@btn-danger-border:              @btn-danger-bg;

@btn-link-disabled-color:        @gray-light;

@line-height-base: 1.5;
@font-size-base  : 16px;

// Resize headings
h1, h2, h3, h4, h5, h6 {
  line-height: var(--pf-global--LineHeight--sm);

  .breadcrumb + & {
    // Vertically align contents of headings directly following breadcrumbs
    display: flex;
    align-items: baseline;
  }
}

h1 {
  font-size: var(--pf-global--FontSize--4xl);
}

h2 {
  font-size: var(--pf-global--FontSize--3xl);
}

h3 {
  font-size: var(--pf-global--FontSize--2xl);
}

h4 {
  font-size: var(--pf-global--FontSize--xl);
}

h4 {
  font-size: var(--pf-global--FontSize--lg);
}

// Restyle inputs & dropdowns
.input-group-addon,
.bootstrap-select.btn-group .btn,
.content-header-extra .dropdown-toggle,
.dropdown-toggle,
.form-control:not(.ct-select):not(.rbt-input):not(select) {
  background-image: none !important;
}

.input-group-addon,
.bootstrap-select.btn-group .btn,
.content-header-extra .dropdown-toggle,
.dropdown-toggle,
.form-control:not(.ct-select) {
  border-radius: 3px;
  border-color: var(--pf-global--BorderColor--300);
  border-bottom-color: var(--pf-global--Color--200);
  color: var(--pf-global--Color--100);
  box-shadow: none !important;
  min-height: 2.25rem;

  &:not(.bootstrap-select):not(.dropdown-form-control) {
    padding: 1px 0.5rem;
  }

  .caret {
    align-self: center;

    &::before {
      content: "\f0d7";
    }
  }

  &::placeholder {
    color: var(--pf-global--Color--dark-200);
    font-style: normal;
  }

  &:active, &:focus, &:hover {
    border-color: var(--pf-global--BorderColor--300);
    border-bottom-color: var(--pf-global--primary-color--100);
    color: var(--pf-global--Color--100);
  }

  &:focus {
    // Take 1px from the padding and add it to the border
    padding-bottom: 0;
    border-bottom-width: 2px;
  }

  &[aria-disabled=true],
  &:disabled {
    background-color: var(--pf-global--disabled-color--300);
    border-color: var(--pf-global--disabled-color--300);
    color: var(--pf-global--disabled-color--100);
    cursor: not-allowed;
  }

  .has-error &,
  &.has-error {
    position: relative;

    &, &:hover, &:focus {
      border-color: var(--pf-global--BorderColor--300);
      border-bottom: 2px solid var(--pf-global--danger-color--100);
    }
  }
}

// Truncate text in Cockpit/PF3 dropdowns (when necessary)
.dropdown-toggle > span {
  overflow: hidden;
  text-overflow: ellipsis;
}

// Fix split dropdowns
.input-group {
  display: inline-flex;

  .combobox-container & {
    width: 100%;
  }

  > .form-control {
    display: flex;
    flex: auto;
  }

  > .input-group-addon,
  > .dropdown,
  > .dropdown-toggle {
    display: flex;
    width: auto;
    align-items: stretch;
  }

  > .input-group-btn {
    width: auto;

    > .btn {
      min-width: 2.5rem;
    }
  }
}

// Select dropdowns in Composer & typeahead find
.rbt-input.form-control,
select.form-control {
  --dropdown-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='8'%3E%3Cpath fill='%23151515' d='M18.804 1h8.392c.58 0 .87.701.46 1.112L23.46 6.31a.653.653 0 0 1-.922 0l-4.194-4.197A.651.651 0 0 1 18.805 1z'/%3E%3C/svg%3E");
  --dropdown-background: var(--pf-global--BackgroundColor--100);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: var(--dropdown-image) no-repeat 100% 50%, var(--dropdown-background) !important;
  padding-right: 2.5em !important;
}

// Adjust typeahead find style
.rbt {
  &-input {
    // Support typehead hints
    &-hint {
      // Stretch the hint and its input child 100% tall
      &,
      > input {
        height: 100%;
      }

      // Shave off the border and padding, as these misalign the elemnt
      // (as this widget uses inline styles (ugh!), we _have to_ use !important)
      > input {
        border-width: 0 1px !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
      }
    }
  }

  // Adjust spinner position
  &-aux {
    right: 2rem !important;
  }
}

// Adjust dropdown menus
.dropdown-menu {
  > li {
    padding: 0;

    > a {
      padding: 0.5rem 1rem;
    }

    &:not(.disabled) > a {
      color: var(--pf-global--Color--100);

      &:active,
      &:focus,
      &:hover {
        background-color: var(--pf-global--BackgroundColor--light-300);
        border-color: var(--pf-global--BackgroundColor--light-300);
      }

    }

    &.active > a,
    > a:active {
      // PF3 reverts the active color with an !important
      // so we also use an !important here to override it
      color: var(--pf-global--Color--100) !important;
    }

    &.active > a {
      // PF3 also modifies these colors with an !important
      &,
      &:active,
      &:focus,
      &:hover {
        color: var(--pf-global--Color--100) !important;
        background-color: var(--pf-global--BackgroundColor--light-300) !important;
        border-color: var(--pf-global--BackgroundColor--light-300) !important;
      }
    }

    &.selected > a {
      color: var(--pf-global--Color--100);
      background-color: var(--pf-global--BackgroundColor--light-300);
      border-color: var(--pf-global--BackgroundColor--light-300);
    }
  }

  // Stretch dropdown menus to at least the width of the dropdown
  .dropdown > & {
    min-width: 100%;
  }
}

// Restyle buttons
.pagination a[role=button],
.btn {
  padding: 0.375rem 1rem;
  transition: background 0.3s, border 0.3s, color 0.3s;

  &:not(.dropdown-toggle):not(.dropdown):not(.bootstrap-select):not(.ct-select) {
    background-image: none !important;
    border-radius: 3px;

    &:not(:active):not(:focus):not(:hover) {
      box-shadow: none !important;
    }

    &:not(:disabled):not([aria-disabled=true]):not(.btn-link) {
      &:not(.btn-primary):not(.btn-success):not(.btn-info):not(.btn-warning):not(.btn-danger) {
        &:active, &:focus, &:hover {
          border-color: var(--pf-global--primary-color--100);
          box-shadow: inset 0 0 0 1px var(--pf-global--primary-color--100);
        }
      }
    }

    &.btn-primary {
      &:active, &:focus, &:hover {
        background-color: var(--pf-global--primary-color--200);
        border-color: var(--pf-global--primary-color--200);
      }
    }
    &.btn-success {
      &:active, &:focus, &:hover {
        background-color: var(--pf-global--success-color--200);
        border-color: var(--pf-global--success-color--200);
      }
    }
    &.btn-info {
      &:active, &:focus, &:hover {
        background-color: var(--pf-global--info-color--200);
        border-color: var(--pf-global--info-color--200);
      }
    }
    &.btn-warning {
      &:active, &:focus, &:hover {
        background-color: var(--pf-global--warning-color--200);
        border-color: var(--pf-global--warning-color--200);
      }
    }
    &.btn-danger {
      &:active, &:focus, &:hover {
        background-color: var(--pf-global--danger-color--200);
        border-color: var(--pf-global--danger-color--200);
      }
    }

    &[aria-disabled=true],
    &.disabled,
    &:disabled {
      &:not(.btn-link):not(a) {
        &, &:hover {
          background-color: var(--pf-global--disabled-color--200) !important;
          border-color: var(--pf-global--disabled-color--200) !important;
          color: var(--pf-global--disabled-color--100) !important;
          cursor: default;

          // Backgrounds are a bit too visually weighty in button groups
          .btn-group > & {
            background-color: var(--pf-global--disabled-color--300) !important;
          }
        }
      }
    }
  }

  &-primary,
  &-success,
  &-info,
  &-warning,
  &-danger {
    &:active, &:focus, &:hover {
      box-shadow: none !important;
    }
  }

  // Shrink embedded buttons
  .ct-form &,
  .content-filter &,
  .listing-ct-head &,
  .listing-ct-body &,
  .listing-ct-item &,
  .action &,
  .panel-heading &,
  .panel tr & {
    padding: 0.125rem 0.5rem;
  }

  // Restyle button dropdowns to have button borders
  .btn-group > & + .dropdown-toggle {
    border-color: var(--pf-global--primary-color--100);

    &:hover, &:focus {
      border-width: 1px;
    }
  }

  // Center-align icon buttons
  &.pficon,
  &.fa {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  // Fix up panel action buttons
  .panel-actions & {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
  }
}

// Unround touching corners in button and input groups
.btn-group,
.input-group {
  > :not(:first-of-type) {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
  }

  > :not(:last-of-type) {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
  }
}

// Adjust height of inline edit buttons
.form-control-pf-editable > button {
  max-height: 100%;
}

// Pagination buttons
.pagination {
  ul, li {
    margin: 0;
    padding: 0;
  }

  li {
    display: flex;
  }

  a[role=button] {
    display: flex;
    height: 2.25rem;
    align-items: center;

    &[aria-disabled=true],
    &:disabled {
      // Backgrounds are a bit too visually weighty in pagination
      background-color: var(--pf-global--disabled-color--300) !important;
    }
  }
}

// Kebab menu buttons should get special treatment
.dropdown-kebab-pf > button {
  border: none;
  padding: 0.5rem 1rem !important;
}

// Restyle modals
.modal {
  &-header {
    background: var(--pf-global--BackgroundColor--100);
    padding: 0 0 1.5rem;
  }

  &-title {
    font-size: 1.5rem;
    line-height: 1.3;
  }

  &-content {
    padding: 2rem;
  }

  &-footer {
    padding: 1rem 0 0;

    > .btn {
      padding: 0.375rem 1rem;
    }
  }

  &-body {
    padding: 0;
  }
}

// Adjust list group font sizes
.list-group {
  font-size: var(--pf-global--FontSize--sm);

  &-item {
    .dialog-list-ct > &.active {
      background-color: var(--pf-global--active-color--100);
      color: var(--pf-global--Color--light-100);
    }

    > p {
      font-size: var(--pf-global--FontSize--md);
    }
  }

  // Navigation should be standard size
  nav > & {
    font-size: var(--pf-global--FontSize--md);
  }

}

// Adjust list views
.list-view-pf {
  .list-group-item-heading {
      font-size: var(--pf-global--FontSize--md);
      font-weight: 600;
  }
}

// Standardize small font size to PF4 small font
small {
	font-size: var(--pf-global--FontSize--sm);
}

@media screen and (min-width: 768px) {
  // Add PF4 padding to desktop mode
  .content,
  .page-ct,
  .container,
  .container-fluid {
    padding: 2rem 3rem;

    .breadcrumb,
    .breadcrumb + & {
      padding-top: 0;
    }

    .cards-pf + & {
      padding-top: 1rem;
    }
  }

  // Rely on page-ct padding; don't duplicate
  .page-ct .container,
  .page-ct .container-fluid {
    padding: 0;
  }

  // Remove excess padding from dialogs
  .modal-dialog .content {
    padding: 0;
  }
}

// Change label size & weight to match PF4
label {
  font-weight: normal;
}

.help-block,
.label,
.list-group-item-heading,
.control-label,
.info-table-ct > tbody > tr > td:first-child,
th > label {
  font-weight: normal;
  font-size: var(--font-size-s);
}

// Adjust labels in tables
// (used in accounts & containers)
.info-table-ct > tbody > tr > td:first-child,
td > label,
th > label {
  vertical-align: baseline;
  // Fake spacing (not quite right, but close)
  padding: 0.125rem 0.25rem 0 0.5rem;
}

// Adjust nav tab sizes
.nav-tabs {
  font-size: var(--font-size-s);

  > li {

    > a {
      padding: 0.75rem 1rem;
      position: relative;
    }

    &.active > a {

      &::before {
        position: absolute;
        height: 2px;
        top: -1px;
        left: -1px;
        right: -1px;
        content: "";
        background: var(--pf-global--active-color--100);
        pointer-events: none;
      }

      // listing-ct uses tertitiary nav, which has a bottom line
      .listing-ct-panel &::before {
        top: auto;
        bottom: 0;
      }
    }

  }
}

// Add a PF4 shadow to panels
.panel {
  box-shadow: var(--pf-global--BoxShadow--sm);
}

// Change breadcrumb font size
.breadcrumb {
  padding: 1rem 0;
  font-size: var(--pf-global--FontSize--sm);
}

// Adjust modal dialog sizes
.modal {
  &-dialog {
    width: auto;
    max-width: 45rem;
  }

  &-sm {
    max-width: 35rem;
  }

  &-lg {
    max-width: 60rem;
  }
}

// Bump down graph text size
.server-graph {
  font-size: var(--pf-global--FontSize--xs);
}

// Restyle nav tabs (in content header only, for services)
// in Cockpit, nav-tabs are also used in lists
// and Cockpit's lists use underlines, not overlines
.content-header-extra > .nav-tabs > li {
  position: relative;

  &.active::after {
    position: absolute;
    background: var(--pf-global--primary-color--100);
    content: "";
    height: 2px;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 1;
  }
}

// Flatten the progress bar trough
.progress {
  box-shadow: none;
}

// Adjust spacing of expand/collapse divider
.expand-collapse-pf .expand-collapse-pf-separator.bordered {
  margin-top: 1rem;
}

// Fix small icon size (for Composer)
.pf-icon-small::before {
  // PF3 uses (1.7em * 12px = 20.4px); PF4 1.25rem = 20px
  font-size: 1.25rem;
}

// Fix small list icon size (for Composer)
.list-pf-icon-small::before {
  // PF3 uses (1.4em * 12px = 16.8px); PF4 1rem = 16px
  font-size: 1rem;
}

:root {
  font-size: @font-size-base;

  /* PF4 variables */
  --pf-global--BackgroundColor--100: #fff;
  --pf-global--BackgroundColor--150: #f5f5f5;
  --pf-global--BackgroundColor--200: #fafafa;
  --pf-global--BackgroundColor--300: #ededed;
  --pf-global--BackgroundColor--light-100: #fff;
  --pf-global--BackgroundColor--light-200: #fafafa;
  --pf-global--BackgroundColor--light-300: #ededed;
  --pf-global--BackgroundColor--dark-100: #151515;
  --pf-global--BackgroundColor--dark-200: #393f44;
  --pf-global--BackgroundColor--dark-transparent-100: rgba(3, 3, 3, 0.62);
  --pf-global--BackgroundColor--dark-transparent-200: rgba(3, 3, 3, 0.32);
  --pf-global--Color--100: #151515;
  --pf-global--Color--200: #72767b;
  --pf-global--Color--300: #393f44;
  --pf-global--Color--400: #8b8d8f;
  --pf-global--Color--light-100: #fff;
  --pf-global--Color--light-200: #ededed;
  --pf-global--Color--dark-100: #151515;
  --pf-global--Color--dark-200: #72767b;
  --pf-global--active-color--100: #06c;
  --pf-global--active-color--200: #bee1f4;
  --pf-global--active-color--300: #73bcf7;
  --pf-global--active-color--400: #2b9af3;
  --pf-global--disabled-color--100: #72767b;
  --pf-global--disabled-color--200: #d2d2d2;
  --pf-global--disabled-color--300: #ededed;
  --pf-global--primary-color--100: #06c;
  --pf-global--primary-color--200: #004080;
  --pf-global--primary-color--light-100: #73bcf7;
  --pf-global--primary-color--dark-100: #06c;
  --pf-global--secondary-color--100: #72767b;
  --pf-global--success-color--100: #92d400;
  --pf-global--success-color--200: #486b00;
  --pf-global--info-color--100: #73bcf7;
  --pf-global--info-color--200: #004368;
  --pf-global--warning-color--100: #f0ab00;
  --pf-global--warning-color--200: #795600;
  --pf-global--danger-color--100: #c9190b;
  --pf-global--danger-color--200: #a30000;
  --pf-global--danger-color--300: #470000;
  --pf-global--BoxShadow--sm: 0 0.0625rem 0.125rem 0 rgba(3, 3, 3, 0.2);
  --pf-global--BoxShadow--sm-right: 0.25rem 0 0.625rem -0.25rem rgba(3, 3, 3, 0.12);
  --pf-global--BoxShadow--sm-left: -0.25rem 0 0.625rem -0.25rem rgba(3, 3, 3, 0.12);
  --pf-global--BoxShadow--sm-bottom: 0 0.25rem 0.625rem -0.25rem rgba(3, 3, 3, 0.12);
  --pf-global--BoxShadow--sm-top: 0 -0.25rem 0.625rem -0.25rem rgba(3, 3, 3, 0.12);
  --pf-global--BoxShadow--md: 0 0.0625rem 0.0625rem 0rem rgba(3, 3, 3, 0.05), 0 0.25rem 0.5rem 0.25rem rgba(3, 3, 3, 0.06);
  --pf-global--BoxShadow--md-right: 0.3125rem 0 0.625rem -0.25rem rgba(3, 3, 3, 0.25);
  --pf-global--BoxShadow--md-left: -0.3125rem 0 0.625rem -0.25rem rgba(3, 3, 3, 0.25);
  --pf-global--BoxShadow--md-bottom: 0 0.3125rem 0.625rem -0.25rem rgba(3, 3, 3, 0.25);
  --pf-global--BoxShadow--md-top: 0 -0.3125rem 0.625rem -0.25rem rgba(3, 3, 3, 0.25);
  --pf-global--BoxShadow--lg: 0 0.1875rem 0.4375rem 0.1875rem rgba(3, 3, 3, 0.13), 0 0.6875rem 1.5rem 1rem rgba(3, 3, 3, 0.12);
  --pf-global--BoxShadow--lg-right: 0.75rem 0 0.625rem -0.25rem rgba(3, 3, 3, 0.07);
  --pf-global--BoxShadow--lg-left: -0.75rem 0 0.625rem -0.25rem rgba(3, 3, 3, 0.07);
  --pf-global--BoxShadow--lg-bottom: 0 0.75rem 0.625rem -0.25rem rgba(3, 3, 3, 0.07);
  --pf-global--BoxShadow--lg-top: 0 -0.75rem 0.625rem -0.25rem rgba(3, 3, 3, 0.07);
  --pf-global--BoxShadow--inset: inset 0 0 0.625rem 0 rgba(3, 3, 3, 0.25);
  --pf-global--spacer--xs: 0.25rem;
  --pf-global--spacer--sm: 0.5rem;
  --pf-global--spacer--md: 1rem;
  --pf-global--spacer--lg: 1.5rem;
  --pf-global--spacer--xl: 2rem;
  --pf-global--spacer--2xl: 3rem;
  --pf-global--spacer--3xl: 4rem;
  --pf-global--spacer--form-element: 0.375rem;
  --pf-global--gutter: 1.5rem;
  --pf-global--golden-ratio: 1.681;
  --pf-global--ZIndex--xs: 100;
  --pf-global--ZIndex--sm: 200;
  --pf-global--ZIndex--md: 300;
  --pf-global--ZIndex--lg: 400;
  --pf-global--ZIndex--xl: 500;
  --pf-global--ZIndex--2xl: 600;
  --pf-global--breakpoint--xs: 0;
  --pf-global--breakpoint--sm: 576px;
  --pf-global--breakpoint--md: 768px;
  --pf-global--breakpoint--lg: 992px;
  --pf-global--breakpoint--xl: 1200px;
  --pf-global--link--Color: #06c;
  --pf-global--link--Color--hover: #004080;
  --pf-global--link--Color--light: #73bcf7;
  --pf-global--link--Color--light--hover: #2b9af3;
  --pf-global--link--Color--dark: #06c;
  --pf-global--link--Color--dark--hover: #004080;
  --pf-global--link--FontWeight: 500;
  --pf-global--link--TextDecoration: none;
  --pf-global--link--TextDecoration--hover: underline;
  --pf-global--BorderWidth--sm: 1px;
  --pf-global--BorderWidth--md: 2px;
  --pf-global--BorderWidth--lg: 3px;
  --pf-global--BorderColor--100: #d2d2d2;
  --pf-global--BorderColor--200: #8b8d8f;
  --pf-global--BorderColor--300: #ededed;
  --pf-global--BorderColor--dark-100: #d2d2d2;
  --pf-global--BorderColor--light-100: #bbb;
  --pf-global--BorderRadius--sm: 3px;
  --pf-global--BorderRadius--lg: 30em;
  --pf-global--icon--Color--light: #72767b;
  --pf-global--icon--Color--dark: #151515;
  --pf-global--icon--FontSize--sm: 0.625rem;
  --pf-global--icon--FontSize--md: 1.125rem;
  --pf-global--icon--FontSize--lg: 1.5rem;
  --pf-global--icon--FontSize--xl: 3.375rem;
  --pf-global--FontFamily--sans-serif: @font-family-base;
  --pf-global--FontFamily--monospace: @font-family-monospace;
  --pf-global--FontSize--4xl: 2.25rem;
  --pf-global--FontSize--3xl: 1.75rem;
  --pf-global--FontSize--2xl: 1.5rem;
  --pf-global--FontSize--xl: 1.3125rem;
  --pf-global--FontSize--lg: 1.125rem;
  --pf-global--FontSize--md: 1rem;
  --pf-global--FontSize--sm: 0.875rem;
  --pf-global--FontSize--xs: 0.75rem;
  --pf-global--FontWeight--light: 300;
  --pf-global--FontWeight--normal: 400;
  --pf-global--FontWeight--semi-bold: 500;
  --pf-global--FontWeight--bold: 600;
  --pf-global--LineHeight--sm: 1.3;
  --pf-global--LineHeight--md: 1.5;
  --pf-global--ListStyle: disc outside;
  --pf-global--Transition: all 250ms ease-in-out;
  --pf-global--TimingFunction: cubic-bezier(0.645, 0.045, 0.355, 1);
  --pf-global--TransitionDuration: 250ms;
  --pf-global--arrow--width: 0.9375rem;
  --pf-global--arrow--width-lg: 1.5625rem;
  --pf-global--target-size--MinWidth: 44px;
  --pf-global--target-size--MinHeight: 44px;
}
