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

// IE 10/11 Media Query hack
$media-ie11-hack: screen and (-ms-high-contrast: active),
  (-ms-high-contrast: none);

// $typography: (

@mixin typography($size, $height, $spacing, $color, $weight: normal) {
  color: $color;
  font-size: $size;
  line-height: $height;
  letter-spacing: $spacing;
  font-weight: $weight;
}

$typography-lg-font-size: 22px;
$typography-lg-line-height: 32px;
$typography-lg-letter-spacing: 0.15px;

@mixin typography-lg($color, $weight: 500) {
  @include typography(
    $typography-lg-font-size,
    $typography-lg-line-height,
    $typography-lg-letter-spacing,
    $color,
    $weight
  );
}

$typography-md-font-size: 16px;
$typography-md-line-height: 24px;
$typography-md-letter-spacing: 0.15px;

@mixin typography-md($color, $weight: 400) {
  @include typography(
    $typography-md-font-size,
    $typography-md-line-height,
    $typography-md-letter-spacing,
    $color,
    $weight
  );
}

$typography-sm-font-size: 14px;
$typography-sm-line-height: 20px;
$typography-sm-letter-spacing: 0.25px;

@mixin typography-sm($color, $weight: 500) {
  @include typography(
    $typography-sm-font-size,
    $typography-sm-line-height,
    $typography-sm-letter-spacing,
    $color,
    $weight
  );
}

$typography-table-font-size: 13px;
$typography-table-line-height: 20px;
$typography-table-letter-spacing: 0.25px;

@mixin typography-table($color, $weight: 500) {
  @include typography(
    $typography-table-font-size,
    $typography-table-line-height,
    $typography-table-letter-spacing,
    $color,
    $weight
  );
}

$typography-xs-font-size: 12px;
$typography-xs-line-height: 16px;
$typography-xs-letter-spacing: 0.4px;

@mixin typography-xs($color, $weight: 400) {
  @include typography(
    $typography-xs-font-size,
    $typography-xs-line-height,
    $typography-xs-letter-spacing,
    $color,
    $weight
  );
}

@function spacing($size) {
  @if map-has-key($spacing-scale, $size) {
    @return map-get($spacing-scale, $size);
  }

  @warn 'No size found for `#{$size}` in $spacing-scale map. Property omitted.';
  @return null;
}

// Spacing Scale
$spacing-scale: (
  xs: 4px,
  sm: 8px,
  md: 12px,
  lg: 16px,
  xl: 24px,
  xxl: 32px,
);

// Sass converts hsl() to hex, it's a lossy conversion
// see: https://github.com/sass/sass/issues/469

@function hsl-override($h, $s, $l) {
  @return unquote("hsl(#{$h}, #{$s}, #{$l})");
}

