@import './_constants';
@import './_icons';

/*
 * Core
 */

// Globals
@oui-global-base-z-index: 0;
@oui-global-base-font-family-fallback: sans-serif;
@oui-global-base-font-family-icon: 'Oui Icons';
@oui-global-base-font-family: 'Source Sans Pro', @oui-global-base-font-family-fallback;
@oui-global-base-font-size: rem-calc(16);
@oui-global-base-font-weight: @oui-font-regular;
@oui-global-base-line-height: 1.5;
@oui-global-base-letter-spacing: 0.007em;
@oui-global-base-margin: rem-calc(15);
@oui-global-base-radius: 3px;
@oui-global-base-radius-medium: @oui-global-base-radius * 2;
@oui-global-base-form-controls:
  ~".oui-calendar",
  ~".oui-checkbox",
  ~".oui-input",
  ~".oui-input-group",
  ~".oui-file",
  ~".oui-radio",
  ~".oui-select",
  ~".oui-switch",
  ~".oui-textarea";

// Animations
@oui-animation-fast-out-slow-in: cubic-bezier(0.4, 0, 0.2, 1);
@oui-animation-default: @oui-animation-fast-out-slow-in;
@oui-animation-default-timing: 0.2s;
@oui-animation-shake-default-coordinate: 1;
@oui-animation-shake-default-angle: 3deg;

// Breakpoints
@oui-responsive-breakpoint-phone: 768px;
@oui-responsive-breakpoint-tablet: 1024px;
@oui-responsive-breakpoint-medium: 1200px;

// Colors
@oui-color-brand: @oui-color-sapphire;
@oui-color-primary: @oui-color-zodiac;
@oui-color-secondary: @oui-color-turquoise;
@oui-color-tertiary: @oui-color-pacific;

// Forms
@oui-form-control-default-size: rem-calc(250);
@oui-form-control-sizes:
  xs rem-calc(75),
  s rem-calc(150),
  m rem-calc(250),
  l rem-calc(350),
  xl rem-calc(500),
  auto 100%;
@oui-form-control-phone-sizes:
  xs rem-calc(75),
  s rem-calc(150),
  m rem-calc(250),
  l rem-calc(300),
  xl rem-calc(300),
  auto 100%;

// Icons
@oui-icon-dist-folder: "../fonts/oui-icons";
@oui-icon-spacing: 0;
@oui-icon-size: 1.5em;
@oui-icon-color: inherit;
@oui-icon-char-color: @oui-color-white;
@oui-icon-font-family: @oui-global-base-font-family-icon;

@oui-icon-circle-border-radius: 50%;
@oui-icon-circle-background: @oui-color-black;
@oui-icon-circle-color: @oui-color-white;
@oui-icon-circle-size: 1em;

// Abbreviations
@oui-abbr-border-color: @oui-color-pacific;
@oui-abbr-border-width: 1px;

// Heading
@oui-heading-border-width: 2px;
@oui-heading-border-color: @oui-color-ironlight;
@oui-heading-font-sizes:
  rem-calc(46),
  rem-calc(36),
  rem-calc(32),
  rem-calc(28),
  rem-calc(20),
  rem-calc(18);

@oui-heading-font-weights:
  @oui-font-light,
  @oui-font-light,
  @oui-font-regular,
  @oui-font-regular,
  @oui-font-semibold,
  @oui-font-semibold;

@oui-heading-margins:
  0 0 rem-calc(15),
  0 0 rem-calc(15),
  0 0 rem-calc(15),
  0 0 rem-calc(15),
  0 0 rem-calc(15),
  0 0 rem-calc(15);

// Label
@oui-label-font-color: @oui-color-shuttle;
@oui-label-font-size: @oui-global-base-font-size;
@oui-label-font-weight: @oui-global-base-font-weight;
@oui-label-padding: 0;
@oui-label-margin: 0 0 rem-calc(6);

// Link
@oui-link-font-color: @oui-color-pacific;
@oui-link-font-color_hover: @oui-color-sapphire;
@oui-link-text-decoration: none;
@oui-link-text-decoration_hover: underline;
@oui-link-icon-icon-size: rem-calc(10);
@oui-link-icon-margin-left: rem-calc(5);

// Horizontal line
@oui-horizontal-line-margin-bottom: rem-calc(10);
@oui-horizontal-line-width: 2px;
@oui-horizontal-line-color: @oui-color-nurse;
@oui-horizontal-line-style: solid;
@oui-horizontal-line-dark-color: darken(@oui-color-nurse, 20%);
@oui-horizontal-line-thin-width: 1px;

// Paragraph
@oui-paragraph-margin: 0 0 rem-calc(15);

// Fonts
@oui-font-source-sans-pro-folder: "../fonts/source-sans-pro";

// Choice
@oui-choice-min-height: rem-calc(30);
@oui-choice-line-height: 1.5;
@oui-choice-font-size: rem-calc(16);
@oui-choice-font-color: @oui-color-sapphire;
@oui-choice-font-color_disabled: @oui-color-sapphire;
@oui-choice-margin: 0;
@oui-choice-padding-left: rem-calc(9);

@oui-choice-description-spacing: rem-calc(5);
@oui-choice-description-font-size: rem-calc(14);

@oui-choice-section-spacing: rem-calc(9);
@oui-choice-section-border-color: @oui-choice-thumbnail-border-color;

@oui-choice-inline-spacing: rem-calc(20);

// Choice - Custom icon
@oui-choice-icon-size: rem-calc(16);

@oui-choice-icon-background-color: @oui-color-white;
@oui-choice-icon-background-color_active: @oui-color-foam;
@oui-choice-icon-background-color_disabled: @oui-color-concrete;

@oui-choice-icon-outer-color: @oui-color-dusty;
@oui-choice-icon-outer-color_active: @oui-color-pacific;
@oui-choice-icon-outer-color_disabled: @oui-color-silver;
@oui-choice-icon-outer-color_focus: @oui-color-sapphire;
@oui-choice-icon-outer-color_hover: @oui-color-sapphire;
@oui-choice-icon-outer-color_checked: @oui-color-sapphire;
@oui-choice-icon-outer-color_checked-hover: @oui-color-info-light;

@oui-choice-icon-inner-color: @oui-color-sapphire;
@oui-choice-icon-inner-color_active: @oui-color-pacific;
@oui-choice-icon-inner-color_disabled: @oui-color-silver;

@oui-choice-box-shadow_focus: 0 0 3px 1px rgba(0, 0, 0, 0.2);

// Choice - M Variant
@oui-choice-m-line-height: @oui-choice-line-height;
@oui-choice-m-font-size: rem-calc(24);

@oui-choice-m-icon-size: rem-calc(20);

// Choice - Thumbnail
@oui-choice-thumbnail-padding: rem-calc(20);
@oui-choice-thumbnail-border-size: 1px;
@oui-choice-thumbnail-border-size-checked: 2px;
@oui-choice-thumbnail-border-radius: rem-calc(4);
@oui-choice-thumbnail-box-shadow_focus: 0 0 3px 1px rgba(102, 199, 214, 0.6);
@oui-choice-thumbnail-box-shadow-checked: 0 4px 6px 1px @oui-color-info-fade;

@oui-choice-thumbnail-background: @oui-color-foam;
@oui-choice-thumbnail-background_hover: @oui-color-foam;
@oui-choice-thumbnail-background_disabled: @oui-color-polar;
@oui-choice-thumbnail-border-color: @oui-color-turquoise;
@oui-choice-thumbnail-border-color_hover: @oui-color-turquoise;
@oui-choice-thumbnail-border-color_disabled: @oui-color-charlotte;

@oui-choice-thumbnail-background-checked: @oui-color-foam;
@oui-choice-thumbnail-background-checked_hover: @oui-color-foam;
@oui-choice-thumbnail-background-checked_disabled: @oui-color-foam;
@oui-choice-thumbnail-border-color-checked: @oui-color-pacific;
@oui-choice-thumbnail-border-color-checked_hover: @oui-color-turquoise;
@oui-choice-thumbnail-border-color-checked_disabled: @oui-color-pacific;

@oui-choice-thumbnail-background-light: @oui-color-white;
@oui-choice-thumbnail-background-light_hover: @oui-color-white;
@oui-choice-thumbnail-background-light_disabled: @oui-color-white;
@oui-choice-thumbnail-border-color-light: @oui-color-charlotte;
@oui-choice-thumbnail-border-color-light_hover: @oui-color-charlotte;
@oui-choice-thumbnail-border-color-light_disabled: @oui-color-charlotte;

@oui-choice-thumbnail-background-light-checked: @oui-color-white;
@oui-choice-thumbnail-background-light-checked_hover: @oui-color-white;
@oui-choice-thumbnail-background-light-checked_disabled: @oui-color-polar;
@oui-choice-thumbnail-border-color-light-checked: @oui-color-pacific;
@oui-choice-thumbnail-border-color-light-checked_hover: @oui-color-turquoise;
@oui-choice-thumbnail-border-color-light-checked_disabled: @oui-color-pacific;

/*
 * Components
 */

// Action-Menu
@oui-action-button-size: rem-calc(36);

@oui-action-button-background-color: @oui-color-white;
@oui-action-button-background-color_active: @oui-color-concrete;
@oui-action-button-background-color_hover: @oui-color-pacific;
@oui-action-button-background-color_disabled: @oui-color-concrete;

@oui-action-button-border-color: @oui-color-silver;
@oui-action-button-border-color_active: @oui-color-dusty;
@oui-action-button-border-color_hover: @oui-color-pacific;
@oui-action-button-border-color_disabled: @oui-color-concrete;

@oui-action-button-border-radius: 50%;
@oui-action-button-border-size: 1px;

@oui-action-button-box-shadow_focus: 0 0 3px 1px fade(@oui-color-pacific, 60%);
@oui-action-button-box-shadow_active: inset 1px 1px 4px 0 fade(@oui-color-black, 33%);

@oui-action-button-foreground-color: @oui-color-pacific;
@oui-action-button-foreground-color_active: @oui-color-sapphire;
@oui-action-button-foreground-color_hover: @oui-color-white;
@oui-action-button-foreground-color_disabled: @oui-color-silver;

// Autocomplete
@oui-autocomplete-items-displayed: 5;
@oui-autocomplete-item-height: @oui-dropdown-item-height;
@oui-autocomplete-menu-spacing: @oui-dropdown-menu-spacing;

@oui-autocomplete-highlight-color: inherit;
@oui-autocomplete-highlight-font-weight: @oui-font-bold;
@oui-autocomplete-highlight-background: none;

// Back Button
@oui-back-button-margin-bottom: rem-calc(30);
@oui-back-button-icon-spacing: rem-calc(7);

// Box
@oui-box-background-color: @oui-color-concrete;
@oui-box-border-color: @oui-color-ironlight;
@oui-box-border-size: 2px;
@oui-box-border-radius: @oui-global-base-radius-medium;
@oui-box-padding: rem-calc(20);
@oui-box-spacing: rem-calc(15);

@oui-box-light-background-color: @oui-color-white;
@oui-box-light-border-color: @oui-color-ironlight;

// Button
@oui-button-font-color: @oui-color-sapphire;
@oui-button-font-size: rem-calc(16);
@oui-button-font-weight: @oui-font-semibold;
@oui-button-radius: @oui-global-base-radius;
@oui-button-min-width: rem-calc(100);
@oui-button-max-width: 100%;
@oui-button-padding-base: rem-calc(10);
@oui-button-padding: @oui-button-padding-base rem-calc(20);
@oui-button-margin: 0;
@oui-button-letter-spacing: 0.007em;

@oui-button-filled-background-color: @oui-color-turquoise;
@oui-button-filled-background-color_hover: darken(@oui-color-turquoise, 10%);
@oui-button-filled-background-color_disabled: @oui-color-ironlight;
@oui-button-filled-box-shadow_active: inset 2px 2px 1px 0 @oui-color-pacific;
@oui-button-filled-box-shadow_focus: 0 0 3px 1px rgba(102, 199, 214, 0.6);
@oui-button-filled-font-color_disabled: @oui-color-dusty;
@oui-button-filled-padding-base: rem-calc(8);
@oui-button-filled-padding: @oui-button-filled-padding-base rem-calc(20);

