// 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--redhat-updated--sans-serif: '"RedHatTextUpdated", "Overpass", overpass, helvetica, arial, sans-serif';
$pf-global--FontFamily--redhat-updated--heading--sans-serif: '"RedHatDisplayUpdated", "Overpass", overpass, helvetica, arial, sans-serif';
$pf-global--FontFamily--redhat--monospace: '"RedHatMono", "Liberation Mono", consolas, "SFMono-Regular", menlo, monaco, "Courier New", monospace';
$pf-global--FontFamily--redhatVF--sans-serif: '"RedHatTextVF", "RedHatText", "Overpass", overpass, helvetica, arial, sans-serif';
$pf-global--FontFamily--redhatVF--heading--sans-serif: '"RedHatDisplayVF", "RedHatDisplay", "Overpass", overpass, helvetica, arial, sans-serif';
$pf-global--FontFamily--redhatVF--monospace: '"RedHatMonoVF", "RedHatMono", "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--Color--visited:         $pf-color-purple-600 !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)"
);