$core-black: black;
$core-white: white;
$core-orange-10: hsl-override(19, 100%, 10%);
$core-orange-15: hsl-override(19, 100%, 15%);
$core-orange-20: hsl-override(19, 100%, 20%);
$core-orange-30: hsl-override(19, 100%, 30%);
$core-orange-40: hsl-override(19, 100%, 40%);
$core-orange-45: hsl-override(19, 100%, 45%);
$core-orange-50: hsl-override(19, 100%, 50%);
$core-orange-60: hsl-override(19, 100%, 60%);
$core-orange-70: hsl-override(19, 100%, 70%);
$core-orange-85: hsl-override(19, 100%, 85%);
$core-orange-90: hsl-override(19, 100%, 90%);
$core-orange-94: hsl-override(19, 100%, 94%);
$core-orange-96: hsl-override(19, 100%, 96%);
$core-orange-98: hsl-override(19, 100%, 98%);
$core-blue-10: hsl-override(218, 75%, 10%);
$core-blue-15: hsl-override(218, 75%, 15%);
$core-blue-20: hsl-override(218, 75%, 20%);
$core-blue-30: hsl-override(218, 75%, 30%);
$core-blue-40: hsl-override(218, 75%, 40%);
$core-blue-45: hsl-override(218, 75%, 45%);
$core-blue-50: hsl-override(218, 75%, 50%);
$core-blue-60: hsl-override(218, 75%, 60%);
$core-blue-70: hsl-override(218, 75%, 70%);
$core-blue-85: hsl-override(218, 75%, 85%);
$core-blue-90: hsl-override(218, 75%, 90%);
$core-blue-94: hsl-override(218, 75%, 94%);
$core-blue-96: hsl-override(218, 75%, 96%);
$core-blue-98: hsl-override(218, 75%, 98%);
$core-red-10: hsl-override(358, 80%, 10%);
$core-red-15: hsl-override(358, 80%, 15%);
$core-red-20: hsl-override(358, 80%, 20%);
$core-red-30: hsl-override(358, 80%, 30%);
$core-red-40: hsl-override(358, 80%, 40%);
$core-red-45: hsl-override(358, 80%, 45%);
$core-red-50: hsl-override(358, 80%, 50%);
$core-red-60: hsl-override(358, 80%, 60%);
$core-red-70: hsl-override(358, 80%, 70%);
$core-red-85: hsl-override(358, 80%, 85%);
$core-red-90: hsl-override(358, 80%, 90%);
$core-red-94: hsl-override(358, 80%, 94%);
$core-red-96: hsl-override(358, 80%, 96%);
$core-red-98: hsl-override(358, 80%, 98%);
$core-yellow-10: hsl-override(50, 100%, 10%);
$core-yellow-15: hsl-override(50, 100%, 15%);
$core-yellow-20: hsl-override(50, 100%, 20%);
$core-yellow-30: hsl-override(50, 100%, 30%);
$core-yellow-40: hsl-override(50, 100%, 40%);
$core-yellow-45: hsl-override(50, 100%, 45%);
$core-yellow-50: hsl-override(50, 100%, 50%);
$core-yellow-60: hsl-override(50, 100%, 60%);
$core-yellow-70: hsl-override(50, 100%, 70%);
$core-yellow-85: hsl-override(50, 100%, 85%);
$core-yellow-90: hsl-override(50, 100%, 90%);
$core-yellow-94: hsl-override(50, 100%, 94%);
$core-yellow-96: hsl-override(50, 100%, 96%);
$core-yellow-98: hsl-override(50, 100%, 98%);
$core-green-10: hsl-override(117, 70%, 10%);
$core-green-15: hsl-override(117, 70%, 15%);
$core-green-20: hsl-override(117, 70%, 20%);
$core-green-30: hsl-override(117, 70%, 30%);
$core-green-40: hsl-override(117, 70%, 40%);
$core-green-45: hsl-override(117, 70%, 45%);
$core-green-50: hsl-override(117, 70%, 50%);
$core-green-60: hsl-override(117, 70%, 60%);
$core-green-70: hsl-override(117, 70%, 70%);
$core-green-85: hsl-override(117, 70%, 85%);
$core-green-90: hsl-override(117, 70%, 90%);
$core-green-94: hsl-override(117, 70%, 94%);
$core-green-96: hsl-override(117, 70%, 96%);
$core-green-98: hsl-override(117, 70%, 98%);
$core-purple-10: hsl-override(288, 34%, 10%);
$core-purple-15: hsl-override(288, 34%, 15%);
$core-purple-20: hsl-override(288, 34%, 20%);
$core-purple-30: hsl-override(288, 34%, 30%);
$core-purple-40: hsl-override(288, 34%, 40%);
$core-purple-45: hsl-override(288, 34%, 45%);
$core-purple-50: hsl-override(288, 34%, 50%);
$core-purple-60: hsl-override(288, 34%, 60%);
$core-purple-70: hsl-override(288, 34%, 70%);
$core-purple-85: hsl-override(288, 34%, 85%);
$core-purple-90: hsl-override(288, 34%, 90%);
$core-purple-94: hsl-override(288, 34%, 94%);
$core-purple-96: hsl-override(288, 34%, 96%);
$core-purple-98: hsl-override(288, 34%, 98%);
$core-gray-10: hsl-override(200, 8%, 10%);
$core-gray-15: hsl-override(200, 8%, 15%);
$core-gray-20: hsl-override(200, 8%, 20%);
$core-gray-30: hsl-override(200, 8%, 30%);
$core-gray-40: hsl-override(200, 8%, 40%);
$core-gray-45: hsl-override(200, 8%, 45%);
$core-gray-50: hsl-override(200, 8%, 50%);
$core-gray-60: hsl-override(200, 8%, 60%);
$core-gray-70: hsl-override(200, 8%, 70%);
$core-gray-85: hsl-override(200, 8%, 85%);
$core-gray-90: hsl-override(200, 8%, 90%);
$core-gray-94: hsl-override(200, 8%, 94%);
$core-gray-96: hsl-override(200, 8%, 96%);
$core-gray-98: hsl-override(200, 8%, 98%);