@oui-button-hollow-background-color: @oui-color-white;
@oui-button-hollow-background-color_hover: @oui-color-concrete;
@oui-button-hollow-border-color: @oui-color-silver;
@oui-button-hollow-border-color_hover: @oui-color-dusty;
@oui-button-hollow-border-color_disabled: @oui-color-concrete;
@oui-button-hollow-border-size: 1px;
@oui-button-hollow-background-color_disabled: @oui-color-concrete;
@oui-button-hollow-box-shadow_active: inset 2px 2px 1px 0 fade(@oui-color-silver, 30%);
@oui-button-hollow-box-shadow_focus: 0 0 3px 1px rgba(0, 0, 0, 0.15);
@oui-button-hollow-font-color_disabled: @oui-color-silver;
@oui-button-hollow-padding-base: rem-calc(7);
@oui-button-hollow-padding: @oui-button-hollow-padding-base rem-calc(20);

@oui-button-dropdown-color: @oui-color-dusty;
@oui-button-dropdown-icon-size: rem-calc(10);
@oui-button-dropdown-background-color_active: @oui-color-concrete;
@oui-button-dropdown-border-color_active: @oui-color-dusty;
@oui-button-dropdown-spacing: rem-calc(12);
@oui-button-dropdown-padding-right: rem-calc(30) + @oui-button-dropdown-spacing;
@oui-button-dropdown-padding-left: @oui-button-dropdown-spacing;
@oui-button-dropdown-margin-right: @oui-button-dropdown-spacing * 1.5;

@oui-button-icon-icon-size: rem-calc(10);
@oui-button-icon-icon-size_large: rem-calc(20);
@oui-button-icon-icon-color: @oui-color-sapphire;
@oui-button-icon-icon-color_disabled: @oui-color-silver;
@oui-button-icon-padding-right: rem-calc(10);
@oui-button-icon-padding-left: rem-calc(10);

@oui-button-icon-alone-background: transparent;
@oui-button-icon-alone-font-color: @oui-link-font-color;
@oui-button-icon-alone-min-width: rem-calc(20);
@oui-button-icon-alone-padding-left: rem-calc(5);
@oui-button-icon-alone-padding-right: 0;
@oui-button-icon-alone-margin-right: rem-calc(15);
@oui-button-icon-alone-icon-font-size: rem-calc(20);
@oui-button-icon-alone-font-color_hover: @oui-link-font-color_hover;

@oui-button-icon-right-icon-margin-left: rem-calc(20);
@oui-button-icon-right-icon-margin-right: rem-calc(20);

@oui-button-link-icon-color: @oui-color-sapphire;
@oui-button-link-font-color: @oui-color-pacific;
@oui-button-link-font-color_hover: @oui-color-sapphire;
@oui-button-link-font-color_disabled: @oui-color-dusty;
@oui-button-link-font-weight: @oui-font-regular;
@oui-button-link-padding: rem-calc(8) rem-calc(20);

@oui-button-small-width-min-width: rem-calc(40);
@oui-button-small-width-padding-left-right: rem-calc(5);

@oui-button-large-height-min-height: rem-calc(45);

@oui-button-error-background-color: @oui-color-error-fade;
@oui-button-error-border-color: @oui-color-error-light;
@oui-button-error-text-color: @oui-color-error-dark;

// Calendar
@oui-calendar-font-color: @oui-color-sapphire;
@oui-calendar-font-color_hover: @oui-color-sapphire;
@oui-calendar-font-size: rem-calc(16);
@oui-calendar-font-weight: @oui-font-semibold;
@oui-calendar-border: @oui-calendar-border-color 1px solid;
@oui-calendar-border-color: @oui-color-silver;
@oui-calendar-border-radius: @oui-global-base-radius;
@oui-calendar-box-shadow: @oui-dropdown-menu-box-shadow;

@oui-calendar-arrow-size: @oui-dropdown-arrow-size;
@oui-calendar-arrow-inner-size: @oui-dropdown-arrow-inner-size;
@oui-calendar-arrow-spacing: @oui-dropdown-menu-spacing;

@oui-calendar-separator-color: @oui-color-silver;
@oui-calendar-separator-size: 1px;

@oui-calendar-header-height: rem-calc(60);
@oui-calendar-header-spacing: rem-calc(20);
@oui-calendar-header-border-bottom: @oui-calendar-separator-color 1px solid;

@oui-calendar-title-year-spacing: 0.33em;
@oui-calendar-title-arrow-width: rem-calc(15);
@oui-calendar-title-button-width: rem-calc(14);

@oui-calendar-icon-color: @oui-color-pacific;
@oui-calendar-icon-color_hover: @oui-color-sapphire;
@oui-calendar-icon-size: rem-calc(12);
@oui-calendar-icon-spacing: rem-calc(12);

@oui-calendar-input-font-color: @oui-input-font-color;
@oui-calendar-input-border-color: @oui-input-border-color;
@oui-calendar-input-background-color: @oui-input-background-color;
@oui-calendar-input-background-color_hover: @oui-color-charlotte;

@oui-calendar-button-font-color: @oui-button-font-color;
@oui-calendar-button-background-color: @oui-button-filled-background-color;
@oui-calendar-button-background-color_hover: @oui-button-filled-background-color_hover;

@oui-calendar-body-padding: rem-calc(20) rem-calc(25);

@oui-calendar-cell-width: rem-calc(45);
@oui-calendar-cell-height: rem-calc(30);
@oui-calendar-cell-line-height: rem-calc(28);
@oui-calendar-cell-spacing: rem-calc(8);
@oui-calendar-cell-font-color_disabled: @oui-color-dusty;
@oui-calendar-cell-border-radius: @oui-global-base-radius;
@oui-calendar-cell-border-width: 1px;
@oui-calendar-cell-background-color_hover: @oui-color-charlotte;
@oui-calendar-cell-background-color_selected: @oui-color-charlotte;

@oui-calendar-today-border-color: @oui-color-sapphire;
@oui-calendar-today-border-color_hover: @oui-color-sapphire;
@oui-calendar-today-border-color_disabled: @oui-color-silver;

@oui-calendar-time-width: rem-calc(300);
@oui-calendar-time-height: rem-calc(38);
@oui-calendar-time-padding: rem-calc(5) 0;

// Checkbox
@oui-checkbox-min-height: @oui-choice-min-height;
@oui-checkbox-line-height: @oui-choice-line-height;
@oui-checkbox-font-size: @oui-choice-font-size;
@oui-checkbox-font-color: @oui-choice-font-color;
@oui-checkbox-font-color_disabled: @oui-choice-font-color_disabled;
@oui-checkbox-padding-left: @oui-choice-padding-left;

@oui-checkbox-description-spacing: @oui-choice-description-spacing;
@oui-checkbox-description-font-size: @oui-choice-description-font-size;

@oui-checkbox-inline-spacing: @oui-choice-inline-spacing;

// Checkbox - Custom icon
@oui-checkbox-icon-size: @oui-choice-icon-size;

@oui-checkbox-icon-background-color: @oui-choice-icon-background-color;
@oui-checkbox-icon-background-color_active: @oui-choice-icon-background-color_active;
@oui-checkbox-icon-background-color_disabled: @oui-choice-icon-background-color_disabled;

@oui-checkbox-icon-outer-color: @oui-choice-icon-outer-color;
@oui-checkbox-icon-outer-color_active: @oui-choice-icon-outer-color_active;
@oui-checkbox-icon-outer-color_disabled: @oui-choice-icon-outer-color_disabled;
@oui-checkbox-icon-outer-color_focus: @oui-choice-icon-outer-color_focus;
@oui-checkbox-icon-outer-color_hover: @oui-choice-icon-outer-color_hover;
@oui-checkbox-icon-outer-color_checked: @oui-choice-icon-outer-color_checked;
@oui-checkbox-icon-outer-color_checked-hover: @oui-choice-icon-outer-color_checked-hover;

@oui-checkbox-icon-inner-color: @oui-choice-icon-inner-color;
@oui-checkbox-icon-inner-color_active: @oui-choice-icon-inner-color_active;
@oui-checkbox-icon-inner-color_disabled: @oui-choice-icon-inner-color_disabled;

@oui-checkbox-box-shadow_focus: @oui-choice-box-shadow_focus;

// Checkbox - M Variant
@oui-checkbox-m-line-height: @oui-choice-m-line-height;
@oui-checkbox-m-font-size: @oui-choice-m-font-size;

@oui-checkbox-m-icon-size: @oui-choice-m-icon-size;

// Chips
@oui-chip-height: rem-calc(30);
@oui-chip-padding: 0 rem-calc(10);
@oui-chip-border-radius: rem-calc(10);
@oui-chip-font-color: @oui-color-sapphire;
@oui-chip-font-size: rem-calc(16);
@oui-chip-font-weight: @oui-font-regular;
@oui-chip-background-color: @oui-color-foam;

@oui-chip-close-icon-size: rem-calc(12);

@oui-chip-container-margin: 0 0 rem-calc(10);
@oui-chip-container-padding: rem-calc(5) rem-calc(18);
@oui-chip-container-item-spacing: rem-calc(5) rem-calc(2);
@oui-chip-container-background-color: @oui-color-white;
@oui-chip-container-border-color: @oui-color-nurse;
@oui-chip-container-border-size: 1px;

// Clipboard
@oui-clipboard-font-color: @oui-input-font-color;
@oui-clipboard-box-shadow: @oui-input-box-shadow;
@oui-clipboard-box-shadow_focus: @oui-input-box-shadow_focus;
@oui-clipboard-border-color: @oui-input-border-color;
@oui-clipboard-border-color_hover: @oui-input-border-color_hover;
@oui-clipboard-border-color_focus: @oui-input-border-color_focus;
@oui-clipboard-border-radius: @oui-global-base-radius;
@oui-clipboard-background-color: @oui-input-background-color;
@oui-clipboard-background-color_focus: @oui-input-background-color_focus;

// Clipboard - Button
@oui-clipboard-button-width: @oui-input-group-button-min-width;

// Collapsible
@oui-collapsible-margin: rem-calc(4);
@oui-collapsible-padding: rem-calc(15);
@oui-collapsible-border-color: @oui-color-charlotte;
@oui-collapsible-border-width: 1px;
@oui-collapsible-border-radius: @oui-global-base-radius;
@oui-collapsible-background-color: @oui-color-foam;
@oui-collapsible-background-color_active: @oui-color-charlotte;

@oui-collapsible-header-height: rem-calc(40);
@oui-collapsible-header-padding: 0 rem-calc(14) 0 rem-calc(19);

@oui-collapsible-label-color: @oui-color-sapphire;

@oui-collapsible-icon-size: rem-calc(13);
@oui-collapsible-icon-color: inherit;
@oui-collapsible-icon-spacing: rem-calc(14);

// Criteria
@oui-criteria-margin-bottom: rem-calc(10);

@oui-criteria-actions-margin-bottom: rem-calc(10);

// Criteria Adder
@oui-criteria-adder-spacing: rem-calc(10);
@oui-criteria-adder-icon-size: rem-calc(24);
@oui-criteria-adder-menu-width: rem-calc(300);

@oui-criteria-adder-form-padding: rem-calc(20);
@oui-criteria-adder-field-spacing: rem-calc(6);
@oui-criteria-adder-submit-spacing: rem-calc(8);

// Datagrid
@oui-datagrid-width: 100%;
@oui-datagrid-margin: 0 0 rem-calc(20);
@oui-datagrid-font-size: rem-calc(16);

@oui-datagrid-arrow-content_asc: @oui-icon-index-arrow-up;
@oui-datagrid-arrow-content_desc: @oui-icon-index-arrow-down;
@oui-datagrid-arrow-font-family: @oui-global-base-font-family-icon;
@oui-datagrid-arrow-size: rem-calc(10);

@oui-datagrid-row-background-color_even: @oui-color-alabaster;
@oui-datagrid-row-background-color_odd: @oui-color-white;

