/** Third Party variables imports here */ // patternfly v3 $font-path: '~patternfly/dist/fonts/'; $img-path: '~patternfly/dist/img/'; $icon-font-path: '~patternfly/dist/fonts/'; // patternfly v4 $pf-global--font-path: '~@patternfly/patternfly/assets/fonts'; $fa-font-path: '~@patternfly/patternfly/assets/fonts/webfonts'; $pf-global--fonticon-path: '~@patternfly/patternfly/assets/pficon'; $pf-global--image-path: '~@patternfly/patternfly/assets/images'; // patternfly v3 $bootstrap-sass-asset-helper: false !default; // // Variables // -------------------------------------------------- //== Colors // //## Gray and brand colors for use across Bootstrap. $gray-base: #000 !default; $gray-darker: lighten($gray-base, 13.5%) !default; // #222 $gray-dark: lighten($gray-base, 20%) !default; // #333 $gray: lighten($gray-base, 33.5%) !default; // #555 $gray-light: lighten($gray-base, 46.7%) !default; // #777 $gray-lighter: lighten($gray-base, 93.5%) !default; // #eee $brand-primary: darken(#428bca, 6.5%) !default; // #337ab7 $brand-success: #5cb85c !default; $brand-info: #5bc0de !default; $brand-warning: #f0ad4e !default; $brand-danger: #d9534f !default; //== Scaffolding // //## Settings for some of the most global styles. //** Background color for ``. $body-bg: #fff !default; //** Global text color on ``. $text-color: $gray-dark !default; //** Global textual link color. $link-color: $brand-primary !default; //** Link hover color set via `darken()` function. $link-hover-color: darken($link-color, 15%) !default; //** Link hover decoration. $link-hover-decoration: underline !default; //== Typography // //## Font, line-height, and color for body text, headings, and more. $font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif !default; $font-family-serif: Georgia, "Times New Roman", Times, serif !default; //** Default monospace fonts for `
`, ``, and ``.
$font-family-monospace:   Menlo, Monaco, Consolas, "Courier New", monospace !default;
$font-family-base:        $font-family-sans-serif !default;

$font-size-base:          14px !default;
$font-size-large:         ceil(($font-size-base * 1.25)) !default; // ~18px
$font-size-small:         ceil(($font-size-base * .85)) !default; // ~12px

$font-size-h1:            floor(($font-size-base * 2.6)) !default; // ~36px
$font-size-h2:            floor(($font-size-base * 2.15)) !default; // ~30px
$font-size-h3:            ceil(($font-size-base * 1.7)) !default; // ~24px
$font-size-h4:            ceil(($font-size-base * 1.25)) !default; // ~18px
$font-size-h5:            $font-size-base !default;
$font-size-h6:            ceil(($font-size-base * .85)) !default; // ~12px

//** Unit-less `line-height` for use in components like buttons.
$line-height-base:        1.428571429 !default; // 20/14
//** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
$line-height-computed:    floor(($font-size-base * $line-height-base)) !default; // ~20px

//** By default, this inherits from the ``.
$headings-font-family:    inherit !default;
$headings-font-weight:    500 !default;
$headings-line-height:    1.1 !default;
$headings-color:          inherit !default;


//== Iconography
//
//## Specify custom location and filename of the included Glyphicons icon font. Useful for those including Bootstrap via Bower.

//** Load fonts from this directory.

// [converter] If $bootstrap-sass-asset-helper if used, provide path relative to the assets load path.
// [converter] This is because some asset helpers, such as Sprockets, do not work with file-relative paths.
$icon-font-path: if($bootstrap-sass-asset-helper, "bootstrap/", "../fonts/bootstrap/") !default;

//** File name for all font files.
$icon-font-name:          "glyphicons-halflings-regular" !default;
//** Element ID within SVG icon file.
$icon-font-svg-id:        "glyphicons_halflingsregular" !default;


//== Components
//
//## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).

$padding-base-vertical:     6px !default;
$padding-base-horizontal:   12px !default;

$padding-large-vertical:    10px !default;
$padding-large-horizontal:  16px !default;

$padding-small-vertical:    5px !default;
$padding-small-horizontal:  10px !default;

$padding-xs-vertical:       1px !default;
$padding-xs-horizontal:     5px !default;

$line-height-large:         1.3333333 !default; // extra decimals for Win 8.1 Chrome
$line-height-small:         1.5 !default;

$border-radius-base:        4px !default;
$border-radius-large:       6px !default;
$border-radius-small:       3px !default;

//** Global color for active items (e.g., navs or dropdowns).
$component-active-color:    #fff !default;
//** Global background color for active items (e.g., navs or dropdowns).
$component-active-bg:       $brand-primary !default;

//** Width of the `border` for generating carets that indicate dropdowns.
$caret-width-base:          4px !default;
//** Carets increase slightly in size for larger components.
$caret-width-large:         5px !default;


//== Tables
//
//## Customizes the `.table` component with basic values, each used across all table variations.

//** Padding for ``s and ``s.
$table-cell-padding:            8px !default;
//** Padding for cells in `.table-condensed`.
$table-condensed-cell-padding:  5px !default;

//** Default background color used for all tables.
$table-bg:                      transparent !default;
//** Background color used for `.table-striped`.
$table-bg-accent:               #f9f9f9 !default;
//** Background color used for `.table-hover`.
$table-bg-hover:                #f5f5f5 !default;
$table-bg-active:               $table-bg-hover !default;

//** Border color for table and cell borders.
$table-border-color:            #ddd !default;


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

$btn-font-weight:                normal !default;

$btn-default-color:              #333 !default;
$btn-default-bg:                 #fff !default;
$btn-default-border:             #ccc !default;

$btn-primary-color:              #fff !default;
$btn-primary-bg:                 $brand-primary !default;
$btn-primary-border:             darken($btn-primary-bg, 5%) !default;

$btn-success-color:              #fff !default;
$btn-success-bg:                 $brand-success !default;
$btn-success-border:             darken($btn-success-bg, 5%) !default;

$btn-info-color:                 #fff !default;
$btn-info-bg:                    $brand-info !default;
$btn-info-border:                darken($btn-info-bg, 5%) !default;

$btn-warning-color:              #fff !default;
$btn-warning-bg:                 $brand-warning !default;
$btn-warning-border:             darken($btn-warning-bg, 5%) !default;

$btn-danger-color:               #fff !default;
$btn-danger-bg:                  $brand-danger !default;
$btn-danger-border:              darken($btn-danger-bg, 5%) !default;

$btn-link-disabled-color:        $gray-light !default;

// Allows for customizing button radius independently from global border radius
$btn-border-radius-base:         $border-radius-base !default;
$btn-border-radius-large:        $border-radius-large !default;
$btn-border-radius-small:        $border-radius-small !default;


//== Forms
//
//##

//** `` background color
$input-bg:                       #fff !default;
//** `` background color
$input-bg-disabled:              $gray-lighter !default;

//** Text color for ``s
$input-color:                    $gray !default;
//** `` border color
$input-border:                   #ccc !default;

// TODO: Rename `$input-border-radius` to `$input-border-radius-base` in v4
//** Default `.form-control` border radius
// This has no effect on ``s in CSS.
$input-border-radius:            $border-radius-base !default;
//** Large `.form-control` border radius
$input-border-radius-large:      $border-radius-large !default;
//** Small `.form-control` border radius
$input-border-radius-small:      $border-radius-small !default;

//** Border color for inputs on focus
$input-border-focus:             #66afe9 !default;

//** Placeholder text color
$input-color-placeholder:        #999 !default;

//** Default `.form-control` height
$input-height-base:              ($line-height-computed + ($padding-base-vertical * 2) + 2) !default;
//** Large `.form-control` height
$input-height-large:             (ceil($font-size-large * $line-height-large) + ($padding-large-vertical * 2) + 2) !default;
//** Small `.form-control` height
$input-height-small:             (floor($font-size-small * $line-height-small) + ($padding-small-vertical * 2) + 2) !default;

//** `.form-group` margin
$form-group-margin-bottom:       15px !default;

$legend-color:                   $gray-dark !default;
$legend-border-color:            #e5e5e5 !default;

//** Background color for textual input addons
$input-group-addon-bg:           $gray-lighter !default;
//** Border color for textual input addons
$input-group-addon-border-color: $input-border !default;

//** Disabled cursor for form controls and buttons.
$cursor-disabled:                not-allowed !default;


//== Dropdowns
//
//## Dropdown menu container and contents.

//** Background for the dropdown menu.
$dropdown-bg:                    #fff !default;
//** Dropdown menu `border-color`.
$dropdown-border:                rgba(0, 0, 0, .15) !default;
//** Dropdown menu `border-color` **for IE8**.
$dropdown-fallback-border:       #ccc !default;
//** Divider color for between dropdown items.
$dropdown-divider-bg:            #e5e5e5 !default;

//** Dropdown link text color.
$dropdown-link-color:            $gray-dark !default;
//** Hover color for dropdown links.
$dropdown-link-hover-color:      darken($gray-dark, 5%) !default;
//** Hover background for dropdown links.
$dropdown-link-hover-bg:         #f5f5f5 !default;

//** Active dropdown menu item text color.
$dropdown-link-active-color:     $component-active-color !default;
//** Active dropdown menu item background color.
$dropdown-link-active-bg:        $component-active-bg !default;

//** Disabled dropdown menu item background color.
$dropdown-link-disabled-color:   $gray-light !default;

//** Text color for headers within dropdown menus.
$dropdown-header-color:          $gray-light !default;

//** Deprecated `$dropdown-caret-color` as of v3.1.0
$dropdown-caret-color:           #000 !default;


//-- Z-index master list
//
// Warning: Avoid customizing these values. They're used for a bird's eye view
// of components dependent on the z-axis and are designed to all work together.
//
// Note: These variables are not generated into the Customizer.

$zindex-navbar:            1000 !default;
$zindex-dropdown:          1000 !default;
$zindex-popover:           1060 !default;
$zindex-tooltip:           1070 !default;
$zindex-navbar-fixed:      1030 !default;
$zindex-modal-background:  1040 !default;
$zindex-modal:             1050 !default;


//== Media queries breakpoints
//
//## Define the breakpoints at which your layout will change, adapting to different screen sizes.

// Extra small screen / phone
//** Deprecated `$screen-xs` as of v3.0.1
$screen-xs:                  480px !default;
//** Deprecated `$screen-xs-min` as of v3.2.0
$screen-xs-min:              $screen-xs !default;
//** Deprecated `$screen-phone` as of v3.0.1
$screen-phone:               $screen-xs-min !default;

// Small screen / tablet
//** Deprecated `$screen-sm` as of v3.0.1
$screen-sm:                  768px !default;
$screen-sm-min:              $screen-sm !default;
//** Deprecated `$screen-tablet` as of v3.0.1
$screen-tablet:              $screen-sm-min !default;

// Medium screen / desktop
//** Deprecated `$screen-md` as of v3.0.1
$screen-md:                  992px !default;
$screen-md-min:              $screen-md !default;
//** Deprecated `$screen-desktop` as of v3.0.1
$screen-desktop:             $screen-md-min !default;

// Large screen / wide desktop
//** Deprecated `$screen-lg` as of v3.0.1
$screen-lg:                  1200px !default;
$screen-lg-min:              $screen-lg !default;
//** Deprecated `$screen-lg-desktop` as of v3.0.1
$screen-lg-desktop:          $screen-lg-min !default;

// So media queries don't overlap when required, provide a maximum
$screen-xs-max:              ($screen-sm-min - 1) !default;
$screen-sm-max:              ($screen-md-min - 1) !default;
$screen-md-max:              ($screen-lg-min - 1) !default;


//== Grid system
//
//## Define your custom responsive grid.

//** Number of columns in the grid.
$grid-columns:              12 !default;
//** Padding between columns. Gets divided in half for the left and right.
$grid-gutter-width:         30px !default;
// Navbar collapse
//** Point at which the navbar becomes uncollapsed.
$grid-float-breakpoint:     $screen-sm-min !default;
//** Point at which the navbar begins collapsing.
$grid-float-breakpoint-max: ($grid-float-breakpoint - 1) !default;


//== Container sizes
//
//## Define the maximum width of `.container` for different screen sizes.

// Small screen / tablet
$container-tablet:             (720px + $grid-gutter-width) !default;
//** For `$screen-sm-min` and up.
$container-sm:                 $container-tablet !default;

// Medium screen / desktop
$container-desktop:            (940px + $grid-gutter-width) !default;
//** For `$screen-md-min` and up.
$container-md:                 $container-desktop !default;

// Large screen / wide desktop
$container-large-desktop:      (1140px + $grid-gutter-width) !default;
//** For `$screen-lg-min` and up.
$container-lg:                 $container-large-desktop !default;


//== Navbar
//
//##

// Basics of a navbar
$navbar-height:                    50px !default;
$navbar-margin-bottom:             $line-height-computed !default;
$navbar-border-radius:             $border-radius-base !default;
$navbar-padding-horizontal:        floor(($grid-gutter-width / 2)) !default;
$navbar-padding-vertical:          (($navbar-height - $line-height-computed) / 2) !default;
$navbar-collapse-max-height:       340px !default;

$navbar-default-color:             #777 !default;
$navbar-default-bg:                #f8f8f8 !default;
$navbar-default-border:            darken($navbar-default-bg, 6.5%) !default;

// Navbar links
$navbar-default-link-color:                #777 !default;
$navbar-default-link-hover-color:          #333 !default;
$navbar-default-link-hover-bg:             transparent !default;
$navbar-default-link-active-color:         #555 !default;
$navbar-default-link-active-bg:            darken($navbar-default-bg, 6.5%) !default;
$navbar-default-link-disabled-color:       #ccc !default;
$navbar-default-link-disabled-bg:          transparent !default;

// Navbar brand label
$navbar-default-brand-color:               $navbar-default-link-color !default;
$navbar-default-brand-hover-color:         darken($navbar-default-brand-color, 10%) !default;
$navbar-default-brand-hover-bg:            transparent !default;

// Navbar toggle
$navbar-default-toggle-hover-bg:           #ddd !default;
$navbar-default-toggle-icon-bar-bg:        #888 !default;
$navbar-default-toggle-border-color:       #ddd !default;


//=== Inverted navbar
// Reset inverted navbar basics
$navbar-inverse-color:                      lighten($gray-light, 15%) !default;
$navbar-inverse-bg:                         #222 !default;
$navbar-inverse-border:                     darken($navbar-inverse-bg, 10%) !default;

// Inverted navbar links
$navbar-inverse-link-color:                 lighten($gray-light, 15%) !default;
$navbar-inverse-link-hover-color:           #fff !default;
$navbar-inverse-link-hover-bg:              transparent !default;
$navbar-inverse-link-active-color:          $navbar-inverse-link-hover-color !default;
$navbar-inverse-link-active-bg:             darken($navbar-inverse-bg, 10%) !default;
$navbar-inverse-link-disabled-color:        #444 !default;
$navbar-inverse-link-disabled-bg:           transparent !default;

// Inverted navbar brand label
$navbar-inverse-brand-color:                $navbar-inverse-link-color !default;
$navbar-inverse-brand-hover-color:          #fff !default;
$navbar-inverse-brand-hover-bg:             transparent !default;

// Inverted navbar toggle
$navbar-inverse-toggle-hover-bg:            #333 !default;
$navbar-inverse-toggle-icon-bar-bg:         #fff !default;
$navbar-inverse-toggle-border-color:        #333 !default;


//== Navs
//
//##

//=== Shared nav styles
$nav-link-padding:                          10px 15px !default;
$nav-link-hover-bg:                         $gray-lighter !default;

$nav-disabled-link-color:                   $gray-light !default;
$nav-disabled-link-hover-color:             $gray-light !default;

//== Tabs
$nav-tabs-border-color:                     #ddd !default;

$nav-tabs-link-hover-border-color:          $gray-lighter !default;

$nav-tabs-active-link-hover-bg:             $body-bg !default;
$nav-tabs-active-link-hover-color:          $gray !default;
$nav-tabs-active-link-hover-border-color:   #ddd !default;

$nav-tabs-justified-link-border-color:            #ddd !default;
$nav-tabs-justified-active-link-border-color:     $body-bg !default;

//== Pills
$nav-pills-border-radius:                   $border-radius-base !default;
$nav-pills-active-link-hover-bg:            $component-active-bg !default;
$nav-pills-active-link-hover-color:         $component-active-color !default;


//== Pagination
//
//##

$pagination-color:                     $link-color !default;
$pagination-bg:                        #fff !default;
$pagination-border:                    #ddd !default;

$pagination-hover-color:               $link-hover-color !default;
$pagination-hover-bg:                  $gray-lighter !default;
$pagination-hover-border:              #ddd !default;

$pagination-active-color:              #fff !default;
$pagination-active-bg:                 $brand-primary !default;
$pagination-active-border:             $brand-primary !default;

$pagination-disabled-color:            $gray-light !default;
$pagination-disabled-bg:               #fff !default;
$pagination-disabled-border:           #ddd !default;


//== Pager
//
//##

$pager-bg:                             $pagination-bg !default;
$pager-border:                         $pagination-border !default;
$pager-border-radius:                  15px !default;

$pager-hover-bg:                       $pagination-hover-bg !default;

$pager-active-bg:                      $pagination-active-bg !default;
$pager-active-color:                   $pagination-active-color !default;

$pager-disabled-color:                 $pagination-disabled-color !default;


//== Jumbotron
//
//##

$jumbotron-padding:              30px !default;
$jumbotron-color:                inherit !default;
$jumbotron-bg:                   $gray-lighter !default;
$jumbotron-heading-color:        inherit !default;
$jumbotron-font-size:            ceil(($font-size-base * 1.5)) !default;
$jumbotron-heading-font-size:    ceil(($font-size-base * 4.5)) !default;


//== Form states and alerts
//
//## Define colors for form feedback states and, by default, alerts.

$state-success-text:             #3c763d !default;
$state-success-bg:               #dff0d8 !default;
$state-success-border:           darken(adjust-hue($state-success-bg, -10), 5%) !default;

$state-info-text:                #31708f !default;
$state-info-bg:                  #d9edf7 !default;
$state-info-border:              darken(adjust-hue($state-info-bg, -10), 7%) !default;

$state-warning-text:             #8a6d3b !default;
$state-warning-bg:               #fcf8e3 !default;
$state-warning-border:           darken(adjust-hue($state-warning-bg, -10), 5%) !default;

$state-danger-text:              #a94442 !default;
$state-danger-bg:                #f2dede !default;
$state-danger-border:            darken(adjust-hue($state-danger-bg, -10), 5%) !default;


//== Tooltips
//
//##

//** Tooltip max width
$tooltip-max-width:           200px !default;
//** Tooltip text color
$tooltip-color:               #fff !default;
//** Tooltip background color
$tooltip-bg:                  #000 !default;
$tooltip-opacity:             .9 !default;

//** Tooltip arrow width
$tooltip-arrow-width:         5px !default;
//** Tooltip arrow color
$tooltip-arrow-color:         $tooltip-bg !default;


//== Popovers
//
//##

//** Popover body background color
$popover-bg:                          #fff !default;
//** Popover maximum width
$popover-max-width:                   276px !default;
//** Popover border color
$popover-border-color:                rgba(0, 0, 0, .2) !default;
//** Popover fallback border color
$popover-fallback-border-color:       #ccc !default;

//** Popover title background color
$popover-title-bg:                    darken($popover-bg, 3%) !default;

//** Popover arrow width
$popover-arrow-width:                 10px !default;
//** Popover arrow color
$popover-arrow-color:                 $popover-bg !default;

//** Popover outer arrow width
$popover-arrow-outer-width:           ($popover-arrow-width + 1) !default;
//** Popover outer arrow color
$popover-arrow-outer-color:           fade_in($popover-border-color, 0.05) !default;
//** Popover outer arrow fallback color
$popover-arrow-outer-fallback-color:  darken($popover-fallback-border-color, 20%) !default;


//== Labels
//
//##

//** Default label background color
$label-default-bg:            $gray-light !default;
//** Primary label background color
$label-primary-bg:            $brand-primary !default;
//** Success label background color
$label-success-bg:            $brand-success !default;
//** Info label background color
$label-info-bg:               $brand-info !default;
//** Warning label background color
$label-warning-bg:            $brand-warning !default;
//** Danger label background color
$label-danger-bg:             $brand-danger !default;

//** Default label text color
$label-color:                 #fff !default;
//** Default text color of a linked label
$label-link-hover-color:      #fff !default;


//== Modals
//
//##

//** Padding applied to the modal body
$modal-inner-padding:         15px !default;

//** Padding applied to the modal title
$modal-title-padding:         15px !default;
//** Modal title line-height
$modal-title-line-height:     $line-height-base !default;

//** Background color of modal content area
$modal-content-bg:                             #fff !default;
//** Modal content border color
$modal-content-border-color:                   rgba(0, 0, 0, .2) !default;
//** Modal content border color **for IE8**
$modal-content-fallback-border-color:          #999 !default;

//** Modal backdrop background color
$modal-backdrop-bg:           #000 !default;
//** Modal backdrop opacity
$modal-backdrop-opacity:      .5 !default;
//** Modal header border color
$modal-header-border-color:   #e5e5e5 !default;
//** Modal footer border color
$modal-footer-border-color:   $modal-header-border-color !default;

$modal-lg:                    900px !default;
$modal-md:                    600px !default;
$modal-sm:                    300px !default;


//== Alerts
//
//## Define alert colors, border radius, and padding.

$alert-padding:               15px !default;
$alert-border-radius:         $border-radius-base !default;
$alert-link-font-weight:      bold !default;

$alert-success-bg:            $state-success-bg !default;
$alert-success-text:          $state-success-text !default;
$alert-success-border:        $state-success-border !default;

$alert-info-bg:               $state-info-bg !default;
$alert-info-text:             $state-info-text !default;
$alert-info-border:           $state-info-border !default;

$alert-warning-bg:            $state-warning-bg !default;
$alert-warning-text:          $state-warning-text !default;
$alert-warning-border:        $state-warning-border !default;

$alert-danger-bg:             $state-danger-bg !default;
$alert-danger-text:           $state-danger-text !default;
$alert-danger-border:         $state-danger-border !default;


//== Progress bars
//
//##

//** Background color of the whole progress component
$progress-bg:                 #f5f5f5 !default;
//** Progress bar text color
$progress-bar-color:          #fff !default;
//** Variable for setting rounded corners on progress bar.
$progress-border-radius:      $border-radius-base !default;

//** Default progress bar color
$progress-bar-bg:             $brand-primary !default;
//** Success progress bar color
$progress-bar-success-bg:     $brand-success !default;
//** Warning progress bar color
$progress-bar-warning-bg:     $brand-warning !default;
//** Danger progress bar color
$progress-bar-danger-bg:      $brand-danger !default;
//** Info progress bar color
$progress-bar-info-bg:        $brand-info !default;


//== List group
//
//##

//** Background color on `.list-group-item`
$list-group-bg:                 #fff !default;
//** `.list-group-item` border color
$list-group-border:             #ddd !default;
//** List group border radius
$list-group-border-radius:      $border-radius-base !default;

//** Background color of single list items on hover
$list-group-hover-bg:           #f5f5f5 !default;
//** Text color of active list items
$list-group-active-color:       $component-active-color !default;
//** Background color of active list items
$list-group-active-bg:          $component-active-bg !default;
//** Border color of active list elements
$list-group-active-border:      $list-group-active-bg !default;
//** Text color for content within active list items
$list-group-active-text-color:  lighten($list-group-active-bg, 40%) !default;

//** Text color of disabled list items
$list-group-disabled-color:      $gray-light !default;
//** Background color of disabled list items
$list-group-disabled-bg:         $gray-lighter !default;
//** Text color for content within disabled list items
$list-group-disabled-text-color: $list-group-disabled-color !default;

$list-group-link-color:         #555 !default;
$list-group-link-hover-color:   $list-group-link-color !default;
$list-group-link-heading-color: #333 !default;


//== Panels
//
//##

$panel-bg:                    #fff !default;
$panel-body-padding:          15px !default;
$panel-heading-padding:       10px 15px !default;
$panel-footer-padding:        $panel-heading-padding !default;
$panel-border-radius:         $border-radius-base !default;

//** Border color for elements within panels
$panel-inner-border:          #ddd !default;
$panel-footer-bg:             #f5f5f5 !default;

$panel-default-text:          $gray-dark !default;
$panel-default-border:        #ddd !default;
$panel-default-heading-bg:    #f5f5f5 !default;

$panel-primary-text:          #fff !default;
$panel-primary-border:        $brand-primary !default;
$panel-primary-heading-bg:    $brand-primary !default;

$panel-success-text:          $state-success-text !default;
$panel-success-border:        $state-success-border !default;
$panel-success-heading-bg:    $state-success-bg !default;

$panel-info-text:             $state-info-text !default;
$panel-info-border:           $state-info-border !default;
$panel-info-heading-bg:       $state-info-bg !default;

$panel-warning-text:          $state-warning-text !default;
$panel-warning-border:        $state-warning-border !default;
$panel-warning-heading-bg:    $state-warning-bg !default;

$panel-danger-text:           $state-danger-text !default;
$panel-danger-border:         $state-danger-border !default;
$panel-danger-heading-bg:     $state-danger-bg !default;


//== Thumbnails
//
//##

//** Padding around the thumbnail image
$thumbnail-padding:           4px !default;
//** Thumbnail background color
$thumbnail-bg:                $body-bg !default;
//** Thumbnail border color
$thumbnail-border:            #ddd !default;
//** Thumbnail border radius
$thumbnail-border-radius:     $border-radius-base !default;

//** Custom text color for thumbnail captions
$thumbnail-caption-color:     $text-color !default;
//** Padding around the thumbnail caption
$thumbnail-caption-padding:   9px !default;


//== Wells
//
//##

$well-bg:                     #f5f5f5 !default;
$well-border:                 darken($well-bg, 7%) !default;


//== Badges
//
//##

$badge-color:                 #fff !default;
//** Linked badge text color on hover
$badge-link-hover-color:      #fff !default;
$badge-bg:                    $gray-light !default;

//** Badge text color in active nav link
$badge-active-color:          $link-color !default;
//** Badge background color in active nav link
$badge-active-bg:             #fff !default;

$badge-font-weight:           bold !default;
$badge-line-height:           1 !default;
$badge-border-radius:         10px !default;


//== Breadcrumbs
//
//##

$breadcrumb-padding-vertical:   8px !default;
$breadcrumb-padding-horizontal: 15px !default;
//** Breadcrumb background color
$breadcrumb-bg:                 #f5f5f5 !default;
//** Breadcrumb text color
$breadcrumb-color:              #ccc !default;
//** Text color of current page in the breadcrumb
$breadcrumb-active-color:       $gray-light !default;
//** Textual separator for between breadcrumb elements
$breadcrumb-separator:          "/" !default;


//== Carousel
//
//##

$carousel-text-shadow:                        0 1px 2px rgba(0, 0, 0, .6) !default;

$carousel-control-color:                      #fff !default;
$carousel-control-width:                      15% !default;
$carousel-control-opacity:                    .5 !default;
$carousel-control-font-size:                  20px !default;

$carousel-indicator-active-bg:                #fff !default;
$carousel-indicator-border-color:             #fff !default;

$carousel-caption-color:                      #fff !default;


//== Close
//
//##

$close-font-weight:           bold !default;
$close-color:                 #000 !default;
$close-text-shadow:           0 1px 0 #fff !default;


//== Code
//
//##

$code-color:                  #c7254e !default;
$code-bg:                     #f9f2f4 !default;

$kbd-color:                   #fff !default;
$kbd-bg:                      #333 !default;

$pre-bg:                      #f5f5f5 !default;
$pre-color:                   $gray-dark !default;
$pre-border-color:            #ccc !default;
$pre-scrollable-max-height:   340px !default;


//== Type
//
//##

//** Horizontal offset for forms and lists.
$component-offset-horizontal: 180px !default;
//** Text muted color
$text-muted:                  $gray-light !default;
//** Abbreviations and acronyms border color
$abbr-border-color:           $gray-light !default;
//** Headings small color
$headings-small-color:        $gray-light !default;
//** Blockquote small color
$blockquote-small-color:      $gray-light !default;
//** Blockquote font size
$blockquote-font-size:        ($font-size-base * 1.25) !default;
//** Blockquote border color
$blockquote-border-color:     $gray-lighter !default;
//** Page header border color
$page-header-border-color:    $gray-lighter !default;
//** Width of horizontal description list titles
$dl-horizontal-offset:        $component-offset-horizontal !default;
//** Point at which .dl-horizontal becomes horizontal
$dl-horizontal-breakpoint:    $grid-float-breakpoint !default;
//** Horizontal line color.
$hr-border:                   $gray-lighter !default;

//
// Variables
// --------------------------------------------------
// Bootstrap overrides and PatternFly-specific variables

// Sass compass/sprockets asset helper flag
// ----------------------
$pf-sass-asset-helper:                                              false !default;

// PatternFly-specific
// -------------------
$color-pf-black-100:             #fafafa !default;
$color-pf-black-150:             #f5f5f5 !default;
$color-pf-black-200:             #ededed !default;
$color-pf-black-300:             #d1d1d1 !default;
$color-pf-black-400:             #bbb !default;
$color-pf-black-500:             #8b8d8f !default;
$color-pf-black-600:             #72767b !default;
$color-pf-black-700:             #4d5258 !default;
$color-pf-black-800:             #393f44 !default;
$color-pf-black-900:             #292e34 !default;
$color-pf-blue-25:               #edf8ff !default;
$color-pf-blue-50:               #def3ff !default;
$color-pf-blue-100:              #bee1f4 !default;
$color-pf-blue-200:              #7dc3e8 !default;
$color-pf-blue-300:              #39a5dc !default;
$color-pf-blue-400:              #0088ce !default;
$color-pf-blue-500:              #00659c !default;
$color-pf-blue-600:              #004368 !default;
$color-pf-blue-700:              #002235 !default;
$color-pf-cyan-100:              #bedee1 !default;
$color-pf-cyan-200:              #7dbdc3 !default;
$color-pf-cyan-300:              #3a9ca6 !default;
$color-pf-cyan-400:              #007a87 !default;
$color-pf-cyan-500:              #005c66 !default;
$color-pf-cyan-600:              #003d44 !default;
$color-pf-cyan-700:              #001f22 !default;
$color-pf-gold-100:              #fbeabc !default;
$color-pf-gold-200:              #f9d67a !default;
$color-pf-gold-300:              #f5c12e !default;
$color-pf-gold-400:              #f0ab00 !default;
$color-pf-gold-500:              #b58100 !default;
$color-pf-gold-600:              #795600 !default;
$color-pf-gold-700:              #3d2c00 !default;
$color-pf-green-100:             #cfe7cd !default;
$color-pf-green-200:             #9ecf99 !default;
$color-pf-green-300:             #6ec664 !default;
$color-pf-green-400:             #3f9c35 !default;
$color-pf-green-500:             #2d7623 !default;
$color-pf-green-600:             #1e4f18 !default;
$color-pf-green-700:             #0f280d !default;
$color-pf-light-blue-100:        #beedf9 !default;
$color-pf-light-blue-200:        #7cdbf3 !default;
$color-pf-light-blue-300:        #35caed !default;
$color-pf-light-blue-400:        #00b9e4 !default;
$color-pf-light-blue-500:        #008bad !default;
$color-pf-light-blue-600:        #005c73 !default;
$color-pf-light-blue-700:        #002d39 !default;
$color-pf-light-green-100:       #e4f5bc !default;
$color-pf-light-green-200:       #c8eb79 !default;
$color-pf-light-green-300:       #ace12e !default;
$color-pf-light-green-400:       #92d400 !default;
$color-pf-light-green-500:       #6ca100 !default;
$color-pf-light-green-600:       #486b00 !default;
$color-pf-light-green-700:       #253600 !default;
$color-pf-orange-100:            #fbdebf !default;
$color-pf-orange-200:            #f7bd7f !default;
$color-pf-orange-300:            #f39d3c !default;
$color-pf-orange-400:            #ec7a08 !default;
$color-pf-orange-500:            #b35c00 !default;
$color-pf-orange-600:            #773d00 !default;
$color-pf-orange-700:            #3b1f00 !default;
$color-pf-purple-100:            #c7bfff !default;
$color-pf-purple-200:            #a18fff !default;
$color-pf-purple-300:            #8461f7 !default;
$color-pf-purple-400:            #703fec !default;
$color-pf-purple-500:            #582fc0 !default;
$color-pf-purple-600:            #40199a !default;
$color-pf-purple-700:            #1f0066 !default;
$color-pf-red-100:               #cc0000 !default;
$color-pf-red-200:               #a30000 !default;
$color-pf-red-300:               #8b0000 !default;
$color-pf-red-400:               #470000 !default;
$color-pf-red-500:               #2c0000 !default;

$color-pf-black:                 #030303 !default;
$color-pf-blue:                  $color-pf-blue-400 !default;
$color-pf-cyan:                  $color-pf-cyan-400 !default;
$color-pf-gold:                  $color-pf-gold-400 !default;
$color-pf-green:                 $color-pf-green-400 !default;
$color-pf-light-blue:            $color-pf-light-blue-400 !default;
$color-pf-light-green:           $color-pf-light-green-400 !default;
$color-pf-orange:                $color-pf-orange-400 !default;
$color-pf-purple:                $color-pf-purple-400 !default;
$color-pf-red:                   $color-pf-red-100 !default;
$color-pf-white:                 #fff !default;


$applauncher-pf-dropdown-menu-border-width:                         1px !default;
$applauncher-pf-dropdown-menu-padding:                              9px !default;
$applauncher-pf-dropdown-menu-width:                                220px !default;
$applauncher-pf-dropdown-toggle-padding:                            7px 10px !default;
$applauncher-pf-icon-padding-right:                                 4px !default;
$applauncher-pf-menu-link-border-color:                             $color-pf-white !default;
$applauncher-pf-menu-link-border-color-hover:                       $color-pf-black-400 !default;
$applauncher-pf-menu-link-border-width:                             1px !default;
$applauncher-pf-menu-link-color:                                    $color-pf-black-300 !default;
$applauncher-pf-menu-link-color-disabled:                           $color-pf-black-500 !default;
$applauncher-pf-menu-link-color-hover:                              $color-pf-blue-400 !default;
$applauncher-pf-menu-link-padding:                                  7px 10px !default;
$applauncher-pf-menu-link-padding-block-list:                       15px 10px !default;
$applauncher-pf-menu-link-background-color-hover:                   $color-pf-black-150 !default;
$applauncher-pf-menu-link-shadow:                                   $color-pf-black-300 !default;
$applauncher-pf-menu-link-icon-font-size:                           2em !default;
$applauncher-pf-menu-link-icon-width:                               ((9 * $applauncher-pf-menu-link-icon-font-size) / 14) !default; //Numbers to imitate fa-fw class
$blank-slate-pf-secondary-link-padding-left:                        15px !default;
$blank-slate-pf-secondary-link-padding-top:                         5px !default;
$bootstrap-switch-handle-default-bg-color:                          $color-pf-black-100 !default;
$bootstrap-treeview-highlight-color:                                $color-pf-blue-300 !default;
$btn-default-bg-img-start:                                          $color-pf-black-100 !default;
$btn-default-bg-img-stop:                                           $color-pf-black-200 !default;
$btn-xs-font-weight:                                                400 !default;
$card-pf-accented-border-top-color:                                 $color-pf-blue-300 !default;
$card-pf-aggregate-status-title-icon-color:                         $color-pf-black-900 !default;
$card-pf-bg-color:                                                  $color-pf-white !default;
$card-pf-border-color:                                              $color-pf-black-300 !default;
$card-pf-border-top-color:                                          transparent !default;
$card-pf-container-bg-color:                                        $color-pf-black-150 !default;
$card-pf-footer-bg-color:                                           $color-pf-black-100 !default;
$card-pf-selected-border-color:                                     $color-pf-blue-300 !default;
$contextselector-title-width-desktop:                               210px !default;
$contextselector-title-width-mobile:                                170px !default;
$contextselector-pf-bootstrap-select-width-desktop:                 ($contextselector-title-width-desktop + 32) !default;
$contextselector-pf-bootstrap-select-width-mobile:                  ($contextselector-title-width-mobile + 32) !default;
$contextselector-pf-dropdown-toggle-padding-bottom:                 19px !default;
$contextselector-pf-dropdown-toggle-padding-left:                   10px !default;
$contextselector-pf-dropdown-toggle-padding-top:                    19px !default;
$contextselector-pf-margin-left:                                    10px !default;
$contextselector-pf-nav-item-iconic-padding:                        23px 20px 18px 10px !default;
$contextselector-pf-form-group-margin:                              0 5px 5px 5px !default;
$contextselector-pf-list-max-height:                                200px !default;
$contextselector-pf-list-li-padding:                                1px 10px !default;
$contextselector-pf-list-li-border-width:                           1px 0 !default;
$donut-font-size-big:                                               30px !default;
$drawer-pf-top-vertical:                                            58px !default;
$drawer-pf-top-horizontal:                                          25px !default;
$dropdown-divider-margin:                                           4px 1px !default;
$dropdown-link-active-border-color:                                 $color-pf-blue !default;
$dropdown-link-hover-border-color:                                  $color-pf-blue-100 !default;
$dropdown-link-focus-color:                                         $color-pf-white !default;
$flyout-transition-pf:                                              all 200ms cubic-bezier(.35, 0, .25, 1) !default;
$font-family-monospace:                                             Menlo, Monaco, Consolas, monospace !default;
$font-path:                                                         if($pf-sass-asset-helper, "", "../fonts/") !default;
$footer-pf-bg-color:                                                $color-pf-black !default;
$footer-pf-padding-left:                                            25px !default;
$footer-pf-padding-top:                                             10px !default;
$footer-pf-height:                                                  37px !default;
$form-horizontal-pf-align-left-padding-left:                        30px !default;
$gray-light-pf:                                                     $color-pf-black-400 !default;
$gray-pf:                                                           $color-pf-black-700 !default;
$icon-font-name-fa:                                                 "FontAwesome" !default;
$icon-font-name-pf:                                                 "PatternFlyIcons-webfont" !default;
$icon-prefix:                                                       pficon !default;
$img-bg-login:                                                      "bg-login.jpg" !default;
$img-path:                                                          if($pf-sass-asset-helper, "", "../img/") !default;
$img-spinner:                                                       "spinner.gif" !default;
$img-spinner-inverse:                                               "spinner-inverse.gif" !default;
$img-spinner-inverse-lg:                                            "spinner-inverse-lg.gif" !default;
$img-spinner-inverse-sm:                                            "spinner-inverse-sm.gif" !default;
$img-spinner-inverse-xs:                                            "spinner-inverse-xs.gif" !default;
$img-spinner-lg:                                                    "spinner-lg.gif" !default;
$img-spinner-sm:                                                    "spinner-sm.gif" !default;
$img-spinner-xs:                                                    "spinner-xs.gif" !default;
$input-border-hover:                                                $color-pf-blue-200 !default;
$input-border-focus:                                                $color-pf-blue-400 !default;
$list-pf-border-color:                                              $color-pf-black-200 !default;
$list-pf-active-border-color:                                       $color-pf-black-400 !default;
$list-pf-header-background-color:                                   $color-pf-blue-25 !default;
$list-pf-hover-background-color:                                    $color-pf-blue-25 !default;
$list-pf-main-content-width:                                        70% !default; // sets the proportional width of the main content vs the additional content
$list-pf-padding:                                                   20px !default;
$list-view-accented-border:                                         $color-pf-blue-300 !default;
$list-view-active-bg:                                               $color-pf-blue-50 !default;
$list-view-active-border:                                           $color-pf-black-400 !default;
$list-view-divider:                                                 $color-pf-black-300 !default;
$list-view-hover-bg:                                                $color-pf-blue-25 !default;
$list-group-disabled-bg:                                            $color-pf-black-100 !default;
$list-group-top-border:                                             $color-pf-black-200 !default;
$login-bg-color:                                                    $color-pf-black !default;
$login-container-bg-color-rgba:                                     rgba($color-pf-white, (5.5/100)) !default;
$modal-about-pf-bg-img:                                             "bg-modal-about-pf.png" !default;
$modal-title-padding-horizontal:                                    18px !default;
$modal-title-padding-vertical:                                      10px !default;
$navbar-pf-active-color:                                            $color-pf-black-150 !default;
$navbar-pf-alt-active-color:                                        $color-pf-white !default;
$navbar-pf-alt-bg-color:                                            $color-pf-black !default;
$navbar-pf-alt-bg-img:                                              "bg-navbar-pf-alt.svg" !default;
$navbar-pf-bg-color:                                                $color-pf-black !default;
$navbar-pf-border-color:                                            $color-pf-blue-300 !default;
$navbar-pf-color:                                                   $color-pf-black-300 !default;
$navbar-pf-height:                                                  60px !default;
$navbar-pf-icon-bar-bg-color:                                       $color-pf-white !default;
$navbar-pf-item-hover-bg-color:                                     rgba(255, 255, 255, .14) !default;
$navbar-pf-item-open-bg-color:                                      rgba(255, 255, 255, .24) !default;
$navbar-pf-item-active-color:                                       $color-pf-white !default;
$navbar-pf-item-icon-padding-right:                                 4px !default;
$navbar-pf-navbar-navbar-brand-min-width:                           270px !default;
$navbar-pf-navbar-navbar-brand-padding:                             8px 0 7px !default;
$navbar-pf-navbar-navbar-persistent-bg-color:                       $color-pf-black-150 !default;
$navbar-pf-navbar-navbar-persistent-border-color:                   $color-pf-black-300 !default;
$navbar-pf-vertical-active-color:                                   $navbar-pf-item-active-color !default;
$navbar-pf-vertical-bg-color:                                       #1d1d1d !default;
$navbar-pf-vertical-bg-repeat:                                      no-repeat !default;
$navbar-pf-vertical-bg-size:                                        auto 100% !default;
$navbar-pf-vertical-border-color:                                   $color-pf-blue-300 !default;
$navbar-pf-vertical-border-style:                                   solid !default;
$navbar-pf-vertical-border-width:                                   2px !default;
$navbar-pf-vertical-color:                                          $color-pf-black-300 !default;
$navbar-pf-vertical-height:                                         60px !default;
$navbar-pf-vertical-icon-bar-bg-color:                              $color-pf-white !default;
$navbar-pf-vertical-navbar-brand-color:                             $color-pf-white !default;
$navbar-pf-vertical-navbar-brand-icon-margin:                       0 15px 0 0 !default;
$navbar-pf-vertical-navbar-brand-margin:                            0 0 0 25px !default;
$navbar-pf-vertical-navbar-brand-min-height:                        35px !default;
$navbar-pf-vertical-navbar-brand-max-height:                        35px !default;
$navbar-pf-vertical-navbar-brand-line-height:                       34px !default;
$navbar-pf-vertical-navbar-brand-name-breakpoint:                   480px !default;
$navbar-pf-vertical-navbar-brand-name-margin:                       0 15px 0 0 !default;
$navbar-pf-vertical-navbar-brand-padding:                           11px 0 12px !default;
$navbar-pf-vertical-navbar-toggle-margin:                           13px 15px !default;
$navbar-pf-vertical-navbar-toggle-icon-bar-hover-bg:                $color-pf-white !default;
$navbar-pf-vertical-nav-item-iconic-padding:                        21px 12px !default;
$nav-pf-container-transition-period:                                250ms !default;
$nav-pf-menu-transition-period:                                     100ms !default;
$nav-pf-vertical-active-before-color:                               $color-pf-blue-300 !default;
$nav-pf-vertical-active-bg-color:                                   $color-pf-black-800 !default;
$nav-pf-vertical-active-border-color:                               $color-pf-black-900 !default;
$nav-pf-vertical-active-color:                                      $color-pf-white !default;
$nav-pf-vertical-active-font-weight:                                600 !default;
$nav-pf-vertical-active-icon-color:                                 $color-pf-blue-300 !default;
$nav-pf-vertical-badge-color:                                       $color-pf-white !default;
$nav-pf-vertical-badge-bg-color:                                    $color-pf-black-900 !default;
$nav-pf-vertical-bg-color:                                          $color-pf-black-900 !default;
$nav-pf-vertical-border-color:                                      $color-pf-black-900 !default;
$nav-pf-vertical-collapsed-width:                                   75px !default;
$nav-pf-vertical-color:                                             $color-pf-black-300 !default;
$nav-pf-vertical-font-weight:                                       400 !default;
$nav-pf-vertical-icon-color:                                        $color-pf-black-600 !default;
$nav-pf-vertical-icon-width:                                        24px !default;
$nav-pf-vertical-item-border-color:                                 $color-pf-black !default;
$nav-pf-vertical-link-height:                                       63px !default;
$nav-pf-vertical-link-padding:                                      17px 20px 17px 25px !default;
$nav-pf-vertical-secondary-active-color:                            $color-pf-white !default;
$nav-pf-vertical-secondary-active-bg-color:                         $color-pf-black-700 !default;
$nav-pf-vertical-secondary-active-icon-color:                       $color-pf-blue-300 !default;
$nav-pf-vertical-secondary-badge-color:                             $color-pf-white !default;
$nav-pf-vertical-secondary-badge-bg-color:                          $color-pf-black-900 !default;
$nav-pf-vertical-secondary-border-color:                            $color-pf-blue-300 !default;
$nav-pf-vertical-secondary-color:                                   $color-pf-white !default;
$nav-pf-vertical-secondary-header-margin:                           18px 20px 10px 20px !default;
$nav-pf-vertical-secondary-indicator-color:                         $color-pf-black-600 !default;
$nav-pf-vertical-secondary-indicator-padding:                       14px 0 !default;
$nav-pf-vertical-secondary-item-color:                              $color-pf-black-300 !default;
$nav-pf-vertical-secondary-item-padding:                            0 0 5px 0 !default;
$nav-pf-vertical-secondary-link-height:                             63px !default;
$nav-pf-vertical-secondary-link-padding:                            4px 0 2px 0 !default;
$nav-pf-vertical-secondary-list-header-margin:                      30px 20px 10px 20px !default;
$nav-pf-vertical-tertiary-active-color:                             $color-pf-white !default;
$nav-pf-vertical-tertiary-active-bg-color:                          $color-pf-black-800 !default;
$nav-pf-vertical-tertiary-indicator-padding:                        0 !default;
$nav-pf-vertical-tertiary-bg-color:                                 $color-pf-black-700 !default;
$nav-pf-vertical-tertiary-color:                                    #fff !default;
$nav-pf-vertical-tertiary-header-margin:                            18px 20px 10px 20px !default;
$nav-pf-vertical-tertiary-list-header-margin:                       30px 20px 10px 20px !default;
$nav-pf-vertical-tertiary-item-padding:                             0 0 5px 0 !default;
$nav-pf-vertical-tertiary-item-color:                               $color-pf-black-300 !default;
$nav-pf-vertical-tertiary-link-margin:                              0 20px 0 20px !default;
$nav-pf-vertical-tertiary-link-padding:                             4px 0 2px 0 !default;
$nav-pf-vertical-tertiary-badge-color:                              $color-pf-white !default;
$nav-pf-vertical-tertiary-badge-bg-color:                           $color-pf-black-900 !default;
$nav-pf-vertical-width:                                             200px !default;
$toast-notification-top:                                            80px !default;
$pagination-padding-small-vertical:                                 0 !default;
$panel-default-border-color:                                        $color-pf-black-400 !default;
$pficon-var-add-circle-o:                                           "\e61b" !default;
$pficon-var-applications:                                           "\e936" !default;
$pficon-var-arrow:                                                  "\e929" !default;
$pficon-var-asleep:                                                 "\e925" !default;
$pficon-var-automation:                                             "\e937" !default;
$pficon-var-blueprint:                                              "\e915" !default;
$pficon-var-build:                                                  "\e902" !default;
$pficon-var-builder-image:                                          "\e800" !default;
$pficon-var-bundle:                                                 "\e918" !default;
$pficon-var-catalog:                                                "\e939" !default;
$pficon-var-chat:                                                   "\e928" !default;
$pficon-var-close:                                                  "\e60b" !default;
$pficon-var-cloud-security:                                         "\e903" !default;
$pficon-var-cloud-tenant:                                           "\e904" !default;
$pficon-var-cluster:                                                "\e620" !default;
$pficon-var-connected:                                              "\e938" !default;
$pficon-var-container-node:                                         "\e621" !default;
$pficon-var-cpu:                                                    "\e927" !default;
$pficon-var-degraded:                                               "\e91b" !default;
$pficon-var-delete:                                                 "\e611" !default;
$pficon-var-disconnected:                                           "\e93c" !default;
$pficon-var-domain:                                                 "\e919" !default;
$pficon-var-drag-drop:                                              "\e950" !default;
$pficon-var-edit:                                                   "\e60a" !default;
$pficon-var-enhancement:                                            "\e93a" !default;
$pficon-var-enterprise:                                             "\e906" !default;
$pficon-var-equalizer:                                              "\e610" !default;
$pficon-var-error-circle-o:                                         "\e926" !default;
$pficon-var-export:                                                 "\e616" !default;
$pficon-var-flag:                                                   "\e603" !default;
$pficon-var-flavor:                                                 "\e907" !default;
$pficon-var-filter:                                                 "\e943" !default;
$pficon-var-folder-close:                                           "\e607" !default;
$pficon-var-folder-open:                                            "\e606" !default;
$pficon-var-help:                                                   "\e605" !default;
$pficon-var-history:                                                "\e93b" !default;
$pficon-var-home:                                                   "\e618" !default;
$pficon-var-image:                                                  "\e61f" !default;
$pficon-var-import:                                                 "\e615" !default;
$pficon-var-info:                                                   "\e92b" !default;
$pficon-var-infrastructure:                                         "\e93d" !default;
$pficon-var-integration:                                            "\e948" !default;
$pficon-var-in-progress:                                            "\e92c" !default;
$pficon-var-key:                                                    "\e924" !default;
$pficon-var-kubernetes:                                             "\e627" !default;
$pficon-var-locked:                                                 "\e923" !default;
$pficon-var-maintenance:                                            "\e92d" !default;
$pficon-var-memory:                                                 "\e908" !default;
$pficon-var-messages:                                               "\e603" !default;
$pficon-var-middleware:                                             "\e917" !default;
$pficon-var-migration:                                              "\e92e" !default;
$pficon-var-monitoring:                                             "\e944" !default;
$pficon-var-network:                                                "\e909" !default;
$pficon-var-network-range:                                          "\e94a" !default;
$pficon-var-off:                                                    "\e92f" !default;
$pficon-var-ok:                                                     "\e602" !default;
$pficon-var-on:                                                     "\e931" !default;
$pficon-var-on-running:                                             "\e930" !default;
$pficon-var-openshift:                                              "\e626" !default;
$pficon-var-optimize:                                               "\e93e" !default;
$pficon-var-orders:                                                 "\e93f" !default;
$pficon-var-paused:                                                 "\e932" !default;
$pficon-var-pending:                                                "\e933" !default;
$pficon-var-plugged:                                                "\e940" !default;
$pficon-var-port:                                                   "\e945" !default;
$pficon-var-private:                                                "\e914" !default;
$pficon-var-print:                                                  "\e612" !default;
$pficon-var-process-automation:                                     "\e949" !default;
$pficon-var-project:                                                "\e905" !default;
$pficon-var-rebalance:                                              "\e91c" !default;
$pficon-var-rebooting:                                              "\e934" !default;
$pficon-var-regions:                                                "\e90a" !default;
$pficon-var-registry:                                               "\e623" !default;
$pficon-var-remove:                                                 "\e611" !default;
$pficon-var-replicator:                                             "\e624" !default;
$pficon-var-repository:                                             "\e90b" !default;
$pficon-var-resource-pool:                                          "\e90c" !default;
$pficon-var-resources-almost-empty:                                 "\e91d" !default;
$pficon-var-resources-almost-full:                                  "\e912" !default;
$pficon-var-resources-full:                                         "\e92a" !default;
$pficon-var-restart:                                                "\e617" !default;
$pficon-var-route:                                                  "\e625" !default;
$pficon-var-running:                                                "\e614" !default;
$pficon-var-save:                                                   "\e601" !default;
$pficon-var-satellite:                                              "\e94b" !default;
$pficon-var-screen:                                                 "\e600" !default;
$pficon-var-search:                                                 "\e921" !default;
$pficon-var-security:                                               "\e946" !default;
$pficon-var-server:                                                 "\e90d" !default;
$pficon-var-server-group:                                           "\e91a" !default;
$pficon-var-service:                                                "\e61e" !default;
$pficon-var-service-catalog:                                        "\e941" !default;
$pficon-var-services:                                               "\e947" !default;
$pficon-var-settings:                                               "\e610" !default;
$pficon-var-sort-common-asc:                                        "\e94e" !default;
$pficon-var-sort-common-desc:                                       "\e94f" !default;
$pficon-var-spinner:                                                "\e614" !default;
$pficon-var-spinner2:                                               "\e613" !default;
$pficon-var-storage-domain:                                         "\e90e" !default;
$pficon-var-template:                                               "\e94c" !default;
$pficon-var-tenant:                                                 "\e916" !default;
$pficon-var-thumb-tack-o:                                           "\e920" !default;
$pficon-var-topology:                                               "\e608" !default;
$pficon-var-trend-down:                                             "\e900" !default;
$pficon-var-trend-up:                                               "\e901" !default;
$pficon-var-unlocked:                                               "\e922" !default;
$pficon-var-unplugged:                                              "\e942" !default;
$pficon-var-unknown:                                                "\e935" !default;
$pficon-var-user:                                                   "\e91e" !default;
$pficon-var-users:                                                  "\e91f" !default;
$pficon-var-vcenter:                                                "\e94d" !default;
$pficon-var-virtual-machine:                                        "\e90f" !default;
$pficon-var-volume:                                                 "\e910" !default;
$pficon-var-warning-triangle-o:                                     "\e913" !default;
$pficon-var-zone:                                                   "\e911" !default;
$progress-description-label-width:                                  85px !default;
$sidebar-pf-bg:                                                     $color-pf-black-100 !default;
$sidebar-pf-border-color:                                           $color-pf-black-300 !default;
$skiplink-pf-top:                                                   12px !default;
$skiplink-pf-left:                                                  10px !default;
$table-border-hover:                                                $color-pf-blue-200 !default;
$table-cell-padding-bottom:                                         3px !default;
$table-cell-padding-top:                                            2px !default;
// Reference variables declared in block above
$bootstrap-switch-bg-color-start:                                   $btn-default-bg-img-start !default;
$bootstrap-switch-bg-color-stop:                                    $btn-default-bg-img-stop !default;
$fa-font-path:                                                      $font-path !default;
$navbar-pf-navbar-header-border-color:                              lighten($navbar-pf-bg-color, 15%) !default;
$navbar-pf-navbar-nav-active-active-bg-color:                       lighten($navbar-pf-bg-color, 8%) !default;
$navbar-pf-navbar-nav-active-active-open-bg-color:                  lighten($navbar-pf-bg-color, 11%) !default;
$navbar-pf-navbar-nav-active-bg-color:                              lighten($navbar-pf-bg-color, 12.5%) !default;
$navbar-pf-navbar-primary-bg-color-start:                           lighten($navbar-pf-bg-color, 10%) !default; // #474C50
$navbar-pf-navbar-primary-bg-color-stop:                            $navbar-pf-bg-color !default; // #383F43
$navbar-pf-navbar-utility-border-color:                             lighten($navbar-pf-bg-color, 15.5%) !default;
$navbar-pf-navbar-utility-color:                                    $navbar-pf-color !default;
$navbar-pf-navbar-utility-hover-bg-color:                           lighten($navbar-pf-bg-color, 12.5%) !default;
$nav-pf-vertical-secondary-bg-color:                                $nav-pf-vertical-active-bg-color !default;
$nav-tabs-color:                                                    $gray-pf !default;
// Reference variables declared in block above
$navbar-pf-navbar-primary-context-bg-color-start:                   lighten($navbar-pf-navbar-primary-bg-color-start, 8.5%) !default;
$navbar-pf-navbar-primary-context-bg-color-stop:                    lighten($navbar-pf-navbar-primary-bg-color-stop, 11%) !default;
$navbar-pf-navbar-primary-hover-bg-color-start:                     lighten($navbar-pf-navbar-primary-bg-color-start, 10%) !default;
$navbar-pf-navbar-primary-hover-bg-color-stop:                      lighten($navbar-pf-navbar-primary-bg-color-stop, 10%) !default;
$navbar-pf-navbar-primary-hover-border-color:                       lighten($navbar-pf-navbar-header-border-color, 20%) !default;
$navbar-pf-navbar-primary-context-border-color:                     lighten($navbar-pf-navbar-header-border-color, 8%) !default;
$navbar-pf-navbar-primary-context-border-top-color:                 lighten($navbar-pf-navbar-header-border-color, 7%) !default;
$navbar-pf-navbar-utility-hover-border-color:                       lighten($navbar-pf-navbar-utility-border-color, 5%) !default;
$navbar-pf-navbar-utility-open-bg-color:                            lighten($navbar-pf-navbar-utility-hover-bg-color, 7.5%) !default;
$navbar-pf-navbar-utility-open-border-color:                        lighten($navbar-pf-navbar-utility-hover-border-color, 5%) !default;
// Reference variables declared in block above
$navbar-pf-navbar-primary-active-bg-color-start:                    lighten($navbar-pf-navbar-primary-hover-bg-color-start, 5%) !default;
$navbar-pf-navbar-primary-active-bg-color-stop:                     lighten($navbar-pf-navbar-primary-hover-bg-color-stop, 7.5%) !default;
$navbar-pf-navbar-primary-active-border-color:                      lighten($navbar-pf-navbar-primary-hover-border-color, 5%) !default;
$navbar-pf-navbar-primary-context-hover-bg-color-start:             lighten($navbar-pf-navbar-primary-context-bg-color-start, 5%) !default;
$navbar-pf-navbar-primary-context-hover-bg-color-stop:              lighten($navbar-pf-navbar-primary-context-bg-color-stop, 7.5%) !default;
$navbar-pf-navbar-primary-context-hover-border-color:               lighten($navbar-pf-navbar-primary-context-border-color, 5%) !default;
$navbar-pf-navbar-primary-context-hover-border-top-color:           lighten($navbar-pf-navbar-primary-context-border-top-color, 6%) !default;
// Reference variables declared in block above
$navbar-pf-navbar-primary-context-active-bg-color-start:            lighten($navbar-pf-navbar-primary-context-hover-bg-color-start, 5%) !default;
$navbar-pf-navbar-primary-context-active-bg-color-stop:             lighten($navbar-pf-navbar-primary-context-hover-bg-color-stop, 7.5%) !default;
$navbar-pf-navbar-primary-context-active-border-color:              lighten($navbar-pf-navbar-primary-context-hover-border-color, 5%) !default;
$navbar-pf-navbar-primary-context-active-border-top-color:          lighten($navbar-pf-navbar-primary-context-hover-border-top-color, 6%) !default;
// References variable declared in block above
$navbar-pf-navbar-primary-context-active-border-right-color:        $navbar-pf-navbar-primary-context-active-border-color !default;
$slider-line-height:                                                16px !default;
$slider-horizontal-width:                                           100% !default;
$slider-primary-top:                                                $color-pf-black-100 !default;
$slider-primary-bottom:                                             $color-pf-black-200 !default;
$slider-secondary-top:                                              $color-pf-blue-400 !default;
$slider-secondary-bottom:                                           $color-pf-blue-300 !default;
$tree-list-view-pf-padding-left:                                    45px !default;

// Alternate navigation layout - Kept for backwards compatibility
// --------------------------------------------------------------
$footer-pf-alt-bg-color:                                            $footer-pf-bg-color !default;
$footer-pf-alt-padding-left:                                        $footer-pf-padding-left !default;
$footer-pf-alt-padding-top:                                         $footer-pf-padding-top !default;
$footer-pf-alt-height:                                              $footer-pf-height !default;
$img-path-alt:                                                      $img-path !default;
$nav-pf-vertical-alt-active-color:                                  $color-pf-blue-300 !default;
$nav-pf-vertical-alt-bg-color:                                      $color-pf-white !default;
$nav-pf-vertical-alt-badge-color:                                   $color-pf-white !default;
$nav-pf-vertical-alt-border-color:                                  $sidebar-pf-border-color !default;
$nav-pf-vertical-alt-collapsed-width:                               75px !default;
$nav-pf-vertical-alt-link-height:                                   63px !default;
$nav-pf-vertical-alt-link-padding:                                  17px 20px 17px 25px !default;
$nav-pf-vertical-alt-width:                                         250px !default;
$navbar-pf-alt-bg-repeat:                                           $navbar-pf-vertical-bg-repeat !default;
$navbar-pf-alt-bg-size:                                             $navbar-pf-vertical-bg-size !default;
$navbar-pf-alt-border-color:                                        $navbar-pf-vertical-border-color !default;
$navbar-pf-alt-border-style:                                        $navbar-pf-vertical-border-style !default;
$navbar-pf-alt-border-width:                                        $navbar-pf-vertical-border-width !default;
$navbar-pf-alt-color:                                               $navbar-pf-vertical-color !default;
$navbar-pf-alt-height:                                              $navbar-pf-vertical-height !default;
$navbar-pf-alt-nav-item-iconic-padding:                             $navbar-pf-vertical-nav-item-iconic-padding !default;
$navbar-pf-alt-navbar-brand-color:                                  $navbar-pf-vertical-navbar-brand-color !default;
$navbar-pf-alt-navbar-brand-icon-margin:                            $navbar-pf-vertical-navbar-brand-icon-margin !default;
$navbar-pf-alt-navbar-brand-margin:                                 $navbar-pf-vertical-navbar-brand-margin !default;
$navbar-pf-alt-navbar-brand-min-height:                             $navbar-pf-vertical-navbar-brand-min-height !default;
$navbar-pf-alt-navbar-brand-name-breakpoint:                        $navbar-pf-vertical-navbar-brand-name-breakpoint !default;
$navbar-pf-alt-navbar-brand-name-margin:                            $navbar-pf-vertical-navbar-brand-name-margin !default;
$navbar-pf-alt-navbar-brand-padding:                                $navbar-pf-vertical-navbar-brand-padding !default;
$navbar-pf-alt-navbar-toggle-margin:                                $navbar-pf-vertical-navbar-toggle-margin !default;
$navbar-pf-alt-navbar-toggle-icon-bar-hover-bg:                     $navbar-pf-vertical-navbar-toggle-icon-bar-hover-bg !default;

// Login page
// -------------------
$login-pf-brand-margin-top:                                               0px !default;
$login-pf-page-padding-top:                                               20px !default;
$login-pf-brand-desktop-margin-top:                                       22px !default;
$login-pf-page-header-margin-bottom:                                      20px !default;
$login-pf-page-header-desktop-margin-bottom:                              40px !default;
$login-pf-page-header-paragraph-margin-top:                               20px !default;
$login-pf-card-pf-padding:                                 10px 20px 30px 20px !default;
$login-pf-card-pf-desktop-padding:                         20px 40px 30px 40px !default;
$login-pf-card-pf-max-width:                                             840px !default;
$login-pf-checkbox-label-margin-bottom:                                   15px !default;
$login-pf-dropdown-toggle-padding-right:                                  15px !default;
$login-pf-btn-primary-margin-top:                                         40px !default;
$login-pf-header-margin-bottom:                                           20px !default;
$login-pf-header-desktop-margin-bottom:                                   10px !default;
$login-pf-signup-margin-top:                                              40px !default;
$login-pf-signup-a-margin-left:                                           10px !default;
$login-pf-page-footer-links-margin-top:                                   60px !default;
$login-pf-page-footer-links-li-margin-right:                              20px !default;
$login-pf-page-footer-sso-margin-top:                                     40px !default;
$login-pf-page-footer-sso-logos-li-margin:                                5px !default;
$login-pf-page-footer-padding-bottom-mobile:                              50px !default;
$login-pf-page-footer-padding-bottom-desktop:                             100px !default;
$login-pf-page-accounts-margin:                                           20px !default;
$login-pf-accounts-section-heading-margin-top:                            30px !default;
$login-pf-accounts-section-heading-margin-bottom:                         30px !default;
$login-pf-accounts-section-heading-desktop-margin-bottom:                 15px !default;
$login-pf-accounts-section-heading-desktop-padding-right:                 40px !default;
$login-pf-accounts-section-heading-desktop-padding-left:                  40px !default;
$login-pf-accounts-link-margin-bottom:                                    15px !default;
$login-pf-accounts-link-img-margin-right:                                 10px !default;
$login-pf-accounts-link-a-padding:                                        7px !default;
$login-pf-accounts-more-caret-margin-left:                                5px !default;
$login-pf-social-margin:                                           40px 0 0 0 !default;


// Bootstrap overrides
// -------------------
$alert-info-border:                                                 $color-pf-black-500 !default;
$alert-link-font-weight:                                            500 !default;
$alert-padding:                                                     11px !default;
$alert-margin-left:                                                 250px !default;
$alert-margin-right:                                                250px !default;
$body-bg:                                                           $color-pf-white !default;
$border-radius-base:                                                1px !default;
$brand-danger:                                                      $color-pf-red !default;
$brand-info:                                                        $color-pf-blue-500 !default;
$brand-primary:                                                     $color-pf-blue-300 !default;
$brand-success:                                                     $color-pf-green !default;
$brand-warning:                                                     $color-pf-orange !default;
$breadcrumb-bg:                                                     transparent !default;
$breadcrumb-separator:                                              "\f105" !default;
$bs-datetimepicker-timepicker-font-size:                            1em !default;
$bs-datetimepicker-btn-hover-bg:                                    transparent !default;
$btn-danger-bg:                                                     $color-pf-red-200 !default;
$btn-danger-border:                                                 $color-pf-red-300 !default;
$btn-default-border:                                                $color-pf-black-400 !default;
$btn-font-weight:                                                   600 !default;
$btn-primary-bg:                                                    $color-pf-blue !default;
$btn-primary-border:                                                $color-pf-blue-500 !default;
$caret-width-base:                                                  0 !default;
$code-bg:                                                           $color-pf-blue-50 !default;
$dropdown-border:                                                   $color-pf-black-400 !default;
$dropdown-divider-bg:                                               $color-pf-black-200 !default;
$dropdown-link-active-color:                                        $color-pf-white !default;
$dropdown-link-hover-bg:                                            $color-pf-blue-50 !default;
$font-family-base:                                                  "Open Sans", Helvetica, Arial, sans-serif !default;
$font-size-base:                                                    12px !default;
$gray-dark:                                                         lighten($color-pf-black, 20%) !default;   // #333
$gray-darker:                                                       lighten($color-pf-black, 13.5%) !default; // #222
$gray-light:                                                        lighten($color-pf-black, 60%) !default;   // #999
$gray-lighter:                                                      lighten($color-pf-black, 93.5%) !default; // #eee
$grid-gutter-width:                                                 40px !default;
$icon-font-path:                                                    if($pf-sass-asset-helper, "", "../fonts/") !default;
$input-bg-disabled:                                                 $color-pf-black-150 !default;
$input-border:                                                      $color-pf-black-400 !default;
$line-height-base:                                                  1.66666667 !default; // 20/12
$link-color:                                                        $color-pf-blue !default;
$list-group-border:                                                 $color-pf-black-150 !default;
$list-group-border-radius:                                          0 !default;
$list-group-hover-bg:                                               $color-pf-blue-50 !default;
$link-hover-color:                                                  $color-pf-blue-500 !default;
$nav-tabs-border-color:                                             $color-pf-black-200 !default;
$nav-tabs-link-hover-border-color:                                  transparent !default;
$padding-large-horizontal:                                          10px !default;
$padding-base-horizontal:                                           6px !default;
$padding-base-vertical:                                             2px !default;
$padding-large-vertical:                                            6px !default;
$pager-border-radius:                                               0 !default;
$pager-disabled-color:                                              $color-pf-black-500 !default;
$pagination-bg:                                                     $color-pf-black-150 !default;
$pagination-border:                                                 $color-pf-black-400 !default;
$pagination-hover-bg:                                               $color-pf-black-200 !default;
$panel-inner-border:                                                $color-pf-black-300 !default;
$popover-arrow-color:                                               $color-pf-white !default;
$popover-arrow-outer-color:                                         $color-pf-black-400 !default;
$popover-border-color:                                              $color-pf-black-400 !default;
$popover-border-bottom-color:                                       $color-pf-black-150 !default;
$popover-border-width:                                              10px !default;
$popover-border-top-width:                                          0 !default;
$popover-max-width:                                                 220px !default;
$popover-position-top:                                              -20px !default;
$popover-title-bg:                                                  $color-pf-black-150 !default;
$pre-bg:                                                            $color-pf-black-100 !default;
$progress-bg:                                                       $color-pf-black-200 !default;
$table-bg-accent:                                                   $color-pf-black-150 !default;
$table-bg-hover:                                                    $color-pf-blue-50 !default;
$table-border-color:                                                $color-pf-black-300 !default;
$table-cell-padding:                                                10px !default;
$tooltip-arrow-width:                                               8px !default;
$tooltip-bg:                                                        $color-pf-black-800 !default;
$tooltip-max-width:                                                 220px !default;
// Reference variables declared in block above
$alert-danger-bg:                                                   lighten($color-pf-red-100, 55%) !default;
$alert-danger-border:                                               $brand-danger !default;
$alert-danger-text:                                                 $gray-dark !default;
$alert-info-bg:                                                     $color-pf-black-150 !default;
$alert-info-text:                                                   $gray-dark !default;
$alert-success-bg:                                                  lighten($color-pf-green-100, 8%) !default;
$alert-success-border:                                              $brand-success !default;
$alert-success-text:                                                $gray-dark !default;
$alert-warning-bg:                                                  lighten($color-pf-orange-100, 8%) !default;
$alert-warning-border:                                              $brand-warning !default;
$alert-warning-text:                                                $gray-dark !default;
$text-danger-p-padding-top:                                         10px !default;
$badge-border-radius:                                               $border-radius-base !default;
$border-radius-large:                                               $border-radius-base !default;
$border-radius-small:                                               $border-radius-base !default;
$breadcrumb-active-color:                                           $gray-pf !default;
$breadcrumb-color:                                                  $gray-pf !default;
$btn-default-bg:                                                    $gray-lighter !default;
$btn-default-color:                                                 $gray-pf !default;
$caret-width-large:                                                 $caret-width-base !default;
$code-color:                                                        $color-pf-blue-600 !default;
$dropdown-fallback-border:                                          $dropdown-border !default;
$dropdown-link-active-bg:                                           $link-color !default;
$dropdown-link-hover-color:                                         $gray-pf !default;
$font-size-h1:                                                      ceil(($font-size-base * 2)) !default; // ~24px
$font-size-h2:                                                      ceil(($font-size-base * 1.8333)) !default; // ~22px
$font-size-h3:                                                      ceil(($font-size-base * 1.3333)) !default; // ~16px
$font-size-h5:                                                      ceil(($font-size-base * 1.0833)) !default; // ~13px
$font-size-large:                                                   ceil(($font-size-base * 1.1666)) !default; // ~14px
$font-size-small:                                                   ceil(($font-size-base * .9166)) !default; // ~11px
$input-color:                                                       $gray-dark !default;
$nav-tabs-active-link-hover-color:                                  $link-color !default;
$nav-tabs-justified-link-border-color:                              $nav-tabs-border-color !default;
$nav-pf-vertical-badges-width:                                      ($nav-pf-vertical-width + 50px) !default;
$padding-small-horizontal:                                          $padding-base-horizontal !default;
$padding-small-vertical:                                            $padding-base-vertical !default;
$panel-group-pf-danger-heading-bg:                                  $alert-danger-bg !default;
$panel-group-pf-primary-heading-bg:                                 lighten($brand-primary, 38%) !default;
$panel-group-pf-success-heading-bg:                                 $alert-success-bg !default;
$panel-group-pf-warning-heading-bg:                                 $alert-warning-bg !default;
$panel-group-pf-info-heading-bg:                                    lighten(desaturate(adjust-hue($brand-info, 13), 45), 60%) !default;
$panel-danger-border:                                               $brand-danger !default;
$panel-danger-heading-bg:                                           $brand-danger !default;
$panel-info-border:                                                 $brand-info !default;
$panel-info-heading-bg:                                             $brand-info !default;
$panel-primary-border:                                              $brand-primary !default;
$panel-primary-text:                                                $body-bg !default;
$panel-success-border:                                              $brand-success !default;
$panel-success-heading-bg:                                          $brand-success !default;
$panel-warning-border:                                              $brand-warning !default;
$panel-warning-heading-bg:                                          $brand-warning !default;
$spinner-size:                                                      ($font-size-base * 2) !default;
$spinner-size-lg:                                                   ($font-size-base * 2.5) !default;
$spinner-size-sm:                                                   ($font-size-base * 1.5) !default;
$spinner-size-xs:                                                   $font-size-base !default;
$state-warning-text:                                                $brand-warning !default;
$state-danger-text:                                                 $brand-danger !default;
// Reference variable declared in block above
$panel-danger-text:                                                 $panel-primary-text !default;
$panel-info-text:                                                   $panel-primary-text !default;
$panel-success-text:                                                $panel-primary-text !default;
$panel-warning-text:                                                $panel-primary-text !default;

// PatternFly-specific variables based on Bootstrap overides
// ---------------------------------------------------------
$bootstrap-switch-bg-color:                                         $btn-default-bg !default;
$btn-danger-bg-img-start:                                           $brand-danger !default;
$btn-danger-bg-img-stop:                                            $btn-danger-bg !default;
$btn-primary-bg-img-start:                                          $brand-primary !default;
$btn-primary-bg-img-stop:                                           $btn-primary-bg !default;
$dropdown-link-focus-bg:                                            $link-color !default;
$line-height-computed:                                              floor(($font-size-base * $line-height-base)) !default;
$nav-pf-vertical-icon-size:                                         ($font-size-base + 8) !default;
$notification-badge-color:                                          $color-pf-blue-400 !default;
$progress-sm:                                                       ($line-height-computed - 6) !default;
$progress-xs:                                                       ($line-height-computed - 14) !default;
$syntax-1:                                                          $btn-danger-bg !default;
$syntax-2:                                                          $gray-dark !default;
$syntax-3:                                                          $brand-success !default;
$syntax-4:                                                          $brand-info !default;
$tooltip-font-size:                                                 $font-size-base !default;


// patternfly v4
// These imports must not contain any rendered output
//
// PatternFly functions
// --------------------------------------------------

// Transform px to rems
@function pf-strip-unit($num) {
  @return $num / ($num * 0 + 1);
}

@function pf-size-prem($pxval, $base: $pf-global--space-size-root) {
  @return pf-strip-unit($pxval) / $base * 1rem;
}

@function pf-font-prem($pxval, $base: $pf-global--font-size-root) {
  @return pf-strip-unit($pxval) / $base * 1rem;
}

@function pf-bg-svg($svg-coordinates, $viewBox: "512", $svg-color: "currentColor") {
  $color: str-slice(#{$svg-color}, 2);

  @return url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 #{$viewBox} 512'%3E%3Cpath fill='%23#{$color}' d='#{$svg-coordinates}'/%3E%3C/svg%3E");
}

// Return breakpoint value if it exists
@function pf-breakpoint-value($breakpoint, $breakpoint-map: $pf-global--breakpoint-name-map) {
  $breakpoint-value: if(map-has-key($breakpoint-map, #{$breakpoint}), map-get($breakpoint-map, #{$breakpoint}), false);

  @return #{$breakpoint-value};
}

// Build breakpoint map
// Based on $pf-global--breakpoint-name-map
@function build-breakpoint-map($map-items...) {
  $map: ();

  @if length($map-items) == 0 {
    $map: ("base": null);
    $map: map-merge($map, $pf-global--breakpoint-name-map);
  }

  @else {
    @each $breakpoint in $map-items {
      @if not map-has-key($pf-global--breakpoint-name-map, $breakpoint) and $breakpoint != "base" {
        $map: map-merge($map, ("invalid breakpoint #{$breakpoint}": null));
      }

      @else if $breakpoint == "base" {
        $map: map-merge($map, ($breakpoint: null));
      }

      @else {
        $map: map-merge($map, ($breakpoint: map-get($pf-global--breakpoint-name-map, #{$breakpoint})));
      }
    }
  }

  @return $map;
}

// Build spacer map
// Based on $pf-global--spacer-map
@function build-spacer-map($map-items...) {
  $map: ();

  @if length($map-items) == 0 {
    $map: ("none": 0);
    $map: map-merge($map, $pf-global--spacer-map);
    $map: map-remove($map, "auto", "0");
  }

  @each $spacer in $map-items {
    @if not map-has-key($pf-global--spacer-map, $spacer) and $spacer != "none" {
      $map: map-merge($map, ("invalid spacer #{$spacer}": null));
    }

    @else if $spacer == "none" {
      $map: map-merge($map, ($spacer: 0));
    }

    @else {
      $map: map-merge($map, ($spacer: map-get($pf-global--spacer-map, #{$spacer})));
    }
  }

  @return $map;
}

// Build variable map
// Based on custom map
@function build-variable-map($namespace, $map: ()) {
  $new-map: ();

  @each $size, $value in $map {
    $new-map: map-merge($new-map, (map-get($map, $size): --#{$namespace}--#{$size}));
  }

  @return $new-map;
}

// Colors
$pf-color-black-100:             #fafafa !default;
$pf-color-black-150:             #f5f5f5 !default;
$pf-color-black-200:             #f0f0f0 !default;
$pf-color-black-300:             #d2d2d2 !default;
$pf-color-black-400:             #b8bbbe !default;
$pf-color-black-500:             #8a8d90 !default;
$pf-color-black-600:             #6a6e73 !default;
$pf-color-black-700:             #4f5255 !default;
$pf-color-black-800:             #3c3f42 !default;
$pf-color-black-850:             #212427 !default;
$pf-color-black-900:             #151515 !default;
$pf-color-black-1000:            #030303 !default;
$pf-color-blue-50:               #e7f1fa !default;
$pf-color-blue-100:              #bee1f4 !default;
$pf-color-blue-200:              #73bcf7 !default;
$pf-color-blue-300:              #2b9af3 !default;
$pf-color-blue-400:              #06c !default;
$pf-color-blue-500:              #004080 !default;
$pf-color-blue-600:              #002952 !default;
$pf-color-blue-700:              #001223 !default;
$pf-color-cyan-50:               #f2f9f9 !default;
$pf-color-cyan-100:              #a2d9d9 !default;
$pf-color-cyan-200:              #73c5c5 !default;
$pf-color-cyan-300:              #009596 !default;
$pf-color-cyan-400:              #005f60 !default;
$pf-color-cyan-500:              #003737 !default;
$pf-color-cyan-600:              #002323 !default;
$pf-color-cyan-700:              #000f0f !default;
$pf-color-gold-50:               #fdf7e7 !default;
$pf-color-gold-100:              #f9e0a2 !default;
$pf-color-gold-200:              #f6d173 !default;
$pf-color-gold-300:              #f4c145 !default;
$pf-color-gold-400:              #f0ab00 !default;
$pf-color-gold-500:              #c58c00 !default;
$pf-color-gold-600:              #795600 !default;
$pf-color-gold-700:              #3d2c00 !default;
$pf-color-green-50:              #f3faf2 !default;
$pf-color-green-100:             #bde5b8 !default;
$pf-color-green-200:             #95d58e !default;
$pf-color-green-300:             #6ec664 !default;
$pf-color-green-400:             #5ba352 !default;
$pf-color-green-500:             #3e8635 !default;
$pf-color-green-600:             #1e4f18 !default;
$pf-color-green-700:             #0f280d !default;
$pf-color-light-blue-100:        #beedf9 !default;
$pf-color-light-blue-200:        #7cdbf3 !default;
$pf-color-light-blue-300:        #35caed !default;
$pf-color-light-blue-400:        #00b9e4 !default;
$pf-color-light-blue-500:        #008bad !default;
$pf-color-light-blue-600:        #005c73 !default;
$pf-color-light-blue-700:        #002d39 !default;
$pf-color-light-green-100:       #e4f5bc !default;
$pf-color-light-green-200:       #c8eb79 !default;
$pf-color-light-green-300:       #ace12e !default;
$pf-color-light-green-400:       #92d400 !default;
$pf-color-light-green-500:       #6ca100 !default;
$pf-color-light-green-600:       #486b00 !default;
$pf-color-light-green-700:       #253600 !default;
$pf-color-orange-100:            #f4b678 !default;
$pf-color-orange-200:            #ef9234 !default;
$pf-color-orange-300:            #ec7a08 !default;
$pf-color-orange-400:            #c46100 !default;
$pf-color-orange-500:            #8f4700 !default;
$pf-color-orange-600:            #773d00 !default;
$pf-color-orange-700:            #3b1f00 !default;
$pf-color-purple-50:             #f2f0fc !default;
$pf-color-purple-100:            #cbc1ff !default;
$pf-color-purple-200:            #b2a3ff !default;
$pf-color-purple-300:            #a18fff !default;
$pf-color-purple-400:            #8476d1 !default;
$pf-color-purple-500:            #6753ac !default;
$pf-color-purple-600:            #40199a !default;
$pf-color-purple-700:            #1f0066 !default;
$pf-color-red-50:                #faeae8 !default;
$pf-color-red-100:               #c9190b !default;
$pf-color-red-200:               #a30000 !default;
$pf-color-red-300:               #7d1007 !default;
$pf-color-red-400:               #470000 !default;
$pf-color-red-500:               #2c0000 !default;
$pf-color-white:                 #fff !default;

// This file is for initial variable values.
// All variables should have a valid css value,
// and use !default so they can be overwritten.

// `$pf-global--concept--PropiertyCamelCase--modifier--state`

// Patternfly options
//
// Quickly modify global styling by enabling or disabling optional features.
$pf-global--enable-reset: true !default;
$pf-global--enable-font-overpass-cdn: false !default;
$pf-global--enable-fontawesome-cdn: false !default;
$pf-global--disable-fontawesome: false !default;
$pf-global--load-pf-3: false !default;
$pf-global--enable-shield: false !default;
$pf-global--unset-root-font-size: true !default;

// Patternfly uses the default root size of the browser, it assumes a 16px base
// since most browser root size is 16. This variables is just to make the
// transformation from px to rem.
$pf-global--font-size-root: 16 !default; // for fonts
$pf-global--space-size-root: 16 !default; // for spaces

// Colors
// Background color
$pf-global--BackgroundColor--100: $pf-color-white !default;
$pf-global--BackgroundColor--200: $pf-color-black-200 !default;

// do not use - background colors for exceptions and defining theme
// light theme
$pf-global--BackgroundColor--light-100:     $pf-color-white !default;
$pf-global--BackgroundColor--light-200:     $pf-color-black-100 !default;
$pf-global--BackgroundColor--light-300:     $pf-color-black-200 !default;

// dark theme
$pf-global--BackgroundColor--dark-100:      $pf-color-black-900 !default;
$pf-global--BackgroundColor--dark-200:      $pf-color-black-800 !default;
$pf-global--BackgroundColor--dark-300:      $pf-color-black-850 !default;
$pf-global--BackgroundColor--dark-400:      $pf-color-black-700 !default;
$pf-global--BackgroundColor--dark-transparent-100:  rgba($pf-color-black-1000, .62) !default;
$pf-global--BackgroundColor--dark-transparent-200:  rgba($pf-color-black-1000, .32) !default;

// Text color
$pf-global--Color--100: $pf-color-black-900 !default;
$pf-global--Color--200: $pf-color-black-600 !default;
$pf-global--Color--300: $pf-color-black-800 !default;
$pf-global--Color--400: $pf-color-black-500 !default;

// do not use - text colors for exceptions and defining theme
// light theme
$pf-global--Color--light-100:      $pf-color-white !default;
$pf-global--Color--light-200:      $pf-color-black-200 !default;
$pf-global--Color--light-300:      $pf-color-black-300 !default;

// dark theme
$pf-global--Color--dark-100:      $pf-color-black-900 !default;
$pf-global--Color--dark-200:      $pf-color-black-600 !default;

// States color
// active
$pf-global--active-color--100:   $pf-color-blue-400 !default;
$pf-global--active-color--200:   $pf-color-blue-100 !default;
$pf-global--active-color--300:   $pf-color-blue-300 !default;
$pf-global--active-color--400:   $pf-color-blue-200 !default;

// disabled
$pf-global--disabled-color--100: $pf-color-black-600 !default;
$pf-global--disabled-color--200: $pf-color-black-300 !default;
$pf-global--disabled-color--300: $pf-color-black-200 !default;

// Theme color
$pf-global--primary-color--100:         $pf-color-blue-400 !default;
$pf-global--primary-color--200:         $pf-color-blue-500 !default;
$pf-global--secondary-color--100:       $pf-color-black-600 !default;
$pf-global--default-color--100:         $pf-color-cyan-200 !default;
$pf-global--default-color--200:         $pf-color-cyan-300 !default;
$pf-global--default-color--300:         $pf-color-cyan-500 !default;
$pf-global--success-color--100:         $pf-color-green-500 !default;
$pf-global--success-color--200:         $pf-color-green-600 !default;
$pf-global--info-color--100:            $pf-color-blue-300 !default;
$pf-global--info-color--200:            $pf-color-blue-600 !default;
$pf-global--warning-color--100:         $pf-color-gold-400 !default;
$pf-global--warning-color--200:         $pf-color-gold-600 !default;
$pf-global--danger-color--100:          $pf-color-red-100 !default;
$pf-global--danger-color--200:          $pf-color-red-200 !default;
$pf-global--danger-color--300:          $pf-color-red-400 !default;

// do not use - theme colors for exceptions and defining theme
$pf-global--primary-color--light-100:   $pf-color-blue-200 !default;
$pf-global--primary-color--dark-100:    $pf-color-blue-400 !default;

// Shadows
// small
$pf-global--BoxShadow--sm: 0 pf-size-prem(1px) pf-size-prem(2px) 0 rgba($pf-color-black-1000, .12), 0 0 pf-size-prem(2px) 0 rgba($pf-color-black-1000, .06) !default;
$pf-global--BoxShadow--sm-top: 0 pf-size-prem(-2px) pf-size-prem(4px) pf-size-prem(-1px) rgba($pf-color-black-1000, .16) !default;
$pf-global--BoxShadow--sm-right: pf-size-prem(2px) 0 pf-size-prem(4px) pf-size-prem(-1px) rgba($pf-color-black-1000, .16) !default;
$pf-global--BoxShadow--sm-bottom: 0 pf-size-prem(2px) pf-size-prem(4px) pf-size-prem(-1px) rgba($pf-color-black-1000, .16) !default;
$pf-global--BoxShadow--sm-left: pf-size-prem(-2px) 0 pf-size-prem(4px) pf-size-prem(-1px) rgba($pf-color-black-1000, .16) !default;

// medium
$pf-global--BoxShadow--md: 0 pf-size-prem(4px) pf-size-prem(8px) pf-size-prem(0) rgba($pf-color-black-1000, .12), 0 0 pf-size-prem(4px) 0 rgba($pf-color-black-1000, .06) !default;
$pf-global--BoxShadow--md-top: 0 pf-size-prem(-8px) pf-size-prem(8px) pf-size-prem(-6px) rgba($pf-color-black-1000, .18) !default;
$pf-global--BoxShadow--md-right: pf-size-prem(8px) 0 pf-size-prem(8px) pf-size-prem(-6px) rgba($pf-color-black-1000, .18) !default;
$pf-global--BoxShadow--md-bottom: 0 pf-size-prem(8px) pf-size-prem(8px) pf-size-prem(-6px) rgba($pf-color-black-1000, .18) !default;
$pf-global--BoxShadow--md-left: pf-size-prem(-8px) 0 pf-size-prem(8px) pf-size-prem(-6px) rgba($pf-color-black-1000, .18) !default;

// large
$pf-global--BoxShadow--lg: 0 pf-size-prem(8px) pf-size-prem(16px) 0 rgba($pf-color-black-1000, .16), 0 0 pf-size-prem(6px) 0 rgba($pf-color-black-1000, .08) !default;
$pf-global--BoxShadow--lg-top: 0 pf-size-prem(-12px) pf-size-prem(12px) pf-size-prem(-8px) rgba($pf-color-black-1000, .18) !default;
$pf-global--BoxShadow--lg-right: pf-size-prem(12px) 0 pf-size-prem(12px) pf-size-prem(-8px) rgba($pf-color-black-1000, .18) !default;
$pf-global--BoxShadow--lg-bottom: 0 pf-size-prem(12px) pf-size-prem(12px) pf-size-prem(-8px) rgba($pf-color-black-1000, .18) !default;
$pf-global--BoxShadow--lg-left: pf-size-prem(-12px) 0 pf-size-prem(12px) pf-size-prem(-8px) rgba($pf-color-black-1000, .18) !default;

// x-large
$pf-global--BoxShadow--xl: 0 pf-size-prem(16px) pf-size-prem(32px) 0 rgba($pf-color-black-1000, .16), 0 0 pf-size-prem(8px) 0 rgba($pf-color-black-1000, .1) !default;
$pf-global--BoxShadow--xl-top: 0 pf-size-prem(-16px) pf-size-prem(16px) pf-size-prem(-8px) rgba($pf-color-black-1000, .2) !default;
$pf-global--BoxShadow--xl-right: pf-size-prem(16px) 0 pf-size-prem(16px) pf-size-prem(-8px) rgba($pf-color-black-1000, .2) !default;
$pf-global--BoxShadow--xl-bottom: 0 pf-size-prem(16px) pf-size-prem(16px) pf-size-prem(-8px) rgba($pf-color-black-1000, .2) !default;
$pf-global--BoxShadow--xl-left: pf-size-prem(-16px) 0 pf-size-prem(16px) pf-size-prem(-8px) rgba($pf-color-black-1000, .2) !default;

// inset
$pf-global--BoxShadow--inset: inset 0 0 pf-size-prem(10) 0 rgba($pf-color-black-1000, .25) !default;

// Fontpath
$pf-global--font-path: "./assets/fonts" !default;

// Iconpath
$fa-font-path: "./assets/fonts/webfonts" !default;

// FontIcon path
$pf-global--fonticon-path: "./assets/pficon" !default;

// Imagepath
$pf-global--image-path: "./assets/images" !default;

// Spacers
$pf-global--spacer--xs: pf-size-prem(4px) !default;     // Orange
$pf-global--spacer--sm: pf-size-prem(8px) !default;     // Light green
$pf-global--spacer--md: pf-size-prem(16px) !default;    // Dark green
$pf-global--spacer--lg: pf-size-prem(24px) !default;    // Dark Blue
$pf-global--spacer--xl: pf-size-prem(32px) !default;    // Light Blue
$pf-global--spacer--2xl: pf-size-prem(48px) !default;   // Light Purple
$pf-global--spacer--3xl: pf-size-prem(64px) !default;   // Dark Purple
$pf-global--spacer--4xl: pf-size-prem(80px) !default;   // Dark magenta

// Form spacer - only used in forms
$pf-global--spacer--form-element: pf-size-prem(6px) !default;

// Gutter
$pf-global--gutter: $pf-global--spacer--md !default;
$pf-global--gutter--md: $pf-global--spacer--lg !default;

// Z-Index
$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;

// Grid breakpoints
$pf-global--breakpoint--xs: 0 !default;
$pf-global--breakpoint--sm: 576px !default;
$pf-global--breakpoint--md: 768px !default;
$pf-global--breakpoint--lg: 992px !default;
$pf-global--breakpoint--xl: 1200px !default;
$pf-global--breakpoint--2xl: 1450px !default;

// Borders
$pf-global--BorderWidth--sm:     1px !default;
$pf-global--BorderWidth--md:     2px !default;
$pf-global--BorderWidth--lg:     3px !default;
$pf-global--BorderWidth--xl:     4px !default;
$pf-global--BorderColor--100:    $pf-color-black-300 !default;
$pf-global--BorderColor--200:    $pf-color-black-500 !default;
$pf-global--BorderColor--300:    $pf-color-black-200 !default;
$pf-global--BorderColor--dark-100:   $pf-color-black-300 !default;
$pf-global--BorderColor--light-100:  $pf-color-black-400 !default;
$pf-global--BorderRadius--sm:        3px !default;
$pf-global--BorderRadius--lg:        30em !default; // This is a sufficiently large number to ensure in most cases that the ends are evenly rounded.

// Icons
$pf-global--icon--Color--light: $pf-color-black-600 !default;
$pf-global--icon--Color--dark: $pf-color-black-900 !default;
$pf-global--icon--FontSize--sm: pf-font-prem(10px) !default;
$pf-global--icon--FontSize--md: pf-font-prem(18px) !default;
$pf-global--icon--FontSize--lg: pf-font-prem(24px) !default;
$pf-global--icon--FontSize--xl: pf-font-prem(54px) !default;

// Fonts
// Font family
// stylelint-disable value-keyword-case
$pf-global--FontFamily--sans-serif: '"RedHatText", "Overpass", overpass, helvetica, arial, sans-serif';
$pf-global--FontFamily--heading--sans-serif: '"RedHatDisplay", "Overpass", overpass, helvetica, arial, sans-serif';
$pf-global--FontFamily--monospace: '"Liberation Mono", consolas, "SFMono-Regular", menlo, monaco, "Courier New", monospace';
$pf-global--FontFamily--overpass--sans-serif: '"overpass", overpass, "open sans", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"' !default;
$pf-global--FontFamily--overpass--monospace: '"overpass-mono", overpass-mono, "SFMono-Regular", menlo, monaco, consolas, "Liberation Mono", "Courier New", monospace' !default;
// stylelint-enable value-keyword-case

// Font size
$pf-global--FontSize--4xl: pf-font-prem(36px) !default;
$pf-global--FontSize--3xl: pf-font-prem(28px) !default;
$pf-global--FontSize--2xl: pf-font-prem(24px) !default;
$pf-global--FontSize--xl: pf-font-prem(20px) !default;
$pf-global--FontSize--lg: pf-font-prem(18px) !default;
$pf-global--FontSize--md: pf-font-prem(16px) !default;
$pf-global--FontSize--sm: pf-font-prem(14px) !default;
$pf-global--FontSize--xs: pf-font-prem(12px) !default;

// Font weight
$pf-global--FontWeight--light: 300 !default;
$pf-global--FontWeight--normal: 400 !default;
$pf-global--FontWeight--bold: 700 !default;
$pf-global--FontWeight--semi-bold: $pf-global--FontWeight--bold !default; // Just for legacy support while supporting Overpass
$pf-global--FontWeight--overpass--semi-bold: 500 !default;
$pf-global--FontWeight--overpass--bold: 600 !default;

// Line height
$pf-global--LineHeight--sm: 1.3 !default;
$pf-global--LineHeight--md: 1.5 !default;

// Links
$pf-global--link--Color:                  $pf-global--primary-color--100 !default;
$pf-global--link--Color--hover:           $pf-global--primary-color--200 !default;
$pf-global--link--Color--light:           $pf-global--active-color--300 !default;
$pf-global--link--Color--light--hover:    $pf-global--active-color--400 !default;
$pf-global--link--Color--dark:            $pf-global--primary-color--100 !default;
$pf-global--link--Color--dark--hover:     $pf-global--primary-color--200 !default;
$pf-global--link--TextDecoration:         none !default;
$pf-global--link--TextDecoration--hover:  underline !default;

// List
$pf-global--ListStyle: disc outside !default;

// Transitions
$pf-global--Transition: all 250ms cubic-bezier(.42, 0, .58, 1);
$pf-global--TimingFunction: cubic-bezier(.645, .045, .355, 1);
$pf-global--TransitionDuration: 250ms;

// Arrow size (used for tooltips, popovers, etc.)
$pf-global--arrow--width: pf-font-prem(15px);
$pf-global--arrow--width-lg: pf-font-prem(25px);

// A11y
$pf-global--target-size--MinWidth: 44px !default;
$pf-global--target-size--MinHeight: 44px !default;

// filters
// overlay
// animations

// Global breakpoint map - used for @pf-grid-item-modifiers
$pf-global--breakpoint-map: (
  "": null,
  "sm": "-on-sm",
  "md": "-on-md",
  "lg": "-on-lg",
  "xl": "-on-xl",
  "2xl": "-on-2xl"
);

// Global breakpoint list - used for @pf-utility-builder
$pf-global--breakpoint-list: (
  "sm",
  "md",
  "lg",
  "xl",
  "2xl"
);

// Global breakpoint name map - used for %pf-hidden-visible
$pf-global--breakpoint-name-map: (
  "sm": $pf-global--breakpoint--sm,
  "md": $pf-global--breakpoint--md,
  "lg": $pf-global--breakpoint--lg,
  "xl": $pf-global--breakpoint--xl,
  "2xl": $pf-global--breakpoint--2xl
);

// Spacer properties
$pf-global--spacer-properties-map: (
  "m":  "margin",
  "mt": "margin-top",
  "mr": "margin-right",
  "mb": "margin-bottom",
  "ml": "margin-left",
  "mx": null,
  "my": null,
  "p":  "padding",
  "pt": "padding-top",
  "pr": "padding-right",
  "pb": "padding-bottom",
  "pl": "padding-left",
  "px": null,
  "py": null
);

// Spacer values
$pf-global--spacer-map: (
  "auto": "auto",
  "0": 0,
  "xs": "var(--pf-global--spacer--xs)",
  "sm": "var(--pf-global--spacer--sm)",
  "md": "var(--pf-global--spacer--md)",
  "lg": "var(--pf-global--spacer--lg)",
  "xl": "var(--pf-global--spacer--xl)",
  "2xl": "var(--pf-global--spacer--2xl)",
  "3xl": "var(--pf-global--spacer--3xl)",
  "4xl": "var(--pf-global--spacer--4xl)"
);

// Media query used to create responsive classes
@mixin pf-media-query($point) {
  @if $point == "" or $point == null or $point == "base" {
    @content;
  }

  @else if $point == "sm" {
    @media screen and (min-width: $pf-global--breakpoint--sm) {
      @content;
    }
  }

  @else if $point == "md" {
    @media screen and (min-width: $pf-global--breakpoint--md) {
      @content;
    }
  }

  @else if $point == "lg" {
    @media screen and (min-width: $pf-global--breakpoint--lg) {
      @content;
    }
  }

  @else if $point == "xl" {
    @media screen and (min-width: $pf-global--breakpoint--xl) {
      @content;
    }
  }

  @else if $point == "2xl" {
    @media screen and (min-width: $pf-global--breakpoint--2xl) {
      @content;
    }
  }
}

// Create single prop / value classes, optionally add responsive suffix
// @group mixins
// @moduleType mixin
// @parameter: {Suffix} xs, sm, md, lg, xl, base or null
// @usage: @include pf-utility-builder(class-name, base sm md lg xl);
// ===============================================================================================
//
// ## Example sass map:
// this must be used when order matters or a cluster of similar utilties need to overwrite each other
//
// Justify content options
// $pf-u-flex-options: (
//   flex-none:  (flex none),
//   flex-1:     (flex 1)
// );
//
// non-responsive, base only                @include pf-utility-builder($sass-map)
// responsive, including all breakpoints    @include pf-utility-builder($sass-map, $pf-global--breakpoint-list)
//
// ## Passing individual utilities values
// ===============================================================================================
// Example individual utility:
// @include pf-utility-builder(flex-fill flex "1 1 auto", $pf-global--breakpoint-list);

@mixin pf-utility-builder($props, $breakpoints: null) {
  // if $class-name is a map

  // stylelint-disable
  @if type-of($props) == map {
    @each $class, $val in $props {
      $property: nth($val, 1);
      $value: #{nth($val, 2) !important};

      .pf-u-#{$class} {
        #{$property}: #{$value};
      }
    }

    // if breakpoints are requested
    @if $breakpoints != null {
      @each $breakpoint in $breakpoints {
        $suffix: -on-#{$breakpoint};

        @include pf-media-query($breakpoint) {
          @each $class, $val in $props {
            $property: nth($val, 1);
            $value: #{nth($val, 2) !important};

            .pf-u-#{$class}#{$suffix} {
              #{$property}: #{$value};
            }
          }
        }
      }
    }
  }

  @else if type-of($props) == list {
    $class: nth($props, 1);
    $property: nth($props, 2);
    $value: nth($props, 3) !important;

    .pf-u-#{$class} {
      #{$property}: #{$value};
    }

    @if $breakpoints != null {
      @each $breakpoint in $breakpoints {
        $suffix: -on-#{$breakpoint};

        .pf-u-#{$class}#{$suffix} {
          @include pf-media-query($breakpoint) {
            #{$property}: #{$value};
          }
        }
      }
    }
  }
}
// stylelint-enable

@mixin pf-u-screen-reader {
  position: fixed;
  top: 0;
  left: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@mixin pf-u-visible {
  position: static;
  overflow: visible;
  clip: auto;
  white-space: normal;
  border: inherit;
}

@mixin pf-t-light($color: "--pf-global--Color--100") {
  color: var(#{$color});

  @extend %pf-t-light;
}

@mixin pf-t-dark($color: "--pf-global--Color--100") {
  color: var(#{$color});

  @extend %pf-t-dark;
}

@mixin pf-text-overflow {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@mixin pf-line-clamp($line-clamp-val: 1) {
  // stylelint-disable
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: #{$line-clamp-val};
  // stylelint-enable
  overflow: hidden;
}

@mixin pf-overflow-hide-scroll {
  &::-webkit-scrollbar {
    display: none;
  } // hides scrollbars in Chrome

  scrollbar-width: none; // hides scrollbars in Firefox 64 and up
  -ms-overflow-style: -ms-autohiding-scrollbar; // auto hides scrollbars in Edge
}

@mixin pf-hidden-visible($val: "block") {
  // stylelint-disable-next-line
  --pf-hidden-visible--visible--Display: #{$val};

  @extend %pf-hidden-visible;
}

@mixin pf-m-overpass-font {
  .pf-m-overpass-font {
    @content;
  }
}

// Apply media query if value is passed
@mixin pf-apply-breakpoint($breakpoint, $breakpoint-map: $pf-global--breakpoint-name-map) {
  @if ($breakpoint == "null" or $breakpoint == "base" or $breakpoint == "") {
    @content;
  }

  @else {
    $breakpoint: pf-breakpoint-value($breakpoint);

    @media (min-width: $breakpoint) {
      @content;
    }
  }
}

@mixin pf-emit-properties($map) {
  @each $prop, $value in $map {
    #{$value}: #{$prop};
  }
}

// Animate tab focus removal
@mixin pf-animate-remove-tab-focus($element, $delay: $pf-global--TransitionDuration) {
  @keyframes pf-remove-tab-focus {
    to {
      visibility: hidden;
    }
  }

  #{$element}[hidden] {
    animation-name: pf-remove-tab-focus;
    animation-delay: #{$delay};
    animation-fill-mode: forwards;
  }
}

// Build variable stack
@mixin pf-build-css-variable-stack($prop, $css-var, $breakpoint-map: $pf-global--breakpoint-map) {
  $list: ();

  @each $breakpoint, $breakpoint-value in $breakpoint-map {
    $variable-list: ();

    // Build variable list
    @if $breakpoint != "base" {
      $list: append($list, $css-var + "-on-" + $breakpoint);
    } @else {
      $list: append($list, $css-var);
    }

    // Construct variable stack
    @each $list-item in $list {
      @if length($variable-list) == 0 {
        $variable-list: var(#{$list-item});
      } @else {
        $variable-list: var(#{$list-item}, $variable-list);
      }
    }

    // Assign variable stack to $prop
    @include pf-apply-breakpoint($breakpoint) {
      #{$prop}: #{$variable-list};
    }
  }
}

%pf-t-light {
  --pf-global--Color--100: var(--pf-global--Color--dark-100);
  --pf-global--Color--200: var(--pf-global--Color--dark-200);
  --pf-global--BorderColor--100: var(--pf-global--BorderColor--dark-100);
  --pf-global--primary-color--100: var(--pf-global--primary-color--dark-100);
  --pf-global--link--Color: var(--pf-global--link--Color--dark);
  --pf-global--link--Color--hover: var(--pf-global--link--Color--dark--hover);
  --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--light-100);
}

%pf-t-dark {
  --pf-global--Color--100: var(--pf-global--Color--light-100);
  --pf-global--Color--200: var(--pf-global--Color--light-200);
  --pf-global--BorderColor--100: var(--pf-global--BorderColor--light-100);
  --pf-global--primary-color--100: var(--pf-global--primary-color--light-100);
  --pf-global--link--Color: var(--pf-global--link--Color--light);
  --pf-global--link--Color--hover: var(--pf-global--link--Color--light);
  --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--dark-100);

  .pf-c-card {
    --pf-c-card--BackgroundColor: var(--pf-global--BackgroundColor--dark-transparent-200);
  }

  .pf-c-button {
    --pf-c-button--m-primary--Color: var(--pf-global--primary-color--dark-100);
    --pf-c-button--m-primary--hover--Color: var(--pf-global--primary-color--dark-100);
    --pf-c-button--m-primary--focus--Color: var(--pf-global--primary-color--dark-100);
    --pf-c-button--m-primary--active--Color: var(--pf-global--primary-color--dark-100);
    --pf-c-button--m-primary--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
    --pf-c-button--m-primary--hover--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
    --pf-c-button--m-primary--focus--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
    --pf-c-button--m-primary--active--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
    --pf-c-button--m-secondary--Color: var(--pf-global--Color--light-100);
    --pf-c-button--m-secondary--hover--Color: var(--pf-global--Color--light-100);
    --pf-c-button--m-secondary--focus--Color: var(--pf-global--Color--light-100);
    --pf-c-button--m-secondary--active--Color: var(--pf-global--Color--light-100);
    --pf-c-button--m-secondary--BorderColor: var(--pf-global--Color--light-100);
    --pf-c-button--m-secondary--hover--BorderColor: var(--pf-global--Color--light-100);
    --pf-c-button--m-secondary--focus--BorderColor: var(--pf-global--Color--light-100);
    --pf-c-button--m-secondary--active--BorderColor: var(--pf-global--Color--light-100);
  }
}

// stylelint-disable
%pf-hidden-visible {
  // base value for visible display property is set to 'block' by default and passed in to
  // placeholder via `pf-hidden-visible` mixin
  --pf-hidden-visible--visible--Visibility: visible;

  // set hidden var values
  --pf-hidden-visible--hidden--Display: none;
  --pf-hidden-visible--hidden--Visibility: hidden;

  // set visibile var values
  --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
  --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);

  // set default state to visible
  display: var(--pf-hidden-visible--Display);
  visibility: var(--pf-hidden-visible--Visibility);

  // toggle values based on state
  &.pf-m-hidden {
    --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
    --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
  }

  @each $size, $bp in $pf-global--breakpoint-name-map {
    @media screen and (min-width: $bp) {
      &.pf-m-hidden-on-#{$size} {
        --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
        --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
      }

      &.pf-m-visible-on-#{$size} {
        --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
        --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
      }
    }
  }
}
// stylelint-enable


:root {
  // Colors
  // Global palette
  --pf-global--palette--black-100: #{$pf-color-black-100};
  --pf-global--palette--black-150: #{$pf-color-black-150};
  --pf-global--palette--black-200: #{$pf-color-black-200};
  --pf-global--palette--black-300: #{$pf-color-black-300};
  --pf-global--palette--black-400: #{$pf-color-black-400};
  --pf-global--palette--black-500: #{$pf-color-black-500};
  --pf-global--palette--black-600: #{$pf-color-black-600};
  --pf-global--palette--black-700: #{$pf-color-black-700};
  --pf-global--palette--black-800: #{$pf-color-black-800};
  --pf-global--palette--black-850: #{$pf-color-black-850};
  --pf-global--palette--black-900: #{$pf-color-black-900};
  --pf-global--palette--black-1000: #{$pf-color-black-1000};
  --pf-global--palette--blue-50: #{$pf-color-blue-50};
  --pf-global--palette--blue-100: #{$pf-color-blue-100};
  --pf-global--palette--blue-200: #{$pf-color-blue-200};
  --pf-global--palette--blue-300: #{$pf-color-blue-300};
  --pf-global--palette--blue-400: #{$pf-color-blue-400};
  --pf-global--palette--blue-500: #{$pf-color-blue-500};
  --pf-global--palette--blue-600: #{$pf-color-blue-600};
  --pf-global--palette--blue-700: #{$pf-color-blue-700};
  --pf-global--palette--cyan-50: #{$pf-color-cyan-50};
  --pf-global--palette--cyan-100: #{$pf-color-cyan-100};
  --pf-global--palette--cyan-200: #{$pf-color-cyan-200};
  --pf-global--palette--cyan-300: #{$pf-color-cyan-300};
  --pf-global--palette--cyan-400: #{$pf-color-cyan-400};
  --pf-global--palette--cyan-500: #{$pf-color-cyan-500};
  --pf-global--palette--cyan-600: #{$pf-color-cyan-600};
  --pf-global--palette--cyan-700: #{$pf-color-cyan-700};
  --pf-global--palette--gold-50: #{$pf-color-gold-50};
  --pf-global--palette--gold-100: #{$pf-color-gold-100};
  --pf-global--palette--gold-200: #{$pf-color-gold-200};
  --pf-global--palette--gold-300: #{$pf-color-gold-300};
  --pf-global--palette--gold-400: #{$pf-color-gold-400};
  --pf-global--palette--gold-500: #{$pf-color-gold-500};
  --pf-global--palette--gold-600: #{$pf-color-gold-600};
  --pf-global--palette--gold-700: #{$pf-color-gold-700};
  --pf-global--palette--green-50: #{$pf-color-green-50};
  --pf-global--palette--green-100: #{$pf-color-green-100};
  --pf-global--palette--green-200: #{$pf-color-green-200};
  --pf-global--palette--green-300: #{$pf-color-green-300};
  --pf-global--palette--green-400: #{$pf-color-green-400};
  --pf-global--palette--green-500: #{$pf-color-green-500};
  --pf-global--palette--green-600: #{$pf-color-green-600};
  --pf-global--palette--green-700: #{$pf-color-green-700};
  --pf-global--palette--light-blue-100: #{$pf-color-light-blue-100};
  --pf-global--palette--light-blue-200: #{$pf-color-light-blue-200};
  --pf-global--palette--light-blue-300: #{$pf-color-light-blue-300};
  --pf-global--palette--light-blue-400: #{$pf-color-light-blue-400};
  --pf-global--palette--light-blue-500: #{$pf-color-light-blue-500};
  --pf-global--palette--light-blue-600: #{$pf-color-light-blue-600};
  --pf-global--palette--light-blue-700: #{$pf-color-light-blue-700};
  --pf-global--palette--light-green-100: #{$pf-color-light-green-100};
  --pf-global--palette--light-green-200: #{$pf-color-light-green-200};
  --pf-global--palette--light-green-300: #{$pf-color-light-green-300};
  --pf-global--palette--light-green-400: #{$pf-color-light-green-400};
  --pf-global--palette--light-green-500: #{$pf-color-light-green-500};
  --pf-global--palette--light-green-600: #{$pf-color-light-green-600};
  --pf-global--palette--light-green-700: #{$pf-color-light-green-700};
  --pf-global--palette--orange-100: #{$pf-color-orange-100};
  --pf-global--palette--orange-200: #{$pf-color-orange-200};
  --pf-global--palette--orange-300: #{$pf-color-orange-300};
  --pf-global--palette--orange-400: #{$pf-color-orange-400};
  --pf-global--palette--orange-500: #{$pf-color-orange-500};
  --pf-global--palette--orange-600: #{$pf-color-orange-600};
  --pf-global--palette--orange-700: #{$pf-color-orange-700};
  --pf-global--palette--purple-50: #{$pf-color-purple-50};
  --pf-global--palette--purple-100: #{$pf-color-purple-100};
  --pf-global--palette--purple-200: #{$pf-color-purple-200};
  --pf-global--palette--purple-300: #{$pf-color-purple-300};
  --pf-global--palette--purple-400: #{$pf-color-purple-400};
  --pf-global--palette--purple-500: #{$pf-color-purple-500};
  --pf-global--palette--purple-600: #{$pf-color-purple-600};
  --pf-global--palette--purple-700: #{$pf-color-purple-700};
  --pf-global--palette--red-50: #{$pf-color-red-50};
  --pf-global--palette--red-100: #{$pf-color-red-100};
  --pf-global--palette--red-200: #{$pf-color-red-200};
  --pf-global--palette--red-300: #{$pf-color-red-300};
  --pf-global--palette--red-400: #{$pf-color-red-400};
  --pf-global--palette--red-500: #{$pf-color-red-500};
  --pf-global--palette--white: #{$pf-color-white};

  // Background color
  --pf-global--BackgroundColor--100: #{$pf-global--BackgroundColor--100};
  --pf-global--BackgroundColor--200: #{$pf-global--BackgroundColor--200};
  --pf-global--BackgroundColor--light-100: #{$pf-global--BackgroundColor--light-100};
  --pf-global--BackgroundColor--light-200: #{$pf-global--BackgroundColor--light-200};
  --pf-global--BackgroundColor--light-300: #{$pf-global--BackgroundColor--light-300};
  --pf-global--BackgroundColor--dark-100: #{$pf-global--BackgroundColor--dark-100};
  --pf-global--BackgroundColor--dark-200: #{$pf-global--BackgroundColor--dark-200};
  --pf-global--BackgroundColor--dark-300: #{$pf-global--BackgroundColor--dark-300};
  --pf-global--BackgroundColor--dark-400: #{$pf-global--BackgroundColor--dark-400};
  --pf-global--BackgroundColor--dark-transparent-100: #{$pf-global--BackgroundColor--dark-transparent-100};
  --pf-global--BackgroundColor--dark-transparent-200: #{$pf-global--BackgroundColor--dark-transparent-200};

  // Text color
  --pf-global--Color--100: #{$pf-global--Color--100};
  --pf-global--Color--200: #{$pf-global--Color--200};
  --pf-global--Color--300: #{$pf-global--Color--300};
  --pf-global--Color--400: #{$pf-global--Color--400};
  --pf-global--Color--light-100: #{$pf-global--Color--light-100};
  --pf-global--Color--light-200: #{$pf-global--Color--light-200};
  --pf-global--Color--light-300: #{$pf-global--Color--light-300};
  --pf-global--Color--dark-100: #{$pf-global--Color--dark-100};
  --pf-global--Color--dark-200: #{$pf-global--Color--dark-200};

  // States color
  --pf-global--active-color--100: #{$pf-global--active-color--100};
  --pf-global--active-color--200: #{$pf-global--active-color--200};
  --pf-global--active-color--300: #{$pf-global--active-color--300};
  --pf-global--active-color--400: #{$pf-global--active-color--400};
  --pf-global--disabled-color--100: #{$pf-global--disabled-color--100};
  --pf-global--disabled-color--200: #{$pf-global--disabled-color--200};
  --pf-global--disabled-color--300: #{$pf-global--disabled-color--300};

  // Theme color
  --pf-global--primary-color--100: #{$pf-global--primary-color--100};
  --pf-global--primary-color--200: #{$pf-global--primary-color--200};
  --pf-global--primary-color--light-100: #{$pf-global--primary-color--light-100};
  --pf-global--primary-color--dark-100: #{$pf-global--primary-color--dark-100};
  --pf-global--secondary-color--100: #{$pf-global--secondary-color--100};
  --pf-global--default-color--100: #{$pf-global--default-color--100};
  --pf-global--default-color--200: #{$pf-global--default-color--200};
  --pf-global--default-color--300: #{$pf-global--default-color--300};
  --pf-global--success-color--100: #{$pf-global--success-color--100};
  --pf-global--success-color--200: #{$pf-global--success-color--200};
  --pf-global--info-color--100: #{$pf-global--info-color--100};
  --pf-global--info-color--200: #{$pf-global--info-color--200};
  --pf-global--warning-color--100: #{$pf-global--warning-color--100};
  --pf-global--warning-color--200: #{$pf-global--warning-color--200};
  --pf-global--danger-color--100: #{$pf-global--danger-color--100};
  --pf-global--danger-color--200: #{$pf-global--danger-color--200};
  --pf-global--danger-color--300: #{$pf-global--danger-color--300};

  // Shadows
  --pf-global--BoxShadow--sm: #{$pf-global--BoxShadow--sm};
  --pf-global--BoxShadow--sm-top: #{$pf-global--BoxShadow--sm-top};
  --pf-global--BoxShadow--sm-right: #{$pf-global--BoxShadow--sm-right};
  --pf-global--BoxShadow--sm-bottom: #{$pf-global--BoxShadow--sm-bottom};
  --pf-global--BoxShadow--sm-left: #{$pf-global--BoxShadow--sm-left};
  --pf-global--BoxShadow--md: #{$pf-global--BoxShadow--md};
  --pf-global--BoxShadow--md-top: #{$pf-global--BoxShadow--md-top};
  --pf-global--BoxShadow--md-right: #{$pf-global--BoxShadow--md-right};
  --pf-global--BoxShadow--md-bottom: #{$pf-global--BoxShadow--md-bottom};
  --pf-global--BoxShadow--md-left: #{$pf-global--BoxShadow--md-left};
  --pf-global--BoxShadow--lg: #{$pf-global--BoxShadow--lg};
  --pf-global--BoxShadow--lg-top: #{$pf-global--BoxShadow--lg-top};
  --pf-global--BoxShadow--lg-right: #{$pf-global--BoxShadow--lg-right};
  --pf-global--BoxShadow--lg-bottom: #{$pf-global--BoxShadow--lg-bottom};
  --pf-global--BoxShadow--lg-left: #{$pf-global--BoxShadow--lg-left};
  --pf-global--BoxShadow--xl: #{$pf-global--BoxShadow--xl};
  --pf-global--BoxShadow--xl-top: #{$pf-global--BoxShadow--xl-top};
  --pf-global--BoxShadow--xl-right: #{$pf-global--BoxShadow--xl-right};
  --pf-global--BoxShadow--xl-bottom: #{$pf-global--BoxShadow--xl-bottom};
  --pf-global--BoxShadow--xl-left: #{$pf-global--BoxShadow--xl-left};
  --pf-global--BoxShadow--inset: #{$pf-global--BoxShadow--inset};

  // Fontpath
  --pf-global--font-path: "#{$pf-global--font-path}";

  // FontIconPath
  --pf-global--fonticon-path: "#{$pf-global--fonticon-path}";

  // Spacers
  --pf-global--spacer--xs: #{$pf-global--spacer--xs};
  --pf-global--spacer--sm: #{$pf-global--spacer--sm};
  --pf-global--spacer--md: #{$pf-global--spacer--md};
  --pf-global--spacer--lg: #{$pf-global--spacer--lg};
  --pf-global--spacer--xl: #{$pf-global--spacer--xl};
  --pf-global--spacer--2xl: #{$pf-global--spacer--2xl};
  --pf-global--spacer--3xl: #{$pf-global--spacer--3xl};
  --pf-global--spacer--4xl: #{$pf-global--spacer--4xl};

  // Form spacer
  --pf-global--spacer--form-element: #{$pf-global--spacer--form-element};

  // Gutter
  --pf-global--gutter: #{$pf-global--gutter};
  --pf-global--gutter--md: #{$pf-global--gutter--md};

  // Z-Index
  --pf-global--ZIndex--xs: #{$pf-global--ZIndex--xs};
  --pf-global--ZIndex--sm: #{$pf-global--ZIndex--sm};
  --pf-global--ZIndex--md: #{$pf-global--ZIndex--md};
  --pf-global--ZIndex--lg: #{$pf-global--ZIndex--lg};
  --pf-global--ZIndex--xl: #{$pf-global--ZIndex--xl};
  --pf-global--ZIndex--2xl: #{$pf-global--ZIndex--2xl};

  // Grid breakpoints
  --pf-global--breakpoint--xs: #{$pf-global--breakpoint--xs};
  --pf-global--breakpoint--sm: #{$pf-global--breakpoint--sm};
  --pf-global--breakpoint--md: #{$pf-global--breakpoint--md};
  --pf-global--breakpoint--lg: #{$pf-global--breakpoint--lg};
  --pf-global--breakpoint--xl: #{$pf-global--breakpoint--xl};
  --pf-global--breakpoint--2xl: #{$pf-global--breakpoint--2xl};

  // Links
  --pf-global--link--Color: #{$pf-global--link--Color};
  --pf-global--link--Color--hover: #{$pf-global--link--Color--hover};
  --pf-global--link--Color--light: #{$pf-global--link--Color--light};
  --pf-global--link--Color--light--hover: #{$pf-global--link--Color--light--hover};
  --pf-global--link--Color--dark: #{$pf-global--link--Color--dark};
  --pf-global--link--Color--dark--hover: #{$pf-global--link--Color--dark--hover};
  --pf-global--link--TextDecoration: #{$pf-global--link--TextDecoration};
  --pf-global--link--TextDecoration--hover: #{$pf-global--link--TextDecoration--hover};

  // Borders
  --pf-global--BorderWidth--sm: #{$pf-global--BorderWidth--sm};
  --pf-global--BorderWidth--md: #{$pf-global--BorderWidth--md};
  --pf-global--BorderWidth--lg: #{$pf-global--BorderWidth--lg};
  --pf-global--BorderWidth--xl: #{$pf-global--BorderWidth--xl};
  --pf-global--BorderColor--100: #{$pf-global--BorderColor--100};
  --pf-global--BorderColor--200: #{$pf-global--BorderColor--200};
  --pf-global--BorderColor--300: #{$pf-global--BorderColor--300};
  --pf-global--BorderColor--dark-100: #{$pf-global--BorderColor--dark-100};
  --pf-global--BorderColor--light-100: #{$pf-global--BorderColor--light-100};
  --pf-global--BorderRadius--sm: #{$pf-global--BorderRadius--sm};
  --pf-global--BorderRadius--lg: #{$pf-global--BorderRadius--lg};

  // Icons
  --pf-global--icon--Color--light: #{$pf-global--icon--Color--light};
  --pf-global--icon--Color--dark: #{$pf-global--icon--Color--dark};
  --pf-global--icon--FontSize--sm: #{$pf-global--icon--FontSize--sm};
  --pf-global--icon--FontSize--md: #{$pf-global--icon--FontSize--md};
  --pf-global--icon--FontSize--lg: #{$pf-global--icon--FontSize--lg};
  --pf-global--icon--FontSize--xl: #{$pf-global--icon--FontSize--xl};

  // Fonts

  // Font family
  --pf-global--FontFamily--sans-serif: #{$pf-global--FontFamily--sans-serif};
  --pf-global--FontFamily--heading--sans-serif: #{$pf-global--FontFamily--heading--sans-serif};
  --pf-global--FontFamily--monospace: #{$pf-global--FontFamily--monospace};
  --pf-global--FontFamily--overpass--sans-serif: #{$pf-global--FontFamily--overpass--sans-serif};
  --pf-global--FontFamily--overpass--monospace: #{$pf-global--FontFamily--overpass--monospace};

  // Font size
  --pf-global--FontSize--4xl: #{$pf-global--FontSize--4xl};
  --pf-global--FontSize--3xl: #{$pf-global--FontSize--3xl};
  --pf-global--FontSize--2xl: #{$pf-global--FontSize--2xl};
  --pf-global--FontSize--xl: #{$pf-global--FontSize--xl};
  --pf-global--FontSize--lg: #{$pf-global--FontSize--lg};
  --pf-global--FontSize--md: #{$pf-global--FontSize--md};
  --pf-global--FontSize--sm: #{$pf-global--FontSize--sm};
  --pf-global--FontSize--xs: #{$pf-global--FontSize--xs};

  // Font weight
  --pf-global--FontWeight--light: #{$pf-global--FontWeight--light};
  --pf-global--FontWeight--normal: #{$pf-global--FontWeight--normal};
  --pf-global--FontWeight--semi-bold: #{$pf-global--FontWeight--semi-bold};
  --pf-global--FontWeight--overpass--semi-bold: #{$pf-global--FontWeight--overpass--semi-bold};
  --pf-global--FontWeight--bold: #{$pf-global--FontWeight--bold};
  --pf-global--FontWeight--overpass--bold: #{$pf-global--FontWeight--overpass--bold};

  // Line height
  --pf-global--LineHeight--sm: #{$pf-global--LineHeight--sm};
  --pf-global--LineHeight--md: #{$pf-global--LineHeight--md};

  // List
  --pf-global--ListStyle: #{$pf-global--ListStyle};
  --pf-global--Transition: #{$pf-global--Transition};
  --pf-global--TimingFunction: #{$pf-global--TimingFunction};
  --pf-global--TransitionDuration: #{$pf-global--TransitionDuration};

  // Arrow size
  --pf-global--arrow--width: #{$pf-global--arrow--width};
  --pf-global--arrow--width-lg: #{$pf-global--arrow--width-lg};

  // A11y
  --pf-global--target-size--MinWidth: #{$pf-global--target-size--MinWidth};
  --pf-global--target-size--MinHeight: #{$pf-global--target-size--MinHeight};
}

// RedHat Font overrides
@include pf-m-overpass-font {
  --pf-global--FontFamily--sans-serif: var(--pf-global--FontFamily--overpass--sans-serif);
  --pf-global--FontFamily--heading--sans-serif: var(--pf-global--FontFamily--sans-serif);
  --pf-global--FontFamily--monospace: var(--pf-global--FontFamily--overpass--monospace);
  --pf-global--FontWeight--semi-bold: var(--pf-global--FontWeight--overpass--semi-bold);
  --pf-global--FontWeight--bold: var(--pf-global--FontWeight--overpass--bold);
}