// We can't use our variables in other functions, so have to
// create the color here.  Actual color: core-gray-10, alpha 60
$modal-overlay-background: unquote("hsla(200, 8%, 10%, 0.6)");

// Color Palette

@function color-palette($color, $tone: 70) {
  @return map-get(map-get($colors, $color), $tone);
}

/* stylelint-disable color-no-hex */
$colors: (
  black: (
    70: #000000,
  ),
  white: (
    70: #ffffff,
  ),
  gray: (
    100: #1a1a1a,
    95: #282828,
    90: #333333,
    80: #4d4d4d,
    75: #707070,
    70: #808080,
    60: #b3b3b3,
    55: #bfbfbf,
    50: #d9d9d9,
    40: #e6e6e6,
    30: #f0f0f0,
    20: #f5f5f5,
    10: #fafafa,
  ),
  orange: (
    70: #e36937,
    60: #f47e42,
  ),
  yellow: (
    80: #c29816,
    70: #d6ab27,
    10: #fffde2,
  ),
  red: (
    70: #d62c2f,
    20: #fff3f3,
  ),
  green: (
    70: #0b8626,
    10: #f1fff1,
  ),
  teal: (
    50: #00818d,
  ),
  blue: (
    85: #003aa1,
    70: #1e519f,
    65: #006ddf,
    50: #3397ff,
    20: #dcedff,
    10: #f0f6fe,
  ),
  purple: (
    80: #84286b,
    60: #5200a2,
    50: #7400e6,
  ),
);
/* stylelint-enable color-no-hex */

// Shadow Scale
@function shadow($level) {
  @if map-has-key($shadow-map, $level) {
    @return map-get($shadow-map, $level);
  }

  @warn 'No size found for `#{$level}` in $shadow-map map. Property omitted.';
  @return null;
}

$shadow-10: -4px 0 5px rgba(112, 112, 112, 0.1);
$shadow-15: 0px -5px 12px rgba(0, 0, 0, 0.05);
$shadow-20: 0 1px 2px rgba(0, 0, 0, 0.2), 0 1px 3px rgba(0, 0, 0, 0.1);
$shadow-30: 0 1px 4px rgba(40, 40, 40, 0.2), 0 0 3px rgba(40, 40, 40, 0.14),
  0 2px 3px rgba(40, 40, 40, 0.12);
$shadow-40: 0 3px 6px rgba(0, 0, 0, 0.23), 0 3px 6px rgba(0, 0, 0, 0.16);
$shadow-50: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.26);

$shadow-map: (
  10: $shadow-10,
  15: $shadow-15,
  20: $shadow-20,
  30: $shadow-30,
  40: $shadow-40,
  50: $shadow-50,
);

//Dropdowns
$dropdowns-icon-color-active: $core-gray-15;
$dropdowns-icon-color-disabled: $core-gray-70;
$dropdowns-icon-color-hover: $core-gray-15;
$dropdowns-icon-color: $core-gray-45;
$dropdowns-options-padding: spacing(sm) 0;

//Transistion
$default-trans: all 0.2s ease-in;

$sidebarWidth: 264px;

//Standard border radius used in app
$default-border-radius: 4px;

//Shadows
$card-shadow: shadow(20);
$card-shadow-hover: shadow(40);

// Badges
$badge-color-trial: $core-purple-45;
$badge-text-color: $core-white;
$badge-color-default: $core-white;