@oui-datagrid-header-background-color: @oui-color-nurse;
@oui-datagrid-header-background-color_hover: mix(@oui-color-dusty, @oui-color-nurse, 10%);
@oui-datagrid-header-background-color_sorted: mix(@oui-color-dusty, @oui-color-nurse, 10%);
@oui-datagrid-header-font-color: @oui-color-shuttle;
@oui-datagrid-header-font-color_hover: @oui-color-sapphire;
@oui-datagrid-header-font-color_sorted: @oui-color-sapphire;
@oui-datagrid-header-font-weight: @oui-font-regular;
@oui-datagrid-header-font-weight_sorted: @oui-font-semibold;
@oui-datagrid-header-padding: rem-calc(2) rem-calc(10);
@oui-datagrid-header-height: rem-calc(44);

@oui-datagrid-cell-background-color: @oui-color-white;
@oui-datagrid-cell-border-color: @oui-color-nurse;
@oui-datagrid-cell-font-color: @oui-color-shuttle;
@oui-datagrid-cell-padding: rem-calc(5) rem-calc(10);
@oui-datagrid-cell-height: rem-calc(56);

// Datagrid - Sticky columns
@oui-datagrid-sticky-column-border: 1px solid #e4e4e4;

@oui-datagrid-action-column-width: rem-calc(80);
@oui-datagrid-action-column-margin-top: rem-calc(5);
@oui-datagrid-action-column-box-shadow: -10px 0 10px -5px rgba(0, 0, 0, 0.08);

@oui-datagrid-checkbox-column-width: rem-calc(44);
@oui-datagrid-checkbox-column-margin-top: rem-calc(5);
@oui-datagrid-checkbox-column-box-shadow: 10px 0 10px -5px rgba(0, 0, 0, 0.08);

// Datagrid - Parameters
@oui-datagrid-parameters-button-width: rem-calc(36);
@oui-datagrid-parameters-button-line-height: rem-calc(26);
@oui-datagrid-parameters-button-padding: rem-calc(6) 0;
@oui-datagrid-parameters-button-font-color: @oui-color-sapphire;
@oui-datagrid-parameters-button-font-color_hover: @oui-color-sapphire;

@oui-datagrid-parameters-header-line-height: rem-calc(40);
@oui-datagrid-parameters-header-font-color: @oui-color-dusty;
@oui-datagrid-parameters-header-font-size: rem-calc(14);

@oui-datagrid-parameters-body-padding: 0 rem-calc(18) rem-calc(4) rem-calc(18);

@oui-datagrid-parameters-column-spacing: rem-calc(18);

// Dropdown
@oui-dropdown-menu-background-color: @oui-color-white;
@oui-dropdown-menu-border-width: 1px;
@oui-dropdown-menu-border-color: @oui-color-silver;
@oui-dropdown-menu-margin: 0;
@oui-dropdown-menu-spacing: rem-calc(4);
@oui-dropdown-menu-box-shadow: 0 4px 6px 0 @oui-color-info-fade;
@oui-dropdown-menu-min-width: rem-calc(140);
@oui-dropdown-menu-max-width: rem-calc(300);
@oui-dropdown-menu-zindex: 100;

@oui-dropdown-arrow-size: rem-calc(10);
@oui-dropdown-arrow-center-position: rem-calc(17);
@oui-dropdown-arrow-margin: @oui-dropdown-arrow-center-position - @oui-dropdown-arrow-size;
@oui-dropdown-arrow-border-width: 2px;
@oui-dropdown-arrow-diff-size: sqrt(2 * @oui-dropdown-arrow-border-width);
@oui-dropdown-arrow-inner-size: ~"calc(@{oui-dropdown-arrow-size} - @{oui-dropdown-arrow-diff-size})";

@oui-dropdown-label-line-height: rem-calc(18);
@oui-dropdown-label-background-color: @oui-color-alabaster;
@oui-dropdown-label-padding: rem-calc(6) rem-calc(20);
@oui-dropdown-label-font-color: @oui-color-sapphire;
@oui-dropdown-label-font-size: rem-calc(14);
@oui-dropdown-label-font-weight: @oui-font-semibold;

@oui-dropdown-item-height: rem-calc(40);
@oui-dropdown-item-line-height: rem-calc(22);
@oui-dropdown-item-background-color: @oui-color-white;
@oui-dropdown-item-background-color_active: @oui-color-foam;
@oui-dropdown-item-padding: rem-calc(9) rem-calc(20);
@oui-dropdown-item-font-color: @oui-color-sapphire;
@oui-dropdown-item-font-color_active: @oui-color-sapphire;
@oui-dropdown-item-font-color_disabled: @oui-color-dusty;
@oui-dropdown-item-font-size: rem-calc(16);
@oui-dropdown-item-font-weight: @oui-font-regular;

@oui-dropdown-item-icon-padding: 0 rem-calc(5);
@oui-dropdown-item-icon-size: rem-calc(12);
@oui-dropdown-item-icon-color: inherit;

// Dual List
@oui-dual-list-min-height: rem-calc(300);
@oui-dual-list-margin: 0 0 rem-calc(20);
@oui-dual-list-border: 1px solid @oui-color-nurse2;
@oui-dual-list-border-radius: @oui-global-base-radius;
@oui-dual-list-background: @oui-color-white;

@oui-dual-list-icon-spacing: rem-calc(10);
@oui-dual-list-icon-size: rem-calc(14);

@oui-dual-list-header-height: rem-calc(40);
@oui-dual-list-header-padding: 0 rem-calc(20);
@oui-dual-list-header-font-color: @oui-color-sapphire;
@oui-dual-list-header-font-size: rem-calc(16);
@oui-dual-list-header-font-weight: @oui-font-semibold;
@oui-dual-list-header-background: @oui-color-nurse2;

@oui-dual-list-toggle-icon-size: rem-calc(13);
@oui-dual-list-toggle-icon-spacing: rem-calc(14);

@oui-dual-list-search-margin: rem-calc(20) 0 0 0;

@oui-dual-list-wrapper-height: rem-calc(350);
@oui-dual-list-wrapper-gutter: rem-calc(20);

@oui-dual-list-body-margin_responsive: 0 rem-calc(-20);

@oui-dual-list-action-margin: rem-calc(10) 0 0 0;

@oui-dual-list-item-height: rem-calc(40);
@oui-dual-list-item-margin: 1px 0;
@oui-dual-list-item-padding: 0 rem-calc(10) 0 rem-calc(20);
@oui-dual-list-item-padding_responsive: 0 rem-calc(20);
@oui-dual-list-item-font-color: @oui-color-sapphire;
@oui-dual-list-item-font-size: rem-calc(16);
@oui-dual-list-item-font-weight: @oui-font-regular;
@oui-dual-list-item-border-radius: @oui-global-base-radius;
@oui-dual-list-item-background_hover: @oui-color-foam;

@oui-dual-list-placeholder-font-color: @oui-color-silver;
@oui-dual-list-placeholder-font-size: rem-calc(16);
@oui-dual-list-placeholder-font-weight: @oui-font-semibold;

// Field
@oui-field-spacing: rem-calc(20);

@oui-field-label-font-color: @oui-color-shuttle;
@oui-field-label-font-size: rem-calc(16);

@oui-field-helper-color: @oui-color-shuttle;
@oui-field-helper-font-size: rem-calc(14);

@oui-field-control-width: @oui-form-control-default-size;
@oui-field-control-spacing: rem-calc(6);

@oui-field-error-color: @oui-color-error-dark;
@oui-field-error-font-size: rem-calc(14);
@oui-field-error-icon-color: @oui-color-error-medium;
@oui-field-error-icon-font-size: rem-calc(14);

// File
@oui-file-margin: 0;

@oui-file-placeholder-font-color: @oui-color-silver;

@oui-file-ellipsis-size-spacing: rem-calc(5);

@oui-file-input-font-weight: @oui-font-regular;
@oui-file-input-font-color_disabled: @oui-input-font-color_disabled;
@oui-file-input-font-color_error: @oui-color-error-dark;
@oui-file-input-box-shadow_focus: @oui-input-box-shadow_focus;
@oui-file-input-box-shadow_error: @oui-input-box-shadow_error;
@oui-file-input-box-shadow_error-focus: 0 0 3px 0 rgba(0, 0, 0, 0.35);
@oui-file-input-border-color_hover: @oui-input-border-color_hover;
@oui-file-input-border-color_focus: @oui-input-border-color_focus;
@oui-file-input-border-color_disabled: @oui-input-border-color_disabled;
@oui-file-input-border-color_error: @oui-color-error-medium;
@oui-file-input-background-color_focus: @oui-input-background-color_focus;
@oui-file-input-background-color_disabled: @oui-input-background-color_disabled;
@oui-file-input-background-color_error: @oui-color-error-fade;

@oui-file-button-padding: @oui-input-group-button-padding;
@oui-file-button-background-color: @oui-input-group-button-background-color;
@oui-file-button-border-color_disabled: @oui-input-group-button-border-color_disabled;

@oui-file-icon-width: rem-calc(40);
@oui-file-icon-color: @oui-color-sapphire;
@oui-file-icon-color_error: @oui-color-error-dark;
@oui-file-icon-font-size: rem-calc(12);

@oui-file-droparea-height: rem-calc(80);
@oui-file-droparea-font-color: @oui-color-sapphire;
@oui-file-droparea-font-color_hover: @oui-color-silver;
@oui-file-droparea-font-color_disabled: @oui-color-silver;
@oui-file-droparea-border: dashed 1px @oui-color-pacific;
@oui-file-droparea-border_hover: dashed 1px @oui-color-silver;
@oui-file-droparea-border_disabled: dashed 1px @oui-color-silver;
@oui-file-droparea-background-color: @oui-color-polar;
@oui-file-droparea-background-color_hover: @oui-color-alabaster;
@oui-file-droparea-background-color_disabled: @oui-color-alabaster;

@oui-file-heading-margin: rem-calc(15) 0 rem-calc(5);
@oui-file-heading-font-color: @oui-color-sapphire;
@oui-file-heading-font-size: rem-calc(14);

@oui-file-preview-size: rem-calc(78);
@oui-file-preview-icon-size: rem-calc(20);

@oui-file-attachment-height: rem-calc(40);
@oui-file-attachment-max-height: rem-calc(230);
@oui-file-attachment-line-height: rem-calc(20);
@oui-file-attachment-padding: rem-calc(10) rem-calc(40) rem-calc(10) rem-calc(20);
@oui-file-attachment-font-color: @oui-color-sapphire;
@oui-file-attachment-font-color_disabled: @oui-color-silver;
@oui-file-attachment-font-color_error: @oui-color-error-dark;
@oui-file-attachment-font-size: rem-calc(14);
@oui-file-attachment-border: solid 1px @oui-color-silver;
@oui-file-attachment-border_error: solid 1px @oui-color-error-medium;
@oui-file-attachment-background: @oui-color-white;
@oui-file-attachment-background_error: @oui-color-error-fade;
@oui-file-attachment-box-shadow: 0 0 6px fade(@oui-color-info-light; 20%);

// Guide button
@oui-guide-button-margin: 0;
@oui-guide-button-font-color: @oui-color-sapphire;
@oui-guide-button-font-size: rem-calc(16);
@oui-guide-button-font-weight: @oui-font-semibold;
@oui-guide-button-icon-spacing: rem-calc(10);

// Guide button - Responsive
@oui-guide-button-responsive-size: rem-calc(36);
@oui-guide-button-responsive-background-color: rgba(255, 255, 255, 0.5);
@oui-guide-button-responsive-border-radius: 50%;

// Header
@oui-header-margin: 0 0 rem-calc(20);
@oui-header-background-color: @oui-color-nurse;

@oui-header-spacing-y: rem-calc(20);
@oui-header-spacing-side_s: rem-calc(32);
@oui-header-spacing-side_l: rem-calc(48);

@oui-header-guide-spacing: rem-calc(20);

@oui-header-title-font-color: @oui-color-sapphire;
@oui-header-title-font-size: rem-calc(36);
@oui-header-title-font-weight: @oui-font-regular;

@oui-header-description-spacing: rem-calc(5);
@oui-header-description-font-color: @oui-color-dusty;
@oui-header-description-font-size: rem-calc(16);
@oui-header-description-font-weight: @oui-font-regular;

// Header Tabs
@oui-header-tabs-item-padding: rem-calc(10) rem-calc(30);
@oui-header-tabs-item-font-color: @oui-color-sapphire;
@oui-header-tabs-item-font-color_disabled: @oui-color-dusty;
@oui-header-tabs-item-font-size: rem-calc(16);
@oui-header-tabs-item-border-size: rem-calc(4);

@oui-header-tabs-icon-spacing: rem-calc(10);
@oui-header-tabs-icon-font-size: rem-calc(12);

// header Tabs - Dropdown
@oui-header-tabs-dropdown-padding: rem-calc(4) 0;
@oui-header-tabs-dropdown-item-padding: rem-calc(8) rem-calc(20);
@oui-header-tabs-dropdown-item-background-color_active: @oui-color-foam;

// header Tabs - Slider nav
@oui-header-tabs-slider-nav-width: rem-calc(44);
@oui-header-tabs-slider-nav-font-color: @oui-color-sapphire;
@oui-header-tabs-slider-nav-font-size: rem-calc(10);
@oui-header-tabs-slider-nav-background-color: darken(@oui-color-nurse, 6.75%);

// Inline Adder
@oui-inline-adder-margin-bottom: rem-calc(20);
@oui-inline-adder-border-color: @oui-color-ironlight;
@oui-inline-adder-border-width: 1px;
@oui-inline-adder-box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.06);
@oui-inline-adder-background-color: @oui-color-white;

@oui-inline-adder-row-spacing: rem-calc(20);
@oui-inline-adder-row-padding: rem-calc(20);

@oui-inline-adder-field-spacing: rem-calc(10);

@oui-inline-adder-footer-background-color: @oui-color-concrete;
@oui-inline-adder-footer-padding: rem-calc(10);

@oui-inline-adder-action-size: rem-calc(40);
@oui-inline-adder-action-padding-x: @oui-button-small-width-padding-left-right;
@oui-inline-adder-action-icon-size: rem-calc(16);

// Input
@oui-input-height: rem-calc(40);
@oui-input-margin: 0;
@oui-input-padding-x: rem-calc(11);
@oui-input-padding-y: 0;
@oui-input-padding: @oui-input-padding-y @oui-input-padding-x;
@oui-input-font-color: @oui-color-zodiac;
@oui-input-font-color_disabled: @oui-color-silver;
@oui-input-font-color_readonly: @oui-color-gothic;
@oui-input-font-color_error: @oui-color-error-dark;
@oui-input-font-size: rem-calc(16);
@oui-input-font-weight: @oui-font-semibold;
@oui-input-font-weight_error: @oui-font-regular;
@oui-input-border-color: @oui-color-silver;
@oui-input-border-color_hover: @oui-color-dusty;
@oui-input-border-color_focus: @oui-color-pacific;
@oui-input-border-color_disabled: @oui-color-silver;
@oui-input-border-color_readonly: @oui-color-nurse;
@oui-input-border-color_error: @oui-color-error-medium;
@oui-input-border-radius: @oui-global-base-radius;
@oui-input-border-size: 1px;
@oui-input-box-shadow: inset 2px 2px 1px 0 rgba(18, 40, 68, 0.07);
@oui-input-box-shadow_focus: inset 2px 2px 1px 0 fade(@oui-color-turquoise, 35%), 0 0 3px 0 @oui-color-info-light;
@oui-input-box-shadow_error: inset 1px 1px 1px 0 @oui-color-error-light;
@oui-input-box-shadow_error: inset 1px 1px 1px 0 @oui-color-error-light;
@oui-input-background-color: @oui-color-white;
@oui-input-background-color_focus: @oui-color-polar;
@oui-input-background-color_disabled: @oui-color-concrete;
@oui-input-background-color_readonly: @oui-color-concrete;
@oui-input-background-color_error: @oui-color-error-fade;
@oui-input-background-color_error-focus: 0 0 3px 0 rgba(0, 0, 0, 0.35);

@oui-input-placeholder-font-color: @oui-color-silver;

@oui-input-selection-background-color: @oui-color-pacific;
@oui-input-selection-background-color_error: @oui-color-error-dark;
@oui-input-selection-font-color: @oui-color-white;
@oui-input-selection-font-color_error: @oui-color-white;

// Input Group
@oui-input-group-margin: 0;
@oui-input-group-border-radius: @oui-input-border-radius;
@oui-input-group-border-size: @oui-input-border-size;

@oui-input-group-button-min-width: rem-calc(50);
@oui-input-group-button-padding: rem-calc(7);
@oui-input-group-button-background-color: @oui-input-background-color;
@oui-input-group-button-border-color_disabled: @oui-input-border-color_disabled;
@oui-input-group-button-font-color: @oui-color-silver;
@oui-input-group-button-font-color_hover: @oui-color-pacific;
@oui-input-group-button-font-color_focus: @oui-input-group-button-font-color_hover;

@oui-input-group-button-icon-size: rem-calc(20);
@oui-input-group-button-icon-shadow_focus: 0 1px 1px rgba(0, 0, 0, 0.15);

// List
@oui-list-font-size: rem-calc(16);
@oui-list-font-weight: @oui-font-regular;
@oui-list-spacing: 0 0 rem-calc(15);
@oui-list-padding: 0;

@oui-list-header-padding: @oui-list-item-padding;
@oui-list-header-font-size: @oui-list-font-size;
@oui-list-header-font-weight: @oui-font-semibold;
@oui-list-header-color: @oui-color-zodiac;

@oui-list-item-border: none;
@oui-list-item-padding: 0;
@oui-list-item-indent: rem-calc(20);

@oui-list-link-color: @oui-color-fiord;
@oui-list-link-active-font-weight: @oui-font-semibold;
@oui-list-link-active-color: @oui-color-pacific;
@oui-list-link-active-background-color: @oui-color-white;

// List - Nav variant
@oui-list-nav-font-size: rem-calc(16);
@oui-list-nav-font-weight: @oui-font-regular;
@oui-list-nav-padding: 0;
@oui-list-nav-background-color: @oui-color-nurse;
@oui-list-nav-background-color_hover: hsla(0, 0%, 100%, 0.5);
@oui-list-nav-background-color_focus: hsla(0, 0%, 100%, 0.85);

@oui-list-nav-header-padding: @oui-list-nav-item-padding;
@oui-list-nav-header-font-size: @oui-list-font-size;
@oui-list-nav-header-font-weight: @oui-font-semibold;
@oui-list-nav-header-color: @oui-color-dusty;

@oui-list-nav-item-padding: rem-calc(10);
@oui-list-nav-item-indent: rem-calc(20);
@oui-list-nav-item-border: 1px solid #fff;

@oui-list-nav-link-color: @oui-color-fiord;
@oui-list-nav-link-active-font-weight: @oui-font-semibold;
@oui-list-nav-link-active-color: @oui-color-pacific;
@oui-list-nav-link-active-background-color: @oui-color-white;

// List - Separated variant
@oui-list-separated-separator-color: @oui-horizontal-line-color;
@oui-list-separated-separator-size: @oui-horizontal-line-thin-width;

// Message
@oui-message-min-height: rem-calc(50);
@oui-message-line-height: 1.375;
@oui-message-margin: 0 0 rem-calc(16);
@oui-message-padding: rem-calc(16) rem-calc(16) rem-calc(16) rem-calc(58);
@oui-message-border-color: @oui-color-zodiac;
@oui-message-border-width: 2px;
@oui-message-border-radius: 6px;
@oui-message-background-color: @oui-color-white;
@oui-message-font-color: @oui-color-zodiac;
@oui-message-font-size: rem-calc(16);
@oui-message-font-weight: @oui-font-regular;

@oui-message-no-icon-padding: rem-calc(16) rem-calc(16);

@oui-message-icon-position-top: rem-calc(14);
@oui-message-icon-position-left: rem-calc(16);
@oui-message-icon-size: rem-calc(26);

@oui-message-close-button-color: @oui-color-zodiac;
@oui-message-close-button-background-color: transparent;
@oui-message-close-button-border: none;
@oui-message-close-button-width: @oui-message-close-button-font-size;
@oui-message-close-button-height: @oui-message-close-button-font-size;
@oui-message-close-button-font-size: rem-calc(10);
@oui-message-close-button-margin: rem-calc(-5) rem-calc(-6) 0 rem-calc(16);
@oui-message-close-button-padding: 0;
@oui-message-close-button-top: rem-calc(12);
@oui-message-close-button-right: rem-calc(12);
@oui-message-close-button-opacity: 0.6;
@oui-message-close-button-opacity_hover: 1;

// Message - Status
@oui-message-info-border-color: @oui-color-info-light;
@oui-message-info-background-color: @oui-color-info-fade;
@oui-message-info-font-color: @oui-color-fiord;
@oui-message-info-icon-color: @oui-color-info-medium;

@oui-message-success-border-color: @oui-color-success-medium;
@oui-message-success-background-color: @oui-color-success-fade;
@oui-message-success-font-color: @oui-color-success-dark;
@oui-message-success-icon-color: @oui-color-success-medium;

@oui-message-warning-border-color: @oui-color-warning-light;
@oui-message-warning-background-color: @oui-color-warning-fade;
@oui-message-warning-font-color: @oui-color-warning-dark;
@oui-message-warning-icon-color: @oui-color-warning-medium;

@oui-message-error-border-color: @oui-color-error-light;
@oui-message-error-background-color: @oui-color-error-fade;
@oui-message-error-font-color: @oui-color-error-dark;
@oui-message-error-icon-color: @oui-color-error-medium;

// Message - Size variant
@oui-message-l-max-width: rem-calc(600);
@oui-message-l-padding: rem-calc(100) 0;
@oui-message-l-color: @oui-color-zodiac;

@oui-message-l-title-spacing: rem-calc(20);
@oui-message-l-title-font-size: rem-calc(28);
@oui-message-l-body-font-size: rem-calc(18);

@oui-message-l-icon-spacing: rem-calc(30);
@oui-message-l-icon-width: rem-calc(120);
@oui-message-l-icon-height: rem-calc(150);

@oui-message-l-warning-background-image: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMTIwIDE1MSI+PGRlZnM+PGNsaXBQYXRoIGlkPSJjbGlwLXBhdGgiPjxwYXRoIGQ9Ik01OS40Miw1MC42OFY0OC40NWgxLjE1djIuMjNsLS4xNCwxNS42OWgtLjg2Wk02MCw3MC4xOWExLjMzLDEuMzMsMCwwLDEsMS4zLDEuNDQsMS4zLDEuMywwLDEsMS0yLjU5LDBBMS4zMywxLjMzLDAsMCwxLDYwLDcwLjE5WiIgZmlsbD0ibm9uZSIvPjwvY2xpcFBhdGg+PGNsaXBQYXRoIGlkPSJjbGlwLXBhdGgtMiI+PHJlY3QgeD0iLTY0MCIgeT0iLTIxMyIgd2lkdGg9IjE0MDAiIGhlaWdodD0iOTAwIiBmaWxsPSJub25lIi8+PC9jbGlwUGF0aD48Y2xpcFBhdGggaWQ9ImNsaXAtcGF0aC0zIj48cGF0aCBkPSJNMjQxLjEsNTAuNjhWNDguNDVoMS4xNXYyLjIzbC0uMTQsMTUuNjloLS44NlptLjU4LDE5LjUxYTEuMzMsMS4zMywwLDAsMSwxLjMsMS40NCwxLjMsMS4zLDAsMSwxLTIuNTksMCwxLjMzLDEuMzMsMCwwLDEsMS4yOS0xLjQ0WiIgZmlsbD0ibm9uZSIvPjwvY2xpcFBhdGg+PC9kZWZzPjx0aXRsZT52MkFydGJvYXJkIDE8L3RpdGxlPjxyZWN0IHg9IjkiIHk9IjE0OCIgd2lkdGg9IjEwMSIgaGVpZ2h0PSIzIiBmaWxsPSIjOGJjZmVkIi8+PHBhdGggZD0iTTYwLDBhNjAsNjAsMCwxLDAsNDIuNDMsMTcuNTdBNjAsNjAsMCwwLDAsNjAsMG0wLDNBNTcsNTcsMCwxLDEsMyw2MCw1Nyw1NywwLDAsMSw2MCwzIiBmaWxsPSIjOGJjZmVkIi8+PHBvbHlnb24gcG9pbnRzPSI2MCAyOC41IDkxLjUgODAuNSAyOC41IDgwLjUgNjAgMjguNSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMTYyODQzIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAtcGF0aCkiPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwLXBhdGgtMikiPjxyZWN0IHg9IjUzLjciIHk9IjQzLjQ1IiB3aWR0aD0iMTIuNiIgaGVpZ2h0PSIzNC41OSIgZmlsbD0iIzE2Mjg0MyIvPjwvZz48L2c+PC9zdmc+);