//Buttons
$button-sm-font-size: $typography-xs-font-size;
$button-md-font-size: $typography-sm-font-size;
$button-lg-font-size: $typography-sm-font-size;
$button-sm-height: 24px;
$button-md-height: 36px;
$button-lg-height: 36px;
$button-sm-line-height: $typography-xs-line-height;
$button-md-line-height: $typography-sm-line-height;
$button-lg-line-height: $typography-sm-line-height;
$button-sm-padding: 0 spacing(sm);
$button-md-padding: 0 spacing(md);
$button-lg-padding: 0 spacing(md);
$button-base-border-radius: 4px;
$button-base-border-style: solid;
$button-base-border-width: 1px;
$button-base-cursor: pointer;
$button-dropdown-active-border: $core-gray-70;
$button-dropdown-arrow: $core-gray-45;
$button-dropdown-border: $core-gray-85;
$button-dropdown-color: $core-gray-15;
$button-dropdown-disabled-arrow: $core-gray-70;
$button-dropdown-disabled-border: $core-gray-96;
$button-dropdown-disabled-color: $core-gray-70;
$button-dropdown-disabled-fill: $core-white;
$button-dropdown-fill: $core-white;
$button-dropdown-hover-border: $core-gray-85;
$button-dropdown-hover-color: $core-gray-15;
$button-dropdown-hover-fill: $core-white;
$button-dropdown-width: 248px;
$button-focus-border-color: $core-blue-50;
$button-focus-box-shadow: 0 0 0 2px $core-blue-94;
$button-font-weight: 400;
$button-form-fill: $core-gray-40;
$button-form-hover-fill: $core-gray-30;
$button-letter-spacing: 0;
$button-primary-color: $core-white;
$button-primary-fill: $core-orange-50;
$button-primary-disabled-fill: $core-gray-85;
$button-primary-hover-fill: $core-orange-45;
$button-primary-letter-spacing: 0.25px;
$button-secondary-color: $button-dropdown-color;
$button-secondary-disabled-color: $core-gray-70;
$button-secondary-hover-color: $button-dropdown-color;
$button-secondary-border: $core-gray-85;
$button-secondary-disabled-border-color: $button-secondary-border;
$button-secondary-fill: $core-white;
$button-secondary-hover-fill: $core-gray-96;
$button-tertiary-color: $button-dropdown-color;
$button-tertiary-disabled-color: $core-gray-70;
$button-tertiary-fill: transparent;
$button-tertiary-hover-border: $core-gray-85;
$button-tertiary-hover-fill: $core-gray-50;

// Calendar
$calendar-cell-height: 36px;

// Dropzone
$dropzone-message-color: $core-gray-45;
$dropzone-message-disable-color: $core-gray-70;
$dropzone-error-message-color: $core-gray-15;
$dropzone-upload-button-background-color: $core-white;
$dropzone-icon-color: $core-gray-45;
$dropzone-icon-hover-color: $core-blue-50;
$dropzone-icon-disable-color: $core-gray-85;
$dropzone-border: 2px dashed $core-gray-70;
$dropzone-disable-border: 2px dashed $core-gray-85;
$dropzone-hover-border: 2px dashed $core-blue-50;
$dropzone-background-color: $core-gray-96;
$dropzone-background-hover-color: $core-blue-96;
$dropzone-background-disable-color: $core-gray-98;
// (WXP) Detail Layout
$detail-layout-component-background: $core-white;
$detail-layout-min-width: 768px;
$detail-layout-background: $core-gray-96;
$detail-layout-body-max-width-md: 792px;
$detail-layout-body-max-width-lg: 1120px;
$detail-layout-body-max-width-xl: 1440px;
$detail-layout-body-max-width-block: 100%;
$detail-layout-body-min-width: 736px;
$detail-layout-section-content-min-width: 640px;
$detail-layout-section-collapse-button-margin: 8px;
$detail-layout-section-collapse-button-width: $button-md-height;
$detail-layout-section-content-min-margin: $detail-layout-section-collapse-button-width +
  ($detail-layout-section-collapse-button-margin * 2);
$detail-layout-section-divide-color: $core-gray-85;
$detail-layout-footer-height: 64px;

// Empty State
$empty-state-margin-top: 96px;
$empty-state-margin-bottom: 64px;
$empty-state-width: 440px;
$empty-state-width-compact: 352px;

// Field

$field-error-border: 1px solid $core-red-50;
$field-error-background-color: $core-red-98;
$field-focus-background-color: $core-white;
$field-focus-border: 1px solid $core-blue-50;

//Tabs
$tab-font-color: $core-gray-45;
//Tab Link
$tab-link-border-color-active: $core-orange-50;
$tab-link-border-color-inactive: transparent;
$tab-link-border-style: solid;
$tab-link-border-width: 2px;
$tab-link-border-settings-inactive: $tab-link-border-width
  $tab-link-border-style $tab-link-border-color-inactive;
$tab-link-cursor: pointer;
$tab-link-dropdown-menu-offset-right: 0;
$tab-link-dropdown-menu-width: 150%;
$tab-link-font-color-active-hover: $core-gray-15;
$tab-link-font-size: 14px;
$tab-link-height: 26px;
$tab-link-letter-spacing: 0.25px;
$tab-link-line-height: 20px;
//Tab Tab
$tab-tab-padding: 0px spacing(md);

//Lists
$menu-item-padding-vertical: 4px;
$menu-item-padding-horizontal: 16px;
$menu-item-font-size: 14px;
$menu-item-line-height: 20px;
$menu-item-letter-spacing: 0.25px;
$menu-group-font-weight: 700;
$menu-item-font-weight: 400;
$menu-item-color: $core-gray-15;
$menu-item-hover-color: $core-gray-96;
$menu-item-selected-color: $core-blue-50;
$menu-item-disabled-color: $core-gray-85;
$menu-footer-border-top-color: $core-gray-85;

//Modal
$modal-button-margin-left: 8px;
$modal-header-text-color: $core-gray-15;
$modal-header-font-size: 22px;
$modal-header-font-weight: 500;
$modal-header-letter-spacing: 0.15px;
$modal-header-line-height: 32px;
$modal-icon-warning: $core-yellow-45;
$modal-padding-horizontal: 48px;
$modal-padding-horizontal-plus-icon: 86px;
$modal-padding-vertical-inner: 24px;
$modal-margin-body: $modal-padding-vertical-inner 0;
$modal-padding-vertical-outer: 32px;
$modal-padding-body: 0 $modal-padding-horizontal;
$modal-padding-footer: $modal-padding-vertical-inner $modal-padding-horizontal
  $modal-padding-vertical-outer $modal-padding-horizontal;
$modal-padding-header: $modal-padding-vertical-outer
  $modal-padding-horizontal-plus-icon $modal-padding-vertical-inner
  $modal-padding-horizontal;
$modal-dismiss-color: $core-gray-50;
$modal-dismiss-hover-background: $core-gray-50;
$modal-dismiss-hover-text-color: $core-white;
$modal-dismiss-icon-size: 24px;

//Notation
$notation-text-color: $core-black;
$notation-required-text-color: $core-orange-50;
$notation-error-text-color: $core-red-50;
$notation-pagination-text-color: $core-gray-45;

//Spinner
$spinner-container-min-height: 150px;
$spinner-container-max-height: 400px;
$spinner-height: 100px;
$spinner-width: 100px;
$spinner-label-font-size: 10px;
$spinner-label-height: 20px;
$spinner-label-width: 100px;
$spinner-label-line-height: 20px;
$spinner-label-text-transform: uppercase;
$spinner-label-text-align: center;
$spinner-label-letter-spacing: 1.2px;
$spinner-transition: 0.5s ease;
$spinner-small-container-min-height: 100px;
$spinner-small-height: 50px;
$spinner-small-width: 50px;
$spinner-overlay-background-color: $core-white;
$spinner-circle-background-color: $core-gray-90;
$spinner-circle-background-filled-color: $core-blue-50;
$spinner-circle-border-width-lg: spacing(xs);
$spinner-circle-light-background-color: $core-white;
$spinner-circle-size-lg: 48px;

//Inputs
$input-text-color: $core-gray-15;
$input-background-color: $core-white;
$input-font-size: 14px;
$input-height: 36px;
$input-border-color: $core-gray-85;
$input-placeholder-color: $core-gray-70;
$input-focus-border-color: $core-blue-50;
$input-focus-background-color: $core-white;
$input-focus-box-shadow: 0 0 0 2px $core-blue-94;
$input-focus-color: $core-gray-15;
$input-disabled-text-color: $core-gray-70;
$input-disabled-border-color: $core-gray-96;
$input-error-border-color: $core-red-50;
$input-error-background-color: $core-red-98;
$input-textarea-border-style: solid;
$input-textarea-border-radius: $default-border-radius;
$input-textarea-border-width: 1px;
$input-textarea-border-settings: $input-textarea-border-width
  $input-textarea-border-style $input-border-color;
$input-textarea-border-settings-error: $input-textarea-border-width
  $input-textarea-border-style $input-error-border-color;
$input-textarea-letter-spacing: 0.25px;
$input-textarea-line-height: 20px;
$input-textarea-padding: spacing(sm) spacing(md);
$input-textarea-height: 64px;

//Icon
$icon-hover-fill-color: $core-black;
$icon-hover-circle-bgcolor: $core-gray-50;
$icon-hover-circle-color: $core-white;
$icon-layout-icon-color: $core-gray-45;
$icon-layout-icon-color-disabled: $core-gray-70;
$icon-layout-icons-margin-right: 8px;

//Tokens
$token-background-color: $core-blue-50;
$token-hover-background-color: $core-blue-40;
$token-icon-color: $core-white;
$token-icon-disabled: $core-gray-70;
$token-icon-hover-background-color: $core-white;
$token-icon-size: 16px;
$token-label-color: $core-white;
$token-label-font-size: 13px;