@oui-message-l-error-background-image: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMTIwIDE1MSI+PGRlZnM+PGNsaXBQYXRoIGlkPSJjbGlwLXBhdGgiPjxwYXRoIGQ9Ik01OS40Mi0xNDh2LTIuMjNoMS4xNVYtMTQ4bC0uMTQsMTUuNjloLS44NlpNNjAtMTI4LjQ4YTEuMzMsMS4zMywwLDAsMSwxLC40NCwxLjMzLDEuMzMsMCwwLDEsLjM0LDEsMS4zLDEuMywwLDAsMS0uNjEsMS4yMiwxLjMsMS4zLDAsMCwxLTEuMzcsMCwxLjMsMS4zLDAsMCwxLS42MS0xLjIyLDEuMzMsMS4zMywwLDAsMSwuMzMtMUExLjMzLDEuMzMsMCwwLDEsNjAtMTI4LjQ4WiIgZmlsbD0ibm9uZSIvPjwvY2xpcFBhdGg+PGNsaXBQYXRoIGlkPSJjbGlwLXBhdGgtMiI+PHBhdGggZD0iTTI0MS4xLTE0OHYtMi4yM2gxLjE1Vi0xNDhsLS4xNCwxNS42OWgtLjg2Wm0uNTgsMTkuNTFhMS4zMywxLjMzLDAsMCwxLDEsLjQ0LDEuMzMsMS4zMywwLDAsMSwuMzQsMSwxLjMsMS4zLDAsMCwxLS42MSwxLjIyLDEuMywxLjMsMCwwLDEtMS4zNywwLDEuMywxLjMsMCwwLDEtLjYxLTEuMjIsMS4zMywxLjMzLDAsMCwxLC4zMy0xQTEuMzMsMS4zMywwLDAsMSwyNDEuNjgtMTI4LjQ4WiIgZmlsbD0ibm9uZSIvPjwvY2xpcFBhdGg+PC9kZWZzPjx0aXRsZT52MkFydGJvYXJkIDEgY29weSAyPC90aXRsZT48cmVjdCB4PSI5IiB5PSIxNDgiIHdpZHRoPSIxMDEiIGhlaWdodD0iMyIgZmlsbD0iI2UzNjk0NyIvPjxwYXRoIGQ9Ik02MCwwYTYwLDYwLDAsMSwwLDQyLjQzLDE3LjU3QTYwLDYwLDAsMCwwLDYwLDBtMCwzQTU3LDU3LDAsMSwxLDMsNjAsNTcsNTcsMCwwLDEsNjAsMyIgZmlsbD0iI2UzNjk0NyIvPjxsaW5lIHgxPSI4Ni43NCIgeTE9IjMzLjI2IiB4Mj0iMzMuMjYiIHkyPSI4Ni43NCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMTYyODQzIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48bGluZSB4MT0iODYuNzQiIHkxPSI4Ni43NCIgeDI9IjMzLjI2IiB5Mj0iMzMuMjYiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzE2Mjg0MyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PC9zdmc+);

// Modal
@oui-modal-spacing: rem-calc(15) auto;
@oui-modal-font-size: rem-calc(16);
@oui-modal-border-radius: @oui-global-base-radius-medium;
@oui-modal-background-color: @oui-color-white;
@oui-modal-shadow: 0 10px 10px fade(@oui-color-shuttle, 25%);

@oui-modal-title-color: @oui-color-sapphire;
@oui-modal-backdrop-color: fade(@oui-color-shuttle, 50%);
@oui-modal-loader-background-color: rgba(255, 255, 255, 0.5);

@oui-modal-close-button-size: rem-calc(12);
@oui-modal-close-button-padding-x: rem-calc(10);
@oui-modal-close-button-padding-y: rem-calc(9);
@oui-modal-close-button-color: @oui-color-info-dark;

@oui-modal-header-background-color: @oui-color-nurse;
@oui-modal-header-font-size: rem-calc(21);
@oui-modal-header-font-weight: @oui-font-semibold;

@oui-modal-body-padding: rem-calc(30) rem-calc(40) rem-calc(30) rem-calc(132);
@oui-modal-body-padding-no-icon: rem-calc(30) rem-calc(40);
@oui-modal-body-color: @oui-color-shuttle;

@oui-modal-footer-padding: 0 rem-calc(40) rem-calc(30);
@oui-modal-footer-button-spacing: rem-calc(20);

@oui-modal-icon-position-top: rem-calc(30);
@oui-modal-icon-position-left: rem-calc(40);
@oui-modal-icon-font-size: rem-calc(60);

@oui-modal-icon-success-color: @oui-color-success-medium;
@oui-modal-icon-error-color: @oui-color-error-medium;
@oui-modal-icon-warning-color: @oui-color-warning-medium;
@oui-modal-icon-info-color: @oui-color-info-medium;
@oui-modal-icon-help-color: @oui-color-info-medium;

// Navbar
@oui-navbar-height: rem-calc(44);
@oui-navbar-line-height: rem-calc(18);
@oui-navbar-padding: 0 rem-calc(10);
@oui-navbar-font-size: rem-calc(16);
@oui-navbar-font-size_small: rem-calc(14);
@oui-navbar-font-size_large: rem-calc(18);
@oui-navbar-font-color: @oui-color-white;
@oui-navbar-background-color: @oui-color-zodiac;
@oui-navbar-background-color_active: @oui-color-rhino;
@oui-navbar-z-index: 1030;

// Navbar - Brand
@oui-navbar-brand-padding: 0 rem-calc(20);
@oui-navbar-brand-color: @oui-navbar-font-color;
@oui-navbar-brand-font-size: rem-calc(28);
@oui-navbar-brand-font-weight: @oui-font-light;
@oui-navbar-brand-icon-size: rem-calc(44);
@oui-navbar-brand-title-spacing: rem-calc(15);

// Navbar - Notification
@oui-navbar-notification-max-height: rem-calc(400);
@oui-navbar-notification-icon-margin: rem-calc(3) rem-calc(10);
@oui-navbar-notification-icon-font-size: rem-calc(20);
@oui-navbar-notification-padding: rem-calc(7) rem-calc(10);

@oui-navbar-notification-action-padding: rem-calc(4) rem-calc(10);
@oui-navbar-notification-action-icon-font-size: rem-calc(10);
@oui-navbar-notification-action-font-color: @oui-color-silver;
@oui-navbar-notification-action-font-color_hover: @oui-color-dusty;

@oui-navbar-notification-placeholder-color: @oui-color-concrete;
@oui-navbar-notification-placeholder-font-color: @oui-color-dusty;

@oui-navbar-notification-title-font-size: rem-calc(16);
@oui-navbar-notification-title-font-weight: @oui-font-semibold;

@oui-navbar-notification-description-line-height: rem-calc(20);
@oui-navbar-notification-description-max-height: rem-calc(80);
@oui-navbar-notification-description-font-size: rem-calc(14);

@oui-navbar-notification-time-padding: 0 0 0 rem-calc(5);

@oui-navbar-notification-icon-color_info: @oui-color-info-medium;
@oui-navbar-notification-icon-color_success: @oui-color-success-medium;
@oui-navbar-notification-icon-color_warning: @oui-color-warning-medium;
@oui-navbar-notification-icon-color_error: @oui-color-error-medium;

// Navbar - Toggler
@oui-navbar-toggler-line-height: @oui-navbar-height;
@oui-navbar-toggler-padding: 0 rem-calc(20);
@oui-navbar-toggler-margin-right: -(rem-calc(20));
@oui-navbar-toggler-background-color_active: @oui-navbar-background-color_active;

@oui-navbar-hamburger-width: rem-calc(14);
@oui-navbar-hamburger-height: rem-calc(12);
@oui-navbar-hamburger-bar-size: 2px;
@oui-navbar-hamburger-bar-color: @oui-color-white;

@oui-navbar-backdrop-background-color: @oui-color-shuttle;
@oui-navbar-backdrop-opacity: 0.5;

// Navbar Menu
@oui-navbar-menu-width: rem-calc(300);
@oui-navbar-menu-width_large: rem-calc(400);
@oui-navbar-menu-padding: rem-calc(4) 0 0 0;
@oui-navbar-menu-placeholder-height: rem-calc(182);
@oui-navbar-menu-background-color: @oui-color-white;
@oui-navbar-menu-background-color_active: @oui-color-charlotte;
@oui-navbar-menu-background-color_hover: @oui-color-foam;
@oui-navbar-menu-box-shadow: 0 rem-calc(4) rem-calc(6) 0 @oui-navbar-menu-box-shadow-color;
@oui-navbar-menu-box-shadow_fixed: 0 rem-calc(14) rem-calc(15) 0 @oui-navbar-menu-box-shadow-color;
@oui-navbar-menu-box-shadow-color: fade(darken(@oui-color-info-light, 50%), 25%);
@oui-navbar-menu-font-size: rem-calc(16);
@oui-navbar-menu-font-size_small: rem-calc(14);
@oui-navbar-menu-font-color: @oui-color-sapphire;
@oui-navbar-menu-z-index: @oui-navbar-z-index + 1;
@oui-navbar-menu-gradient-height: rem-calc(36);

@oui-navbar-menu-header-padding: rem-calc(11) rem-calc(20) rem-calc(15) rem-calc(20);
@oui-navbar-menu-header-background-color: @oui-color-alabaster;
@oui-navbar-menu-header-border-bottom: solid 1px @oui-color-nurse;

@oui-navbar-menu-title-line-height: 1.2;
@oui-navbar-menu-title-font-color: @oui-navbar-menu-font-color;
@oui-navbar-menu-title-font-size: rem-calc(20);
@oui-navbar-menu-title-font-weight: 600;

@oui-navbar-menu-back-padding: rem-calc(30);

@oui-navbar-menu-item-padding: rem-calc(10) rem-calc(20);
@oui-navbar-menu-item-border-bottom: solid 1px @oui-color-silver;

@oui-navbar-menu-link-height: rem-calc(40);
@oui-navbar-menu-link-font-color_active: @oui-navbar-menu-font-color;
@oui-navbar-menu-link-background-color_active: @oui-color-foam;

// Navbar Link
@oui-navbar-link-min-width: @oui-navbar-height;
@oui-navbar-link-min-height: @oui-navbar-height;
@oui-navbar-link-line-height: 1.2;
@oui-navbar-link-padding-h: (@oui-navbar-link-min-height - (@oui-navbar-font-size * @oui-navbar-link-line-height)) / 2;
@oui-navbar-link-padding-v: rem-calc(20);
@oui-navbar-link-padding: @oui-navbar-link-padding-h @oui-navbar-link-padding-v;
@oui-navbar-link-font-color: @oui-color-white;
@oui-navbar-link-font-size: rem-calc(16);
@oui-navbar-link-font-weight: 400;
@oui-navbar-link-background-color: transparent;
@oui-navbar-link-background-color_active: @oui-color-foam;

@oui-navbar-arrow-color: @oui-color-zodiac;
@oui-navbar-arrow-padding: (@oui-navbar-menu-back-padding + @oui-navbar-arrow-spacing);
@oui-navbar-arrow-size: rem-calc(10);
@oui-navbar-arrow-spacing: rem-calc(20);

@oui-navbar-primary-font-color: @oui-color-white;
@oui-navbar-primary-font-color_active: @oui-color-turquoise;
@oui-navbar-primary-font-size: @oui-navbar-font-size_large;
@oui-navbar-primary-font-weight: 600;

@oui-navbar-secondary-font-color: @oui-color-ironlight;
@oui-navbar-secondary-font-color_active: @oui-color-white;
@oui-navbar-secondary-font-size: @oui-navbar-font-size_large;
@oui-navbar-secondary-font-weight: 400;

@oui-navbar-icon-line-height: 1;
@oui-navbar-icon-size: rem-calc(30);
@oui-navbar-icon-spacing: rem-calc(10);
@oui-navbar-icon-font-size: rem-calc(14);
@oui-navbar-icon-font-weight: 600;
@oui-navbar-icon-color: @oui-color-silver;
@oui-navbar-icon-color_active: @oui-color-white;

@oui-navbar-badge-size: rem-calc(16);
@oui-navbar-badge-padding: 0 rem-calc(5);
@oui-navbar-badge-font-color: @oui-color-white;
@oui-navbar-badge-font-size: rem-calc(12);
@oui-navbar-badge-font-weight: 600;
@oui-navbar-badge-left-spacing: rem-calc(24);
@oui-navbar-badge-radius: rem-calc(8);
@oui-navbar-badge-background-color: @oui-color-error-medium;

@oui-navbar-external-color: @oui-color-gothic;
@oui-navbar-external-size: rem-calc(14);
@oui-navbar-external-spacing: rem-calc(5);

// Numeric
@oui-numeric-margin: 0;
@oui-numeric-width: rem-calc(150);
@oui-numeric-icon-size: rem-calc(10);

// Pagination
@oui-pagination-font-size: rem-calc(16);
@oui-pagination-margin: 0 0 rem-calc(20);

@oui-pagination-progress-text-font-color: @oui-color-sapphire;

@oui-pagination-link-spacing: rem-calc(5);

@oui-pagination-selector-spacing: rem-calc(20);
@oui-pagination-selector-spacing_responsive: rem-calc(10);

@oui-pagination-button-padding: @oui-button-hollow-padding-base;
@oui-pagination-button-spacing: rem-calc(10);

@oui-pagination-button-selected-background: @oui-color-sapphire;
@oui-pagination-button-selected-color: @oui-color-white;

@oui-pagination-menu-padding: 0;

@oui-pagination-menu-group-color: @oui-color-shuttle;
@oui-pagination-menu-group-font-size: rem-calc(14);
@oui-pagination-menu-items-list-max-height: 5.5 * @oui-pagination-menu-item-line-height;

@oui-pagination-menu-item-padding: 0 rem-calc(20);
@oui-pagination-menu-item-line-height: rem-calc(30);
@oui-pagination-menu-item-font-color: @oui-color-sapphire;
@oui-pagination-menu-item-font-color_active: @oui-color-sapphire;
@oui-pagination-menu-item-font-color_disabled: @oui-color-dusty;
@oui-pagination-menu-item-font-size: rem-calc(16);
@oui-pagination-menu-item-background-color_active: @oui-color-foam;

// Password
@oui-password-margin: 0;
@oui-password-strength-spacing: rem-calc(5);
@oui-password-strength-score-height: rem-calc(8);
@oui-password-rule-spacing: rem-calc(5);
@oui-password-rule-font-size: rem-calc(14);
@oui-password-rule-color: @oui-color-sapphire;
@oui-password-rule-icon-font-size: rem-calc(14);
@oui-password-rule-icon-color: @oui-color-error-medium;

// Popover
@oui-popover-max-width: rem-calc(300);
@oui-popover-padding: rem-calc(20) rem-calc(30) rem-calc(20)  rem-calc(20);
@oui-popover-font-color: @oui-color-sapphire;
@oui-popover-font-size: rem-calc(14);
@oui-popover-background-color: @oui-color-white;
@oui-popover-border-color: @oui-color-silver;
@oui-popover-border-width: 1px;
@oui-popover-box-shadow: 0 4px 6px 0 @oui-color-info-fade;
@oui-popover-opacity: 1;
@oui-popover-transition-duration: 250ms;
@oui-popover-transition-animation: ease-in-out;
@oui-popover-z-index: 1000;

@oui-popover-arrow-margin: 4px;
@oui-popover-arrow-size: 8px;

@oui-popover-close-button-right: rem-calc(10);
@oui-popover-close-button-top: rem-calc(10);
@oui-popover-close-button-icon-size: rem-calc(12);
@oui-popover-close-button-icon-color: @oui-color-info-dark;

// Popover - Help button
@oui-popover-button-size: rem-calc(20);
@oui-popover-button-spacing: rem-calc(10);
@oui-popover-button-content: @oui-icon-index-help_circle;
@oui-popover-button-font-family: @oui-global-base-font-family-icon;
@oui-popover-button-font-color: @oui-color-sapphire;
@oui-popover-button-font-size: rem-calc(20);
@oui-popover-button-box-shadow_focus: @oui-button-hollow-box-shadow_focus;

// Progress
@oui-progress-height: rem-calc(12px);
@oui-progress-compact-size: rem-calc(16px);
@oui-progress-margin: rem-calc(10) 0;
@oui-progress-background-color: @oui-color-concrete;

@oui-progress-bar-text-font-size: rem-calc(14px);
@oui-progress-bar-compact-text-font-size: rem-calc(16px);
@oui-progress-bar-text-font-weight: 400;
@oui-progress-bar-text-color: @oui-color-shuttle;
@oui-progress-bar-text-spacing: rem-calc(5);

@oui-progress-threshold-width: 2px;
@oui-progress-threshold-background: @oui-color-white;
@oui-progress-threshold-foreground: rgba(100, 100, 100, 0.3);

// Progress - Variants
@oui-progress-info-foreground-color: @oui-color-info-medium;
@oui-progress-success-foreground-color: @oui-color-success-medium;
@oui-progress-warning-foreground-color: @oui-color-warning-light;
@oui-progress-error-foreground-color: @oui-color-error-medium;

// Progress Tracker
@oui-progress-tracker-margin: 0 0 rem-calc(20);
@oui-progress-tracker-step-spacing: rem-calc(30);
@oui-progress-tracker-connector-spacing: rem-calc(5);
@oui-progress-tracker-font-size: rem-calc(16);
@oui-progress-tracker-font-weight: @oui-font-regular;

@oui-progress-tracker-background-color: @oui-color-nurse;
@oui-progress-tracker-background-color_active: @oui-color-sapphire;
@oui-progress-tracker-background-color_complete: @oui-color-success-medium;
@oui-progress-tracker-background-color_error: @oui-color-error-dark;

@oui-progress-tracker-font-color: @oui-color-dusty;
@oui-progress-tracker-font-color_active: @oui-color-white;
@oui-progress-tracker-font-color_complete: @oui-color-white;
@oui-progress-tracker-font-color_error: @oui-color-white;

@oui-progress-tracker-label-color: @oui-color-silver;
@oui-progress-tracker-label-color_active: @oui-color-sapphire;
@oui-progress-tracker-label-color_complete: @oui-color-sapphire;
@oui-progress-tracker-label-color_error: @oui-color-error-dark;
@oui-progress-tracker-label-font-weight: @oui-font-semibold;
@oui-progress-tracker-label-line-height: 1.4;

@oui-progress-tracker-status-height: ~"calc(@{oui-progress-tracker-font-size} * 2)";
@oui-progress-tracker-status-spacing: rem-calc(10);
@oui-progress-tracker-status-font-family_complete: @oui-global-base-font-family-icon;
@oui-progress-tracker-status-font-family_error: @oui-global-base-font-family-icon;
@oui-progress-tracker-status-font-weight: @oui-font-semibold;
@oui-progress-tracker-status-font-size: rem-calc(20);
@oui-progress-tracker-status-font-size_complete: rem-calc(18);
@oui-progress-tracker-status-font-size_error: rem-calc(18);
@oui-progress-tracker-status-icon_complete: @oui-icon-index-ok_extra-thin;
@oui-progress-tracker-status-icon_error: @oui-icon-index-close_extra-thin;

// Radio
@oui-radio-min-height: @oui-choice-min-height;
@oui-radio-line-height: @oui-choice-line-height;
@oui-radio-font-size: @oui-choice-font-size;
@oui-radio-font-color: @oui-choice-font-color;
@oui-radio-font-color_disabled: @oui-choice-font-color_disabled;
@oui-radio-padding-left: @oui-choice-padding-left;

@oui-radio-description-spacing: @oui-choice-description-spacing;
@oui-radio-description-font-size: @oui-choice-description-font-size;

@oui-radio-inline-spacing: @oui-choice-inline-spacing;

// Radio - Custom icon
@oui-radio-icon-size: @oui-choice-icon-size;

@oui-radio-icon-background-color: @oui-choice-icon-background-color;
@oui-radio-icon-background-color_active: @oui-choice-icon-background-color_active;
@oui-radio-icon-background-color_disabled: @oui-choice-icon-background-color_disabled;

@oui-radio-icon-outer-color: @oui-choice-icon-outer-color;
@oui-radio-icon-outer-color_active: @oui-choice-icon-outer-color_active;
@oui-radio-icon-outer-color_disabled: @oui-choice-icon-outer-color_disabled;
@oui-radio-icon-outer-color_focus: @oui-choice-icon-outer-color_focus;
@oui-radio-icon-outer-color_hover: @oui-choice-icon-outer-color_hover;
@oui-radio-icon-outer-color_checked: @oui-choice-icon-outer-color_checked;
@oui-radio-icon-outer-color_checked-hover: @oui-choice-icon-outer-color_checked-hover;

@oui-radio-icon-inner-color: @oui-choice-icon-inner-color;
@oui-radio-icon-inner-color_active: @oui-choice-icon-inner-color_active;
@oui-radio-icon-inner-color_disabled: @oui-choice-icon-inner-color_disabled;

@oui-radio-box-shadow_focus: @oui-choice-box-shadow_focus;

// Radio - M Variant
@oui-radio-m-line-height: @oui-choice-m-line-height;
@oui-radio-m-font-size: @oui-choice-m-font-size;

@oui-radio-m-icon-size: @oui-choice-m-icon-size;

// Radio - Toggle group
@oui-ragio-toggle-group-max-width: rem-calc(300);
@oui-ragio-toggle-group-height: rem-calc(40);
@oui-ragio-toggle-group-padding: 0 rem-calc(20);
@oui-ragio-toggle-group-font-color: @oui-color-sapphire;
@oui-ragio-toggle-group-font-color_disabled: @oui-color-silver;
@oui-ragio-toggle-group-font-color_checked: @oui-color-white;
@oui-ragio-toggle-group-font-color_checked-disabled: @oui-color-dusty;
@oui-ragio-toggle-group-font-size: @oui-radio-font-size;
@oui-ragio-toggle-group-font-weight: @oui-font-semibold;
@oui-ragio-toggle-group-border-color: @oui-color-dusty;
@oui-ragio-toggle-group-border-width: 1px;
@oui-ragio-toggle-group-border-radius: @oui-global-base-radius;
@oui-radio-toggle-group-box-shadow: inset 0 3px 1px 0 @oui-color-nurse;
@oui-ragio-toggle-group-background-color: @oui-color-white;
@oui-ragio-toggle-group-background-color_hover: @oui-color-concrete;
@oui-ragio-toggle-group-background-color_disabled: @oui-color-concrete;
@oui-ragio-toggle-group-background-color_checked: @oui-color-sapphire;
@oui-ragio-toggle-group-background-color_checked-disabled: @oui-color-ironlight;

// Search
@oui-search-margin: 0;
@oui-search-padding-right: rem-calc(62);
@oui-search-border-radius: @oui-global-base-radius;

@oui-search-input-font-color_disabled: @oui-color-shuttle;

@oui-search-button-padding-x: rem-calc(10);
@oui-search-button-font-color_hover: @oui-color-sapphire;
@oui-search-button-font-color_disabled: @oui-color-silver;

@oui-search-reset-right: rem-calc(30);
@oui-search-reset-icon-size: rem-calc(12);

@oui-search-submit-right: 0;
@oui-search-submit-icon-size: rem-calc(20);