//File Token
$file-token-color: $core-blue-30;
$file-token-background-color: $core-gray-96;
$file-token-complete-color: $core-white;
$file-token-loading-color: $core-white;
$file-token-complete-background-color: $core-blue-40;
$file-token-hover-background-color: $core-blue-30;
$file-token-error-background-color: $core-red-50;
$file-token-focus-shadow: 0 0 0 1px $core-blue-50, 0 0 0 3px $core-blue-94;

//Loader
$loader-grid-unit: spacing(sm);
$loader-gradient-color-one: $core-blue-50;
$loader-gradient-color-two: $core-blue-40;

//Progress Bar
$progress-bar-background-color: $core-gray-94;
$progress-bar-complete-background-color: $core-blue-50;

//Segmented Controller
$segmented-controller-height: 36px;
$segmented-controller-font-size: 14px;
$segmented-controller-line-height: 14px;
$segmented-controller-font-weight: 400;
$segmented-controller-color: $core-gray-50;
$segmented-controller-background-color: $core-white;
$segmented-controller-hover-background-color: $core-white;
$segmented-controller-hover-border-color: $core-blue-50;
$segmented-controller-border-color: $core-gray-85;
$segmented-controller-active-background-color: $core-blue-40;
$segmented-controller-active-color: $core-white;
$segmented-controller-active-border-color: $core-blue-40;
$segmented-controller-disabled-background-color: transparent;
$segmented-controller-disabled-color: $core-gray-85;
$segmented-controller-disabled-border-color: $core-gray-85;
$segmented-controller-selected-disabled-background-color: $core-gray-85;
$segmented-controller-selected-disabled-color: $core-white;

// Switch
$switch-transition: 0.2s;

//Avatar
$avatar-background-color: $core-gray-30;
$avatar-background-size-xl: 96px;
$avatar-background-size-lg: 40px;
$avatar-background-size-md: 32px;
$avatar-font-size-xl: 40px;
$avatar-font-size-lg: 14px;
$avatar-font-size-md: 14px;
$avatar-text-color: $core-white;
$avatar-text-transform: uppercase;

//Tooltip
$tooltip-text-color: $core-white;
$tooltip-background-color: rgba(19, 31, 51, 0.9);
$tooltip-font-size: 11px;
$tooltip-line-height: 16px;
$tooltip-arrow-size: 6px;
$tooltip-webkit-dropshadow: drop-shadow(0px 3px 2px rgba(0, 0, 0, 0.23))
  drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.16));
$tooltip-ms-dropshadow: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=3, Color='#000')";

//Popover
$popover-text-color: $core-black;
$popover-background-color: $core-white;
$popover-arrow-color: $core-white;
$popover-arrow-size: 6px;
$popover-webkit-dropshadow: drop-shadow(0px 3px 2px rgba(0, 0, 0, 0.23))
  drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.16));
$popover-ms-dropshadow: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=3, Color='#000')";
// Blur and spread are calculated differently between box-shadow and drop-shadown.
// That's why the box-shadow values are different from those in the variables
$popover-ms-boxshadow: 0px 3px 6px rgba(0, 0, 0, 0.23),
  0px 3px 18px rgba(0, 0, 0, 0.16);

//Toast
$toast-text-color: $core-white;
$toast-background-color-error: $core-red-50;
$toast-background-color-success: $core-green-30;
$toast-box-shadow: shadow(50);
$toast-font-size: 15px;
$toast-three-line-height: 52px;
$toast-three-line-spacing: 75px;

//Banners
$banner-text-color: $core-gray-15;
$banner-dismiss-color: $core-gray-15;
$banner-dismiss-disabled-color: $core-gray-85;
$banner-accent-color-error: $core-red-50;
$banner-background-color-error: $core-red-98;
$banner-accent-color-success: $core-green-30;
$banner-background-color-success: $core-green-96;
$banner-accent-color-action: $core-yellow-40;
$banner-background-color-action: $core-yellow-94;
$banner-accent-color-info: $core-blue-40;
$banner-background-color-info: $core-blue-96;
$banner-expand-panel-background-color: $core-white;
$banner-multiple-action-color: $core-gray-15;
$banner-multiple-action-hover-color: $core-white;
$banner-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1),
  0 1px 2px 0 rgba(0, 0, 0, 0.2);
$banner-title-font-size: 14px;
$banner-body-font-size: 14px;
$banner-body-line-height: 16px;
$banner-icon-font-size: 24px;
$banner-expand-animation-duration: 450ms;