// Select
@oui-select-height: rem-calc(40);
@oui-select-margin: 0;
@oui-select-padding-x: rem-calc(12);
@oui-select-font-color: @oui-color-zodiac;
@oui-select-font-color_disabled: @oui-color-silver;
@oui-select-font-size: rem-calc(16);
@oui-select-font-weight: 600;
@oui-select-box-shadow: 1px 1px 0 0 rgba(18, 40, 68, 0.07);
@oui-select-box-shadow_focus: inset 1px 1px 2px 0 rgba(102, 199, 214, 0.5), 0 0 3px 0 rgba(0, 0, 0, 0.35);
@oui-select-border-color: @oui-color-silver;
@oui-select-border-color_focus: @oui-color-pacific;
@oui-select-border-color_disabled: @oui-color-concrete;
@oui-select-border-width: 1px;
@oui-select-border-radius: @oui-global-base-radius;
@oui-select-background-color: @oui-color-white;
@oui-select-background-color_focus: @oui-color-polar;
@oui-select-background-color_disabled: @oui-color-concrete;

@oui-select-icon-size: rem-calc(10);
@oui-select-icon-spacing: rem-calc(18);
@oui-select-icon-position-right: rem-calc(12);

// Select - Ui-Select
@oui-ui-select-margin: 0;

@oui-ui-select-button-height: rem-calc(40);
@oui-ui-select-button-line-height: rem-calc(36);
@oui-ui-select-button-letter-spacing: @oui-global-base-letter-spacing;
@oui-ui-select-button-font-color_disabled: @oui-button-hollow-font-color_disabled;
@oui-ui-select-button-font-color_error: @oui-button-error-text-color;
@oui-ui-select-button-font-weight: @oui-font-semibold;
@oui-ui-select-button-border-width: 1px;
@oui-ui-select-button-border-color_focus: @oui-color-dusty;
@oui-ui-select-button-border-color_disabled: @oui-button-hollow-border-color_disabled;
@oui-ui-select-button-border-color_error: @oui-button-error-border-color;
@oui-ui-select-button-background-color_focus: @oui-color-concrete;
@oui-ui-select-button-background-color_disabled: @oui-button-hollow-background-color_disabled;
@oui-ui-select-button-background-color_error: @oui-button-error-background-color;

@oui-ui-select-menu-min-width: @oui-dropdown-menu-min-width;
@oui-ui-select-menu-max-height: rem-calc(200);
@oui-ui-select-menu-padding: @oui-dropdown-menu-spacing 0;
@oui-ui-select-menu-box-shadow: @oui-dropdown-menu-box-shadow;
@oui-ui-select-menu-border-color: @oui-dropdown-menu-border-color;
@oui-ui-select-menu-border-width: @oui-dropdown-menu-border-width;
@oui-ui-select-menu-background-color: @oui-dropdown-menu-background-color;
@oui-ui-select-menu-zindex: @oui-dropdown-menu-zindex;

@oui-ui-select-item-line-height: @oui-dropdown-item-line-height;
@oui-ui-select-item-padding: @oui-dropdown-item-padding;
@oui-ui-select-item-font-color: @oui-dropdown-item-font-color;
@oui-ui-select-item-font-color_active: @oui-dropdown-item-font-color_active;
@oui-ui-select-item-font-color_disabled: @oui-dropdown-item-font-color_disabled;
@oui-ui-select-item-font-color_selected: @oui-dropdown-item-font-color;
@oui-ui-select-item-font-size: @oui-dropdown-item-font-size;
@oui-ui-select-item-font-weight: @oui-dropdown-item-font-weight;
@oui-ui-select-item-background-color: @oui-dropdown-item-background-color;
@oui-ui-select-item-background-color_active: @oui-dropdown-item-background-color_active;
@oui-ui-select-item-background-color_disabled: @oui-dropdown-item-background-color;
@oui-ui-select-item-background-color_selected: @oui-color-charlotte;

@oui-ui-select-item-icon-spacing-right: rem-calc(12);
@oui-ui-select-item-icon-size: inherit;
@oui-ui-select-item-icon-color: inherit;

@oui-ui-select-group-padding: rem-calc(4) rem-calc(20);
@oui-ui-select-group-font-color: @oui-ui-select-item-font-color;
@oui-ui-select-group-font-size: rem-calc(14);
@oui-ui-select-group-font-weight: @oui-ui-select-item-font-weight;

@oui-ui-select-item-grouped-padding-left: rem-calc(30);

@oui-ui-select-highlight-font-weight: @oui-font-bold;

// Select Picker
@oui-select-picker-padding: @oui-choice-thumbnail-padding;
@oui-select-picker-border-size: @oui-choice-thumbnail-border-size;
@oui-select-picker-border-color: @oui-choice-thumbnail-border-color;
@oui-select-picker-border-color_disabled: @oui-choice-thumbnail-border-color_disabled;

@oui-select-picker-label-color: @oui-choice-font-color;
@oui-select-picker-label-color_disabled: @oui-choice-font-color_disabled;

@oui-select-picker-picture-max-width: rem-calc(40);
@oui-select-picker-picture-max-height: rem-calc(40);
@oui-select-picker-picture-spacing: rem-calc(20);
@oui-select-picker-picture-top: rem-calc(10);
@oui-select-picker-picture-right: rem-calc(20);

@oui-select-picker-value-background-color: @oui-choice-thumbnail-background;
@oui-select-picker-value-background-color_light: @oui-choice-thumbnail-background-light;
@oui-select-picker-value-background-color_hover: @oui-dropdown-menu-background-color;
@oui-select-picker-value-background-color_checked: @oui-dropdown-menu-background-color;
@oui-select-picker-value-border-color: @oui-choice-thumbnail-border-color;
@oui-select-picker-value-border-color_light: @oui-choice-thumbnail-border-color;
@oui-select-picker-value-border-color_hover: @oui-choice-thumbnail-border-color;
@oui-select-picker-value-border-color_checked: @oui-choice-thumbnail-border-color;
@oui-select-picker-value-padding: @oui-choice-section-spacing;

// Sidebar
@oui-sidebar-font-size: rem-calc(16);
@oui-sidebar-font-color: @oui-color-info-light;
@oui-sidebar-font-color_responsive: @oui-color-sapphire;
@oui-sidebar-background-color: @oui-color-sapphire;
@oui-sidebar-background-color_responsive: @oui-color-white;
@oui-sidebar-z-index: 1020;
@oui-sidebar-transition-delay: 0.3s;

// Sidebar Menu
@oui-sidebar-menu-width: rem-calc(300);
@oui-sidebar-menu-padding: rem-calc(4) 0 0 0;
@oui-sidebar-menu-background-color: @oui-sidebar-background-color;
@oui-sidebar-menu-background-color_level-1: darken(@oui-sidebar-menu-background-color, 5%);
@oui-sidebar-menu-background-color_level-2: @oui-color-zodiac;
@oui-sidebar-menu-background-color_responsive: @oui-sidebar-background-color_responsive;
@oui-sidebar-menu-font-size_small: rem-calc(14);
@oui-sidebar-menu-font-color: @oui-sidebar-font-color;
@oui-sidebar-menu-font-color_responsive: @oui-sidebar-font-color_responsive;
@oui-sidebar-menu-box-shadow: 0 rem-calc(4) rem-calc(6) 0 @oui-sidebar-menu-box-shadow-color;
@oui-sidebar-menu-box-shadow-color: fade(darken(@oui-color-info-light, 50%), 25%);
@oui-sidebar-menu-z-index: @oui-sidebar-z-index + 1;

@oui-sidebar-menu-back-padding: rem-calc(30);

@oui-sidebar-menu-item-border-bottom: solid 1px #0a668d;
@oui-sidebar-menu-item-border-bottom_level-1: solid 1px @oui-sidebar-menu-background-color;
@oui-sidebar-menu-item-border-bottom_level-2: solid 1px @oui-sidebar-menu-background-color;

@oui-sidebar-menu-header-padding: rem-calc(11) rem-calc(20) rem-calc(15) rem-calc(20);
@oui-sidebar-menu-header-background-color: @oui-color-alabaster;
@oui-sidebar-menu-header-border-bottom: solid 1px @oui-color-nurse;

@oui-sidebar-menu-title-line-height: 1.2;
@oui-sidebar-menu-title-font-color: @oui-sidebar-menu-font-color_responsive;
@oui-sidebar-menu-title-font-size: rem-calc(20);
@oui-sidebar-menu-title-font-weight: 600;

@oui-sidebar-arrow-content: @oui-icon-index-chevron-down;
@oui-sidebar-arrow-content_active: @oui-icon-index-chevron-up;
@oui-sidebar-arrow-font-family: @oui-global-base-font-family-icon;
@oui-sidebar-arrow-color: @oui-color-info-medium;
@oui-sidebar-arrow-color_responsive: @oui-color-zodiac;
@oui-sidebar-arrow-padding: (@oui-sidebar-menu-back-padding + @oui-sidebar-arrow-spacing);
@oui-sidebar-arrow-size: rem-calc(10);
@oui-sidebar-arrow-spacing: rem-calc(20);

// Sidebar List
@oui-sidebar-list-max-height: 35vh;

// Sidebar Link
@oui-sidebar-link-min-height: rem-calc(40);
@oui-sidebar-link-line-height: 1.2;
@oui-sidebar-link-text-indent: rem-calc(10);
@oui-sidebar-link-padding-h: (@oui-sidebar-link-min-height - (@oui-sidebar-font-size * @oui-sidebar-link-line-height)) / 2;
@oui-sidebar-link-padding-v: rem-calc(20);
@oui-sidebar-link-padding: @oui-sidebar-link-padding-h @oui-sidebar-link-padding-v;
@oui-sidebar-link-font-color: @oui-sidebar-font-color;
@oui-sidebar-link-font-color_active: @oui-color-white;
@oui-sidebar-link-font-color_responsive: @oui-sidebar-font-color_responsive;
@oui-sidebar-link-font-size: rem-calc(16);
@oui-sidebar-link-font-weight: 400;
@oui-sidebar-link-background-color: transparent;
@oui-sidebar-link-background-color_responsive: transparent;
@oui-sidebar-link-background-color_active: @oui-color-foam;

// Skeleton
@oui-skeleton-background-color: @oui-color-concrete;
@oui-skeleton-background-image: linear-gradient(-90deg, @oui-color-concrete 0%, @oui-color-nurse 46%, @oui-color-nurse 61%, @oui-color-concrete 100%);
@oui-skeleton-background-size: 50% rem-calc(200);
@oui-skeleton-background-position: -200% 0;
@oui-skeleton-border-radius: @oui-skeleton-height;
@oui-skeleton-keyframes-background-position: 200% 0;
@oui-skeleton-height: rem-calc(8);
@oui-skeleton-sizes:
  xs rem-calc(75),
  s rem-calc(150),
  m rem-calc(250),
  l rem-calc(350),
  xl rem-calc(500),
  auto 100%;

// Slideshow
@oui-slideshow-width: rem-calc(370);
@oui-slideshow-width_responsive: 515px;
@oui-slideshow-height: rem-calc(515);
@oui-slideshow-height_responsive: 85vh;
@oui-slideshow-spacing: rem-calc(15) auto;
@oui-slideshow-border-radius: @oui-global-base-radius-medium;
@oui-slideshow-box-shadow: 0 10px 10px fade(@oui-color-shuttle, 25%);
@oui-slideshow-background-color: @oui-color-white;

@oui-slideshow-button-size: rem-calc(60);
@oui-slideshow-button-font-color: @oui-color-white;
@oui-slideshow-button-background-color: rgba(17, 63, 109, 0.5);
@oui-slideshow-button-background-color_hover: rgba(17, 63, 109, 0.75);

@oui-slideshow-loader-background-color: rgba(255, 255, 255, 0.6);
@oui-slideshow-header-height: rem-calc(40);
@oui-slideshow-panel-padding: rem-calc(20);
@oui-slideshow-indicators-height: rem-calc(50);