//Breadcrumbs
$breadcrumbs-text-color: $core-gray-50;
$breadcrumbs-crumb-text-color: $core-gray-45;
$breadcrumbs-crumb-hover-color: $core-gray-45;
$breadcrumbs-crumb-active-color: $core-gray-15;

//Card
$card-background-color: $core-white;
$card-border-radius: $default-border-radius;

//Checkbox
$checkbox-track-background-color: $core-white;
$checkbox-track-border-color: $core-gray-70;
$checkbox-track-border-style: solid;
$checkbox-track-border-width: 2px;
$checkbox-track-border-settings: $checkbox-track-border-width
  $checkbox-track-border-style $checkbox-track-border-color;
$checkbox-track-border-radius: 2px;
$checkbox-track-checked-background-color: $core-blue-50;
$checkbox-track-checked-border-color: $checkbox-track-checked-background-color;
$checkbox-track-checked-color: $core-white;
$checkbox-track-indeterminate-background-color: $checkbox-track-checked-background-color;
$checkbox-track-indeterminate-border-color: $checkbox-track-checked-border-color;
$checkbox-track-indeterminate-color: $checkbox-track-checked-color;
$checkbox-track-disabled-background-color: $core-white;
$checkbox-track-disabled-border-color: $core-gray-85;
$checkbox-track-checked-disabled-background-color: $core-gray-85;
$checkbox-track-checked-disabled-border-color: $checkbox-track-checked-disabled-background-color;
$checkbox-track-error-border-color: $core-red-50;
$checkbox-track-label-padding-left: 26px;
$checkbox-track-size: 20px;
$checkbox-track-size-checked: 24px;
$checkbox-track-spacing-vertical: spacing(md);
$checkbox-toggle-checked-color: $core-white;
$checkbox-toggle-indeterminate-color: $checkbox-toggle-checked-color;

//Radio Button
$radio-button-track-align-items: flex-start;
$radio-button-track-background-color: $core-white;
$radio-button-track-button-size: 20px;
$radio-button-track-border-color: $core-gray-70;
$radio-button-track-border-color-focus: $input-focus-border-color;
$radio-button-track-border-style: solid;
$radio-button-track-border-width: 2px;
$radio-button-track-border-width-checked: 6px;
$radio-button-track-box-shadow-focus: $input-focus-box-shadow;
$radio-button-track-checked-border-color: $core-blue-50;
$radio-button-track-disabled-border-color: $core-gray-85;
$radio-button-track-error-border-color: $core-red-50;
$radio-button-track-margin-right: spacing(sm);
$radio-button-track-margin-vertical: spacing(md);

//Switch
$switch-track-background-color: $core-gray-70;
$switch-track-checked-background-color: $core-blue-50;
$switch-track-disabled-background-color: $core-white;
$switch-track-checked-disabled-background-color: $core-gray-85;
$switch-toggle-background-color: $core-white;

//Pagination
$pagination-font-size: 12px;

//Table
$table-shadow: 0 0 3px 0 rgba(40, 40, 40, 0.14),
  0 2px 3px 0 rgba(40, 40, 40, 0.12), 0 1px 4px 0 rgba(40, 40, 40, 0.2);
$table-shelf-shadow: -4px 0px 5px 0px rgba(112, 112, 112, 0.1);
$table-background-color: $core-white;
$table-border-radius: 4px;
$table-border-style: solid;
$table-border-width: 1px;
$table-font-size: 14px;
$table-group-row-background-color: $core-gray-98;
$table-group-body-row-indentation: spacing(md);
$table-group-header-row-indentation: spacing(xl);
$table-header-background-color: $core-gray-96;
$table-header-background-color--hover: $core-gray-94;
$table-header-background-color--active: $core-gray-94;
$table-header-border-color: $core-gray-90;
$table-header-border-right: $table-border-width $table-border-style
  $table-header-border-color;
$table-header-font-color: $core-gray-30;
$table-header-font-color--active: $core-gray-15;
$table-header-font-size: 12px;
$table-header-line-height: 16px;
$table-header-font-weight: 600;
$table-header-height: 48px;
$table-header-letter-spacing: 0.25px;
$table-header-padding: spacing(lg);
$table-group-row-border-color: $core-gray-85;
$table-group-row-border-top: $table-border-width $table-border-style
  $table-group-row-border-color;
$table-line-height: 20px;
$table-letter-spacing: 0.15px;
$table-sort-font-color: $core-gray-70;
$table-sort-font-color--hover: $core-gray-45;
$table-sort-font-color--active: $core-blue-50;

//Table Cells
$table-cell-text-color: $core-gray-15;
$table-cell-icon-color: $core-gray-45;
$table-cell-input-color: $core-gray-15;
$table-cell-input-placeholder-color: $core-gray-70;
$table-cell-input-border: 1px solid transparent;
$table-cell-input-row-hover-background-color: $core-gray-96;
$table-cell-input-row-hover-self-hover-border: 1px solid $core-gray-70;
$table-cell-input-focus-background-color: $core-white;
$table-cell-input-hover-background-color: $core-blue-94;
$table-cell-input-focus-border: 1px solid $core-blue-50;
$table-cell-input-error-background-color: $core-red-98;
$table-cell-input-error-border: 1px solid $core-red-50;
$table-cell-input-padding: spacing(sm) spacing(md);
$table-cell-input-transition-settings: background-color 0.2s ease-in-out;

//Select
$select-border-color-hover: $button-dropdown-hover-border;
$select-border-color: $button-dropdown-border;
$select-border-style: solid;
$select-border-width: 1px;
$select-dropdown-arrow-color-disabled: $button-dropdown-disabled-arrow;
$select-dropdown-arrow-color: $button-dropdown-arrow;
$select-dropdown-arrow-margin-left: spacing(sm);
$select-dropdown-arrow-size: 4px;
$select-error-background-color: $core-red-98;
$select-error-border-color: $input-error-border-color;
$select-fill-error-focus: $table-background-color;
$select-fill-error: $input-error-background-color;
$select-fill-hover: $button-dropdown-hover-fill;
$select-fill: $button-dropdown-fill;
$select-font-size: 14px;
$select-height: $button-md-height;
$select-label-margin-right: spacing(sm);
$select-letter-spacing: 0.25px;
$select-line-height: 36px;
$select-padding-horizontal: spacing(md);
$select-text-color-disabled: $button-dropdown-disabled-color;
$select-text-color-focus: $input-focus-color;
$select-text-color-hover: $button-dropdown-hover-color;
$select-text-color: $button-dropdown-color;
$select-border-settings-error: $select-border-width $select-border-style
  $select-error-border-color;
$select-arrow-button-height: 16px;
$select-arrow-button-width: 8px;

//Group Select
$group-select-disabled-color: $core-gray-70;

//Tiered Select
$tiered-select-breadcrumb-background-color: $core-gray-96;

//Links
$link-color-blue: $core-blue-40;
$link-color-gray: $core-gray-30;
$link-color-white: $core-white;
$link-color-hover: $core-orange-50;

//Thumbnail
$thumbnail-placeholder-hover-background-color: $core-gray-96;
$thumbnail-border-color: $core-gray-90;

//Contact Item
$contact-item-font-weight-avatar: 700;
$contact-item-color-title: $core-gray-15;
$contact-item-color-description: $core-gray-45;
$contact-item-color-selected: $core-blue-40;
$contact-item-color-disabled: $core-gray-85;
$contact-item-color-hover: $core-gray-96;

//Action
$action-color: $core-gray-15;
$action-color-disabled: $core-gray-70;
$action-background-color-focus: $core-gray-90;
$action-background-color-hover: $core-gray-90;
$action-background-color-primary: $core-white;
$action-background-color-secondary: transparent;
$action-border-color-primary: $core-gray-90;

//File Explorer: Source Item
$source-item-color: $core-gray-45;
$source-item-color-error: $core-red-50;
$source-item-color-disabled: $core-gray-70;
$source-item-icon-color-disabled: $core-gray-85;
$source-item-color-hover: $core-gray-15;
$source-item-background-color-hover: $core-gray-96;
$source-item-color-selected: $core-blue-40;
$source-item-background-color-selected: $core-blue-96;
$source-item-tab-color-selected: $core-blue-50;
$source-item-height: 48px;

//File Explorer: Thumbnail List
$thumbnail-list-border-color: $core-gray-85;
$thumbnail-list-bg-color-hover: $core-gray-96;
$thumbnail-list-item-bg-color-error: $core-red-98;
$thumbnail-list-item-color: $core-gray-15;
$thumbnail-list-item-color-error: $core-red-50;

// NumberInput
$number-input-background: $core-white;
$number-input-incrementer-btn-color: $core-gray-45;
$number-input-incrementer-btn-color-hover: $core-gray-10;
$number-input-prefix-color: $core-gray-45;