@oui-slideshow-indicator-size: rem-calc(8);
@oui-slideshow-indicator-size_active: rem-calc(10);
@oui-slideshow-indicator-opacity: 0.5;
@oui-slideshow-indicator-opacity_active: 1;
@oui-slideshow-indicator-border-radius: 50%;
@oui-slideshow-indicator-background-color: @oui-color-white;

@oui-slideshow-indicator-button-size: rem-calc(16);
@oui-slideshow-indicator-button-spacing: rem-calc(2);

// Slideshow - Theme Onboarding
@oui-slideshow-onboarding-min-height: 43.5%;
@oui-slideshow-onboarding-font-color: @oui-color-white;
@oui-slideshow-onboarding-background-color: @oui-color-pacific;

@oui-slideshow-onboarding-title-font-size: rem-calc(36);
@oui-slideshow-onboarding-title-line-height: 0.89;
@oui-slideshow-onboarding-title-letter-spacing: -0.5px;

@oui-slideshow-onboarding-text-line-height: 1.13;
@oui-slideshow-onboarding-text-spacing: rem-calc(20);
@oui-slideshow-onboarding-text-font-size: rem-calc(16);

// Spinner - S
@oui-spinner-s-background-image: url(data:image/svg+xml;base64, );
@oui-spinner-s-size: rem-calc(20);
@oui-spinner-s-spacing: 0;
@oui-spinner-s-speed-rotation: 800ms;
@oui-spinner-s-speed-scale: 300ms;

// Spinner - M
@oui-spinner-m-background-image: url(data:image/svg+xml;base64, );
@oui-spinner-m-size: rem-calc(40);
@oui-spinner-m-spacing: rem-calc(10);
@oui-spinner-m-speed-rotation: 800ms;
@oui-spinner-m-speed-scale: 266ms;

// Spinner - L
@oui-spinner-l-background-image: url(data:image/svg+xml;base64, );
@oui-spinner-l-size: rem-calc(140);
@oui-spinner-l-spacing: rem-calc(10);
@oui-spinner-l-speed-rotation: 1200ms;
@oui-spinner-l-speed-scale: 240ms;

// Status
@oui-status-line-height: 1.375;
@oui-status-max-width: rem-calc(200);
@oui-status-padding: rem-calc(4) rem-calc(10);
@oui-status-font-color: @oui-color-sapphire;
@oui-status-font-size: rem-calc(16);
@oui-status-font-weight: @oui-font-regular;
@oui-status-border: none;
@oui-status-border-radius: calc(@oui-status-font-size * @oui-status-line-height);
@oui-status-background-color: @oui-color-white;
@oui-status-background-color_success: @oui-color-success-fade;
@oui-status-background-color_info: @oui-color-info-fade;
@oui-status-background-color_warning: @oui-color-warning-fade;
@oui-status-background-color_error: @oui-color-error-fade;

// Stepper
@oui-stepper-margin: 0 0 rem-calc(20);
@oui-stepper-font-color: @oui-color-shuttle;
@oui-stepper-font-size: rem-calc(16);
@oui-stepper-font-weight: @oui-font-regular;

// Stepper Step
@oui-stepper-step-padding: rem-calc(20);
@oui-stepper-step-separator: 1px solid @oui-color-silver;
@oui-stepper-step-description-spacing: rem-calc(15);
@oui-stepper-step-loading-spacing: rem-calc(10);
@oui-stepper-step-container-padding-left: rem-calc(50);

@oui-stepper-step-bullet-background: @oui-color-sapphire;
@oui-stepper-step-bullet-background_complete: @oui-color-success-medium;
@oui-stepper-step-bullet-background_disabled: @oui-color-nurse2;
@oui-stepper-step-bullet-border-radius: 50%;
@oui-stepper-step-bullet-color: @oui-color-white;
@oui-stepper-step-bullet-color_complete: @oui-color-white;
@oui-stepper-step-bullet-color_disabled: @oui-color-dusty;
@oui-stepper-step-bullet-font-size: rem-calc(20);
@oui-stepper-step-bullet-font-weight: @oui-font-semibold;
@oui-stepper-step-bullet-size: rem-calc(30);
@oui-stepper-step-bullet-top: rem-calc(5);

@oui-stepper-step-bullet-icon-content_complete: @oui-icon-index-success;
@oui-stepper-step-bullet-icon-font-family: @oui-global-base-font-family-icon;
@oui-stepper-step-bullet-icon-font-weight: @oui-font-regular;

@oui-stepper-step-title-line-height: rem-calc(22);
@oui-stepper-step-title-color: @oui-color-sapphire;
@oui-stepper-step-title-color_complete: @oui-color-sapphire;
@oui-stepper-step-title-color_disabled: @oui-color-silver;
@oui-stepper-step-title-font-size: rem-calc(16);
@oui-stepper-step-title-font-weight: @oui-font-semibold;

@oui-stepper-step-optional-color: @oui-color-sapphire;
@oui-stepper-step-optional-color_disabled: @oui-color-silver;
@oui-stepper-step-optional-font-size: rem-calc(14);
@oui-stepper-step-optional-font-weight: @oui-font-regular;
@oui-stepper-step-optional-spacing: rem-calc(5);

// Switch
@oui-switch-width: rem-calc(54);
@oui-switch-height: rem-calc(24);
@oui-switch-background-color: @oui-color-nurse;
@oui-switch-background-color_checked: @oui-color-info-dark;
@oui-switch-background-color_disabled: @oui-color-ironlight;
@oui-switch-border-width: 2px;
@oui-switch-box-shadow: inset 0 1px 1px 0 rgba(63, 81, 103, 0.2);
@oui-switch-box-shadow_checked: inset 0 1px 1px 0 rgba(63, 81, 103, 0.2), 0 0 3px 1px rgba(0, 0, 0, 0.15);

@oui-switch-cursor-background-color: @oui-color-white;
@oui-switch-cursor-background-color_disabled: @oui-color-concrete;
@oui-switch-cursor-box-shadow: 0 1px 2px 0 @oui-color-silver;

// Tabs
@oui-tabs-tab-height: rem-calc(40);
@oui-tabs-tab-height_active: rem-calc(45);
@oui-tabs-tab-margin: 0 0 rem-calc(20);
@oui-tabs-tab-padding: 0 rem-calc(30);
@oui-tabs-tab-padding_active: 0 rem-calc(30) rem-calc(6) rem-calc(30);
@oui-tabs-tab-padding_mobile: 0 rem-calc(20);
@oui-tabs-tab-spacing: rem-calc(4);
@oui-tabs-tab-font-color: @oui-color-sapphire;
@oui-tabs-tab-font-size: rem-calc(16);
@oui-tabs-tab-font-weight: @oui-font-semibold;
@oui-tabs-tab-border: @oui-color-silver 1px solid;
@oui-tabs-tab-border-radius: @oui-global-base-radius;
@oui-tabs-tab-box-shadow: inset 0 2px 1px 0 @oui-color-nurse;
@oui-tabs-tab-box-shadow_hover: none;
@oui-tabs-tab-box-shadow_active: none;
@oui-tabs-tab-background-color: @oui-color-white;
@oui-tabs-tab-background-color_hover: @oui-color-concrete;
@oui-tabs-tab-background-color_active: @oui-color-white;

@oui-tabs-icon-size: rem-calc(12);
@oui-tabs-icon-spacing: rem-calc(10);
@oui-tabs-icon-color: @oui-color-silver;
@oui-tabs-icon-color_checked: @oui-color-atlantis;

@oui-tabs-tabpanel-padding: rem-calc(25) rem-calc(30);
@oui-tabs-tabpanel-padding_mobile: rem-calc(10) rem-calc(20) rem-calc(20) rem-calc(20);
@oui-tabs-tabpanel-border: @oui-tabs-tab-border;
@oui-tabs-tabpanel-border-radius: @oui-global-base-radius;
@oui-tabs-tabpanel-background-color: @oui-tabs-tab-background-color;

// Textarea
@oui-textarea-line-height: rem-calc(20);
@oui-textarea-margin: 0;
@oui-textarea-border-radius: @oui-global-base-radius;
@oui-textarea-font-size: rem-calc(16);
@oui-textarea-font-weight: 400;
@oui-textarea-font-color: @oui-color-sapphire;
@oui-textarea-font-color_disabled: @oui-color-dusty;
@oui-textarea-font-color_error: @oui-color-error-dark;
@oui-textarea-box-shadow: inset 2px 2px 1px 0 @oui-color-nurse;
@oui-textarea-box-shadow_focus: 0 0 3px 0 @oui-color-info-light, inset 2px 2px 1px 0 rgba(89, 210, 239, 0.35);
@oui-textarea-box-shadow_error: 0 0 3px 0 rgba(0, 0, 0, 0.35);
@oui-textarea-border-color: @oui-color-silver;
@oui-textarea-border-color_focus: @oui-color-pacific;
@oui-textarea-border-color_readonly: @oui-color-alabaster;
@oui-textarea-border-color_disabled: @oui-color-alabaster;
@oui-textarea-border-color_error: @oui-color-error-medium;
@oui-textarea-border-width: 1px;
@oui-textarea-background-color: @oui-color-white;
@oui-textarea-background-color_focus: @oui-color-polar;
@oui-textarea-background-color_readonly: @oui-color-alabaster;
@oui-textarea-background-color_disabled: @oui-color-alabaster;
@oui-textarea-background-color_error: @oui-color-error-fade;

@oui-textarea-selection-font-color: @oui-color-white;
@oui-textarea-selection-font-color_error: @oui-color-white;
@oui-textarea-selection-background-color: @oui-color-pacific;
@oui-textarea-selection-background-color_error: @oui-color-error-dark;

@oui-textarea-field-padding: rem-calc(14) rem-calc(19);

@oui-textarea-footer-padding: rem-calc(4) rem-calc(9);
@oui-textarea-footer-font-size: rem-calc(14);
@oui-textarea-footer-color: @oui-color-shuttle;

// Tile
@oui-tile-margin: 0;
@oui-tile-padding: rem-calc(27) rem-calc(24) rem-calc(46);
@oui-tile-background-color: @oui-color-white;
@oui-tile-background-color_hover: @oui-color-concrete;
@oui-tile-border-color: @oui-color-ironlight;
@oui-tile-border-width: 1px;
@oui-tile-border-radius: @oui-global-base-radius;
@oui-tile-box-shadow: 0 4px 6px rgba(0, 0, 0, 0.06);

@oui-tile-title-color: @oui-color-fiord;
@oui-tile-title-padding: 0 0 rem-calc(10) 0;
@oui-tile-title-font-weight: @oui-font-semibold;

@oui-tile-button-color: @oui-color-pacific;
@oui-tile-button-font-weight: @oui-font-semibold;

@oui-tile-item-side-spacing: rem-calc(24);
@oui-tile-item-top-spacing: rem-calc(13);
@oui-tile-item-border-color: @oui-color-nurse;
@oui-tile-item-border-width: 1px;

@oui-tile-definition-term-color: @oui-color-dusty;
@oui-tile-definition-term-font-size: rem-calc(14);
@oui-tile-definition-term-font-weight: @oui-font-regular;
@oui-tile-definition-description-color: @oui-color-rhino;
@oui-tile-definition-description-font-size: rem-calc(16);

// Timepicker
@oui-timepicker-margin: @oui-input-margin;

// Tooltip
@oui-tooltip-min-width: rem-calc(50);
@oui-tooltip-max-width: rem-calc(300);
@oui-tooltip-margin: rem-calc(10) 0;
@oui-tooltip-margin_small: rem-calc(5) 0;
@oui-tooltip-padding: rem-calc(10) rem-calc(20);
@oui-tooltip-font-size: rem-calc(14);
@oui-tooltip-font-color: @oui-color-sapphire;
@oui-tooltip-box-shadow: 0 rem-calc(9) rem-calc(10) 0 fade(darken(@oui-color-info-fade, 50%), 10%);
@oui-tooltip-border-color: @oui-color-silver;
@oui-tooltip-border-size: 1px;
@oui-tooltip-background-color: @oui-color-white;
@oui-tooltip-opacity: 1;
@oui-tooltip-transition-duration: 250ms;
@oui-tooltip-transition-animation: ease-in-out;
@oui-tooltip-z-index: 1000;

