$r-enable-css-custom-properties: false !default;
$r-enabled-themes: ();
$r-themes: ();
$r-theme-process-mode: null;
$r-theme-name: 'default';
$r-theme: ();
$r-processed-theme: ();
$r-theme-export-mode: false !default;
$r-themes-export: ();
$r-custom-statuses: () !default;

// public variables
$r-enable-css-custom-properties: false !global !default;
$r-enabled-themes: () !global;
$r-themes: () !global;
$r-custom-statuses: () !global !default;

// private variables
$r-theme-process-mode: 'lazy-process' !global;
$r-theme-name: null !global;
$r-theme: () !global;
$r-processed-theme: () !global;
$r-theme-export-mode: false !global !default;
$r-themes-export: () !global;

@mixin r-scrollbars($fg, $bg, $size, $border-radius: $size / 2) {
  &::-webkit-scrollbar {
    width: $size;
    height: $size;
  }

  &::-webkit-scrollbar-thumb {
    background: $fg;
    cursor: pointer;
    border-radius: $border-radius;
  }

  &::-webkit-scrollbar-track {
    background: $bg;
  }

  // TODO: remove
  // For Internet Explorer
  scrollbar-face-color: $fg;
  scrollbar-track-color: $bg;
}

@mixin r-headings($from: 1, $to: 6) {
  @for $i from $from through $to {
    h#{$i} {
      margin: 0;
    }
  }
}

@mixin r-outline($outline-width, $outline-color, $inset-shadow-length: 0) {
  $outset-shadow: 0 0 0 $outline-width $outline-color;
  box-shadow: $outset-shadow;

  @if ($inset-shadow-length != 0) {
    &:not(:hover):not(:active) {
      $inset-shadow: inset $inset-shadow-length $outline-color;
      box-shadow: $outset-shadow, $inset-shadow;
    }
  }
}

@mixin hover-focus-active {
  &:focus,
  &:active,
  &:hover {
    @content;
  }
}

@mixin center-horizontal-absolute {
  position: absolute;
  transform: translate(-50%, 0);
  left: 50%;
}

@mixin install-thumb() {
  $thumb-selectors: (
    '::-webkit-slider-thumb'
    '::-moz-range-thumb'
    '::-ms-thumb'
  );

  @each $selector in $thumb-selectors {
    &#{$selector} {
      -webkit-appearance: none;
      -moz-appearance: none;
      @content;
    }
  }
}

@mixin install-track() {
  $thumb-selectors: (
    '::-webkit-slider-runnable-track'
    '::-moz-range-track'
    '::-ms-track'
  );

  @each $selector in $thumb-selectors {
    &#{$selector} {
      -webkit-appearance: none;
      -moz-appearance: none;
      @content;
    }
  }
}

@mixin install-placeholder($color, $font-size, $opacity: 1) {
  $placeholder-selectors: (
    '::-webkit-input-placeholder'
    '::-moz-placeholder'
    ':-moz-placeholder'
    ':-ms-input-placeholder'
  );

  &::placeholder {
    @include placeholder($color, $font-size, $opacity);
  }

  @each $selector in $placeholder-selectors {
    &#{$selector} {
      @include placeholder($color, $font-size, $opacity);
    }

    &:focus#{$selector} {
      @include placeholder-focus();
    }
  }
}

@mixin placeholder($color, $font-size, $opacity) {
  color: $color;
  font-size: $font-size;
  opacity: $opacity;
  transition: opacity 0.3s ease;
  text-overflow: ellipsis;
}

@mixin placeholder-focus() {
  opacity: 0;
  transition: opacity 0.3s ease;
}

@mixin r-component-animation($properties...) {
  transition-duration: 0.15s;
  transition-property: $properties;
  transition-timing-function: ease-in;
}

@mixin animation($animate...) {
  $max: length($animate);
  $animations: '';

  @for $i from 1 through $max {
    $animations: #{$animations + nth($animate, $i)};

    @if $i < $max {
      $animations: #{$animations + ', '};
    }
  }
  -webkit-animation: $animations;
  -moz-animation:    $animations;
  -o-animation:      $animations;
  animation:         $animations;
}

@mixin keyframes($animationName) {
  @-webkit-keyframes #{$animationName} {
    @content;
  }
  @-moz-keyframes #{$animationName} {
    @content;
  }
  @-o-keyframes #{$animationName} {
    @content;
  }
  @keyframes #{$animationName} {
    @content;
  }
}

/**
 * This mixin generates keyfames.
 * Because of all keyframes can't be scoped,
 * we need to puts unique name in each btn-pulse call.
 */
@mixin btn-pulse($name, $color) {
  &.btn-pulse {
    @include animation(btn-#{$name}-pulse 1.5s infinite);
  }

  @include keyframes(btn-#{$name}-pulse) {
    0% {
      box-shadow: none;
      opacity: r-theme(btn-disabled-opacity);
    }
    50% {
      box-shadow: 0 0 1rem 0 $color;
      opacity: 0.8;
    }
    100% {
      box-shadow: none;
      opacity: r-theme(btn-disabled-opacity);
    }
  }
}

/*

According to the specification (https://www.w3.org/TR/css-scoping-1/#host-selector)
:host and :host-context are pseudo-classes. So we assume they could be combined,
like other pseudo-classes, even same ones.
For example: ':nth-of-type(2n):nth-of-type(even)'.

Ideal solution would be to prepend any selector with :host-context([dir=rtl]).
Then r components will behave as an html element and respond to [dir] attribute on any level,
so direction could be overridden on any component level.

Implementation code:

@mixin r-rtl() {
  // add # to scss interpolation statement.
  // it works in comments and we can't use it here
  @at-root {selector-append(':host-context([dir=rtl])', &)} {
    @content;
  }
}

And when we call it somewhere:

:host {
  .some-class {
    @include r-rtl() {
      ...
    }
  }
}
:host-context(...) {
  .some-class {
    @include r-rtl() {
      ...
    }
  }
}

Result will look like:

:host-context([dir=rtl]):host .some-class {
  ...
}
:host-context([dir=rtl]):host-context(...) .some-class {
  ...
}

*
  Side note:
  :host-context():host selector are valid. https://lists.w3.org/Archives/Public/www-style/2015Feb/0305.html

  :host-context([dir=rtl]):host-context(...) should match any permutation,
  so order is not important.
*


Currently, there're two problems with this approach:

First, is that we can't combine :host, :host-context. Angular bugs #14349, #19199.
For the moment of writing, the only possible way is:
:host {
  :host-context(...) {
    ...
  }
}
It doesn't work for us because mixin could be called somewhere deeper, like:
:host {
  p {
    @include r-rtl() { ... }
  }
}
We are not able to go up to :host level to place content passed to mixin.

The second problem is that we only can be sure that we appending :host-context([dir=rtl]) to another
:host/:host-context pseudo-class when called in theme files (*.theme.scss).
  *
    Side note:
    Currently, r-install-component uses another approach where :host prepended with the theme name
    (https://github.com/angular/angular/blob/5b96078624b0a4760f2dbcf6fdf0bd62791be5bb/packages/compiler/src/shadow_css.ts#L441),
    but it was made to be able to use current realization of rtl and it can be rewritten back to
    :host-context($theme) once we will be able to use multiple shadow selectors.
  *
But when it's called in *.component.scss we can't be sure, that selector starts with :host/:host-context,
because angular allows omitting pseudo-classes if we don't need to style :host component itself.
We can break such selectors, by just appending :host-context([dir=rtl]) to them.
  ***
    Possible solution
    check if we in theme by some theme variables and if so append, otherwise nest like
    @at-root :host-context([dir=rtl]) {
      // add # to scss interpolation statement.
      // it works in comments and we can't use it here
      {&} {
        @content;
      }
    }
    What if :host specified? Can we add space in :host-context(...) :host?
    Or maybe add :host selector anyway? If multiple :host selectors are allowed
  ***


Problems with the current approach.

1. Direction can be applied only on document level, because mixin prepends theme class,
which placed on the body.
2. *.component.scss styles should be in :host selector. Otherwise angular will add host
attribute to [dir=rtl] attribute as well.


General problems.

Ltr is default document direction, but for proper work of r-ltr (means ltr only),
[dir=ltr] should be specified at least somewhere. ':not([dir=rtl]' not applicable here,
because it's satisfy any parent, that don't have [dir=rtl] attribute.
Previous approach was to use single rtl mixin and reset ltr properties to initial value.
But sometimes it's hard to find, what the previous value should be. And such mixin call looks too verbose.
*/

@mixin _prepend-with-selector($selector, $prop: null, $value: null) {
  #{$selector} & {
    @if $prop != null {
      #{$prop}: $value;
    }

    @content;
  }
}

@mixin r-ltr($prop: null, $value: null) {
  @include _prepend-with-selector('[dir=ltr]', $prop, $value) {
    @content;
  }
}

@mixin r-rtl($prop: null, $value: null) {
  @include _prepend-with-selector('[dir=rtl]', $prop, $value) {
    @content;
  };
}

/// Slightly lighten a color
/// @access public
/// @param {Color} $color - color to tint
/// @param {Number} $percentage - percentage of `$color` in returned color
/// @return {Color}
//
@function tint($color, $percentage) {
  @return mix(white, $color, $percentage);
}

/// Slightly darken a color
/// @access public
/// @param {Color} $color - color to shade
/// @param {Number} $percentage - percentage of `$color` in returned color
/// @return {Color}
//
@function shade($color, $percentage) {
  @return mix(black, $color, $percentage);
}

@function map-set($map, $key, $value: null) {
  $new: ($key: $value);
  @return map-merge($map, $new);
}

@function r-theme-var-negative($value) {
  @if ($r-enable-css-custom-properties) {
    @return calc(#{$value} * -1);
  } @else {
    @return -$value;
  }
}

@function r-get-core-statuses() {
  @return 'basic', 'primary', 'success', 'warning', 'danger', 'info', 'control';
}

@function r-get-statuses() {
  @return r-get-core-statuses();
}

@function r-get-sizes() {
  @return 'tiny', 'small', 'medium', 'large', 'giant';
}

@function r-get-shapes() {
  @return 'rectangle', 'semi-round', 'round';
}

$r-design-mapping: (
  /* Components mappings - maps theme variables onto component variables */
    padding-sm: 0.5rem,
  padding-md: 1rem,
  padding-lg: 2rem,
  link-text-color: text-primary-color,
  link-text-decoration: none,
  link-text-focus-color: text-primary-focus-color,
  link-text-hover-color: text-primary-hover-color,
  navbar-background-color: background-basic-color-1,
  navbar-shadow: shadow,
  navbar-padding-lg: 0 1rem,
  navbar-height-lg: 4.75rem,
  navbar-height-sm: 3.62rem,

  drawer-background-color: background-basic-color-1,
  drawer-width: 16rem,
  drawer-shadow: shadow,
  dialog-background-color: background-basic-color-1,
  dialog-shadow: shadow,
  card-background-color: background-basic-color-1,
  card-text-color: text-basic-color,
  card-text-font-family: text-paragraph-font-family,
  card-text-font-size: text-paragraph-font-size,
  card-text-font-weight: text-paragraph-font-weight,
  card-text-line-height: text-paragraph-line-height,
  card-border-width: 0.0625rem,
  card-border-style: solid,
  card-border-color: border-basic-color-4,
  card-border-radius: border-radius,
  card-padding: 1rem 1.5rem,
  card-shadow: none,
  card-divider-color: divider-color,
  card-divider-style: divider-style,
  card-divider-width: divider-width,
  card-header-text-color: text-basic-color,
  card-header-text-font-family: text-subtitle-font-family,
  card-header-text-font-size: text-subtitle-font-size,
  card-header-text-font-weight: text-subtitle-font-weight,
  card-header-text-line-height: text-subtitle-line-height,
  card-header-basic-background-color: background-basic-color-2,
  card-header-basic-text-color: text-basic-color,
  card-header-primary-background-color: color-primary-default,
  card-header-primary-text-color: text-control-color,
  card-header-info-background-color: color-info-default,
  card-header-info-text-color: text-control-color,
  card-header-success-background-color: color-success-default,
  card-header-success-text-color: text-control-color,
  card-header-warning-background-color: color-warning-default,
  card-header-warning-text-color: text-control-color,
  card-header-danger-background-color: color-danger-default,
  card-header-danger-text-color: text-control-color,
  card-header-control-background-color: color-control-default,
  card-header-control-text-color: color-basic-800,
  card-height-tiny: 13.5rem,
  card-height-small: 21.1875rem,
  card-height-medium: 28.875rem,
  card-height-large: 36.5625rem,
  card-height-giant: 44.25rem,
  card-margin-bottom: 1rem,

  card-scrollbar-color: scrollbar-color,
  card-scrollbar-background-color: scrollbar-background-color,
  card-scrollbar-width: scrollbar-width,
  layout-background-color: background-basic-color-3,
  layout-text-color: text-basic-color,
  toastr-border-style: solid,
  toastr-border-width: 1px,
  toastr-border-radius: border-radius,
  toastr-padding: 1rem,
  toastr-shadow: shadow,
  toastr-text-font-family: text-paragraph-2-font-family,
  toastr-text-font-size: text-paragraph-2-font-size,
  toastr-text-font-weight: text-paragraph-2-font-weight,
  toastr-text-line-height: text-paragraph-2-line-height,
  toastr-title-text-font-family: text-subtitle-font-family,
  toastr-title-text-font-size: text-subtitle-font-size,
  toastr-title-text-font-weight: text-subtitle-font-weight,
  toastr-title-text-line-height: text-subtitle-line-height,
  toastr-basic-background-color: background-basic-color-1,
  toastr-basic-border-color: border-basic-color-3,
  toastr-basic-text-color: text-basic-color,
  toastr-icon-basic-background-color: background-basic-color-1,
  toastr-icon-basic-color: text-basic-color,
  toastr-destroyable-basic-hover-background-color: background-basic-color-1,
  toastr-destroyable-basic-hover-border-color: border-basic-color-3,
  toastr-primary-background-color: color-primary-default,
  toastr-primary-border-color: color-primary-default,
  toastr-primary-text-color: text-control-color,
  toastr-icon-primary-background-color: background-basic-color-1,
  toastr-icon-primary-color: color-primary-default,
  toastr-destroyable-primary-hover-background-color: color-primary-hover,
  toastr-destroyable-primary-hover-border-color: color-primary-hover,
  toastr-success-background-color: color-success-default,
  toastr-success-border-color: color-success-default,
  toastr-success-text-color: text-control-color,
  toastr-icon-success-background-color: background-basic-color-1,
  toastr-icon-success-color: color-success-default,
  toastr-destroyable-success-hover-background-color: color-success-hover,
  toastr-destroyable-success-hover-border-color: color-success-hover,
  toastr-info-background-color: color-info-default,
  toastr-info-border-color: color-info-default,
  toastr-info-text-color: text-control-color,
  toastr-icon-info-background-color: background-basic-color-1,
  toastr-icon-info-color: color-info-default,
  toastr-destroyable-info-hover-background-color: color-info-hover,
  toastr-destroyable-info-hover-border-color: color-info-hover,
  toastr-warning-background-color: color-warning-default,
  toastr-warning-border-color: color-warning-default,
  toastr-warning-text-color: text-control-color,
  toastr-icon-warning-background-color: background-basic-color-1,
  toastr-icon-warning-color: color-warning-default,
  toastr-destroyable-warning-hover-background-color: color-warning-hover,
  toastr-destroyable-warning-hover-border-color: color-warning-hover,
  toastr-danger-background-color: color-danger-default,
  toastr-danger-border-color: color-danger-default,
  toastr-danger-text-color: text-control-color,
  toastr-icon-danger-background-color: background-basic-color-1,
  toastr-icon-danger-color: color-danger-default,
  toastr-destroyable-danger-hover-background-color: color-danger-hover,
  toastr-destroyable-danger-hover-border-color: color-danger-hover,
  toastr-control-background-color: color-control-default,
  toastr-control-border-color: color-control-default,
  toastr-control-text-color: color-basic-800,
  toastr-icon-control-background-color: color-control-default,
  toastr-icon-control-color: color-basic-800,
  toastr-destroyable-control-hover-background-color: color-control-hover,
  toastr-destroyable-control-hover-border-color: color-control-hover,
  button-cursor: pointer,
  button-outline-width: outline-width,
  button-outline-color: outline-color,
  button-text-font-family: text-button-font-family,
  button-text-font-weight: text-button-font-weight,
  button-disabled-cursor: default,
  button-tiny-text-font-size: text-button-tiny-font-size,
  button-tiny-text-line-height: text-button-tiny-line-height,
  button-tiny-icon-size: 0.75rem,
  button-tiny-icon-vertical-margin: -0.125rem,
  button-tiny-icon-offset: 0.375rem,
  button-small-text-font-size: text-button-small-font-size,
  button-small-text-line-height: text-button-small-line-height,
  button-small-icon-size: 1rem,
  button-small-icon-vertical-margin: -0.125rem,
  button-small-icon-offset: 0.375rem,
  button-medium-text-font-size: text-button-medium-font-size,
  button-medium-text-line-height: text-button-medium-line-height,
  button-medium-icon-size: 1.5rem,
  button-medium-icon-vertical-margin: -0.125rem,
  button-medium-icon-offset: 0.5rem,
  button-large-text-font-size: text-button-large-font-size,
  button-large-text-line-height: text-button-large-line-height,
  button-large-icon-size: 1.5rem,
  button-large-icon-vertical-margin: -0.125rem,
  button-large-icon-offset: 0.75rem,
  button-giant-text-font-size: text-button-giant-font-size,
  button-giant-text-line-height: text-button-giant-line-height,
  button-giant-icon-size: 1.5rem,
  button-giant-icon-vertical-margin: -0.125rem,
  button-giant-icon-offset: 0.75rem,
  button-rectangle-border-radius: border-radius,
  button-semi-round-border-radius: 0.75rem,
  button-round-border-radius: 1.5rem,
  button-filled-border-style: solid,
  button-filled-border-width: 0.0625rem,
  button-filled-text-transform: uppercase,
  button-filled-tiny-padding: 0.3125rem 0.625rem,
  button-filled-small-padding: 0.4375rem 0.875rem,
  button-filled-medium-padding: 0.6875rem 1.125rem,
  button-filled-large-padding: 0.8125rem 1.125rem,
  button-filled-giant-padding: 0.9375rem 1.375rem,
  button-filled-basic-background-color: color-basic-default,
  button-filled-basic-border-color: color-basic-default-border,
  button-filled-basic-text-color: color-basic-800,
  button-filled-basic-focus-background-color: color-basic-focus,
  button-filled-basic-focus-border-color: color-basic-focus-border,
  button-filled-basic-hover-background-color: color-basic-hover,
  button-filled-basic-hover-border-color: color-basic-hover-border,
  button-filled-basic-active-background-color: color-basic-active,
  button-filled-basic-active-border-color: color-basic-active-border,
  button-filled-basic-disabled-background-color: color-basic-disabled,
  button-filled-basic-disabled-border-color: color-basic-disabled-border,
  button-filled-basic-disabled-text-color: text-disabled-color,
  button-filled-primary-background-color: color-primary-default,
  button-filled-primary-border-color: color-primary-default-border,
  button-filled-primary-text-color: text-control-color,
  button-filled-primary-focus-background-color: color-primary-focus,
  button-filled-primary-focus-border-color: color-primary-focus-border,
  button-filled-primary-hover-background-color: color-primary-hover,
  button-filled-primary-hover-border-color: color-primary-hover-border,
  button-filled-primary-active-background-color: color-primary-active,
  button-filled-primary-active-border-color: color-primary-active-border,
  button-filled-primary-disabled-background-color: color-primary-disabled,
  button-filled-primary-disabled-border-color: color-primary-disabled-border,
  button-filled-primary-disabled-text-color: text-disabled-color,
  button-filled-success-background-color: color-success-default,
  button-filled-success-border-color: color-success-default-border,
  button-filled-success-text-color: text-control-color,
  button-filled-success-focus-background-color: color-success-focus,
  button-filled-success-focus-border-color: color-success-focus-border,
  button-filled-success-hover-background-color: color-success-hover,
  button-filled-success-hover-border-color: color-success-hover-border,
  button-filled-success-active-background-color: color-success-active,
  button-filled-success-active-border-color: color-success-active-border,
  button-filled-success-disabled-background-color: color-success-disabled,
  button-filled-success-disabled-border-color: color-success-disabled-border,
  button-filled-success-disabled-text-color: text-disabled-color,
  button-filled-info-background-color: color-info-default,
  button-filled-info-border-color: color-info-default-border,
  button-filled-info-text-color: text-control-color,
  button-filled-info-focus-background-color: color-info-focus,
  button-filled-info-focus-border-color: color-info-focus-border,
  button-filled-info-hover-background-color: color-info-hover,
  button-filled-info-hover-border-color: color-info-hover-border,
  button-filled-info-active-background-color: color-info-active,
  button-filled-info-active-border-color: color-info-active-border,
  button-filled-info-disabled-background-color: color-info-disabled,
  button-filled-info-disabled-border-color: color-info-disabled-border,
  button-filled-info-disabled-text-color: text-disabled-color,
  button-filled-warning-background-color: color-warning-default,
  button-filled-warning-border-color: color-warning-default-border,
  button-filled-warning-text-color: text-control-color,
  button-filled-warning-focus-background-color: color-warning-focus,
  button-filled-warning-focus-border-color: color-warning-focus-border,
  button-filled-warning-hover-background-color: color-warning-hover,
  button-filled-warning-hover-border-color: color-warning-hover-border,
  button-filled-warning-active-background-color: color-warning-active,
  button-filled-warning-active-border-color: color-warning-active-border,
  button-filled-warning-disabled-background-color: color-warning-disabled,
  button-filled-warning-disabled-border-color: color-warning-disabled-border,
  button-filled-warning-disabled-text-color: text-disabled-color,
  button-filled-danger-background-color: color-danger-default,
  button-filled-danger-border-color: color-danger-default-border,
  button-filled-danger-text-color: text-control-color,
  button-filled-danger-focus-background-color: color-danger-focus,
  button-filled-danger-focus-border-color: color-danger-focus-border,
  button-filled-danger-hover-background-color: color-danger-hover,
  button-filled-danger-hover-border-color: color-danger-hover-border,
  button-filled-danger-active-background-color: color-danger-active,
  button-filled-danger-active-border-color: color-danger-active-border,
  button-filled-danger-disabled-background-color: color-danger-disabled,
  button-filled-danger-disabled-border-color: color-danger-disabled-border,
  button-filled-danger-disabled-text-color: text-disabled-color,
  button-filled-control-background-color: color-control-default,
  button-filled-control-border-color: color-control-default-border,
  button-filled-control-text-color: color-basic-800,
  button-filled-control-focus-background-color: color-control-focus,
  button-filled-control-focus-border-color: color-control-focus-border,
  button-filled-control-hover-background-color: color-control-hover,
  button-filled-control-hover-border-color: color-control-hover-border,
  button-filled-control-active-background-color: color-control-active,
  button-filled-control-active-border-color: color-control-active-border,
  button-filled-control-disabled-background-color: color-control-disabled,
  button-filled-control-disabled-border-color: color-control-disabled-border,
  button-filled-control-disabled-text-color: text-disabled-color,
  button-outline-border-style: solid,
  button-outline-border-width: 0.0625rem,
  button-outline-text-transform: uppercase,
  button-outline-focus-inset-shadow-length: 0 0 0 100vmax,
  button-outline-tiny-padding: 0.3125rem 0.625rem,
  button-outline-small-padding: 0.4375rem 0.875rem,
  button-outline-medium-padding: 0.6875rem 1.125rem,
  button-outline-large-padding: 0.8125rem 1.125rem,
  button-outline-giant-padding: 0.9375rem 1.375rem,
  button-outline-basic-background-color: color-basic-transparent-default,
  button-outline-basic-border-color: color-basic-transparent-default-border,
  button-outline-basic-text-color: text-hint-color,
  button-outline-basic-focus-background-color: color-basic-transparent-focus,
  button-outline-basic-focus-border-color: color-basic-transparent-focus-border,
  button-outline-basic-focus-text-color: text-hint-color,
  button-outline-basic-hover-background-color: color-basic-transparent-hover,
  button-outline-basic-hover-border-color: color-basic-transparent-hover-border,
  button-outline-basic-hover-text-color: text-hint-color,
  button-outline-basic-active-background-color: color-basic-transparent-active,
  button-outline-basic-active-border-color:
    color-basic-transparent-active-border,
  button-outline-basic-active-text-color: text-hint-color,
  button-outline-basic-disabled-background-color:
    color-basic-transparent-disabled,
  button-outline-basic-disabled-border-color:
    color-basic-transparent-disabled-border,
  button-outline-basic-disabled-text-color: text-disabled-color,
  button-outline-primary-background-color: color-primary-transparent-default,
  button-outline-primary-border-color: color-primary-transparent-default-border,
  button-outline-primary-text-color: text-primary-color,
  button-outline-primary-focus-background-color: color-primary-transparent-focus,
  button-outline-primary-focus-border-color:
    color-primary-transparent-focus-border,
  button-outline-primary-focus-text-color: text-primary-color,
  button-outline-primary-hover-background-color: color-primary-transparent-hover,
  button-outline-primary-hover-border-color:
    color-primary-transparent-hover-border,
  button-outline-primary-hover-text-color: text-primary-color,
  button-outline-primary-active-background-color:
    color-primary-transparent-active,
  button-outline-primary-active-border-color:
    color-primary-transparent-active-border,
  button-outline-primary-active-text-color: text-primary-color,
  button-outline-primary-disabled-background-color:
    color-primary-transparent-disabled,
  button-outline-primary-disabled-border-color:
    color-primary-transparent-disabled-border,
  button-outline-primary-disabled-text-color: text-disabled-color,
  button-outline-success-background-color: color-success-transparent-default,
  button-outline-success-border-color: color-success-transparent-default-border,
  button-outline-success-text-color: text-success-color,
  button-outline-success-focus-background-color: color-success-transparent-focus,
  button-outline-success-focus-border-color:
    color-success-transparent-focus-border,
  button-outline-success-focus-text-color: text-success-color,
  button-outline-success-hover-background-color: color-success-transparent-hover,
  button-outline-success-hover-border-color:
    color-success-transparent-hover-border,
  button-outline-success-hover-text-color: text-success-color,
  button-outline-success-active-background-color:
    color-success-transparent-active,
  button-outline-success-active-border-color:
    color-success-transparent-active-border,
  button-outline-success-active-text-color: text-success-color,
  button-outline-success-disabled-background-color:
    color-success-transparent-disabled,
  button-outline-success-disabled-border-color:
    color-success-transparent-disabled-border,
  button-outline-success-disabled-text-color: text-disabled-color,
  button-outline-info-background-color: color-info-transparent-default,
  button-outline-info-border-color: color-info-transparent-default-border,
  button-outline-info-text-color: text-info-color,
  button-outline-info-focus-background-color: color-info-transparent-focus,
  button-outline-info-focus-border-color: color-info-transparent-focus-border,
  button-outline-info-focus-text-color: text-info-color,
  button-outline-info-hover-background-color: color-info-transparent-hover,
  button-outline-info-hover-border-color: color-info-transparent-hover-border,
  button-outline-info-hover-text-color: text-info-color,
  button-outline-info-active-background-color: color-info-transparent-active,
  button-outline-info-active-border-color: color-info-transparent-active-border,
  button-outline-info-active-text-color: text-info-color,
  button-outline-info-disabled-background-color: color-info-transparent-disabled,
  button-outline-info-disabled-border-color:
    color-info-transparent-disabled-border,
  button-outline-info-disabled-text-color: text-disabled-color,
  button-outline-warning-background-color: color-warning-transparent-default,
  button-outline-warning-border-color: color-warning-transparent-default-border,
  button-outline-warning-text-color: text-warning-color,
  button-outline-warning-focus-background-color: color-warning-transparent-focus,
  button-outline-warning-focus-border-color:
    color-warning-transparent-focus-border,
  button-outline-warning-focus-text-color: text-warning-color,
  button-outline-warning-hover-background-color: color-warning-transparent-hover,
  button-outline-warning-hover-border-color:
    color-warning-transparent-hover-border,
  button-outline-warning-hover-text-color: text-warning-color,
  button-outline-warning-active-background-color:
    color-warning-transparent-active,
  button-outline-warning-active-border-color:
    color-warning-transparent-active-border,
  button-outline-warning-active-text-color: text-warning-color,
  button-outline-warning-disabled-background-color:
    color-warning-transparent-disabled,
  button-outline-warning-disabled-border-color:
    color-warning-transparent-disabled-border,
  button-outline-warning-disabled-text-color: text-disabled-color,
  button-outline-danger-background-color: color-danger-transparent-default,
  button-outline-danger-border-color: color-danger-transparent-default-border,
  button-outline-danger-text-color: text-danger-color,
  button-outline-danger-focus-background-color: color-danger-transparent-focus,
  button-outline-danger-focus-border-color:
    color-danger-transparent-focus-border,
  button-outline-danger-focus-text-color: text-danger-color,
  button-outline-danger-hover-background-color: color-danger-transparent-hover,
  button-outline-danger-hover-border-color:
    color-danger-transparent-hover-border,
  button-outline-danger-hover-text-color: text-danger-color,
  button-outline-danger-active-background-color: color-danger-transparent-active,
  button-outline-danger-active-border-color:
    color-danger-transparent-active-border,
  button-outline-danger-active-text-color: text-danger-color,
  button-outline-danger-disabled-background-color:
    color-danger-transparent-disabled,
  button-outline-danger-disabled-border-color:
    color-danger-transparent-disabled-border,
  button-outline-danger-disabled-text-color: text-disabled-color,
  button-outline-control-background-color: color-control-transparent-default,
  button-outline-control-border-color: color-control-transparent-default-border,
  button-outline-control-text-color: text-control-color,
  button-outline-control-focus-background-color: color-control-transparent-focus,
  button-outline-control-focus-border-color:
    color-control-transparent-focus-border,
  button-outline-control-focus-text-color: text-control-color,
  button-outline-control-hover-background-color: color-control-transparent-hover,
  button-outline-control-hover-border-color:
    color-control-transparent-hover-border,
  button-outline-control-hover-text-color: text-control-color,
  button-outline-control-active-background-color:
    color-control-transparent-active,
  button-outline-control-active-border-color:
    color-control-transparent-active-border,
  button-outline-control-active-text-color: text-control-color,
  button-outline-control-disabled-background-color:
    color-control-transparent-disabled,
  button-outline-control-disabled-border-color:
    color-control-transparent-disabled-border,
  button-outline-control-disabled-text-color: text-disabled-color,
  button-ghost-background-color: transparent,
  button-ghost-border-color: transparent,
  button-ghost-border-style: solid,
  button-ghost-border-width: 0.0625rem,
  button-ghost-text-transform: uppercase,
  button-ghost-focus-inset-shadow-length: 0 0 0 100vmax,
  button-ghost-tiny-padding: 0.3125rem 0.625rem,
  button-ghost-small-padding: 0.4375rem 0.875rem,
  button-ghost-medium-padding: 0.6875rem 1.125rem,
  button-ghost-large-padding: 0.8125rem 1.125rem,
  button-ghost-giant-padding: 0.9375rem 1.375rem,
  button-ghost-basic-text-color: color-basic-600,
  button-ghost-basic-focus-background-color: color-basic-transparent-200,
  button-ghost-basic-focus-border-color: color-basic-transparent-500,
  button-ghost-basic-focus-text-color: color-basic-600,
  button-ghost-basic-hover-background-color: color-basic-transparent-100,
  button-ghost-basic-hover-border-color: transparent,
  button-ghost-basic-hover-text-color: color-basic-600,
  button-ghost-basic-active-background-color: color-basic-transparent-200,
  button-ghost-basic-active-border-color: transparent,
  button-ghost-basic-active-text-color: color-basic-600,
  button-ghost-basic-disabled-background-color: color-basic-transparent-200,
  button-ghost-basic-disabled-border-color: transparent,
  button-ghost-basic-disabled-text-color: text-disabled-color,
  button-ghost-primary-text-color: text-primary-color,
  button-ghost-primary-focus-background-color: color-basic-transparent-200,
  button-ghost-primary-focus-border-color: color-basic-transparent-500,
  button-ghost-primary-focus-text-color: text-primary-color,
  button-ghost-primary-hover-background-color: color-basic-transparent-100,
  button-ghost-primary-hover-border-color: transparent,
  button-ghost-primary-hover-text-color: text-primary-color,
  button-ghost-primary-active-background-color: color-basic-transparent-200,
  button-ghost-primary-active-border-color: transparent,
  button-ghost-primary-active-text-color: text-primary-color,
  button-ghost-primary-disabled-background-color: color-basic-transparent-200,
  button-ghost-primary-disabled-border-color: transparent,
  button-ghost-primary-disabled-text-color: text-disabled-color,
  button-ghost-success-text-color: text-success-color,
  button-ghost-success-focus-background-color: color-basic-transparent-200,
  button-ghost-success-focus-border-color: color-basic-transparent-500,
  button-ghost-success-focus-text-color: text-success-color,
  button-ghost-success-hover-background-color: color-basic-transparent-100,
  button-ghost-success-hover-border-color: transparent,
  button-ghost-success-hover-text-color: text-success-color,
  button-ghost-success-active-background-color: color-basic-transparent-200,
  button-ghost-success-active-border-color: transparent,
  button-ghost-success-active-text-color: text-success-color,
  button-ghost-success-disabled-background-color: color-basic-transparent-200,
  button-ghost-success-disabled-border-color: transparent,
  button-ghost-success-disabled-text-color: text-disabled-color,
  button-ghost-info-text-color: text-info-color,
  button-ghost-info-focus-background-color: color-basic-transparent-200,
  button-ghost-info-focus-border-color: color-basic-transparent-500,
  button-ghost-info-focus-text-color: text-info-color,
  button-ghost-info-hover-background-color: color-basic-transparent-100,
  button-ghost-info-hover-border-color: transparent,
  button-ghost-info-hover-text-color: text-info-color,
  button-ghost-info-active-background-color: color-basic-transparent-200,
  button-ghost-info-active-border-color: transparent,
  button-ghost-info-active-text-color: text-info-color,
  button-ghost-info-disabled-background-color: color-basic-transparent-200,
  button-ghost-info-disabled-border-color: transparent,
  button-ghost-info-disabled-text-color: text-disabled-color,
  button-ghost-warning-text-color: text-warning-color,
  button-ghost-warning-focus-background-color: color-basic-transparent-200,
  button-ghost-warning-focus-border-color: color-basic-transparent-500,
  button-ghost-warning-focus-text-color: text-warning-color,
  button-ghost-warning-hover-background-color: color-basic-transparent-100,
  button-ghost-warning-hover-border-color: transparent,
  button-ghost-warning-hover-text-color: text-warning-color,
  button-ghost-warning-active-background-color: color-basic-transparent-200,
  button-ghost-warning-active-border-color: transparent,
  button-ghost-warning-active-text-color: text-warning-color,
  button-ghost-warning-disabled-background-color: color-basic-transparent-200,
  button-ghost-warning-disabled-border-color: transparent,
  button-ghost-warning-disabled-text-color: text-disabled-color,
  button-ghost-danger-text-color: text-danger-color,
  button-ghost-danger-focus-background-color: color-basic-transparent-200,
  button-ghost-danger-focus-border-color: color-basic-transparent-500,
  button-ghost-danger-focus-text-color: text-danger-color,
  button-ghost-danger-hover-background-color: color-basic-transparent-100,
  button-ghost-danger-hover-border-color: transparent,
  button-ghost-danger-hover-text-color: text-danger-color,
  button-ghost-danger-active-background-color: color-basic-transparent-200,
  button-ghost-danger-active-border-color: transparent,
  button-ghost-danger-active-text-color: text-danger-color,
  button-ghost-danger-disabled-background-color: color-basic-transparent-200,
  button-ghost-danger-disabled-border-color: transparent,
  button-ghost-danger-disabled-text-color: text-disabled-color,
  button-ghost-control-text-color: color-basic-100,
  button-ghost-control-focus-background-color: color-basic-transparent-200,
  button-ghost-control-focus-border-color: color-basic-transparent-500,
  button-ghost-control-focus-text-color: color-basic-100,
  button-ghost-control-hover-background-color: color-basic-transparent-100,
  button-ghost-control-hover-border-color: transparent,
  button-ghost-control-hover-text-color: color-basic-100,
  button-ghost-control-active-background-color: color-basic-transparent-200,
  button-ghost-control-active-border-color: transparent,
  button-ghost-control-active-text-color: color-basic-100,
  button-ghost-control-disabled-background-color: color-basic-transparent-200,
  button-ghost-control-disabled-border-color: transparent,
  button-ghost-control-disabled-text-color: text-disabled-color,
  button-hero-border-color: transparent,
  button-hero-border-style: solid,
  button-hero-border-width: 0,
  button-hero-text-transform: uppercase,
  button-hero-tiny-padding: 0.375rem 0.6875rem,
  button-hero-small-padding: 0.5rem 0.9375rem,
  button-hero-medium-padding: 0.75rem 1.1875rem,
  button-hero-large-padding: 0.875rem 1.1875rem,
  button-hero-giant-padding: 1rem 1.4375rem,
  button-hero-shadow: 0 0 transparent,
  button-hero-text-shadow: shadow,
  button-hero-bevel-size: 0 0 0 0,
  button-hero-glow-size: 0 0 0 0,
  button-hero-outline-color: outline-color,
  button-hero-outline-width: outline-width,
  button-hero-basic-text-color: color-basic-600,
  button-hero-basic-bevel-color: color-basic-600,
  button-hero-basic-glow-color: color-basic-700,
  button-hero-basic-left-background-color: color-basic-200,
  button-hero-basic-right-background-color: color-basic-default,
  button-hero-basic-focus-left-background-color: color-basic-300,
  button-hero-basic-focus-right-background-color: color-basic-focus,
  button-hero-basic-hover-left-background-color: color-basic-100,
  button-hero-basic-hover-right-background-color: color-basic-hover,
  button-hero-basic-active-left-background-color: color-basic-300,
  button-hero-basic-active-right-background-color: color-basic-active,
  button-hero-basic-disabled-background-color: color-basic-disabled,
  button-hero-basic-disabled-text-color: text-disabled-color,
  button-hero-primary-text-color: text-control-color,
  button-hero-primary-bevel-color: color-primary-600,
  button-hero-primary-glow-color: color-primary-700,
  button-hero-primary-left-background-color: color-primary-400,
  button-hero-primary-right-background-color: color-primary-default,
  button-hero-primary-focus-left-background-color: color-primary-500,
  button-hero-primary-focus-right-background-color: color-primary-focus,
  button-hero-primary-hover-left-background-color: color-primary-300,
  button-hero-primary-hover-right-background-color: color-primary-hover,
  button-hero-primary-active-left-background-color: color-primary-500,
  button-hero-primary-active-right-background-color: color-primary-active,
  button-hero-primary-disabled-background-color: color-primary-disabled,
  button-hero-primary-disabled-text-color: text-disabled-color,
  button-hero-success-text-color: text-control-color,
  button-hero-success-bevel-color: color-success-600,
  button-hero-success-glow-color: color-success-700,
  button-hero-success-left-background-color: color-success-400,
  button-hero-success-right-background-color: color-success-default,
  button-hero-success-focus-left-background-color: color-success-500,
  button-hero-success-focus-right-background-color: color-success-focus,
  button-hero-success-hover-left-background-color: color-success-300,
  button-hero-success-hover-right-background-color: color-success-hover,
  button-hero-success-active-left-background-color: color-success-500,
  button-hero-success-active-right-background-color: color-success-active,
  button-hero-success-disabled-background-color: color-success-disabled,
  button-hero-success-disabled-text-color: text-disabled-color,
  button-hero-info-text-color: text-control-color,
  button-hero-info-bevel-color: color-info-600,
  button-hero-info-glow-color: color-info-700,
  button-hero-info-left-background-color: color-info-400,
  button-hero-info-right-background-color: color-info-default,
  button-hero-info-focus-left-background-color: color-info-500,
  button-hero-info-focus-right-background-color: color-info-focus,
  button-hero-info-hover-left-background-color: color-info-300,
  button-hero-info-hover-right-background-color: color-info-hover,
  button-hero-info-active-left-background-color: color-info-500,
  button-hero-info-active-right-background-color: color-info-active,
  button-hero-info-disabled-background-color: color-info-disabled,
  button-hero-info-disabled-text-color: text-disabled-color,
  button-hero-warning-text-color: text-control-color,
  button-hero-warning-bevel-color: color-warning-600,
  button-hero-warning-glow-color: color-warning-700,
  button-hero-warning-left-background-color: color-warning-400,
  button-hero-warning-right-background-color: color-warning-default,
  button-hero-warning-focus-left-background-color: color-warning-500,
  button-hero-warning-focus-right-background-color: color-warning-focus,
  button-hero-warning-hover-left-background-color: color-warning-300,
  button-hero-warning-hover-right-background-color: color-warning-hover,
  button-hero-warning-active-left-background-color: color-warning-500,
  button-hero-warning-active-right-background-color: color-warning-active,
  button-hero-warning-disabled-background-color: color-warning-disabled,
  button-hero-warning-disabled-text-color: text-disabled-color,
  button-hero-danger-text-color: text-control-color,
  button-hero-danger-bevel-color: color-danger-600,
  button-hero-danger-glow-color: color-danger-700,
  button-hero-danger-left-background-color: color-danger-400,
  button-hero-danger-right-background-color: color-danger-default,
  button-hero-danger-focus-left-background-color: color-danger-500,
  button-hero-danger-focus-right-background-color: color-danger-focus,
  button-hero-danger-hover-left-background-color: color-danger-300,
  button-hero-danger-hover-right-background-color: color-danger-hover,
  button-hero-danger-active-left-background-color: color-danger-500,
  button-hero-danger-active-right-background-color: color-danger-active,
  button-hero-danger-disabled-background-color: color-danger-disabled,
  button-hero-danger-disabled-text-color: text-disabled-color,
  button-hero-control-text-color: color-basic-800,
  button-hero-control-bevel-color: color-basic-600,
  button-hero-control-glow-color: color-basic-700,
  button-hero-control-left-background-color: color-control-default,
  button-hero-control-right-background-color: color-control-default,
  button-hero-control-focus-left-background-color: color-basic-200,
  button-hero-control-focus-right-background-color: color-control-focus,
  button-hero-control-hover-left-background-color: color-basic-100,
  button-hero-control-hover-right-background-color: color-control-hover,
  button-hero-control-active-left-background-color: color-basic-200,
  button-hero-control-active-right-background-color: color-control-active,
  button-hero-control-disabled-background-color: color-basic-transparent-300,
  button-hero-control-disabled-text-color: text-disabled-color,
  button-group-filled-button-basic-text-color: text-hint-color,
  button-group-filled-button-primary-text-color:
    button-filled-primary-text-color,
  button-group-filled-button-success-text-color:
    button-filled-success-text-color,
  button-group-filled-button-info-text-color: button-filled-info-text-color,
  button-group-filled-button-warning-text-color:
    button-filled-warning-text-color,
  button-group-filled-button-danger-text-color: button-filled-danger-text-color,
  button-group-filled-button-control-text-color:
    button-filled-control-text-color,
  button-group-filled-basic-divider-color: color-basic-focus-border,
  button-group-filled-primary-divider-color: color-primary-focus,
  button-group-filled-success-divider-color: color-success-focus,
  button-group-filled-info-divider-color: color-info-focus,
  button-group-filled-warning-divider-color: color-warning-focus,
  button-group-filled-danger-divider-color: color-danger-focus,
  button-group-filled-control-divider-color: color-control-focus,
  button-group-ghost-divider-color: color-basic-focus-border,
  icon-button-filled-tiny-padding: 0.4375rem 0.3125rem,
  icon-button-filled-small-padding: 0.5625rem 0.4375rem,
  icon-button-filled-medium-padding: 0.6875rem 0.5625rem,
  icon-button-filled-large-padding: 0.8125rem 0.6875rem,
  icon-button-filled-giant-padding: 1.0625rem 0.9375rem,
  icon-button-outline-tiny-padding: 0.4375rem 0.3125rem,
  icon-button-outline-small-padding: 0.5625rem 0.4375rem,
  icon-button-outline-medium-padding: 0.6875rem 0.5625rem,
  icon-button-outline-large-padding: 0.8125rem 0.6875rem,
  icon-button-outline-giant-padding: 1.0625rem 0.9375rem,
  icon-button-ghost-tiny-padding: 0.4375rem 0.3125rem,
  icon-button-ghost-small-padding: 0.5625rem 0.4375rem,
  icon-button-ghost-medium-padding: 0.6875rem 0.5625rem,
  icon-button-ghost-large-padding: 0.8125rem 0.6875rem,
  icon-button-ghost-giant-padding: 1.0625rem 0.9375rem,
  icon-button-hero-tiny-padding: 0.5rem 0.375rem,
  icon-button-hero-small-padding: 0.5625rem 0.5rem,
  icon-button-hero-medium-padding: 0.75rem 0.5625rem,
  icon-button-hero-large-padding: 0.875rem 0.6875rem,
  icon-button-hero-giant-padding: 1.0625rem 1rem,
  input-border-style: solid,
  input-border-width: 1px,
  input-outline-color: outline-color,
  input-outline-width: outline-width,
  input-placeholder-text-font-family: text-paragraph-font-family,
  input-text-font-family: text-subtitle-font-family,
  input-basic-text-color: text-basic-color,
  input-basic-placeholder-text-color: text-hint-color,
  input-basic-background-color: background-basic-color-2,
  input-basic-border-color: border-basic-color-4,
  input-basic-focus-background-color: background-basic-color-1,
  input-basic-focus-border-color: color-primary-default-border,
  input-basic-hover-background-color: background-basic-color-3,
  input-basic-hover-border-color: border-basic-color-4,
  input-basic-disabled-background-color: background-basic-color-2,
  input-basic-disabled-border-color: border-basic-color-4,
  input-basic-disabled-text-color: text-disabled-color,
  input-basic-disabled-placeholder-text-color: text-disabled-color,
  input-primary-text-color: text-basic-color,
  input-primary-placeholder-text-color: text-hint-color,
  input-primary-background-color: background-basic-color-2,
  input-primary-border-color: color-primary-default,
  input-primary-focus-background-color: background-basic-color-1,
  input-primary-focus-border-color: color-primary-focus-border,
  input-primary-hover-background-color: background-basic-color-3,
  input-primary-hover-border-color: color-primary-hover-border,
  input-primary-disabled-background-color: background-basic-color-2,
  input-primary-disabled-border-color: border-basic-color-4,
  input-primary-disabled-text-color: text-disabled-color,
  input-primary-disabled-placeholder-text-color: text-disabled-color,
  input-success-text-color: text-basic-color,
  input-success-placeholder-text-color: text-hint-color,
  input-success-background-color: background-basic-color-2,
  input-success-border-color: color-success-default,
  input-success-focus-background-color: background-basic-color-1,
  input-success-focus-border-color: color-success-focus-border,
  input-success-hover-background-color: background-basic-color-3,
  input-success-hover-border-color: color-success-hover-border,
  input-success-disabled-background-color: background-basic-color-2,
  input-success-disabled-border-color: border-basic-color-4,
  input-success-disabled-text-color: text-disabled-color,
  input-success-disabled-placeholder-text-color: text-disabled-color,
  input-info-text-color: text-basic-color,
  input-info-placeholder-text-color: text-hint-color,
  input-info-background-color: background-basic-color-2,
  input-info-border-color: color-info-default,
  input-info-focus-background-color: background-basic-color-1,
  input-info-focus-border-color: color-info-focus-border,
  input-info-hover-background-color: background-basic-color-3,
  input-info-hover-border-color: color-info-hover-border,
  input-info-disabled-background-color: background-basic-color-2,
  input-info-disabled-border-color: border-basic-color-4,
  input-info-disabled-text-color: text-disabled-color,
  input-info-disabled-placeholder-text-color: text-disabled-color,
  input-warning-text-color: text-basic-color,
  input-warning-placeholder-text-color: text-hint-color,
  input-warning-background-color: background-basic-color-2,
  input-warning-border-color: color-warning-default,
  input-warning-focus-background-color: background-basic-color-1,
  input-warning-focus-border-color: color-warning-focus-border,
  input-warning-hover-background-color: background-basic-color-3,
  input-warning-hover-border-color: color-warning-hover-border,
  input-warning-disabled-background-color: background-basic-color-2,
  input-warning-disabled-border-color: border-basic-color-4,
  input-warning-disabled-text-color: text-disabled-color,
  input-warning-disabled-placeholder-text-color: text-disabled-color,
  input-danger-text-color: text-basic-color,
  input-danger-placeholder-text-color: text-hint-color,
  input-danger-background-color: background-basic-color-2,
  input-danger-border-color: color-danger-default,
  input-danger-focus-background-color: background-basic-color-1,
  input-danger-focus-border-color: color-danger-focus-border,
  input-danger-hover-background-color: background-basic-color-3,
  input-danger-hover-border-color: color-danger-hover-border,
  input-danger-disabled-background-color: background-basic-color-2,
  input-danger-disabled-border-color: border-basic-color-4,
  input-danger-disabled-text-color: text-disabled-color,
  input-danger-disabled-placeholder-text-color: text-disabled-color,
  input-control-text-color: text-control-color,
  input-control-placeholder-text-color: text-control-color,
  input-control-background-color: color-basic-control-transparent-300,
  input-control-border-color: color-basic-control-transparent-500,
  input-control-focus-background-color: color-basic-control-transparent-500,
  input-control-focus-border-color: color-control-transparent-focus-border,
  input-control-hover-background-color: color-basic-control-transparent-400,
  input-control-hover-border-color: color-control-transparent-hover-border,
  input-control-disabled-background-color: color-control-transparent-disabled,
  input-control-disabled-border-color: color-control-transparent-disabled-border,
  input-control-disabled-text-color: text-control-color,
  input-control-disabled-placeholder-text-color: text-control-color,
  input-rectangle-border-radius: border-radius,
  input-semi-round-border-radius: 0.75rem,
  input-round-border-radius: 1.5rem,
  input-tiny-text-font-size: text-caption-2-font-size,
  input-tiny-text-font-weight: text-caption-2-font-weight,
  input-tiny-text-line-height: text-caption-2-line-height,
  input-tiny-placeholder-text-font-size: text-paragraph-font-size,
  input-tiny-placeholder-text-font-weight: text-paragraph-font-weight,
  input-tiny-placeholder-text-line-height: text-paragraph-line-height,
  input-tiny-padding: 0.1875rem 1rem,
  input-tiny-max-width: 20rem,
  input-small-text-font-size: text-subtitle-2-font-size,
  input-small-text-font-weight: text-subtitle-2-font-weight,
  input-small-text-line-height: text-subtitle-2-line-height,
  input-small-placeholder-text-font-size: text-paragraph-font-size,
  input-small-placeholder-text-font-weight: text-paragraph-font-weight,
  input-small-placeholder-text-line-height: text-paragraph-line-height,
  input-small-padding: 0.1875rem 1rem,
  input-small-max-width: 20rem,
  input-medium-text-font-size: text-subtitle-font-size,
  input-medium-text-font-weight: text-subtitle-font-weight,
  input-medium-text-line-height: text-subtitle-line-height,
  input-medium-placeholder-text-font-size: text-paragraph-font-size,
  input-medium-placeholder-text-font-weight: text-paragraph-font-weight,
  input-medium-placeholder-text-line-height: text-paragraph-line-height,
  input-medium-padding: 0.4375rem 1rem,
  input-medium-max-width: 20rem,
  input-large-text-font-size: text-subtitle-font-size,
  input-large-text-font-weight: text-subtitle-font-weight,
  input-large-text-line-height: text-subtitle-line-height,
  input-large-placeholder-text-font-size: text-paragraph-font-size,
  input-large-placeholder-text-font-weight: text-paragraph-font-weight,
  input-large-placeholder-text-line-height: text-paragraph-line-height,
  input-large-padding: 0.6875rem 1rem,
  input-large-max-width: 30rem,
  input-giant-text-font-size: text-heading-6-font-size,
  input-giant-text-font-weight: text-heading-6-font-weight,
  input-giant-text-line-height: text-heading-6-line-height,
  input-giant-placeholder-text-font-size: text-paragraph-font-size,
  input-giant-placeholder-text-font-weight: text-paragraph-font-weight,
  input-giant-placeholder-text-line-height: text-paragraph-line-height,
  input-giant-padding: 0.9375rem 1rem,
  input-giant-max-width: 30rem,
  checkbox-height: 1.25rem,
  checkbox-width: 1.25rem,
  checkbox-border-style: solid,
  checkbox-border-width: 1px,
  checkbox-border-radius: 3px,
  checkbox-outline-width: outline-width,
  checkbox-outline-color: outline-color,
  checkbox-text-font-family: text-subtitle-2-font-family,
  checkbox-text-font-size: text-subtitle-2-font-size,
  checkbox-text-font-weight: text-subtitle-2-font-weight,
  checkbox-text-line-height: text-subtitle-2-line-height,
  checkbox-text-space: 0.6875rem,
  checkbox-padding: 0,
  checkbox-focus-inset-shadow-length: 0 0 0 100vmax,
  checkbox-basic-text-color: text-basic-color,
  checkbox-basic-background-color: color-basic-transparent-default,
  checkbox-basic-border-color: color-basic-transparent-default-border,
  checkbox-basic-checked-background-color: color-primary-default,
  checkbox-basic-checked-border-color: color-primary-default-border,
  checkbox-basic-checked-checkmark-color: text-control-color,
  checkbox-basic-indeterminate-background-color: color-primary-default,
  checkbox-basic-indeterminate-border-color: color-primary-default-border,
  checkbox-basic-indeterminate-checkmark-color: text-control-color,
  checkbox-basic-focus-background-color: color-basic-transparent-focus,
  checkbox-basic-focus-border-color: color-basic-transparent-focus-border,
  checkbox-basic-focus-checked-background-color: color-primary-focus,
  checkbox-basic-focus-checked-border-color: color-primary-focus-border,
  checkbox-basic-hover-background-color: color-primary-transparent-hover,
  checkbox-basic-hover-border-color: color-primary-transparent-hover-border,
  checkbox-basic-hover-checked-background-color: color-primary-hover,
  checkbox-basic-hover-checked-border-color: color-primary-hover-border,
  checkbox-basic-active-background-color: color-basic-transparent-active,
  checkbox-basic-active-border-color: color-basic-transparent-active-border,
  checkbox-basic-active-checked-background-color: color-primary-active,
  checkbox-basic-active-checked-border-color: color-primary-active-border,
  checkbox-basic-disabled-background-color: color-basic-transparent-disabled,
  checkbox-basic-disabled-border-color: color-basic-transparent-disabled-border,
  checkbox-basic-disabled-checkmark-color: text-control-color,
  checkbox-basic-disabled-text-color: text-disabled-color,
  checkbox-basic-disabled-checked-background-color: color-basic-transparent-600,
  checkbox-basic-disabled-checked-border-color: color-basic-transparent-600,
  checkbox-primary-text-color: text-basic-color,
  checkbox-primary-background-color: color-primary-transparent-default,
  checkbox-primary-border-color: color-primary-transparent-default-border,
  checkbox-primary-checked-background-color: color-primary-default,
  checkbox-primary-checked-border-color: color-primary-default-border,
  checkbox-primary-checked-checkmark-color: text-control-color,
  checkbox-primary-indeterminate-background-color: color-primary-default,
  checkbox-primary-indeterminate-border-color: color-primary-default-border,
  checkbox-primary-indeterminate-checkmark-color: text-control-color,
  checkbox-primary-focus-background-color: color-primary-transparent-focus,
  checkbox-primary-focus-border-color: color-primary-transparent-focus-border,
  checkbox-primary-focus-checked-background-color: color-primary-focus,
  checkbox-primary-focus-checked-border-color: color-primary-focus-border,
  checkbox-primary-hover-background-color: color-primary-transparent-hover,
  checkbox-primary-hover-border-color: color-primary-transparent-hover-border,
  checkbox-primary-hover-checked-background-color: color-primary-hover,
  checkbox-primary-hover-checked-border-color: color-primary-hover-border,
  checkbox-primary-active-background-color: color-primary-transparent-active,
  checkbox-primary-active-border-color: color-primary-transparent-active-border,
  checkbox-primary-active-checked-background-color: color-primary-active,
  checkbox-primary-active-checked-border-color: color-primary-active-border,
  checkbox-primary-disabled-background-color: color-basic-transparent-disabled,
  checkbox-primary-disabled-border-color:
    color-basic-transparent-disabled-border,
  checkbox-primary-disabled-checkmark-color: text-control-color,
  checkbox-primary-disabled-text-color: text-disabled-color,
  checkbox-primary-disabled-checked-background-color:
    color-basic-transparent-600,
  checkbox-primary-disabled-checked-border-color: color-basic-transparent-600,
  checkbox-success-text-color: text-basic-color,
  checkbox-success-background-color: color-success-transparent-default,
  checkbox-success-border-color: color-success-transparent-default-border,
  checkbox-success-checked-background-color: color-success-default,
  checkbox-success-checked-border-color: color-success-default-border,
  checkbox-success-checked-checkmark-color: text-control-color,
  checkbox-success-indeterminate-background-color: color-success-default,
  checkbox-success-indeterminate-border-color: color-success-default-border,
  checkbox-success-indeterminate-checkmark-color: text-control-color,
  checkbox-success-focus-background-color: color-success-transparent-focus,
  checkbox-success-focus-border-color: color-success-transparent-focus-border,
  checkbox-success-focus-checked-background-color: color-success-focus,
  checkbox-success-focus-checked-border-color: color-success-focus-border,
  checkbox-success-hover-background-color: color-success-transparent-hover,
  checkbox-success-hover-border-color: color-success-transparent-hover-border,
  checkbox-success-hover-checked-background-color: color-success-hover,
  checkbox-success-hover-checked-border-color: color-success-hover-border,
  checkbox-success-active-background-color: color-success-transparent-active,
  checkbox-success-active-border-color: color-success-transparent-active-border,
  checkbox-success-active-checked-background-color: color-success-active,
  checkbox-success-active-checked-border-color: color-success-active-border,
  checkbox-success-disabled-background-color: color-basic-transparent-disabled,
  checkbox-success-disabled-border-color:
    color-basic-transparent-disabled-border,
  checkbox-success-disabled-checkmark-color: text-control-color,
  checkbox-success-disabled-text-color: text-disabled-color,
  checkbox-success-disabled-checked-background-color:
    color-basic-transparent-600,
  checkbox-success-disabled-checked-border-color: color-basic-transparent-600,
  checkbox-info-text-color: text-basic-color,
  checkbox-info-background-color: color-info-transparent-default,
  checkbox-info-border-color: color-info-transparent-default-border,
  checkbox-info-checked-background-color: color-info-default,
  checkbox-info-checked-border-color: color-info-default-border,
  checkbox-info-checked-checkmark-color: text-control-color,
  checkbox-info-indeterminate-background-color: color-info-default,
  checkbox-info-indeterminate-border-color: color-info-default-border,
  checkbox-info-indeterminate-checkmark-color: text-control-color,
  checkbox-info-focus-background-color: color-info-transparent-focus,
  checkbox-info-focus-border-color: color-info-transparent-focus-border,
  checkbox-info-focus-checked-background-color: color-info-focus,
  checkbox-info-focus-checked-border-color: color-info-focus-border,
  checkbox-info-hover-background-color: color-info-transparent-hover,
  checkbox-info-hover-border-color: color-info-transparent-hover-border,
  checkbox-info-hover-checked-background-color: color-info-hover,
  checkbox-info-hover-checked-border-color: color-info-hover-border,
  checkbox-info-active-background-color: color-info-transparent-active,
  checkbox-info-active-border-color: color-info-transparent-active-border,
  checkbox-info-active-checked-background-color: color-info-active,
  checkbox-info-active-checked-border-color: color-info-active-border,
  checkbox-info-disabled-background-color: color-basic-transparent-disabled,
  checkbox-info-disabled-border-color: color-basic-transparent-disabled-border,
  checkbox-info-disabled-checkmark-color: text-control-color,
  checkbox-info-disabled-text-color: text-disabled-color,
  checkbox-info-disabled-checked-background-color: color-basic-transparent-600,
  checkbox-info-disabled-checked-border-color: color-basic-transparent-600,
  checkbox-warning-text-color: text-basic-color,
  checkbox-warning-background-color: color-warning-transparent-default,
  checkbox-warning-border-color: color-warning-transparent-default-border,
  checkbox-warning-checked-background-color: color-warning-default,
  checkbox-warning-checked-border-color: color-warning-default-border,
  checkbox-warning-checked-checkmark-color: text-control-color,
  checkbox-warning-indeterminate-background-color: color-warning-default,
  checkbox-warning-indeterminate-border-color: color-warning-default-border,
  checkbox-warning-indeterminate-checkmark-color: text-control-color,
  checkbox-warning-focus-background-color: color-warning-transparent-focus,
  checkbox-warning-focus-border-color: color-warning-transparent-focus-border,
  checkbox-warning-focus-checked-background-color: color-warning-focus,
  checkbox-warning-focus-checked-border-color: color-warning-focus-border,
  checkbox-warning-hover-background-color: color-warning-transparent-hover,
  checkbox-warning-hover-border-color: color-warning-transparent-hover-border,
  checkbox-warning-hover-checked-background-color: color-warning-hover,
  checkbox-warning-hover-checked-border-color: color-warning-hover-border,
  checkbox-warning-active-background-color: color-warning-transparent-active,
  checkbox-warning-active-border-color: color-warning-transparent-active-border,
  checkbox-warning-active-checked-background-color: color-warning-active,
  checkbox-warning-active-checked-border-color: color-warning-active-border,
  checkbox-warning-disabled-background-color: color-basic-transparent-disabled,
  checkbox-warning-disabled-border-color:
    color-basic-transparent-disabled-border,
  checkbox-warning-disabled-checkmark-color: text-control-color,
  checkbox-warning-disabled-text-color: text-disabled-color,
  checkbox-warning-disabled-checked-background-color:
    color-basic-transparent-600,
  checkbox-warning-disabled-checked-border-color: color-basic-transparent-600,
  checkbox-danger-text-color: text-basic-color,
  checkbox-danger-background-color: color-danger-transparent-default,
  checkbox-danger-border-color: color-danger-transparent-default-border,
  checkbox-danger-checked-background-color: color-danger-default,
  checkbox-danger-checked-border-color: color-danger-default-border,
  checkbox-danger-checked-checkmark-color: text-control-color,
  checkbox-danger-indeterminate-background-color: color-danger-default,
  checkbox-danger-indeterminate-border-color: color-danger-default-border,
  checkbox-danger-indeterminate-checkmark-color: text-control-color,
  checkbox-danger-focus-background-color: color-danger-transparent-focus,
  checkbox-danger-focus-border-color: color-danger-transparent-focus-border,
  checkbox-danger-focus-checked-background-color: color-danger-focus,
  checkbox-danger-focus-checked-border-color: color-danger-focus-border,
  checkbox-danger-hover-background-color: color-danger-transparent-hover,
  checkbox-danger-hover-border-color: color-danger-transparent-hover-border,
  checkbox-danger-hover-checked-background-color: color-danger-hover,
  checkbox-danger-hover-checked-border-color: color-danger-hover-border,
  checkbox-danger-active-background-color: color-danger-transparent-active,
  checkbox-danger-active-border-color: color-danger-transparent-active-border,
  checkbox-danger-active-checked-background-color: color-danger-active,
  checkbox-danger-active-checked-border-color: color-danger-active-border,
  checkbox-danger-disabled-background-color: color-basic-transparent-disabled,
  checkbox-danger-disabled-border-color: color-basic-transparent-disabled-border,
  checkbox-danger-disabled-checkmark-color: text-control-color,
  checkbox-danger-disabled-text-color: text-disabled-color,
  checkbox-danger-disabled-checked-background-color: color-basic-transparent-600,
  checkbox-danger-disabled-checked-border-color: color-basic-transparent-600,
  checkbox-control-text-color: text-control-color,
  checkbox-control-background-color: color-control-transparent-default,
  checkbox-control-border-color: color-control-transparent-default-border,
  checkbox-control-checked-background-color: color-control-default,
  checkbox-control-checked-border-color: color-control-default-border,
  checkbox-control-checked-checkmark-color: color-basic-800,
  checkbox-control-indeterminate-background-color: color-control-default,
  checkbox-control-indeterminate-border-color: color-control-default-border,
  checkbox-control-indeterminate-checkmark-color: color-basic-800,
  checkbox-control-focus-background-color: color-control-transparent-focus,
  checkbox-control-focus-border-color: color-control-transparent-focus-border,
  checkbox-control-focus-checked-background-color: color-control-focus,
  checkbox-control-focus-checked-border-color: color-control-focus-border,
  checkbox-control-hover-background-color: color-control-transparent-hover,
  checkbox-control-hover-border-color: color-control-transparent-hover-border,
  checkbox-control-hover-checked-background-color: color-control-hover,
  checkbox-control-hover-checked-border-color: color-control-hover-border,
  checkbox-control-active-background-color: color-control-transparent-active,
  checkbox-control-active-border-color: color-control-transparent-active-border,
  checkbox-control-active-checked-background-color: color-control-active,
  checkbox-control-active-checked-border-color: color-control-active-border,
  checkbox-control-disabled-background-color: color-control-transparent-disabled,
  checkbox-control-disabled-border-color:
    color-control-transparent-disabled-border,
  checkbox-control-disabled-checkmark-color: text-control-color,
  checkbox-control-disabled-text-color: text-control-color,
  checkbox-control-disabled-checked-background-color:
    color-basic-transparent-600,
  checkbox-control-disabled-checked-border-color: color-basic-transparent-600,
  alert-border-radius: border-radius,
  alert-bottom-margin: 1.5rem,
  alert-padding: 1rem 1.125rem,
  alert-scrollbar-color: scrollbar-color,
  alert-scrollbar-background-color: scrollbar-background-color,
  alert-scrollbar-width: scrollbar-width,
  alert-shadow: none,
  alert-text-font-family: text-paragraph-font-family,
  alert-text-font-size: text-subtitle-font-size,
  alert-text-font-weight: text-subtitle-font-weight,
  alert-text-line-height: text-subtitle-line-height,
  alert-closable-start-padding: 3rem,
  alert-tiny-height: 4.5rem,
  alert-small-height: 5.75rem,
  alert-medium-height: 7rem,
  alert-medium-padding: 1rem 1.125rem,
  alert-large-height: 8.25rem,
  alert-giant-height: 9.5rem,
  alert-basic-background-color: background-basic-color-2,
  alert-basic-text-color: text-basic-color,
  alert-primary-background-color: color-primary-default,
  alert-primary-text-color: text-control-color,
  alert-success-background-color: color-success-default,
  alert-success-text-color: text-control-color,
  alert-info-background-color: color-info-default,
  alert-info-text-color: text-control-color,
  alert-warning-background-color: color-warning-default,
  alert-warning-text-color: text-control-color,
  alert-danger-background-color: color-danger-default,
  alert-danger-text-color: text-control-color,
  alert-control-background-color: color-control-default,
  alert-control-text-color: color-basic-800,
  alert-accent-basic-color: border-basic-color-3,
  alert-accent-primary-color: color-primary-default,
  alert-accent-info-color: color-info-default,
  alert-accent-success-color: color-success-default,
  alert-accent-warning-color: color-warning-default,
  alert-accent-danger-color: color-danger-default,
  alert-accent-control-color: color-control-default,
  alert-outline-width: 1px,
  alert-outline-basic-color: color-basic-focus-border,
  alert-outline-primary-color: color-primary-focus-border,
  alert-outline-info-color: color-info-focus-border,
  alert-outline-success-color: color-success-focus-border,
  alert-outline-warning-color: color-warning-focus-border,
  alert-outline-danger-color: color-danger-focus-border,
  alert-outline-control-color: color-control-focus-border,
  progress-bar-animation-duration: 400ms,
  progress-bar-border-radius: border-radius,
  progress-bar-text-font-family: text-subtitle-font-family,
  progress-bar-tiny-height: 1rem,
  progress-bar-tiny-text-font-size: text-subtitle-2-font-size,
  progress-bar-tiny-text-font-weight: text-subtitle-2-font-weight,
  progress-bar-tiny-text-line-height: text-subtitle-2-line-height,
  progress-bar-small-height: 1.25rem,
  progress-bar-small-text-font-size: text-subtitle-2-font-size,
  progress-bar-small-text-font-weight: text-subtitle-2-font-weight,
  progress-bar-small-text-line-height: text-subtitle-2-line-height,
  progress-bar-medium-height: 1.375rem,
  progress-bar-medium-text-font-size: text-subtitle-font-size,
  progress-bar-medium-text-font-weight: text-subtitle-font-weight,
  progress-bar-medium-text-line-height: text-subtitle-line-height,
  progress-bar-large-height: 1.5rem,
  progress-bar-large-text-font-size: text-subtitle-font-size,
  progress-bar-large-text-font-weight: text-subtitle-font-weight,
  progress-bar-large-text-line-height: text-subtitle-line-height,
  progress-bar-giant-height: 1.75rem,
  progress-bar-giant-text-font-size: text-subtitle-font-size,
  progress-bar-giant-text-font-weight: text-subtitle-font-weight,
  progress-bar-giant-text-line-height: text-subtitle-line-height,
  progress-bar-basic-background-color: background-basic-color-2,
  progress-bar-basic-filled-background-color: background-basic-color-4,
  progress-bar-basic-text-color: text-basic-color,
  progress-bar-primary-background-color: background-basic-color-3,
  progress-bar-primary-filled-background-color: color-primary-default,
  progress-bar-primary-text-color: text-control-color,
  progress-bar-success-background-color: background-basic-color-3,
  progress-bar-success-filled-background-color: color-success-default,
  progress-bar-success-text-color: text-control-color,
  progress-bar-info-background-color: background-basic-color-3,
  progress-bar-info-filled-background-color: color-info-default,
  progress-bar-info-text-color: text-control-color,
  progress-bar-warning-background-color: background-basic-color-3,
  progress-bar-warning-filled-background-color: color-warning-default,
  progress-bar-warning-text-color: text-control-color,
  progress-bar-danger-background-color: background-basic-color-3,
  progress-bar-danger-filled-background-color: color-danger-default,
  progress-bar-danger-text-color: text-control-color,
  progress-bar-control-background-color: background-basic-color-3,
  progress-bar-control-filled-background-color: color-control-default,
  progress-bar-control-text-color: color-basic-800,
  spinner-text-font-family: text-button-font-family,
  spinner-text-font-size: text-button-medium-font-size,
  spinner-text-font-weight: text-button-font-weight,
  spinner-text-line-height: text-button-medium-line-height,
  spinner-basic-background-color: color-basic-transparent-200,
  spinner-basic-circle-filled-color: text-hint-color,
  spinner-basic-circle-empty-color: transparent,
  spinner-primary-background-color: color-basic-transparent-200,
  spinner-primary-circle-filled-color: color-primary-default,
  spinner-primary-circle-empty-color: transparent,
  spinner-info-background-color: color-basic-transparent-200,
  spinner-info-circle-filled-color: color-info-default,
  spinner-info-circle-empty-color: transparent,
  spinner-success-background-color: color-basic-transparent-200,
  spinner-success-circle-filled-color: color-success-default,
  spinner-success-circle-empty-color: transparent,
  spinner-warning-background-color: color-basic-transparent-200,
  spinner-warning-circle-filled-color: color-warning-default,
  spinner-warning-circle-empty-color: transparent,
  spinner-danger-background-color: color-basic-transparent-200,
  spinner-danger-circle-filled-color: color-danger-default,
  spinner-danger-circle-empty-color: transparent,
  spinner-control-background-color: color-basic-control-transparent-200,
  spinner-control-circle-filled-color: color-control-default,
  spinner-control-circle-empty-color: transparent,
  spinner-height-tiny: 1rem,
  spinner-height-small: 1.25rem,
  spinner-height-medium: 1.5rem,
  spinner-height-large: 1.75rem,
  spinner-height-giant: 2rem,
  overlay-backdrop-background-color: rgba(0, 0, 0, 0.35),
  option-list-max-height: 20rem,
  option-list-shadow: none,
  option-list-background-color: background-basic-color-1,
  option-list-border-style: solid,
  option-list-border-width: 0.0625rem,
  option-list-border-color: border-basic-color-4,
  option-list-border-radius: border-radius,
  option-list-adjacent-border-color: option-list-border-color,
  option-list-adjacent-border-style: option-list-border-style,
  option-list-adjacent-border-width: option-list-border-width,
  option-group-text-color: text-hint-color,
  option-group-tiny-start-padding: 1.25rem,
  option-group-small-start-padding: 1.75rem,
  option-group-medium-start-padding: 2.25rem,
  option-group-large-start-padding: 2.25rem,
  option-group-giant-start-padding: 2.75rem,
  option-background-color: background-basic-color-1,
  option-text-color: text-basic-color,
  option-text-font-family: text-subtitle-font-family,
  option-hover-background-color: color-basic-transparent-hover,
  option-hover-text-color: text-basic-color,
  option-active-background-color: color-basic-transparent-active,
  option-active-text-color: text-basic-color,
  option-focus-background-color: color-basic-transparent-focus,
  option-focus-text-color: text-basic-color,
  option-selected-background-color: color-primary-default,
  option-selected-text-color: text-control-color,
  option-selected-hover-background-color: color-primary-hover,
  option-selected-hover-text-color: text-control-color,
  option-selected-active-background-color: color-primary-active,
  option-selected-active-text-color: text-control-color,
  option-selected-focus-background-color: color-primary-focus,
  option-selected-focus-text-color: text-control-color,
  option-disabled-background-color: background-basic-color-1,
  option-disabled-text-color: text-disabled-color,
  option-tiny-text-font-size: text-caption-2-font-size,
  option-tiny-text-font-weight: text-caption-2-font-weight,
  option-tiny-text-line-height: text-caption-2-line-height,
  option-tiny-padding: select-outline-tiny-padding,
  option-small-text-font-size: text-subtitle-2-font-size,
  option-small-text-font-weight: text-subtitle-2-font-weight,
  option-small-text-line-height: text-subtitle-2-line-height,
  option-small-padding: select-outline-small-padding,
  option-medium-text-font-size: text-subtitle-font-size,
  option-medium-text-font-weight: text-subtitle-font-weight,
  option-medium-text-line-height: text-subtitle-line-height,
  option-medium-padding: select-outline-medium-padding,
  option-large-text-font-size: text-subtitle-font-size,
  option-large-text-font-weight: text-subtitle-font-weight,
  option-large-text-line-height: text-subtitle-line-height,
  option-large-padding: select-outline-large-padding,
  option-giant-text-font-size: text-heading-6-font-size,
  option-giant-text-font-weight: text-heading-6-font-weight,
  option-giant-text-line-height: text-heading-6-line-height,
  option-giant-padding: select-outline-giant-padding,
  select-cursor: pointer,
  select-disabled-cursor: default,
  select-min-width: 13rem,
  select-outline-width: outline-width,
  select-outline-color: outline-color,
  select-icon-offset: 2rem,
  select-text-font-family: text-subtitle-font-family,
  select-placeholder-text-font-family: text-paragraph-font-family,
  select-tiny-text-font-size: text-caption-2-font-size,
  select-tiny-text-font-weight: text-caption-2-font-weight,
  select-tiny-text-line-height: text-caption-2-line-height,
  select-tiny-placeholder-text-font-size: text-paragraph-font-size,
  select-tiny-placeholder-text-font-weight: text-paragraph-font-weight,
  select-tiny-max-width: 20rem,
  select-small-text-font-size: text-subtitle-2-font-size,
  select-small-text-font-weight: text-subtitle-2-font-weight,
  select-small-text-line-height: text-subtitle-2-line-height,
  select-small-placeholder-text-font-size: text-paragraph-font-size,
  select-small-placeholder-text-font-weight: text-paragraph-font-weight,
  select-small-max-width: 20rem,
  select-medium-text-font-size: text-subtitle-font-size,
  select-medium-text-font-weight: text-subtitle-font-weight,
  select-medium-text-line-height: text-subtitle-line-height,
  select-medium-placeholder-text-font-size: text-paragraph-font-size,
  select-medium-placeholder-text-font-weight: text-paragraph-font-weight,
  select-medium-max-width: 20rem,
  select-large-text-font-size: text-subtitle-font-size,
  select-large-text-font-weight: text-subtitle-font-weight,
  select-large-text-line-height: text-subtitle-line-height,
  select-large-placeholder-text-font-size: text-paragraph-font-size,
  select-large-placeholder-text-font-weight: text-paragraph-font-weight,
  select-large-max-width: 30rem,
  select-giant-text-font-size: text-heading-6-font-size,
  select-giant-text-font-weight: text-heading-6-font-weight,
  select-giant-text-line-height: text-heading-6-line-height,
  select-giant-placeholder-text-font-size: text-paragraph-font-size,
  select-giant-placeholder-text-font-weight: text-paragraph-font-weight,
  select-giant-max-width: 30rem,
  select-rectangle-border-radius: border-radius,
  select-semi-round-border-radius: 0.75rem,
  select-round-border-radius: 1.5rem,
  select-outline-border-style: solid,
  select-outline-border-width: 1px,
  select-outline-tiny-padding: 0.1875rem 1rem,
  select-outline-small-padding: 0.1875rem 1rem,
  select-outline-medium-padding: 0.4375rem 1rem,
  select-outline-large-padding: 0.6875rem 1rem,
  select-outline-giant-padding: 0.9375rem 1rem,
  select-outline-basic-icon-color: text-hint-color,
  select-outline-basic-text-color: text-basic-color,
  select-outline-basic-placeholder-text-color: text-hint-color,
  select-outline-basic-background-color: background-basic-color-2,
  select-outline-basic-border-color: border-basic-color-4,
  select-outline-basic-focus-background-color: background-basic-color-1,
  select-outline-basic-focus-border-color: color-primary-default,
  select-outline-basic-hover-background-color: background-basic-color-3,
  select-outline-basic-hover-border-color: border-basic-color-4,
  select-outline-basic-disabled-background-color: background-basic-color-2,
  select-outline-basic-disabled-border-color: border-basic-color-4,
  select-outline-basic-disabled-icon-color: text-disabled-color,
  select-outline-basic-disabled-text-color: text-disabled-color,
  select-outline-primary-icon-color: text-hint-color,
  select-outline-primary-text-color: text-basic-color,
  select-outline-primary-placeholder-text-color: text-hint-color,
  select-outline-primary-background-color: background-basic-color-2,
  select-outline-primary-border-color: color-primary-default,
  select-outline-primary-focus-background-color: background-basic-color-1,
  select-outline-primary-focus-border-color: color-primary-focus,
  select-outline-primary-hover-background-color: background-basic-color-3,
  select-outline-primary-hover-border-color: color-primary-hover,
  select-outline-primary-disabled-background-color: background-basic-color-2,
  select-outline-primary-disabled-border-color: border-basic-color-4,
  select-outline-primary-disabled-icon-color: text-disabled-color,
  select-outline-primary-disabled-text-color: text-disabled-color,
  select-outline-success-icon-color: text-hint-color,
  select-outline-success-text-color: text-basic-color,
  select-outline-success-placeholder-text-color: text-hint-color,
  select-outline-success-background-color: background-basic-color-2,
  select-outline-success-border-color: color-success-default,
  select-outline-success-focus-background-color: background-basic-color-1,
  select-outline-success-focus-border-color: color-success-focus,
  select-outline-success-hover-background-color: background-basic-color-3,
  select-outline-success-hover-border-color: color-success-hover,
  select-outline-success-disabled-background-color: background-basic-color-2,
  select-outline-success-disabled-border-color: border-basic-color-4,
  select-outline-success-disabled-icon-color: text-disabled-color,
  select-outline-success-disabled-text-color: text-disabled-color,
  select-outline-info-icon-color: text-hint-color,
  select-outline-info-text-color: text-basic-color,
  select-outline-info-placeholder-text-color: text-hint-color,
  select-outline-info-background-color: background-basic-color-2,
  select-outline-info-border-color: color-info-default,
  select-outline-info-focus-background-color: background-basic-color-1,
  select-outline-info-focus-border-color: color-info-focus,
  select-outline-info-hover-background-color: background-basic-color-3,
  select-outline-info-hover-border-color: color-info-hover,
  select-outline-info-disabled-background-color: background-basic-color-2,
  select-outline-info-disabled-border-color: border-basic-color-4,
  select-outline-info-disabled-icon-color: text-disabled-color,
  select-outline-info-disabled-text-color: text-disabled-color,
  select-outline-warning-icon-color: text-hint-color,
  select-outline-warning-text-color: text-basic-color,
  select-outline-warning-placeholder-text-color: text-hint-color,
  select-outline-warning-background-color: background-basic-color-2,
  select-outline-warning-border-color: color-warning-default,
  select-outline-warning-focus-background-color: background-basic-color-1,
  select-outline-warning-focus-border-color: color-warning-focus,
  select-outline-warning-hover-background-color: background-basic-color-3,
  select-outline-warning-hover-border-color: color-warning-hover,
  select-outline-warning-disabled-background-color: background-basic-color-2,
  select-outline-warning-disabled-border-color: border-basic-color-4,
  select-outline-warning-disabled-icon-color: text-disabled-color,
  select-outline-warning-disabled-text-color: text-disabled-color,
  select-outline-danger-icon-color: text-hint-color,
  select-outline-danger-text-color: text-basic-color,
  select-outline-danger-placeholder-text-color: text-hint-color,
  select-outline-danger-background-color: background-basic-color-2,
  select-outline-danger-border-color: color-danger-default,
  select-outline-danger-focus-background-color: background-basic-color-1,
  select-outline-danger-focus-border-color: color-danger-focus,
  select-outline-danger-hover-background-color: background-basic-color-3,
  select-outline-danger-hover-border-color: color-danger-hover,
  select-outline-danger-disabled-background-color: background-basic-color-2,
  select-outline-danger-disabled-border-color: border-basic-color-4,
  select-outline-danger-disabled-icon-color: text-disabled-color,
  select-outline-danger-disabled-text-color: text-disabled-color,
  select-outline-control-icon-color: color-basic-100,
  select-outline-control-text-color: color-basic-100,
  select-outline-control-placeholder-text-color: color-basic-100,
  select-outline-control-background-color: color-basic-control-transparent-300,
  select-outline-control-border-color: color-basic-control-transparent-500,
  select-outline-control-focus-background-color:
    color-basic-control-transparent-500,
  select-outline-control-focus-border-color:
    color-control-transparent-focus-border,
  select-outline-control-hover-background-color:
    color-basic-control-transparent-400,
  select-outline-control-hover-border-color:
    color-control-transparent-hover-border,
  select-outline-control-disabled-background-color:
    color-control-transparent-disabled,
  select-outline-control-disabled-border-color:
    color-basic-control-transparent-500,
  select-outline-control-disabled-icon-color: color-basic-100,
  select-outline-control-disabled-text-color: color-basic-100,
  select-outline-adjacent-border-style: select-outline-border-style,
  select-outline-adjacent-border-width: select-outline-border-width,
  select-outline-basic-open-border-color: select-outline-basic-border-color,
  select-outline-basic-adjacent-border-color: select-outline-basic-border-color,
  select-outline-primary-open-border-color: select-outline-primary-border-color,
  select-outline-primary-adjacent-border-color:
    select-outline-primary-border-color,
  select-outline-success-open-border-color: select-outline-success-border-color,
  select-outline-success-adjacent-border-color:
    select-outline-success-border-color,
  select-outline-info-open-border-color: select-outline-info-border-color,
  select-outline-info-adjacent-border-color: select-outline-info-border-color,
  select-outline-warning-open-border-color: select-outline-warning-border-color,
  select-outline-warning-adjacent-border-color:
    select-outline-warning-border-color,
  select-outline-danger-open-border-color: select-outline-danger-border-color,
  select-outline-danger-adjacent-border-color:
    select-outline-danger-border-color,
  select-outline-control-open-border-color: select-outline-control-border-color,
  select-outline-control-adjacent-border-color:
    select-outline-control-border-color,
  select-filled-border-style: solid,
  select-filled-border-width: 1px,
  select-filled-tiny-padding: 0.1875rem 1rem,
  select-filled-small-padding: 0.1875rem 1rem,
  select-filled-medium-padding: 0.4375rem 1rem,
  select-filled-large-padding: 0.6875rem 1rem,
  select-filled-giant-padding: 0.9375rem 1rem,
  select-filled-basic-background-color: color-basic-default,
  select-filled-basic-border-color: color-basic-default-border,
  select-filled-basic-icon-color: color-basic-800,
  select-filled-basic-text-color: color-basic-800,
  select-filled-basic-placeholder-text-color: text-hint-color,
  select-filled-basic-focus-background-color: color-basic-focus,
  select-filled-basic-focus-border-color: color-basic-focus-border,
  select-filled-basic-hover-background-color: color-basic-hover,
  select-filled-basic-hover-border-color: color-basic-hover-border,
  select-filled-basic-disabled-background-color: background-basic-color-2,
  select-filled-basic-disabled-border-color: border-basic-color-2,
  select-filled-basic-disabled-icon-color: text-disabled-color,
  select-filled-basic-disabled-text-color: text-disabled-color,
  select-filled-primary-background-color: color-primary-default,
  select-filled-primary-border-color: color-primary-default-border,
  select-filled-primary-icon-color: text-control-color,
  select-filled-primary-text-color: text-control-color,
  select-filled-primary-placeholder-text-color: text-control-color,
  select-filled-primary-focus-background-color: color-primary-focus,
  select-filled-primary-focus-border-color: color-primary-focus-border,
  select-filled-primary-hover-background-color: color-primary-hover,
  select-filled-primary-hover-border-color: color-primary-hover-border,
  select-filled-primary-disabled-background-color: background-basic-color-2,
  select-filled-primary-disabled-border-color: border-basic-color-2,
  select-filled-primary-disabled-icon-color: text-disabled-color,
  select-filled-primary-disabled-text-color: text-disabled-color,
  select-filled-success-background-color: color-success-default,
  select-filled-success-border-color: color-success-default-border,
  select-filled-success-icon-color: text-control-color,
  select-filled-success-text-color: text-control-color,
  select-filled-success-placeholder-text-color: text-control-color,
  select-filled-success-focus-background-color: color-success-focus,
  select-filled-success-focus-border-color: color-success-focus-border,
  select-filled-success-hover-background-color: color-success-hover,
  select-filled-success-hover-border-color: color-success-hover-border,
  select-filled-success-disabled-background-color: background-basic-color-2,
  select-filled-success-disabled-border-color: border-basic-color-2,
  select-filled-success-disabled-icon-color: text-disabled-color,
  select-filled-success-disabled-text-color: text-disabled-color,
  select-filled-info-background-color: color-info-default,
  select-filled-info-border-color: color-info-default-border,
  select-filled-info-icon-color: text-control-color,
  select-filled-info-text-color: text-control-color,
  select-filled-info-placeholder-text-color: text-control-color,
  select-filled-info-focus-background-color: color-info-focus,
  select-filled-info-focus-border-color: color-info-focus-border,
  select-filled-info-hover-background-color: color-info-hover,
  select-filled-info-hover-border-color: color-info-hover-border,
  select-filled-info-disabled-background-color: background-basic-color-2,
  select-filled-info-disabled-border-color: border-basic-color-2,
  select-filled-info-disabled-icon-color: text-disabled-color,
  select-filled-info-disabled-text-color: text-disabled-color,
  select-filled-warning-background-color: color-warning-default,
  select-filled-warning-border-color: color-warning-default-border,
  select-filled-warning-icon-color: text-control-color,
  select-filled-warning-text-color: text-control-color,
  select-filled-warning-placeholder-text-color: text-control-color,
  select-filled-warning-focus-background-color: color-warning-focus,
  select-filled-warning-focus-border-color: color-warning-focus-border,
  select-filled-warning-hover-background-color: color-warning-hover,
  select-filled-warning-hover-border-color: color-warning-hover-border,
  select-filled-warning-disabled-background-color: background-basic-color-2,
  select-filled-warning-disabled-border-color: border-basic-color-2,
  select-filled-warning-disabled-icon-color: text-disabled-color,
  select-filled-warning-disabled-text-color: text-disabled-color,
  select-filled-danger-background-color: color-danger-default,
  select-filled-danger-border-color: color-danger-default-border,
  select-filled-danger-icon-color: text-control-color,
  select-filled-danger-text-color: text-control-color,
  select-filled-danger-placeholder-text-color: text-control-color,
  select-filled-danger-focus-background-color: color-danger-focus,
  select-filled-danger-focus-border-color: color-danger-focus-border,
  select-filled-danger-hover-background-color: color-danger-hover,
  select-filled-danger-hover-border-color: color-danger-hover-border,
  select-filled-danger-disabled-background-color: background-basic-color-2,
  select-filled-danger-disabled-border-color: border-basic-color-2,
  select-filled-danger-disabled-icon-color: text-disabled-color,
  select-filled-danger-disabled-text-color: text-disabled-color,
  select-filled-control-background-color: color-control-default,
  select-filled-control-border-color: color-control-default-border,
  select-filled-control-icon-color: color-basic-800,
  select-filled-control-text-color: color-basic-800,
  select-filled-control-placeholder-text-color: text-hint-color,
  select-filled-control-focus-background-color: color-control-focus,
  select-filled-control-focus-border-color: color-control-focus-border,
  select-filled-control-hover-background-color: color-control-hover,
  select-filled-control-hover-border-color: color-control-hover-border,
  select-filled-control-disabled-background-color: background-basic-color-2,
  select-filled-control-disabled-border-color: border-basic-color-2,
  select-filled-control-disabled-icon-color: text-disabled-color,
  select-filled-control-disabled-text-color: text-disabled-color,
  select-hero-tiny-padding: 0.25rem 1rem,
  select-hero-small-padding: 0.25rem 1rem,
  select-hero-medium-padding: 0.5rem 1rem,
  select-hero-large-padding: 0.75rem 1rem,
  select-hero-giant-padding: 1rem 1rem,
  select-hero-basic-left-background-color: color-basic-200,
  select-hero-basic-right-background-color: color-basic-default,
  select-hero-basic-icon-color: color-basic-800,
  select-hero-basic-text-color: color-basic-800,
  select-hero-basic-placeholder-text-color: text-hint-color,
  select-hero-basic-focus-left-background-color: color-basic-300,
  select-hero-basic-focus-right-background-color: color-basic-400,
  select-hero-basic-hover-left-background-color: color-basic-100,
  select-hero-basic-hover-right-background-color: color-basic-hover,
  select-hero-basic-disabled-background-color: background-basic-color-2,
  select-hero-basic-disabled-icon-color: text-disabled-color,
  select-hero-basic-disabled-text-color: text-disabled-color,
  select-hero-primary-left-background-color: color-primary-400,
  select-hero-primary-right-background-color: color-primary-default,
  select-hero-primary-icon-color: text-control-color,
  select-hero-primary-text-color: text-control-color,
  select-hero-primary-placeholder-text-color: text-control-color,
  select-hero-primary-focus-left-background-color: color-primary-500,
  select-hero-primary-focus-right-background-color: color-primary-focus,
  select-hero-primary-hover-left-background-color: color-primary-300,
  select-hero-primary-hover-right-background-color: color-primary-hover,
  select-hero-primary-disabled-background-color: background-basic-color-2,
  select-hero-primary-disabled-icon-color: text-disabled-color,
  select-hero-primary-disabled-text-color: text-disabled-color,
  select-hero-success-left-background-color: color-success-400,
  select-hero-success-right-background-color: color-success-default,
  select-hero-success-icon-color: text-control-color,
  select-hero-success-text-color: text-control-color,
  select-hero-success-placeholder-text-color: text-control-color,
  select-hero-success-focus-left-background-color: color-success-500,
  select-hero-success-focus-right-background-color: color-success-focus,
  select-hero-success-hover-left-background-color: color-success-300,
  select-hero-success-hover-right-background-color: color-success-hover,
  select-hero-success-disabled-background-color: background-basic-color-2,
  select-hero-success-disabled-icon-color: text-disabled-color,
  select-hero-success-disabled-text-color: text-disabled-color,
  select-hero-info-left-background-color: color-info-400,
  select-hero-info-right-background-color: color-info-default,
  select-hero-info-icon-color: text-control-color,
  select-hero-info-text-color: text-control-color,
  select-hero-info-placeholder-text-color: text-control-color,
  select-hero-info-focus-left-background-color: color-info-500,
  select-hero-info-focus-right-background-color: color-info-focus,
  select-hero-info-hover-left-background-color: color-info-300,
  select-hero-info-hover-right-background-color: color-info-hover,
  select-hero-info-disabled-background-color: background-basic-color-2,
  select-hero-info-disabled-icon-color: text-disabled-color,
  select-hero-info-disabled-text-color: text-disabled-color,
  select-hero-warning-left-background-color: color-warning-400,
  select-hero-warning-right-background-color: color-warning-default,
  select-hero-warning-icon-color: text-control-color,
  select-hero-warning-text-color: text-control-color,
  select-hero-warning-placeholder-text-color: text-control-color,
  select-hero-warning-focus-left-background-color: color-warning-500,
  select-hero-warning-focus-right-background-color: color-warning-focus,
  select-hero-warning-hover-left-background-color: color-warning-300,
  select-hero-warning-hover-right-background-color: color-warning-hover,
  select-hero-warning-disabled-background-color: background-basic-color-2,
  select-hero-warning-disabled-icon-color: text-disabled-color,
  select-hero-warning-disabled-text-color: text-disabled-color,
  select-hero-danger-left-background-color: color-danger-400,
  select-hero-danger-right-background-color: color-danger-default,
  select-hero-danger-icon-color: text-control-color,
  select-hero-danger-text-color: text-control-color,
  select-hero-danger-placeholder-text-color: text-control-color,
  select-hero-danger-focus-left-background-color: color-danger-500,
  select-hero-danger-focus-right-background-color: color-danger-focus,
  select-hero-danger-hover-left-background-color: color-danger-300,
  select-hero-danger-hover-right-background-color: color-danger-hover,
  select-hero-danger-disabled-background-color: background-basic-color-2,
  select-hero-danger-disabled-icon-color: text-disabled-color,
  select-hero-danger-disabled-text-color: text-disabled-color,
  select-hero-control-left-background-color: color-control-default,
  select-hero-control-right-background-color: color-control-default,
  select-hero-control-icon-color: color-basic-800,
  select-hero-control-text-color: color-basic-800,
  select-hero-control-placeholder-text-color: text-hint-color,
  select-hero-control-focus-left-background-color: color-basic-200,
  select-hero-control-focus-right-background-color: color-control-focus,
  select-hero-control-hover-left-background-color: color-basic-100,
  select-hero-control-hover-right-background-color: color-control-hover,
  select-hero-control-disabled-background-color: background-basic-color-2,
  select-hero-control-disabled-icon-color: text-disabled-color,
  select-hero-control-disabled-text-color: text-disabled-color,
  datepicker-background-color: background-basic-color-1,
  datepicker-border-color: border-basic-color-4,
  datepicker-border-style: solid,
  datepicker-border-width: 0.0625rem,
  datepicker-border-radius: border-radius,
  datepicker-shadow: none,
  timepicker-cell-text-color: text-basic-color,
  timepicker-cell-hover-background-color: background-basic-color-2,
  timepicker-cell-hover-text-color: text-basic-color,
  timepicker-cell-focus-background-color: color-basic-focus,
  timepicker-cell-focus-text-color: text-basic-color,
  timepicker-cell-active-background-color: color-primary-default,
  timepicker-cell-active-text-color: text-control-color,
  timepicker-cell-text-font-size: text-subtitle-font-size,
  timepicker-cell-text-font-family: text-subtitle-font-family,
  timepicker-cell-text-line-height: text-subtitle-line-height,
  timepicker-cell-text-font-weight: text-subtitle-font-weight,
  timepicker-cell-height: 2.75rem,
  timepicker-header-cell-text-color: text-hint-color,
  timepicker-header-cell-text-font-size: text-subtitle-font-size,
  timepicker-header-cell-text-font-family: text-subtitle-font-family,
  timepicker-header-cell-height: 2.75rem,
  timepicker-header-cell-text-line-height: text-subtitle-line-height,
  timepicker-header-cell-text-font-weight: text-subtitle-font-weight,
  timepicker-border-color: datepicker-border-color,
  timepicker-border-style: datepicker-border-style,
  timepicker-border-width: datepicker-border-width,
  timepicker-scrollbar-color: scrollbar-color,
  timepicker-scrollbar-background-color: scrollbar-background-color,
  timepicker-scrollbar-width: scrollbar-width,
  timepicker-single-column-width: 5rem,
  timepicker-multiple-column-width: 13.875rem,
  timepicker-title-height: 3.75rem,
  timepicker-title-padding: text-paragraph-line-height,
  timepicker-container-width: 20rem,
  timepicker-container-height: 26.1875rem,
  icon-font-size: 1.25rem,
  icon-line-height: 1,
  icon-width: 1em,
  icon-height: 1em,
  icon-svg-vertical-align: top,
  icon-basic-color: text-hint-color,
  icon-primary-color: color-primary-default,
  icon-info-color: color-info-default,
  icon-success-color: color-success-default,
  icon-warning-color: color-warning-default,
  icon-danger-color: color-danger-default,
  icon-control-color: color-basic-100,
  icon-background-color: color-basic-600,
  form-field-tiny-max-width: input-tiny-max-width,
  form-field-small-max-width: input-small-max-width,
  form-field-medium-max-width: input-medium-max-width,
  form-field-large-max-width: input-large-max-width,
  form-field-giant-max-width: input-giant-max-width,
  form-field-addon-basic-text-color: color-basic-600,
  form-field-addon-basic-highlight-text-color: color-primary-500,
  form-field-addon-primary-text-color: color-primary-500,
  form-field-addon-primary-highlight-text-color: color-primary-600,
  form-field-addon-success-text-color: color-success-500,
  form-field-addon-success-highlight-text-color: color-success-600,
  form-field-addon-info-text-color: color-info-500,
  form-field-addon-info-highlight-text-color: color-info-600,
  form-field-addon-warning-text-color: color-warning-500,
  form-field-addon-warning-highlight-text-color: color-warning-600,
  form-field-addon-danger-text-color: color-danger-500,
  form-field-addon-danger-highlight-text-color: color-danger-600,
  form-field-addon-control-text-color: color-control-default,
  form-field-addon-control-highlight-text-color: color-control-default,
  form-field-addon-disabled-text-color: text-disabled-color,
  form-field-addon-tiny-height: 1.5rem,
  form-field-addon-tiny-width: form-field-addon-tiny-height,
  form-field-addon-tiny-icon-size: button-tiny-icon-size,
  form-field-addon-tiny-font-size: text-button-tiny-font-size,
  form-field-addon-tiny-line-height: text-button-tiny-line-height,
  form-field-addon-tiny-font-weight: text-button-font-weight,
  form-field-addon-small-height: 2rem,
  form-field-addon-small-width: form-field-addon-small-height,
  form-field-addon-small-icon-size: button-small-icon-size,
  form-field-addon-small-font-size: text-button-small-font-size,
  form-field-addon-small-line-height: text-button-small-line-height,
  form-field-addon-small-font-weight: text-button-font-weight,
  form-field-addon-medium-height: 2.5rem,
  form-field-addon-medium-width: form-field-addon-medium-height,
  form-field-addon-medium-icon-size: button-medium-icon-size,
  form-field-addon-medium-font-size: text-button-medium-font-size,
  form-field-addon-medium-line-height: text-button-medium-line-height,
  form-field-addon-medium-font-weight: text-button-font-weight,
  form-field-addon-large-height: 3rem,
  form-field-addon-large-width: form-field-addon-large-height,
  form-field-addon-large-icon-size: button-large-icon-size,
  form-field-addon-large-font-size: text-button-large-font-size,
  form-field-addon-large-line-height: text-button-large-line-height,
  form-field-addon-large-font-weight: text-button-font-weight,
  form-field-addon-giant-height: 3.5rem,
  form-field-addon-giant-width: form-field-addon-giant-height,
  form-field-addon-giant-icon-size: button-giant-icon-size,
  form-field-addon-giant-font-size: text-button-giant-font-size,
  form-field-addon-giant-line-height: text-button-giant-line-height,
  form-field-addon-giant-font-weight: text-button-font-weight,
  stepper-step-text-color: text-hint-color,
  stepper-step-text-font-family: text-paragraph-font-family,
  stepper-step-text-font-size: text-paragraph-font-size,
  stepper-step-text-font-weight: text-paragraph-font-weight,
  stepper-step-text-line-height: text-paragraph-line-height,
  stepper-step-active-text-color: text-primary-active-color,
  stepper-step-completed-text-color: text-primary-color,
  stepper-step-index-border-color: border-basic-color-4,
  stepper-step-index-border-style: solid,
  stepper-step-index-border-width: 1px,
  stepper-step-index-border-radius: 50%,
  stepper-step-index-width: 2rem,
  stepper-step-index-active-border-color: color-primary-active,
  stepper-step-index-completed-background-color: color-primary-default,
  stepper-step-index-completed-border-color: color-primary-default,
  stepper-step-index-completed-text-color: text-control-color,
  stepper-connector-background-color: background-basic-color-3,
  stepper-connector-completed-background-color: color-primary-default,
  stepper-horizontal-connector-margin: 1rem,
  stepper-vertical-connector-margin: 1rem,
  stepper-step-content-padding: 1.25rem,
  tabset-background-color: transparent,
  tabset-border-radius: 0,
  tabset-shadow: none,
  tabset-tab-background-color: transparent,
  tabset-tab-padding: 1rem 2rem,
  tabset-tab-text-color: text-hint-color,
  tabset-tab-text-font-family: text-button-font-family,
  tabset-tab-text-font-size: text-button-medium-font-size,
  tabset-tab-text-font-weight: text-button-font-weight,
  tabset-tab-text-line-height: text-button-medium-line-height,
  tabset-tab-text-transform: uppercase,
  tabset-tab-underline-width: 0.25rem,
  tabset-tab-underline-color: transparent,
  tabset-tab-active-background-color: transparent,
  tabset-tab-active-text-color: text-primary-color,
  tabset-tab-active-underline-color: text-primary-color,
  tabset-tab-focus-background-color: transparent,
  tabset-tab-focus-text-color: text-primary-focus-color,
  tabset-tab-focus-underline-color: text-primary-focus-color,
  tabset-tab-hover-background-color: transparent,
  tabset-tab-hover-text-color: text-primary-hover-color,
  tabset-tab-hover-underline-color: text-primary-hover-color,
  tabset-tab-disabled-background-color: transparent,
  tabset-tab-disabled-text-color: text-disabled-color,
  tabset-tab-disabled-underline-color: transparent,
  tabset-tab–badge-dot-mode-horizontal-offset: 0.75rem,
  tabset-tab-badge-dot-mode-padding: 0.25rem,
  tabset-divider-color: divider-color,
  tabset-divider-style: divider-style,
  tabset-divider-width: divider-width,
  tabset-content-background-color: transparent,
  tabset-content-padding: 1rem 2rem,
  tabset-content-text-color: text-basic-color,
  tabset-content-text-font-family: text-paragraph-font-family,
  tabset-content-text-font-size: text-paragraph-font-size,
  tabset-content-text-font-weight: text-paragraph-font-weight,
  tabset-content-text-line-height: text-paragraph-line-height,
  tabset-scrollbar-color: scrollbar-color,
  tabset-scrollbar-background-color: scrollbar-background-color,
  tabset-scrollbar-width: scrollbar-width,
  tabset-tab-text-hide-breakpoint: 36rem,
  file-input-icon-color: color-basic-100,
  file-input-basic-icon-color: color-basic-700,
  user-picture-box-border-width: 1px,
  user-initials-text-color: text-basic-color,
  user-initials-text-font-family: text-paragraph-font-family,
  user-initials-text-font-weight: text-paragraph-font-weight,
  user-name-text-color: text-basic-color,
  user-name-text-font-family: text-paragraph-font-family,
  user-name-text-font-weight: text-paragraph-font-weight,
  user-title-text-color: text-basic-color,
  user-title-text-font-family: text-paragraph-2-font-family,
  user-title-text-font-weight: text-paragraph-2-font-weight,
  user-rectangle-border-radius: 0.5rem,
  user-semi-round-border-radius: 0.75rem,
  user-round-border-radius: 50%,
  user-tiny-height: 1.25rem,
  user-tiny-width: 1.25rem,
  user-tiny-initials-text-font-size: text-caption-font-size,
  user-tiny-initials-text-line-height: text-caption-line-height,
  user-tiny-name-text-font-size: text-caption-font-size,
  user-tiny-name-text-line-height: text-caption-line-height,
  user-tiny-title-text-font-size: text-caption-font-size,
  user-tiny-title-text-line-height: text-caption-line-height,
  user-small-height: 1.5rem,
  user-small-width: 1.5rem,
  user-small-initials-text-font-size: text-caption-font-size,
  user-small-initials-text-line-height: text-caption-line-height,
  user-small-name-text-font-size: text-caption-font-size,
  user-small-name-text-line-height: text-caption-line-height,
  user-small-title-text-font-size: text-caption-font-size,
  user-small-title-text-line-height: text-caption-line-height,
  user-medium-height: 2.5rem,
  user-medium-width: 2.5rem,
  user-medium-initials-text-font-size: text-paragraph-font-size,
  user-medium-initials-text-line-height: text-paragraph-line-height,
  user-medium-name-text-font-size: text-paragraph-font-size,
  user-medium-name-text-line-height: text-paragraph-line-height,
  user-medium-title-text-font-size: text-caption-font-size,
  user-medium-title-text-line-height: text-caption-line-height,
  user-large-height: 3.25rem,
  user-large-width: 3.25rem,
  user-large-initials-text-font-size: text-paragraph-font-size,
  user-large-initials-text-line-height: text-paragraph-line-height,
  user-large-name-text-font-size: text-paragraph-font-size,
  user-large-name-text-line-height: text-paragraph-line-height,
  user-large-title-text-font-size: text-paragraph-2-font-size,
  user-large-title-text-line-height: text-paragraph-2-line-height,
  user-giant-height: 4rem,
  user-giant-width: 4rem,
  user-giant-initials-text-font-size: text-paragraph-font-size,
  user-giant-initials-text-line-height: text-paragraph-line-height,
  user-giant-name-text-font-size: text-paragraph-font-size,
  user-giant-name-text-line-height: text-paragraph-line-height,
  user-giant-title-text-font-size: text-paragraph-font-size,
  user-giant-title-text-line-height: text-paragraph-line-height,
  list-item-divider-color: divider-color,
  list-item-divider-width: divider-width,
  list-item-divider-style: divider-style,
  list-item-padding: 1rem,
  list-item-text-color: text-basic-color,
  list-item-font-family: text-paragraph-font-family,
  list-item-font-size: text-paragraph-font-size,
  list-item-font-weight: text-paragraph-font-weight,
  list-item-line-height: text-paragraph-line-height,
  calendar-width: 20.625rem,
  calendar-background-color: background-basic-color-1,
  calendar-border-color: border-basic-color-4,
  calendar-border-style: solid,
  calendar-border-width: 0.0625rem,
  calendar-border-radius: border-radius,
  calendar-text-color: text-basic-color,
  calendar-text-font-family: text-subtitle-font-family,
  calendar-text-font-size: text-subtitle-font-size,
  calendar-text-font-weight: text-subtitle-font-weight,
  calendar-text-line-height: text-subtitle-line-height,
  calendar-picker-padding-top: 0.25rem,
  calendar-picker-padding-bottom: 0.625rem,
  calendar-picker-padding-start: 0.625rem,
  calendar-picker-padding-end: 0.625rem,
  calendar-navigation-text-color: text-basic-color,
  calendar-navigation-text-font-family: text-button-font-family,
  calendar-navigation-title-text-font-size: text-button-medium-font-size,
  calendar-navigation-title-text-font-weight: text-button-font-weight,
  calendar-navigation-title-text-line-height: text-button-medium-line-height,
  calendar-navigation-padding: 0.625rem 0.25rem,
  calendar-cell-inactive-text-color: text-hint-color,
  calendar-cell-disabled-text-color: text-disabled-color,
  calendar-cell-hover-background-color: background-basic-color-2,
  calendar-cell-hover-border-color: background-basic-color-2,
  calendar-cell-hover-text-color: text-basic-color,
  calendar-cell-hover-text-font-size: calendar-text-font-size,
  calendar-cell-hover-text-font-weight: calendar-text-font-weight,
  calendar-cell-hover-text-line-height: calendar-text-line-height,
  calendar-cell-active-background-color: color-primary-active,
  calendar-cell-active-border-color: color-primary-active-border,
  calendar-cell-active-text-color: text-control-color,
  calendar-cell-active-text-font-size: calendar-text-font-size,
  calendar-cell-active-text-font-weight: calendar-text-font-weight,
  calendar-cell-active-text-line-height: calendar-text-line-height,
  calendar-cell-today-background-color: color-primary-transparent-default,
  calendar-cell-today-border-color: color-primary-transparent-default-border,
  calendar-cell-today-text-color: text-basic-color,
  calendar-cell-today-text-font-size: calendar-text-font-size,
  calendar-cell-today-text-font-weight: calendar-text-font-weight,
  calendar-cell-today-text-line-height: calendar-text-line-height,
  calendar-cell-today-hover-background-color: color-primary-transparent-hover,
  calendar-cell-today-hover-border-color: color-primary-transparent-hover-border,
  calendar-cell-today-active-background-color: color-primary-transparent-active,
  calendar-cell-today-active-border-color:
    color-primary-transparent-active-border,
  calendar-cell-today-disabled-border-color: border-basic-color-4,
  calendar-cell-today-selected-background-color:
    color-control-transparent-default,
  calendar-cell-today-selected-border-color: transparent,
  calendar-cell-today-selected-text-color: text-control-color,
  calendar-cell-today-selected-hover-background-color:
    color-control-transparent-hover,
  calendar-cell-today-selected-hover-border-color: transparent,
  calendar-cell-today-selected-active-background-color:
    color-control-transparent-active,
  calendar-cell-today-selected-active-border-color: transparent,
  calendar-cell-today-in-range-background-color:
    color-control-transparent-default,
  calendar-cell-today-in-range-border-color: transparent,
  calendar-cell-today-in-range-text-color: text-control-color,
  calendar-cell-today-in-range-hover-background-color:
    color-control-transparent-hover,
  calendar-cell-today-in-range-hover-border-color: transparent,
  calendar-cell-today-in-range-active-background-color:
    color-control-transparent-active,
  calendar-cell-today-in-range-active-border-color: transparent,
  calendar-cell-selected-background-color: color-primary-default,
  calendar-cell-selected-border-color: color-primary-default-border,
  calendar-cell-selected-text-color: text-control-color,
  calendar-cell-selected-text-font-size: calendar-text-font-size,
  calendar-cell-selected-text-font-weight: calendar-text-font-weight,
  calendar-cell-selected-text-line-height: calendar-text-line-height,
  calendar-cell-selected-hover-background-color: color-primary-hover,
  calendar-cell-selected-hover-border-color: color-primary-hover-border,
  calendar-cell-selected-active-background-color: color-primary-active,
  calendar-cell-selected-active-border-color: color-primary-active-border,
  calendar-day-cell-width: 2.75rem,
  calendar-day-cell-height: 2.75rem,
  calendar-month-cell-width: 4.8125rem,
  calendar-month-cell-height: calendar-day-cell-height,
  calendar-year-cell-width: calendar-month-cell-width,
  calendar-year-cell-height: calendar-month-cell-height,
  calendar-weekday-background: transparent,
  calendar-weekday-divider-color: divider-color,
  calendar-weekday-divider-width: divider-width,
  calendar-weekday-text-color: text-hint-color,
  calendar-weekday-text-font-size: text-subtitle-font-size,
  calendar-weekday-text-font-weight: text-subtitle-font-weight,
  calendar-weekday-text-line-height: text-subtitle-line-height,
  calendar-weekday-holiday-text-color: calendar-weekday-text-color,
  calendar-weekday-height: calendar-day-cell-height,
  calendar-weekday-width: calendar-day-cell-width,
  calendar-weeknumber-background: transparent,
  calendar-weeknumber-divider-color: divider-color,
  calendar-weeknumber-divider-width: divider-width,
  calendar-weeknumber-text-color: text-hint-color,
  calendar-weeknumber-text-font-size: text-subtitle-font-size,
  calendar-weeknumber-text-font-weight: text-subtitle-font-weight,
  calendar-weeknumber-text-line-height: text-subtitle-line-height,
  calendar-weeknumber-height: calendar-weekday-height,
  calendar-weeknumber-width: calendar-weekday-width,
  calendar-large-width: 22.375rem,
  calendar-day-cell-large-width: 3rem,
  calendar-day-cell-large-height: 3rem,
  calendar-weekday-large-height: calendar-day-cell-large-width,
  calendar-weekday-large-width: calendar-day-cell-large-height,
  calendar-weeknumber-large-height: calendar-weekday-large-height,
  calendar-weeknumber-large-width: calendar-weekday-large-width,
  calendar-month-cell-large-width: 5.25rem,
  calendar-month-cell-large-height: calendar-day-cell-large-height,
  calendar-year-cell-large-width: calendar-month-cell-large-width,
  calendar-year-cell-large-height: calendar-month-cell-large-height,
  
  radio-width: 1.25rem,
  radio-height: 1.25rem,
  radio-border-style: solid,
  radio-border-width: 1px,
  radio-text-font-family: text-subtitle-2-font-family,
  radio-text-font-size: text-subtitle-2-font-size,
  radio-text-font-weight: text-subtitle-2-font-weight,
  radio-text-line-height: text-subtitle-2-line-height,
  radio-outline-color: outline-color,
  radio-outline-width: outline-width,

  radio-basic-text-color: text-basic-color,
  radio-basic-border-color: color-basic-transparent-default-border,
  radio-basic-background-color: color-basic-transparent-default,
  radio-basic-checked-background-color: transparent,
  radio-basic-checked-border-color: color-primary-default-border,
  radio-basic-inner-circle-color: color-primary-default,
  radio-basic-focus-border-color: color-primary-transparent-focus-border,
  radio-basic-focus-background-color: color-primary-transparent-focus,
  radio-basic-focus-checked-background-color: transparent,
  radio-basic-focus-checked-border-color: color-primary-focus-border,
  radio-basic-focus-inner-circle-color: color-primary-focus,
  radio-basic-hover-background-color: color-primary-transparent-hover,
  radio-basic-hover-border-color: color-primary-transparent-hover-border,
  radio-basic-hover-inner-circle-color: color-primary-hover,
  radio-basic-hover-checked-background-color: transparent,
  radio-basic-hover-checked-border-color: color-primary-hover-border,
  radio-basic-active-background-color: color-primary-transparent-active,
  radio-basic-active-border-color: color-primary-transparent-active-border,
  radio-basic-active-inner-circle-color: color-primary-active,
  radio-basic-active-checked-background-color: transparent,
  radio-basic-active-checked-border-color: color-primary-active-border,
  radio-basic-disabled-background-color: color-basic-transparent-disabled,
  radio-basic-disabled-border-color: color-basic-transparent-disabled-border,
  radio-basic-disabled-text-color: text-disabled-color,
  radio-basic-disabled-checked-background-color: transparent,
  radio-basic-disabled-checked-border-color: color-basic-transparent-600,
  radio-basic-disabled-checked-inner-circle-color: color-basic-transparent-600,

  radio-primary-text-color: text-basic-color,
  radio-primary-border-color: color-primary-transparent-default-border,
  radio-primary-background-color: color-primary-transparent-default,
  radio-primary-checked-background-color: transparent,
  radio-primary-checked-border-color: color-primary-default-border,
  radio-primary-inner-circle-color: color-primary-default,
  radio-primary-focus-border-color: color-primary-transparent-focus-border,
  radio-primary-focus-background-color: color-primary-transparent-focus,
  radio-primary-focus-checked-background-color: transparent,
  radio-primary-focus-checked-border-color: color-primary-focus-border,
  radio-primary-focus-inner-circle-color: color-primary-focus,
  radio-primary-hover-background-color: color-primary-transparent-hover,
  radio-primary-hover-border-color: color-primary-transparent-hover-border,
  radio-primary-hover-inner-circle-color: color-primary-hover,
  radio-primary-hover-checked-background-color: transparent,
  radio-primary-hover-checked-border-color: color-primary-hover-border,
  radio-primary-active-border-color: color-primary-transparent-active-border,
  radio-primary-active-background-color: color-primary-transparent-active,
  radio-primary-active-checked-background-color: transparent,
  radio-primary-active-checked-border-color: color-primary-active-border,
  radio-primary-active-inner-circle-color: color-primary-active,
  radio-primary-disabled-background-color: color-basic-transparent-disabled,
  radio-primary-disabled-border-color: color-basic-transparent-disabled-border,
  radio-primary-disabled-text-color: text-disabled-color,
  radio-primary-disabled-checked-background-color: transparent,
  radio-primary-disabled-checked-border-color: color-basic-transparent-600,
  radio-primary-disabled-checked-inner-circle-color: color-basic-transparent-600,

  radio-success-text-color: text-basic-color,
  radio-success-border-color: color-success-transparent-default-border,
  radio-success-background-color: color-success-transparent-default,
  radio-success-checked-background-color: transparent,
  radio-success-checked-border-color: color-success-default-border,
  radio-success-inner-circle-color: color-success-default,
  radio-success-focus-border-color: color-success-transparent-focus-border,
  radio-success-focus-background-color: color-success-transparent-focus,
  radio-success-focus-checked-background-color: transparent,
  radio-success-focus-checked-border-color: color-success-focus-border,
  radio-success-focus-inner-circle-color: color-success-focus,
  radio-success-hover-background-color: color-success-transparent-hover,
  radio-success-hover-border-color: color-success-transparent-hover-border,
  radio-success-hover-inner-circle-color: color-success-hover,
  radio-success-hover-checked-background-color: transparent,
  radio-success-hover-checked-border-color: color-success-hover-border,
  radio-success-active-background-color: color-success-transparent-active,
  radio-success-active-border-color: color-success-transparent-active-border,
  radio-success-active-checked-background-color: transparent,
  radio-success-active-checked-border-color: color-success-active-border,
  radio-success-active-inner-circle-color: color-success-active,
  radio-success-disabled-background-color: color-basic-transparent-disabled,
  radio-success-disabled-border-color: color-basic-transparent-disabled-border,
  radio-success-disabled-text-color: text-disabled-color,
  radio-success-disabled-checked-background-color: transparent,
  radio-success-disabled-checked-border-color: color-basic-transparent-600,
  radio-success-disabled-checked-inner-circle-color: color-basic-transparent-600,

  radio-info-text-color: text-basic-color,
  radio-info-border-color: color-info-transparent-default-border,
  radio-info-background-color: color-info-transparent-default,
  radio-info-checked-background-color: transparent,
  radio-info-checked-border-color: color-info-default-border,
  radio-info-inner-circle-color: color-info-default,
  radio-info-focus-background-color: color-info-transparent-focus,
  radio-info-focus-border-color: color-info-transparent-focus-border,
  radio-info-focus-checked-background-color: transparent,
  radio-info-focus-checked-border-color: color-info-focus-border,
  radio-info-focus-inner-circle-color: color-info-focus,
  radio-info-hover-background-color: color-info-transparent-hover,
  radio-info-hover-border-color: color-info-transparent-hover-border,
  radio-info-hover-inner-circle-color: color-info-hover,
  radio-info-hover-checked-background-color: transparent,
  radio-info-hover-checked-border-color: color-info-hover-border,
  radio-info-active-background-color: color-info-transparent-active,
  radio-info-active-border-color: color-info-transparent-active-border,
  radio-info-active-checked-background-color: transparent,
  radio-info-active-checked-border-color: color-info-active-border,
  radio-info-active-inner-circle-color: color-info-active,
  radio-info-disabled-background-color: color-basic-transparent-disabled,
  radio-info-disabled-border-color: color-basic-transparent-disabled-border,
  radio-info-disabled-text-color: text-disabled-color,
  radio-info-disabled-checked-background-color: transparent,
  radio-info-disabled-checked-border-color: color-basic-transparent-600,
  radio-info-disabled-checked-inner-circle-color: color-basic-transparent-600,

  radio-warning-text-color: text-basic-color,
  radio-warning-border-color: color-warning-transparent-default-border,
  radio-warning-background-color: color-warning-transparent-default,
  radio-warning-checked-background-color: transparent,
  radio-warning-checked-border-color: color-warning-default-border,
  radio-warning-inner-circle-color: color-warning-default,
  radio-warning-focus-background-color: color-warning-transparent-focus,
  radio-warning-focus-border-color: color-warning-transparent-focus-border,
  radio-warning-focus-checked-background-color: transparent,
  radio-warning-focus-checked-border-color: color-warning-focus-border,
  radio-warning-focus-inner-circle-color: color-warning-focus,
  radio-warning-hover-background-color: color-warning-transparent-hover,
  radio-warning-hover-border-color: color-warning-transparent-hover-border,
  radio-warning-hover-inner-circle-color: color-warning-hover,
  radio-warning-hover-checked-background-color: transparent,
  radio-warning-hover-checked-border-color: color-warning-hover-border,
  radio-warning-active-background-color: color-warning-transparent-active,
  radio-warning-active-border-color: color-warning-transparent-active-border,
  radio-warning-active-checked-background-color: transparent,
  radio-warning-active-checked-border-color: color-warning-active-border,
  radio-warning-active-inner-circle-color: color-warning-active,
  radio-warning-disabled-background-color: color-basic-transparent-disabled,
  radio-warning-disabled-border-color: color-basic-transparent-disabled-border,
  radio-warning-disabled-text-color: text-disabled-color,
  radio-warning-disabled-checked-background-color: transparent,
  radio-warning-disabled-checked-border-color: color-basic-transparent-600,
  radio-warning-disabled-checked-inner-circle-color: color-basic-transparent-600,

  radio-danger-text-color: text-basic-color,
  radio-danger-border-color: color-danger-transparent-default-border,
  radio-danger-background-color: color-danger-transparent-default,
  radio-danger-checked-background-color: transparent,
  radio-danger-checked-border-color: color-danger-default-border,
  radio-danger-inner-circle-color: color-danger-default,
  radio-danger-focus-background-color: color-danger-transparent-focus,
  radio-danger-focus-border-color: color-danger-transparent-focus-border,
  radio-danger-focus-checked-background-color: transparent,
  radio-danger-focus-checked-border-color: color-danger-focus-border,
  radio-danger-focus-inner-circle-color: color-danger-focus,
  radio-danger-hover-background-color: color-danger-transparent-hover,
  radio-danger-hover-border-color: color-danger-transparent-hover-border,
  radio-danger-hover-inner-circle-color: color-danger-hover,
  radio-danger-hover-checked-background-color: transparent,
  radio-danger-hover-checked-border-color: color-danger-hover-border,
  radio-danger-active-background-color: color-danger-transparent-active,
  radio-danger-active-border-color: color-danger-transparent-active-border,
  radio-danger-active-checked-background-color: transparent,
  radio-danger-active-checked-border-color: color-danger-active-border,
  radio-danger-active-inner-circle-color: color-danger-active,
  radio-danger-disabled-background-color: color-basic-transparent-disabled,
  radio-danger-disabled-border-color: color-basic-transparent-disabled-border,
  radio-danger-disabled-text-color: text-disabled-color,
  radio-danger-disabled-checked-background-color: transparent,
  radio-danger-disabled-checked-border-color: color-basic-transparent-600,
  radio-danger-disabled-checked-inner-circle-color: color-basic-transparent-600,

  radio-control-text-color: text-control-color,
  radio-control-background-color: color-control-transparent-default,
  radio-control-border-color: color-control-transparent-default-border,
  radio-control-checked-background-color: transparent,
  radio-control-checked-border-color: color-control-default-border,
  radio-control-inner-circle-color: color-control-default,
  radio-control-focus-background-color: color-control-transparent-focus,
  radio-control-focus-border-color: color-control-transparent-focus-border,
  radio-control-focus-checked-background-color: transparent,
  radio-control-focus-checked-border-color: color-control-focus-border,
  radio-control-focus-inner-circle-color: color-control-focus,
  radio-control-hover-background-color: color-control-transparent-hover,
  radio-control-hover-border-color: color-control-transparent-hover-border,
  radio-control-hover-inner-circle-color: color-control-hover,
  radio-control-hover-checked-background-color: transparent,
  radio-control-hover-checked-border-color: color-control-hover-border,
  radio-control-active-background-color: color-control-transparent-active,
  radio-control-active-border-color: color-control-transparent-active-border,
  radio-control-active-checked-background-color: transparent,
  radio-control-active-checked-border-color: color-control-active-border,
  radio-control-active-inner-circle-color: color-control-active,
  radio-control-disabled-background-color: color-control-transparent-disabled,
  radio-control-disabled-border-color: color-control-transparent-disabled-border,
  radio-control-disabled-text-color: color-basic-100,
  radio-control-disabled-checked-background-color: transparent,
  radio-control-disabled-checked-border-color: color-basic-transparent-600,
  radio-control-disabled-checked-inner-circle-color: color-basic-transparent-600
);


@function r-get-enabled-themes() {

  @if (length($r-enabled-themes) == 0) {
    @each $theme-name, $theme in $r-themes {
      $r-enabled-themes: append($r-enabled-themes, $theme-name) !global;
    }
  }
  @return $r-enabled-themes;
}

@function get-last-enabled-theme() {
  $themes: r-get-enabled-themes();
  @return nth($themes, length($themes));
}

@function r-set-for-export($theme, $name, $parent-name: null) {

  $parent-theme: map-get($r-themes-export, $parent-name);
  @if ($parent-theme != null) {
    $theme: map-merge(map-get($parent-theme, data), $theme);
  }

  $theme-data: (
    data: $theme,
    parent: $parent-name,
  );
  @return map-set($r-themes-export, $name, $theme-data);
}

@function r-get-registered-theme($name) {
  $theme: map-get($r-themes, $name);

  // TODO: check if optimal place
  @if ($theme == null) {
    @error 'R Theme: theme `' + $name + '` is not registered with `r-register-theme` function.';
  }

  @return $theme;
}

// Entry point
// Registers a new theme
@function r-register-theme($theme, $name, $parent-name: null) {

  @if ($r-theme-export-mode == true) {
    $r-themes-export: r-set-for-export($theme, $name, $parent-name) !global;
  }

  $theme-data: ();

  @if ($parent-name != null) {
    $parent-theme: map-get($r-themes, $parent-name);
    @if ($parent-theme == null) {
      @error 'R Theme: parent theme `' + $parent-name + '` is not registered or imported.';
    }
    $theme: map-merge($parent-theme, $theme);
  }
  $theme: map-merge($r-design-mapping, $theme);
  $r-themes: map-set($r-themes, $name, $theme) !global;

  @return $r-themes;
}

// 

@mixin r-for-theme($name) {
  @if ($r-theme-name == $name) {
    @content;
  }
}

@mixin r-for-themes($names...) {
  @each $name in $names {
    @include r-for-theme($name) {
      @content;
    }
  }
}

@mixin r-except-theme($name) {
  @if ($r-theme-name != $name) {
    @content;
  }
}

@mixin r-except-for-themes($names...) {
  @each $name in $names {
    @include r-except-theme($name) {
      @content;
    }
  }
}

@mixin r-install-css-properties($theme-name, $theme) {
  .r-theme-#{$theme-name} {

    @each $var, $value in $theme {
      @if (type-of($value) == 'string' and map-get($theme, $value)) {
        --#{$var}: var(--#{$value});
      } @else {
        --#{$var}: #{$value};
      }
    }
  }
}

@mixin r-pre-process-context($theme-name) {
  $r-theme-process-mode: 'pre-process' !global;

  $r-theme-name: $theme-name !global;
  $r-processed-theme: r-process-theme(r-get-registered-theme($theme-name)) !global;
}

@mixin r-lazy-process-context($theme-name) {
  $r-theme-process-mode: 'lazy-process' !global;

  $r-theme-name: $theme-name !global;
  $r-processed-theme: () !global;
}

@mixin r-install-component-with-css-props() {
  :host {
    @content;
  }
}

@mixin r-install-component-with-scss-vars() {
  $enabled-themes: r-get-enabled-themes();

  @each $theme-name in $enabled-themes {

    @include r-lazy-process-context($theme-name);

    /*
      :host can be prefixed
      https://github.com/angular/angular/blob/8d0ee34939f14c07876d222c25b405ed458a34d3/packages/compiler/src/shadow_css.ts#L441

      We have to use :host instead of :host-context($theme), to be able to prefix theme class
      with something defined inside of @content, by prefixing &.
      For example this scss code:
        .r-theme-default {
          .some-selector & {
            ...
          }
        }
      Will result in next css:
        .some-selector .r-theme-default {
          ...
        }

      It doesn't work with :host-context because angular splitting it in two selectors and removes
      prefix in one of the selectors.
    */
    .r-theme-#{$theme-name} :host {
      @content;
    }
  }
}

// Entry point
// Installs component styles based on registered themes
// TODO: we hide :host inside of it which is not obvious
@mixin r-install-component() {

  @if ($r-enable-css-custom-properties) {

    @include r-install-component-with-css-props() {
      @content;
    }

  } @else {

    @include r-install-component-with-scss-vars() {
      @content;
    }
  }
}

@mixin r-install-global-with-css-props() {
  @content;

  @each $theme-name in r-get-enabled-themes() {
    @include r-install-css-properties($theme-name, r-get-registered-theme($theme-name));
  }
}

@mixin r-install-global-with-scss-vars() {

  @each $theme-name in r-get-enabled-themes() {
    @include r-pre-process-context($theme-name);

    .r-theme-#{$theme-name} {
      @content;
    }
  }
}

// Entry point
// Installs global styles based on registered themes
@mixin r-install() {
  @if ($r-enable-css-custom-properties) {
    @include r-install-global-with-css-props() {
      @content;
    }
  } @else {
    @include r-install-global-with-scss-vars() {
      @content;
    }
  }
}

@function r-deep-find-value($theme, $key, $value) {
  $parent-value: map-get($theme, $value);

  @if ($parent-value != null) {
    @return r-deep-find-value($theme, $value, $parent-value);
  }

  @return $value;
}

@function r-process-theme($theme) {
  $processed-theme: ();
  @each $key, $value in $theme {
    $processed-theme: map-set($processed-theme, $key, r-deep-find-value($theme, $key, $value));
  }
  @return $processed-theme;
}

@function get-current-theme-name() {
  @if ($r-theme-name != null) {
    @return $r-theme-name;
  }

  @return get-last-enabled-theme();
}

@function r-theme($key) {

  $value: ();

  // in case of css custom properties - just returns var(--var-name) - the rest is a browser job
  // $r-enable-css-custom-properties == true
  @if (false) {
    // there is no way to check if variable exists as current execution context is outside of particular theme
    // because we process css in this mode only once! (and not for each theme)
    $value: var(--#{$key});
  } @else {
    // in a preprocess mode (r-install-global call) get ready value from $r-processed-theme variable
    // @if ($r-theme-process-mode == 'pre-process') {
    //   $value: map-get($r-processed-theme, $key);
    // }
    // otherwise lazily search for variable value
      $r-theme-name: get-current-theme-name();
      $theme: r-get-registered-theme($r-theme-name);
      $value: r-deep-find-value($theme, $key, map-get($theme, $key));
    // @if ($r-theme-process-mode == 'lazy-process') {

    //   $r-theme-name: get-current-theme-name();

    //   $theme: r-get-registered-theme($r-theme-name);
    //   $value: r-deep-find-value($theme, $key, map-get($theme, $key));
    // }
  }

  @if ($value == null) {
    @warn 'R Theme: `r-theme()` cannot find value for key `' + $key + '` for theme `'+ $r-theme-name +'`';
  }

  @return $value;
}






$theme: (
  /**
   * Sass map contains a list of all Theme variables and also their mappings into Component variables
   * A theme consists of a list of colors, backgrounds, borders, text styles and supporting variables.
   */
  /* Status colors: primary, success, info, warning, danger - for colored elements (buttons, etc) */

  color-primary-100: #f2f6ff,
  color-primary-200: #d9e4ff,
  color-primary-300: #a6c1ff,
  color-primary-400: #598bff,
  color-primary-500: #3366ff,
  color-primary-600: #274bdb,
  color-primary-700: #1a34b8,
  color-primary-800: #102694,
  color-primary-900: #091c7a,

  color-primary-transparent-100: rgba(51, 102, 255, 0.08),
  color-primary-transparent-200: rgba(51, 102, 255, 0.16),
  color-primary-transparent-300: rgba(51, 102, 255, 0.24),
  color-primary-transparent-400: rgba(51, 102, 255, 0.32),
  color-primary-transparent-500: rgba(51, 102, 255, 0.4),
  color-primary-transparent-600: rgba(51, 102, 255, 0.48),

  color-success-100: #f0fff5,
  color-success-200: #ccfce3,
  color-success-300: #8cfac7,
  color-success-400: #2ce69b,
  color-success-500: #00d68f,
  color-success-600: #00b887,
  color-success-700: #00997a,
  color-success-800: #007d6c,
  color-success-900: #004a45,

  color-success-transparent-100: rgba(0, 214, 143, 0.08),
  color-success-transparent-200: rgba(0, 214, 143, 0.16),
  color-success-transparent-300: rgba(0, 214, 143, 0.24),
  color-success-transparent-400: rgba(0, 214, 143, 0.32),
  color-success-transparent-500: rgba(0, 214, 143, 0.4),
  color-success-transparent-600: rgba(0, 214, 143, 0.48),

  color-info-100: #f2f8ff,
  color-info-200: #c7e2ff,
  color-info-300: #94cbff,
  color-info-400: #42aaff,
  color-info-500: #0095ff,
  color-info-600: #006fd6,
  color-info-700: #0057c2,
  color-info-800: #0041a8,
  color-info-900: #002885,

  color-info-transparent-100: rgba(0, 149, 255, 0.08),
  color-info-transparent-200: rgba(0, 149, 255, 0.16),
  color-info-transparent-300: rgba(0, 149, 255, 0.24),
  color-info-transparent-400: rgba(0, 149, 255, 0.32),
  color-info-transparent-500: rgba(0, 149, 255, 0.4),
  color-info-transparent-600: rgba(0, 149, 255, 0.48),

  color-warning-100: #fffdf2,
  color-warning-200: #fff1c2,
  color-warning-300: #ffe59e,
  color-warning-400: #ffc94d,
  color-warning-500: #ffaa00,
  color-warning-600: #db8b00,
  color-warning-700: #b86e00,
  color-warning-800: #945400,
  color-warning-900: #703c00,

  color-warning-transparent-100: rgba(255, 170, 0, 0.08),
  color-warning-transparent-200: rgba(255, 170, 0, 0.16),
  color-warning-transparent-300: rgba(255, 170, 0, 0.24),
  color-warning-transparent-400: rgba(255, 170, 0, 0.32),
  color-warning-transparent-500: rgba(255, 170, 0, 0.4),
  color-warning-transparent-600: rgba(255, 170, 0, 0.48),

  color-danger-100: #fff2f2,
  color-danger-200: #ffd6d9,
  color-danger-300: #ffa8b4,
  color-danger-400: #ff708d,
  color-danger-500: #ff3d71,
  color-danger-600: #db2c66,
  color-danger-700: #b81d5b,
  color-danger-800: #94124e,
  color-danger-900: #700940,

  color-danger-transparent-100: rgba(255, 61, 113, 0.08),
  color-danger-transparent-200: rgba(255, 61, 113, 0.16),
  color-danger-transparent-300: rgba(255, 61, 113, 0.24),
  color-danger-transparent-400: rgba(255, 61, 113, 0.32),
  color-danger-transparent-500: rgba(255, 61, 113, 0.4),
  color-danger-transparent-600: rgba(255, 61, 113, 0.48),

  /* Basic colors - for backgrounds and borders and texts */

  color-basic-100: #ffffff,
  color-basic-200: #f7f9fc,
  color-basic-300: #edf1f7,
  color-basic-400: #e4e9f2,
  color-basic-500: #c5cee0,
  color-basic-600: #8f9bb3,
  color-basic-700: #2e3a59,
  color-basic-800: #222b45,
  color-basic-900: #192038,
  color-basic-1000: #151a30,
  color-basic-1100: #101426,

  color-basic-transparent-100: rgba(143, 155, 179, 0.08),
  color-basic-transparent-200: rgba(143, 155, 179, 0.16),
  color-basic-transparent-300: rgba(143, 155, 179, 0.24),
  color-basic-transparent-400: rgba(143, 155, 179, 0.32),
  color-basic-transparent-500: rgba(143, 155, 179, 0.4),
  color-basic-transparent-600: rgba(143, 155, 179, 0.48),

  color-basic-control-transparent-100: rgba(255, 255, 255, 0.08),
  color-basic-control-transparent-200: rgba(255, 255, 255, 0.16),
  color-basic-control-transparent-300: rgba(255, 255, 255, 0.24),
  color-basic-control-transparent-400: rgba(255, 255, 255, 0.32),
  color-basic-control-transparent-500: rgba(255, 255, 255, 0.4),
  color-basic-control-transparent-600: rgba(255, 255, 255, 0.48),

  /* Status colors states - focus, hover, default, active, disabled  */

  color-basic-focus: color-basic-400,
  color-basic-hover: color-basic-200,
  color-basic-default: color-basic-300,
  color-basic-active: color-basic-400,
  color-basic-disabled: color-basic-transparent-300,
  color-basic-focus-border: color-basic-500,
  color-basic-hover-border: color-basic-hover,
  color-basic-default-border: color-basic-default,
  color-basic-active-border: color-basic-active,
  color-basic-disabled-border: color-basic-disabled,

  color-basic-transparent-focus: color-basic-transparent-300,
  color-basic-transparent-hover: color-basic-transparent-200,
  color-basic-transparent-default: color-basic-transparent-100,
  color-basic-transparent-active: color-basic-transparent-300,
  color-basic-transparent-disabled: color-basic-transparent-200,
  color-basic-transparent-focus-border: color-basic-600,
  color-basic-transparent-hover-border: color-basic-600,
  color-basic-transparent-default-border: color-basic-600,
  color-basic-transparent-active-border: color-basic-600,
  color-basic-transparent-disabled-border: color-basic-transparent-300,

  color-primary-focus: color-primary-600,
  color-primary-hover: color-primary-400,
  color-primary-default: color-primary-500,
  color-primary-active: color-primary-600,
  color-primary-disabled: color-basic-transparent-300,
  color-primary-focus-border: color-primary-700,
  color-primary-hover-border: color-primary-hover,
  color-primary-default-border: color-primary-default,
  color-primary-active-border: color-primary-active,
  color-primary-disabled-border: color-primary-disabled,

  color-primary-transparent-focus: color-primary-transparent-300,
  color-primary-transparent-hover: color-primary-transparent-200,
  color-primary-transparent-default: color-primary-transparent-100,
  color-primary-transparent-active: color-primary-transparent-300,
  color-primary-transparent-disabled: color-basic-transparent-200,
  color-primary-transparent-focus-border: color-primary-500,
  color-primary-transparent-hover-border: color-primary-500,
  color-primary-transparent-default-border: color-primary-500,
  color-primary-transparent-active-border: color-primary-500,
  color-primary-transparent-disabled-border: color-basic-transparent-300,

  color-success-focus: color-success-600,
  color-success-hover: color-success-400,
  color-success-default: color-success-500,
  color-success-active: color-success-600,
  color-success-disabled: color-basic-transparent-300,
  color-success-focus-border: color-success-700,
  color-success-hover-border: color-success-hover,
  color-success-default-border: color-success-default,
  color-success-active-border: color-success-active,
  color-success-disabled-border: color-success-disabled,

  color-success-transparent-focus: color-success-transparent-300,
  color-success-transparent-focus-border: color-success-500,
  color-success-transparent-hover: color-success-transparent-200,
  color-success-transparent-hover-border: color-success-500,
  color-success-transparent-default: color-success-transparent-100,
  color-success-transparent-default-border: color-success-500,
  color-success-transparent-active: color-success-transparent-300,
  color-success-transparent-active-border: color-success-500,
  color-success-transparent-disabled: color-basic-transparent-200,
  color-success-transparent-disabled-border: color-basic-transparent-300,

  color-info-focus: color-info-600,
  color-info-hover: color-info-400,
  color-info-default: color-info-500,
  color-info-active: color-info-600,
  color-info-disabled: color-basic-transparent-300,
  color-info-focus-border: color-info-700,
  color-info-hover-border: color-info-hover,
  color-info-default-border: color-info-default,
  color-info-active-border: color-info-active,
  color-info-disabled-border: color-info-disabled,

  color-info-transparent-focus: color-info-transparent-300,
  color-info-transparent-hover: color-info-transparent-200,
  color-info-transparent-default: color-info-transparent-100,
  color-info-transparent-active: color-info-transparent-300,
  color-info-transparent-disabled: color-basic-transparent-200,
  color-info-transparent-focus-border: color-info-500,
  color-info-transparent-hover-border: color-info-500,
  color-info-transparent-default-border: color-info-500,
  color-info-transparent-active-border: color-info-500,
  color-info-transparent-disabled-border: color-basic-transparent-300,

  color-warning-focus: color-warning-600,
  color-warning-hover: color-warning-400,
  color-warning-default: color-warning-500,
  color-warning-active: color-warning-600,
  color-warning-disabled: color-basic-transparent-300,
  color-warning-focus-border: color-warning-700,
  color-warning-hover-border: color-warning-hover,
  color-warning-default-border: color-warning-default,
  color-warning-active-border: color-warning-active,
  color-warning-disabled-border: color-warning-disabled,

  color-warning-transparent-focus: color-warning-transparent-300,
  color-warning-transparent-hover: color-warning-transparent-200,
  color-warning-transparent-default: color-warning-transparent-100,
  color-warning-transparent-active: color-warning-transparent-300,
  color-warning-transparent-disabled: color-basic-transparent-200,
  color-warning-transparent-focus-border: color-warning-500,
  color-warning-transparent-hover-border: color-warning-500,
  color-warning-transparent-default-border: color-warning-500,
  color-warning-transparent-active-border: color-warning-500,
  color-warning-transparent-disabled-border: color-basic-transparent-300,

  color-danger-focus: color-danger-600,
  color-danger-hover: color-danger-400,
  color-danger-default: color-danger-500,
  color-danger-active: color-danger-600,
  color-danger-disabled: color-basic-transparent-300,
  color-danger-focus-border: color-danger-700,
  color-danger-hover-border: color-danger-hover,
  color-danger-default-border: color-danger-default,
  color-danger-active-border: color-danger-active,
  color-danger-disabled-border: color-danger-disabled,

  color-danger-transparent-focus: color-danger-transparent-300,
  color-danger-transparent-hover: color-danger-transparent-200,
  color-danger-transparent-default: color-danger-transparent-100,
  color-danger-transparent-active: color-danger-transparent-300,
  color-danger-transparent-disabled: color-basic-transparent-200,
  color-danger-transparent-focus-border: color-danger-500,
  color-danger-transparent-hover-border: color-danger-500,
  color-danger-transparent-default-border: color-danger-500,
  color-danger-transparent-active-border: color-danger-500,
  color-danger-transparent-disabled-border: color-basic-transparent-300,

  color-control-focus: color-basic-300,
  color-control-hover: color-basic-200,
  color-control-default: color-basic-100,
  color-control-active: color-basic-300,
  color-control-disabled: color-basic-transparent-300,
  color-control-focus-border: color-basic-500,
  color-control-hover-border: color-control-hover,
  color-control-default-border: color-control-default,
  color-control-active-border: color-control-active,
  color-control-disabled-border: color-control-disabled,

  color-control-transparent-focus: color-basic-control-transparent-300,
  color-control-transparent-hover: color-basic-control-transparent-200,
  color-control-transparent-default: color-basic-control-transparent-100,
  color-control-transparent-active: color-basic-control-transparent-300,
  color-control-transparent-disabled: color-basic-transparent-200,
  color-control-transparent-focus-border: color-basic-100,
  color-control-transparent-hover-border: color-basic-100,
  color-control-transparent-default-border: color-basic-100,
  color-control-transparent-active-border: color-basic-100,
  color-control-transparent-disabled-border: color-basic-transparent-300,

  /* Backgrounds and borders - basic, alternative and primary  */

  background-basic-color-1: color-basic-100,
  background-basic-color-2: color-basic-200,
  background-basic-color-3: color-basic-300,
  background-basic-color-4: color-basic-400,

  border-basic-color-1: color-basic-100,
  border-basic-color-2: color-basic-200,
  border-basic-color-3: color-basic-300,
  border-basic-color-4: color-basic-400,
  border-basic-color-5: color-basic-500,

  background-alternative-color-1: color-basic-800,
  background-alternative-color-2: color-basic-900,
  background-alternative-color-3: color-basic-1000,
  background-alternative-color-4: color-basic-1100,

  border-alternative-color-1: color-basic-800,
  border-alternative-color-2: color-basic-900,
  border-alternative-color-3: color-basic-1000,
  border-alternative-color-4: color-basic-1100,
  border-alternative-color-5: color-basic-1100,

  background-primary-color-1: color-primary-500,
  background-primary-color-2: color-primary-600,
  background-primary-color-3: color-primary-700,
  background-primary-color-4: color-primary-800,

  border-primary-color-1: color-basic-500,
  border-primary-color-2: color-basic-600,
  border-primary-color-3: color-basic-700,
  border-primary-color-4: color-basic-800,
  border-primary-color-5: color-basic-900,

  /* Text colors - general and status */

  text-basic-color: color-basic-800,
  text-alternate-color: color-basic-100,
  text-control-color: color-basic-100,
  text-disabled-color: color-basic-transparent-600,
  text-hint-color: color-basic-600,

  text-primary-color: color-primary-default,
  text-primary-focus-color: color-primary-focus,
  text-primary-hover-color: color-primary-hover,
  text-primary-active-color: color-primary-active,
  text-primary-disabled-color: color-primary-400,

  text-success-color: color-success-default,
  text-success-focus-color: color-success-focus,
  text-success-hover-color: color-success-hover,
  text-success-active-color: color-success-active,
  text-success-disabled-color: color-success-400,

  text-info-color: color-info-default,
  text-info-focus-color: color-info-focus,
  text-info-hover-color: color-info-hover,
  text-info-active-color: color-info-active,
  text-info-disabled-color: color-info-400,

  text-warning-color: color-warning-default,
  text-warning-focus-color: color-warning-focus,
  text-warning-hover-color: color-warning-hover,
  text-warning-active-color: color-warning-active,
  text-warning-disabled-color: color-warning-400,

  text-danger-color: color-danger-default,
  text-danger-focus-color: color-danger-focus,
  text-danger-hover-color: color-danger-hover,
  text-danger-active-color: color-danger-active,
  text-danger-disabled-color: color-danger-400,

  /* Fonts and text styles - headings, subtitles, paragraphs, captions, button */

  font-family-primary: unquote('Poppins, sans-serif'),
  font-family-secondary: font-family-primary,

  text-heading-1-font-family: font-family-secondary,
  text-heading-1-font-size: 2.25rem,
  text-heading-1-font-weight: 700,
  text-heading-1-line-height: 3rem,

  text-heading-2-font-family: font-family-secondary,
  text-heading-2-font-size: 2rem,
  text-heading-2-font-weight: 700,
  text-heading-2-line-height: 2.5rem,

  text-heading-3-font-family: font-family-secondary,
  text-heading-3-font-size: 1.875rem,
  text-heading-3-font-weight: 700,
  text-heading-3-line-height: 2.5rem,

  text-heading-4-font-family: font-family-secondary,
  text-heading-4-font-size: 1.625rem,
  text-heading-4-font-weight: 700,
  text-heading-4-line-height: 2rem,

  text-heading-5-font-family: font-family-secondary,
  text-heading-5-font-size: 1.375rem,
  text-heading-5-font-weight: 700,
  text-heading-5-line-height: 2rem,

  text-heading-6-font-family: font-family-secondary,
  text-heading-6-font-size: 1.125rem,
  text-heading-6-font-weight: 700,
  text-heading-6-line-height: 1.5rem,

  text-subtitle-font-family: font-family-primary,
  text-subtitle-font-size: 0.9375rem,
  text-subtitle-font-weight: 600,
  text-subtitle-line-height: 1.5rem,

  text-subtitle-2-font-family: font-family-primary,
  text-subtitle-2-font-size: 0.8125rem,
  text-subtitle-2-font-weight: 600,
  text-subtitle-2-line-height: 1.5rem,

  text-paragraph-font-family: font-family-primary,
  text-paragraph-font-size: 0.9375rem,
  text-paragraph-font-weight: 400,
  text-paragraph-line-height: 1.25rem,

  text-paragraph-2-font-family: font-family-primary,
  text-paragraph-2-font-size: 0.8125rem,
  text-paragraph-2-font-weight: 400,
  text-paragraph-2-line-height: 1.125rem,

  text-label-font-family: font-family-primary,
  text-label-font-size: 0.75rem,
  text-label-font-weight: 700,
  text-label-line-height: 1rem,

  text-caption-font-family: font-family-primary,
  text-caption-font-size: 0.75rem,
  text-caption-font-weight: 400,
  text-caption-line-height: 1rem,

  text-caption-2-font-family: font-family-primary,
  text-caption-2-font-size: 0.75rem,
  text-caption-2-font-weight: 600,
  text-caption-2-line-height: 1rem,

  text-button-font-family: font-family-primary,
  text-button-font-weight: 700,
  text-button-tiny-font-size: 0.625rem,
  text-button-tiny-line-height: 0.75rem,
  text-button-small-font-size: 0.75rem,
  text-button-small-line-height: 1rem,
  text-button-medium-font-size: 0.875rem,
  text-button-medium-line-height: 1rem,
  text-button-large-font-size: 1rem,
  text-button-large-line-height: 1.25rem,
  text-button-giant-font-size: 1.125rem,
  text-button-giant-line-height: 1.5rem,

  /* Supporting variables - border radius, outline, shadow, divider */

  border-radius: 0.25rem,

  outline-width: 0.375rem,
  outline-color: color-basic-transparent-200,

  scrollbar-color: background-basic-color-4,
  scrollbar-background-color: background-basic-color-2,
  scrollbar-width: 0.3125rem,

  shadow: 0 0.5rem 1rem 0 rgba(44, 51, 73, 0.1),
  shadow-2: 0 0.5rem 1rem rgba(26, 31, 51, 0.1),
  
  divider-color: border-basic-color-3,
  divider-style: solid,
  divider-width: 1px,
);

$r-themes: r-register-theme($theme, default);





$theme: (
  background-basic-color-1: color-basic-800,
  background-basic-color-2: color-basic-900,
  background-basic-color-3: color-basic-1000,
  background-basic-color-4: color-basic-1100,

  border-basic-color-1: color-basic-800,
  border-basic-color-2: color-basic-900,
  border-basic-color-3: color-basic-1000,
  border-basic-color-4: color-basic-1100,
  border-basic-color-5: color-basic-1100,

  background-alternative-color-1: color-basic-100,
  background-alternative-color-2: color-basic-200,
  background-alternative-color-3: color-basic-300,
  background-alternative-color-4: color-basic-400,

  border-alternative-color-1: color-basic-100,
  border-alternative-color-2: color-basic-200,
  border-alternative-color-3: color-basic-300,
  border-alternative-color-4: color-basic-400,
  border-alternative-color-5: color-basic-500,

  text-basic-color: color-basic-100,
  text-alternate-color: color-basic-900,
  text-disabled-color: color-basic-transparent-600,

  shadow: 0 0.5rem 1rem 0 #1a1f33,
  outline-color: color-basic-700,
);

// register the theme
$r-themes: r-register-theme($theme, dark, default);


@mixin r-block-page() {
  display: block;
  min-height: 100%;
}

@mixin r-flex() {
  display: flex;
  width: 100%;
  flex-direction: column;
}

@mixin r-outline($outline-width, $outline-color, $options: (inset-shadow: false)) {
  $outset-shadow: 0 0 0 $outline-width $outline-color;
  box-shadow: $outset-shadow;

  @if (map-get($options, 'inset-shadow')) {
    &:not(:hover):not(:active) {
      box-shadow: $outset-shadow,
                  inset 0 0 0 100vmax r-theme(outline-color);
    }
  }
}

@mixin r-component-animation($properties...) {
  transition-duration: 0.15s;
  transition-property: $properties;
  transition-timing-function: ease-in;
}

@mixin disable-text-selection() {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}


 $grid-columns: 12 !default;
 $grid-gutter-width-base: 24px !default;
 $grid-gutter-widths: (
   xs: $grid-gutter-width-base,
   sm: $grid-gutter-width-base,
   md: $grid-gutter-width-base,
   lg: $grid-gutter-width-base,
   xl: $grid-gutter-width-base
 ) !default;
 
 
 $grid-breakpoints: (
   xs: 0,
   is: 400px,
   sm: 576px,
   md: 768px,
   lg: 992px,
   xl: 1200px,
   xxl: 1400px,
   xxxl: 1600px
 );
 
 $container-max-widths: (
   is: 380px,
   sm: 540px,
   md: 720px,
   lg: 960px,
   xl: 1140px,
   xxl: 1320px,
   xxxl: 1500px
 );
 
 @function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
   $min: map-get($breakpoints, $name);
   @return if($min != 0, $min, null);
 }
 
 @function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
   $n: index($breakpoint-names, $name);
   @return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);
 }
 
 @function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
   $next: breakpoint-next($name, $breakpoints);
   @return if($next, breakpoint-min($next, $breakpoints) - 0.02px, null);
 }
 
 @mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) {
   $max: breakpoint-max($name, $breakpoints);
   @if $max {
     @media (max-width: $max) {
       @content;
     }
   } @else {
     @content;
   }
 }
 
 @mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
   $min: breakpoint-min($name, $breakpoints);
   @if $min {
     @media (min-width: $min) {
       @content;
     }
   } @else {
     @content;
   }
 }
 
@mixin r-typography {
  color: r-theme(text-basic-color);

  body {
    color: r-theme(text-basic-color);
    font-family: r-theme(text-paragraph-font-family);
    font-size: r-theme(text-paragraph-font-size);
    font-weight: r-theme(text-paragraph-font-weight);
    line-height: r-theme(text-paragraph-line-height);
  }

  h1, h2, h3, h4, h5, h6,
  .h1, .h2, .h3, .h4, .h5, .h6 {
    color: r-theme(text-basic-color);
  }

  @each $size in (1, 2, 3, 4, 5, 6) {
    h#{$size},
    .h#{$size} {
      font-size: r-theme(text-heading-#{$size}-font-size);
      font-family: r-theme(text-heading-#{$size}-font-family);
      font-weight: r-theme(text-heading-#{$size}-font-weight);
      line-height: r-theme(text-heading-#{$size}-line-height);
    }
  }

  .subtitle,
  .subtitle-2 {
    color: r-theme(text-basic-color);
  }

  .subtitle {
    font-family: r-theme(text-subtitle-font-family);
    font-size: r-theme(text-subtitle-font-size);
    font-weight: r-theme(text-subtitle-font-weight);
    line-height: r-theme(text-subtitle-line-height);
  }

  .subtitle-2 {
    font-family: r-theme(text-subtitle-2-font-family);
    font-size: r-theme(text-subtitle-2-font-size);
    font-weight: r-theme(text-subtitle-2-font-weight);
    line-height: r-theme(text-subtitle-2-line-height);
  }

  p,
  .paragraph {
    color: r-theme(text-basic-color);
    font-family: r-theme(text-paragraph-font-family);
    font-size: r-theme(text-paragraph-font-size);
    font-weight: r-theme(text-paragraph-font-weight);
    line-height: r-theme(text-paragraph-line-height);
  }

  .paragraph-2 {
    color: r-theme(text-basic-color);
    font-family: r-theme(text-paragraph-2-font-family);
    font-size: r-theme(text-paragraph-2-font-size);
    font-weight: r-theme(text-paragraph-2-font-weight);
    line-height: r-theme(text-paragraph-2-line-height);
  }

  a {
    color: r-theme(link-text-color);
    text-decoration: r-theme(link-text-decoration);
    font-size: inherit;
    font-style: inherit;
    font-weight: inherit;
    line-height: inherit;
    cursor: pointer;

    &:focus {
      color: r-theme(link-text-focus-color);
    }

    &:hover {
      color: r-theme(link-text-hover-color);
    }

    &.link-control,
    &.link-control:hover {
      color: r-theme(text-control-color);
    }

    &.link-alternate,
    &.link-alternate:hover {
      color: r-theme(text-alternate-color);
    }
  }

  .label {
    color: r-theme(text-hint-color);
    font-family: r-theme(text-label-font-family);
    font-size: r-theme(text-label-font-size);
    font-weight: r-theme(text-label-font-weight);
    line-height: r-theme(text-label-line-height);
  }

  .caption {
    font-family: r-theme(text-caption-font-family);
    font-size: r-theme(text-caption-font-size);
    font-weight: r-theme(text-caption-font-weight);
    line-height: r-theme(text-caption-line-height);
  }

  .caption-2 {
    font-family: r-theme(text-caption-2-font-family);
    font-size: r-theme(text-caption-2-font-size);
    font-weight: r-theme(text-caption-2-font-weight);
    line-height: r-theme(text-caption-2-line-height);
  }

  .caption,
  .caption-2 {
    color: r-theme(text-hint-color);

    @each $status in r-get-core-statuses() {
      &.status-#{$status} {
        color: r-theme(text-#{$status}-color);
      }
    }
  }

  // li {
  //   color: r-theme(list-item-text-color);
  //   font-family: r-theme(list-item-font-family);
  //   font-size: r-theme(list-item-font-size);
  //   font-weight: r-theme(list-item-font-weight);
  //   line-height: r-theme(list-item-line-height);
  // }

  .text-alternate {
    color: r-theme(text-alternate-color);
  }
  .text-disabled {
    color: r-theme(text-disabled-color);
  }
  .text-hint {
    color: r-theme(text-hint-color);
  }

  @each $status in r-get-core-statuses() {
    .text-#{$status} {
      color: r-theme(text-#{$status}-color);
    }
  }
}

@mixin r-overlay() {
  // We want overlays to always appear over user content, so set a baseline
  // very high z-index for the overlay container, which is where we create the new
  // stacking context for all overlays.
  $z-index-overlay-container: 1000 !default;
  $z-index-overlay: 1000 !default;
  $z-index-overlay-backdrop: 1000 !default;

  // Background color for all of the backdrops
  $dark-backdrop-background: rgba(0, 0, 0, 0.32) !default;

  // Default backdrop animation is based on the Material Design swift-ease-out.
  $backdrop-animation-duration: 400ms !default;
  $backdrop-animation-timing-function: cubic-bezier(
    0.25,
    0.8,
    0.25,
    1
  ) !default;

  .cdk-overlay-container,
  .cdk-global-overlay-wrapper {
    // Disable events from being captured on the overlay container.
    pointer-events: none;

    // The container should be the size of the viewport.
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
  }

  // The overlay-container is an invisible element which contains all individual overlays.
  .cdk-overlay-container {
    position: fixed;
    z-index: $z-index-overlay-container;

    &:empty {
      // Hide the element when it doesn't have any child nodes. This doesn't
      // include overlays that have been detached, rather than disposed.
      display: none;
    }
  }

  // We use an extra wrapper element in order to use make the overlay itself a flex item.
  // This makes centering the overlay easy without running into the subpixel rendering
  // problems tied to using `transform` and without interfering with the other position
  // strategies.
  .cdk-global-overlay-wrapper {
    display: flex;
    position: absolute;
    z-index: $z-index-overlay;
  }

  // A single overlay pane.
  .cdk-overlay-pane {
    // Note: it's important for this one to start off `absolute`,
    // in order for us to be able to measure it correctly.
    position: absolute;
    pointer-events: auto;
    box-sizing: border-box;
    z-index: $z-index-overlay;

    // For connected-position overlays, we set `display: flex` in
    // order to force `max-width` and `max-height` to take effect.
    display: flex;
    max-width: 100%;
    max-height: 100%;
  }

  .cdk-overlay-backdrop {
    // TODO(jelbourn): reuse sidenav fullscreen mixin.
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;

    z-index: $z-index-overlay-backdrop;
    pointer-events: auto;
    -webkit-tap-highlight-color: transparent;
    transition: opacity $backdrop-animation-duration
      $backdrop-animation-timing-function;
    opacity: 0;

    &.cdk-overlay-backdrop-showing {
      opacity: 1;

      // Note that we can't import and use the `high-contrast` mixin from `_a11y.scss`, because
      // this file will be copied to the top-level `cdk` package when putting together the files
      // for npm. Any relative import paths we use here will become invalid once the file is copied.
      .cdk-high-contrast-active & {
        // In high contrast mode the rgba background will become solid
        // so we need to fall back to making it opaque using `opacity`.
        opacity: 0.6;
      }
    }
  }

  .cdk-overlay-dark-backdrop {
    background: $dark-backdrop-background;
  }

  .cdk-overlay-transparent-backdrop {
    // Note: as of Firefox 57, having the backdrop be `background: none` will prevent it from
    // capturing the user's mouse scroll events. Since we also can't use something like
    // `rgba(0, 0, 0, 0)`, we work around the inconsistency by not setting the background at
    // all and using `opacity` to make the element transparent.
    &,
    &.cdk-overlay-backdrop-showing {
      opacity: 0;
    }
  }

  // Overlay parent element used with the connected position strategy. Used to constrain the
  // overlay element's size to fit within the viewport.
  .cdk-overlay-connected-position-bounding-box {
    position: absolute;
    z-index: $z-index-overlay;

    // We use `display: flex` on this element exclusively for centering connected overlays.
    // When *not* centering, a top/left/bottom/right will be set which overrides the normal
    // flex layout.
    display: flex;

    // We use the `column` direction here to avoid some flexbox issues in Edge
    // when using the "grow after open" options.
    flex-direction: column;

    // Add some dimensions so the element has an `innerText` which some people depend on in tests.
    min-width: 1px;
    min-height: 1px;
  }

  // Used when disabling global scrolling.
  .cdk-global-scrollblock {
    position: fixed;

    // Necessary for the content not to lose its width. Note that we're using 100%, instead of
    // 100vw, because 100vw includes the width plus the scrollbar, whereas 100% is the width
    // that the element had before we made it `fixed`.
    width: 100%;

    // Note: this will always add a scrollbar to whatever element it is on, which can
    // potentially result in double scrollbars. It shouldn't be an issue, because we won't
    // block scrolling on a page that doesn't have a scrollbar in the first place.
    overflow-y: scroll;
  }
}



@mixin select-outline {
  r-select.appearance-outline .select-button {
    border-style: r-theme(select-outline-border-style);
    border-width: r-theme(select-outline-border-width);

    &.top {
      border-top-style: r-theme(select-outline-adjacent-border-style);
      border-top-width: r-theme(select-outline-adjacent-border-width);
    }
    &.bottom {
      border-bottom-style: r-theme(select-outline-adjacent-border-style);
      border-bottom-width: r-theme(select-outline-adjacent-border-width);
    }
  }

  @each $status in r-get-statuses() {
    r-select.appearance-outline.status-#{$status} .select-button {
      background-color: r-theme(select-outline-#{$status}-background-color);
      border-color: r-theme(select-outline-#{$status}-border-color);
      color: r-theme(select-outline-#{$status}-text-color);

      &.placeholder {
        color: r-theme(select-outline-#{$status}-placeholder-text-color);
      }
      r-icon {
        color: r-theme(select-outline-#{$status}-icon-color);
      }

      &:focus {
        background-color: r-theme(select-outline-#{$status}-focus-background-color);
        border-color: r-theme(select-outline-#{$status}-focus-border-color);
      }
      &:hover {
        background-color: r-theme(select-outline-#{$status}-hover-background-color);
        border-color: r-theme(select-outline-#{$status}-hover-border-color);
      }

      &[disabled] {
        color: r-theme(select-outline-#{$status}-disabled-text-color);
        background-color: r-theme(select-outline-#{$status}-disabled-background-color);
        border-color: r-theme(select-outline-#{$status}-disabled-border-color);

        r-icon {
          color: r-theme(select-outline-#{$status}-disabled-icon-color);
        }
      }

      &.bottom,
      &.top {
        border-color: r-theme(select-outline-#{$status}-open-border-color);
      }

      &.top {
        border-top-color: r-theme(select-outline-#{$status}-adjacent-border-color);
      }
      &.bottom {
        border-bottom-color: r-theme(select-outline-#{$status}-adjacent-border-color);
      }
    }
  }

  @each $size in r-get-sizes() {
    r-select.appearance-outline.size-#{$size} .select-button {
      padding: r-theme(select-outline-#{$size}-padding);
      @include r-ltr(padding-right, r-theme(select-icon-offset));
      @include r-rtl(padding-left, r-theme(select-icon-offset));
    }

    // @include r-form-field-with-prefix('r-select.appearance-outline.size-#{$size} .select-button', $size);
  }
}

@mixin select-filled {
  r-select.appearance-filled .select-button {
    border-style: r-theme(select-filled-border-style);
    border-width: r-theme(select-filled-border-width);
  }

  @each $size in r-get-sizes() {
    r-select.appearance-filled.size-#{$size} .select-button {
      padding: r-theme(select-filled-#{$size}-padding);
      @include r-ltr(padding-right, r-theme(select-icon-offset));
      @include r-rtl(padding-left, r-theme(select-icon-offset));
    }

    // @include r-form-field-with-prefix('r-select.appearance-filled.size-#{$size} .select-button', $size);
  }

  @each $status in r-get-statuses() {
    r-select.appearance-filled.status-#{$status} .select-button {
      background-color: r-theme(select-filled-#{$status}-background-color);
      border-color: r-theme(select-filled-#{$status}-border-color);
      color: r-theme(select-filled-#{$status}-text-color);

      &.placeholder {
        color: r-theme(select-filled-#{$status}-placeholder-text-color);
      }

      &:focus {
        background-color: r-theme(select-filled-#{$status}-focus-background-color);
        border-color: r-theme(select-filled-#{$status}-focus-border-color);
      }
      &:hover {
        background-color: r-theme(select-filled-#{$status}-hover-background-color);
        border-color: r-theme(select-filled-#{$status}-hover-border-color);
      }

      &[disabled] {
        background-color: r-theme(select-filled-#{$status}-disabled-background-color);
        border-color: r-theme(select-filled-#{$status}-disabled-border-color);
        color: r-theme(select-filled-#{$status}-disabled-text-color);

        r-icon {
          color: r-theme(select-filled-#{$status}-disabled-icon-color);
        }
      }

      r-icon {
        color: r-theme(select-filled-#{$status}-icon-color);
      }
    }
  }
}

@mixin select-hero {
  r-select.appearance-hero .select-button {
    border: none;
  }

  @each $size in r-get-sizes() {
    r-select.appearance-hero.size-#{$size} .select-button {
      padding: r-theme(select-hero-#{$size}-padding);
      @include r-ltr(padding-right, r-theme(select-icon-offset));
      @include r-rtl(padding-left, r-theme(select-icon-offset));
    }
    // @include r-form-field-with-prefix('r-select.appearance-hero.size-#{$size} .select-button', $size);
  }

  @each $status in r-get-statuses() {
    r-select.appearance-hero.status-#{$status} .select-button {
      $left-color: r-theme(select-hero-#{$status}-left-background-color);
      $right-color: r-theme(select-hero-#{$status}-right-background-color);
      background-image: linear-gradient(to right, $left-color, $right-color);
      color: r-theme(select-hero-#{$status}-text-color);

      &.placeholder {
        color: r-theme(select-hero-#{$status}-placeholder-text-color);
      }

      &:focus {
        $left-color: r-theme(select-hero-#{$status}-focus-left-background-color);
        $right-color: r-theme(select-hero-#{$status}-focus-right-background-color);
        background-image: linear-gradient(to right, $left-color, $right-color);
      }
      &:hover {
        $left-color: r-theme(select-hero-#{$status}-hover-left-background-color);
        $right-color: r-theme(select-hero-#{$status}-hover-right-background-color);
        background-image: linear-gradient(to right, $left-color, $right-color);
      }
      &[disabled] {
        color: r-theme(select-hero-#{$status}-disabled-text-color);
        background-color: r-theme(select-hero-#{$status}-disabled-background-color);
        background-image: none;

        r-icon {
          color: r-theme(select-hero-#{$status}-disabled-icon-color);
        }
      }

      r-icon {
        color: r-theme(select-hero-#{$status}-icon-color);
      }
    }
  }
}


@mixin r-select-theme() {
  r-select .select-button {
    min-width: r-theme(select-min-width);
    cursor: r-theme(select-cursor);
    font-family: r-theme(select-text-font-family);

    &.placeholder {
      font-family: r-theme(select-placeholder-text-font-family);
    }
    &:focus {
      outline: none;
    }
    &[disabled] {
      cursor: r-theme(select-disabled-cursor);
    }
  }

  @each $size in r-get-sizes() {
    r-select.size-#{$size} {
      .select-button {
        font-size: r-theme(select-#{$size}-text-font-size);
        font-weight: r-theme(select-#{$size}-text-font-weight);
        line-height: r-theme(select-#{$size}-text-line-height);

        &.placeholder {
          font-size: r-theme(select-#{$size}-placeholder-text-font-size);
          font-weight: r-theme(select-#{$size}-placeholder-text-font-weight);
        }

        &.empty::before {
          content: ' ';
          display: block;
          height: r-theme(select-#{$size}-text-line-height);
        }
      }

      &:not(.full-width) {
        max-width: r-theme(select-#{$size}-max-width);
      }
    }
  }

  @each $shape in r-get-shapes() {
    r-select.shape-#{$shape} .select-button {
      border-radius: r-theme(select-#{$shape}-border-radius);
    }
  }

  @include select-outline();
  @include select-filled();
  @include select-hero();

  // @include r-form-field-root-component('r-select');
}



@mixin r-option-list-theme() {
  r-option-list {
    background-color: r-theme(option-list-background-color);
    border-color: r-theme(option-list-border-color);
    border-style: r-theme(option-list-border-style);
    border-width: r-theme(option-list-border-width);
    border-radius: r-theme(option-list-border-radius);
    box-shadow: r-theme(option-list-shadow);
    overflow: hidden;

    .option-list {
      height: 100%;
      max-height: r-theme(option-list-max-height);
      margin: 0;
      padding: 0;
      overflow: auto;
    }

    $adjacent-border: r-theme(option-list-adjacent-border-width)
                      r-theme(option-list-adjacent-border-style)
                      r-theme(option-list-adjacent-border-color);
    &.position-top {
      border-bottom: $adjacent-border;
    }
    &.position-bottom {
      border-top: $adjacent-border;
    }
  }

  r-option-group {
    color: r-theme(option-group-text-color);
    font-family: r-theme(option-text-font-family);
  }

  @each $size in r-get-sizes() {
    r-option-list.size-#{$size} r-option-group {
      font-size: r-theme(option-#{$size}-text-font-size);
      font-weight: r-theme(option-#{$size}-text-font-weight);
      line-height: r-theme(option-#{$size}-text-line-height);

      .option-group-title {
        padding: r-theme(option-#{$size}-padding);
      }

      r-option {
        padding-left: r-theme(option-group-#{$size}-start-padding);
      }
    }
  }

  r-option {
    background-color: r-theme(option-background-color);
    color: r-theme(option-text-color);
    font-family: r-theme(option-text-font-family);

    &.active {
      background-color: r-theme(option-active-background-color);
      color: r-theme(option-active-text-color);
    }

    &.selected {
      background-color: r-theme(option-selected-background-color);
      color: r-theme(option-selected-text-color);
    }

    &:focus {
      background-color: r-theme(option-focus-background-color);
      color: r-theme(option-focus-text-color);
      outline: none;

      &.selected {
        background-color: r-theme(option-selected-focus-background-color);
        color: r-theme(option-selected-focus-text-color);
      }
    }

    &:hover {
      background-color: r-theme(option-hover-background-color);
      color: r-theme(option-hover-text-color);

      &.selected {
        background-color: r-theme(option-selected-hover-background-color);
        color: r-theme(option-selected-hover-text-color);
      }
    }

    &.multiple {
      &.selected {
        background-color: r-theme(option-background-color);
        color: r-theme(option-text-color);
      }

      &:focus {
        background-color: r-theme(option-focus-background-color);
        color: r-theme(option-focus-text-color);
      }
    }
  }

  @each $size in r-get-sizes() {
    r-option-list.size-#{$size} r-option {
      font-size: r-theme(option-#{$size}-text-font-size);
      font-weight: r-theme(option-#{$size}-text-font-weight);
      line-height: r-theme(option-#{$size}-text-line-height);
      padding: r-theme(option-#{$size}-padding);
    }
  }

  r-option,
  r-option-group {
    user-select: none;

    &[disabled] {
      background-color: r-theme(option-disabled-background-color);
      color: r-theme(option-disabled-text-color);
    }
  }
}



@mixin r-checkbox-theme() {
  r-checkbox {
    .label {
      padding: r-theme(checkbox-padding);
    }

    .custom-checkbox {
      width: 1.25rem;
      height: 1.25rem;
      border-style: solid;
      border-width: 1px;
      border-radius: 3px;
      position: relative;
    }

    .native-input:focus:not(:checked) + .custom-checkbox {
      $inset-shadow: 0 0 0 100vmax;
      @include r-outline(0.375rem, rgba(180, 180, 219, 0.16));
    }
    .native-input:focus:checked + .custom-checkbox {
      @include r-outline(0.375rem, rgba(180, 180, 219, 0.16));
    }

    r-icon {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 50%;
    }

    r-icon svg {
      width: 12px;
      height: 24px;
    }

    .text {
      font-size: 0.8125rem;
      font-weight: 600;
      line-height: 1.5rem;
    }
  }

  @each $status in r-get-statuses() {
    r-checkbox.status-#{$status} {
      .custom-checkbox {
        background-color: r-theme(checkbox-#{$status}-background-color);
        border-color: r-theme(checkbox-#{$status}-border-color);
      }
      .text {
        color: r-theme(checkbox-#{$status}-text-color);
      }
      .custom-checkbox.checked {
        background-color: r-theme(checkbox-#{$status}-checked-background-color);
        border-color: r-theme(checkbox-#{$status}-checked-border-color);
  
        r-icon {
          color: r-theme(checkbox-#{$status}-checked-checkmark-color);
        }
      }
      .custom-checkbox.indeterminate {
        background-color: r-theme(
          checkbox-#{$status}-indeterminate-background-color
        );
        border-color: r-theme(checkbox-#{$status}-indeterminate-border-color);
  
        r-icon {
          color: r-theme(checkbox-#{$status}-indeterminate-checkmark-color);
        }
      }
      .native-input:enabled:focus + .custom-checkbox {
        background-color: r-theme(checkbox-#{$status}-focus-background-color);
        border-color: r-theme(checkbox-#{$status}-focus-border-color);
        &.indeterminate,
        &.checked {
          background-color: r-theme(
            checkbox-#{$status}-focus-checked-background-color
          );
          border-color: r-theme(checkbox-#{$status}-focus-checked-border-color);
        }
      }
      .custom-checkbox:hover {
        background-color: r-theme(checkbox-#{$status}-hover-background-color);
        border-color: r-theme(checkbox-#{$status}-hover-border-color);
        &.indeterminate,
        &.checked {
          background-color: r-theme(
            checkbox-#{$status}-hover-checked-background-color
          );
          border-color: r-theme(checkbox-#{$status}-hover-checked-border-color);
        }
      }
      .native-input:enabled:active + .custom-checkbox {
        background-color: r-theme(checkbox-#{$status}-active-background-color);
        border-color: r-theme(checkbox-#{$status}-active-border-color);
  
        &.indeterminate,
        &.checked {
          background-color: r-theme(
            checkbox-#{$status}-active-checked-background-color
          );
          border-color: r-theme(checkbox-#{$status}-active-checked-border-color);
        }
      }
      .native-input:disabled {
        & + .custom-checkbox {
          background-color: r-theme(
            checkbox-#{$status}-disabled-background-color
          );
          border-color: r-theme(checkbox-#{$status}-disabled-border-color);
  
          r-icon {
            color: r-theme(checkbox-#{$status}-disabled-checkmark-color);
            // width: auto;
          }
        }
        & ~ .text {
          color: r-theme(checkbox-#{$status}-disabled-text-color);
        }
        &:indeterminate + .custom-checkbox,
        &:checked + .custom-checkbox {
          background-color: r-theme(
            checkbox-#{$status}-disabled-checked-background-color
          );
          border-color: r-theme(
            checkbox-#{$status}-disabled-checked-border-color
          );
        }
      }
    }
  }
}

@mixin r-navbar-theme() {
  r-navbar {
    background-color: r-theme(navbar-background-color);
    box-shadow: r-theme(navbar-shadow);
    height: r-theme(navbar-height-lg);
    @include media-breakpoint-down(sm) {
      height: r-theme(navbar-height-sm);
    }
    padding: r-theme(navbar-padding-lg);
  }
}


@mixin r-sidenav-theme() {
  .r-drawer-backdrop {
    &.r-drawer-shown {
      background-color: r-theme(overlay-backdrop-background-color);
    }
  }
  r-drawer {
    min-width: r-theme(drawer-width);
    background-color: r-theme(drawer-background-color);
    box-shadow: r-theme(drawer-shadow);
  }
  r-drawer-container {
    background-color: r-theme(layout-background-color);
  }
}

@mixin r-layout-theme() {
  html, body {
    background-color: r-theme(layout-background-color);
  }
  r-drawer-content {
    background-color: r-theme(layout-background-color);
    @include r-scrollbars(
      r-theme(card-scrollbar-color),
      r-theme(card-scrollbar-background-color),
      0.6rem);
  }

  .no-drawer {
    @extend r-drawer-content;
  }
}
@mixin r-user-theme() {
  r-user {
    .user-picture {
      background-color: r-theme(user-picture-box-background-color);
      border: r-theme(user-picture-box-border-width) solid
        r-theme(user-picture-box-border-color);
    }

    .initials {
      color: r-theme(user-initials-text-color);
      font-family: r-theme(user-initials-text-font-family);
      font-weight: r-theme(user-initials-text-font-weight);
    }

    .user-name {
      color: r-theme(user-name-text-color);
      font-family: r-theme(user-name-text-font-family);
      font-weight: r-theme(user-name-text-font-weight);
    }

    .user-title {
      color: r-theme(user-title-text-color);
      font-family: r-theme(user-title-text-font-family);
      font-weight: r-theme(user-title-text-font-weight);
    }
  }

  @each $size in r-get-sizes() {
    r-user.size-#{$size} {
      .user-picture {
        height: r-theme(user-#{$size}-height);
        width: r-theme(user-#{$size}-width);
      }
      .initials {
        font-size: r-theme(user-#{$size}-initials-text-font-size);
        line-height: r-theme(user-#{$size}-initials-text-line-height);
      }
      .user-name {
        font-size: r-theme(user-#{$size}-name-text-font-size);
        line-height: r-theme(user-#{$size}-name-text-line-height);
      }
      .user-title {
        font-size: r-theme(user-#{$size}-title-text-font-size);
        line-height: r-theme(user-#{$size}-title-text-line-height);
      }
    }
  }

  @each $shape in r-get-shapes() {
    r-user.shape-#{$shape} .user-picture {
      border-radius: r-theme(user-#{$shape}-border-radius);
    }
  }
}

@mixin r-list-theme() {
  r-list-item {
    border-bottom: r-theme(list-item-divider-width)
      r-theme(list-item-divider-style) r-theme(list-item-divider-color);

    color: r-theme(list-item-text-color);
    font-family: r-theme(list-item-font-family);
    font-size: r-theme(list-item-font-size);
    font-weight: r-theme(list-item-font-weight);
    line-height: r-theme(list-item-line-height);
    padding: r-theme(list-item-padding);

    &:first-child {
      border-top: r-theme(list-item-divider-width)
        r-theme(list-item-divider-style) r-theme(list-item-divider-color);
    }
  }
}



@mixin button-filled() {
  [r-button].appearance-filled, [r-icon-button].appearance-filled {
    border-style: r-theme(button-filled-border-style);
    border-width: r-theme(button-filled-border-width);
    text-transform: r-theme(button-filled-text-transform);

    @each $size in r-get-sizes() {
      &.size-#{$size} {
        padding: r-theme(button-filled-#{$size}-padding);
      }
    }

    @each $status in r-get-statuses() {
      &.status-#{$status} {
        background-color: r-theme(button-filled-#{$status}-background-color);
        border-color: r-theme(button-filled-#{$status}-border-color);
        color: r-theme(button-filled-#{$status}-text-color);

        &:focus {
          background-color: r-theme(button-filled-#{$status}-focus-background-color);
          border-color: r-theme(button-filled-#{$status}-focus-border-color);
        }

        &:hover {
          background-color: r-theme(button-filled-#{$status}-hover-background-color);
          border-color: r-theme(button-filled-#{$status}-hover-border-color);
        }

        &:active {
          background-color: r-theme(button-filled-#{$status}-active-background-color);
          border-color: r-theme(button-filled-#{$status}-active-border-color);
        }

        &[disabled],
        &.btn-disabled {
          background-color: r-theme(button-filled-#{$status}-disabled-background-color);
          border-color: r-theme(button-filled-#{$status}-disabled-border-color);
          color: r-theme(button-filled-#{$status}-disabled-text-color);
        }
      }
    }
  }
}



@mixin button-outline() {
  [r-button].appearance-outline, [r-icon-button].appearance-outline {
    border-style: r-theme(button-outline-border-style);
    border-width: r-theme(button-outline-border-width);
    text-transform: r-theme(button-outline-text-transform);

    &:focus {
      $inset-shadow: r-theme(button-outline-focus-inset-shadow-length);
      @include r-outline(r-theme(button-outline-width), r-theme(button-outline-color));
    }

    @each $size in r-get-sizes() {
      &.size-#{$size} {
        padding: r-theme(button-outline-#{$size}-padding);
      }
    }

    @each $status in r-get-statuses() {
      &.status-#{$status} {
        background-color: r-theme(button-outline-#{$status}-background-color);
        border-color: r-theme(button-outline-#{$status}-border-color);
        color: r-theme(button-outline-#{$status}-text-color);

        &:focus {
          background-color: r-theme(button-outline-#{$status}-focus-background-color);
          border-color: r-theme(button-outline-#{$status}-focus-border-color);
          color: r-theme(button-outline-#{$status}-focus-text-color);
        }

        &:hover {
          background-color: r-theme(button-outline-#{$status}-hover-background-color);
          border-color: r-theme(button-outline-#{$status}-hover-border-color);
          color: r-theme(button-outline-#{$status}-hover-text-color);
        }

        &:active {
          background-color: r-theme(button-outline-#{$status}-active-background-color);
          border-color: r-theme(button-outline-#{$status}-active-border-color);
          color: r-theme(button-outline-#{$status}-active-text-color);
        }

        &[disabled],
        &.btn-disabled {
          background-color: r-theme(button-outline-#{$status}-disabled-background-color);
          border-color: r-theme(button-outline-#{$status}-disabled-border-color);
          color: r-theme(button-outline-#{$status}-disabled-text-color);
        }
      }
    }
  }
}



@mixin button-ghost() {
  [r-button].appearance-ghost, [r-icon-button].appearance-ghost {
    background-color: r-theme(button-ghost-background-color);
    border-color: r-theme(button-ghost-border-color);
    border-style: r-theme(button-ghost-border-style);
    border-width: r-theme(button-ghost-border-width);
    text-transform: r-theme(button-ghost-text-transform);

    &:focus {
      $inset-shadow: r-theme(button-ghost-focus-inset-shadow-length);
      @include r-outline(r-theme(button-outline-width), r-theme(button-outline-color));
    }

    @each $size in r-get-sizes() {
      &.size-#{$size} {
        padding: r-theme(button-ghost-#{$size}-padding);
      }
    }

    @each $status in r-get-statuses() {
      &.status-#{$status} {
        color: r-theme(button-ghost-#{$status}-text-color);

        &:focus {
          background-color: r-theme(button-ghost-#{$status}-focus-background-color);
          border-color: r-theme(button-ghost-#{$status}-focus-border-color);
          color: r-theme(button-ghost-#{$status}-focus-text-color);
        }

        &:hover {
          background-color: r-theme(button-ghost-#{$status}-hover-background-color);
          border-color: r-theme(button-ghost-#{$status}-hover-border-color);
          color: r-theme(button-ghost-#{$status}-hover-text-color);
        }

        &:active {
          background-color: r-theme(button-ghost-#{$status}-active-background-color);
          border-color: r-theme(button-ghost-#{$status}-active-border-color);
          color: r-theme(button-ghost-#{$status}-active-text-color);
        }

        &[disabled],
        &.btn-disabled {
          background-color: r-theme(button-ghost-#{$status}-disabled-background-color);
          border-color: r-theme(button-ghost-#{$status}-disabled-border-color);
          color: r-theme(button-ghost-#{$status}-disabled-text-color);
        }
      }
    }
  }
}



@mixin button-hero() {
  [r-button].appearance-hero, [r-icon-button].appearance-hero {
    text-shadow: r-theme(button-hero-text-shadow);
    text-transform: r-theme(button-hero-text-transform);

    @each $size in r-get-sizes() {
      &.size-#{$size} {
        padding: r-theme(button-hero-#{$size}-padding);
      }
    }

    @each $status in r-get-statuses() {
      &.status-#{$status} {
        $left-color: r-theme(button-hero-#{$status}-left-background-color);
        $right-color: r-theme(button-hero-#{$status}-right-background-color);
        $bevel: r-theme(button-hero-bevel-size) r-theme(button-hero-#{$status}-bevel-color);
        $glow: r-theme(button-hero-glow-size) r-theme(button-hero-#{$status}-glow-color);
        $shadow: r-theme(button-hero-shadow);
        $hero-box-shadows: $bevel, $glow, $shadow;

        background-image: linear-gradient(to right, $left-color, $right-color);
        border: none;
        box-shadow: $hero-box-shadows;
        color: r-theme(button-hero-#{$status}-text-color);

        &:focus {
          $left-focus-color: r-theme(button-hero-#{$status}-focus-left-background-color);
          $right-focus-color: r-theme(button-hero-#{$status}-focus-right-background-color);
          background-image: linear-gradient(to right, $left-focus-color, $right-focus-color);
          box-shadow: $hero-box-shadows, 0 0 0 r-theme(button-hero-outline-width) r-theme(button-hero-outline-color);
        }

        &:hover {
          $left-hover-color: r-theme(button-hero-#{$status}-hover-left-background-color);
          $right-hover-color: r-theme(button-hero-#{$status}-hover-right-background-color);
          background-image: linear-gradient(to right, $left-hover-color, $right-hover-color);
        }

        &:active {
          $left-active-color: r-theme(button-hero-#{$status}-active-left-background-color);
          $right-active-color: r-theme(button-hero-#{$status}-active-right-background-color);
          background-image: linear-gradient(to right, $left-active-color, $right-active-color);
        }

        &[disabled],
        &.btn-disabled {
          background-color: r-theme(button-hero-#{$status}-disabled-background-color);
          background-image: none;
          color: r-theme(button-hero-#{$status}-disabled-text-color);
        }

        &.button-pulse {
          animation: button-hero-#{$status}-pulse 0.75s infinite alternate;
        }

        @include keyframes(button-hero-#{$status}-pulse) {
          0% {
            box-shadow: none;
            opacity: 0.3;
          }

          100% {
            box-shadow: 0 0 1rem 0 $left-color;
            opacity: 0.8;
          }
        }
      }
    }
  }
}


@mixin r-button-theme() {
  [r-button], [r-icon-button] {
    cursor: r-theme(button-cursor);
    font-family: r-theme(button-text-font-family);
    font-weight: r-theme(button-text-font-weight);

    &:focus {
      // Sibling buttons are covering outline shadow.
      // position: relative; declaration makes shadow appear on top of sibling buttons.
      position: relative;
      outline: none;
      @include r-outline(r-theme(button-outline-width), r-theme(button-outline-color));
    }

    &[disabled],
    &.btn-disabled {
      cursor: r-theme(button-disabled-cursor);
    }

    @each $size in r-get-sizes() {
      &.size-#{$size} {
        font-size: r-theme(button-#{$size}-text-font-size);
        line-height: r-theme(button-#{$size}-text-line-height);
        r-icon {
          font-size: r-theme(button-#{$size}-text-font-size);
          height: r-theme(button-#{$size}-icon-size);
          width: r-theme(button-#{$size}-icon-size);
          margin-top: r-theme(button-#{$size}-icon-vertical-margin);
          margin-bottom: r-theme(button-#{$size}-icon-vertical-margin);
        }

        $icon-offset: r-theme(button-#{$size}-icon-offset);
        &.icon-start:not(.icon-end) r-icon {
          @include r-ltr(margin-right, $icon-offset);
          @include r-rtl(margin-left, $icon-offset);
        }
        &.icon-end:not(.icon-start) r-icon {
          @include r-ltr(margin-left, $icon-offset);
          @include r-rtl(margin-right, $icon-offset);
        }

        @each $appearance in ('filled', 'outline', 'ghost', 'hero') {
          &.icon-start.icon-end.appearance-#{$appearance} {
            padding: r-theme(icon-button-#{$appearance}-#{$size}-padding);
          }
        }
      }
    }

    @each $shape in r-get-shapes() {
      &.shape-#{$shape} {
        border-radius: r-theme(button-#{$shape}-border-radius);
      }
    }
  }

  a[r-button] {
    text-decoration: none;
  }

  @include button-filled;
  @include button-outline;
  @include button-ghost;
  @include button-hero;
}



@mixin r-icon-theme() {
  r-icon {
    width: 24px;
    height: 24px;
    color: r-theme(icon-background-color);
    svg {
      width: 24px;
      height: 24px;
    }
    @each $status in r-get-statuses() {
      r-icon.status-#{$status} {
        color: r-theme(icon-#{$status}-color);
      }
    }
  }
}

@mixin r-card-header() {
  padding: r-theme(card-padding);
  border-bottom: r-theme(card-divider-width) r-theme(card-divider-style) r-theme(card-divider-color);
  border-top-left-radius: r-theme(card-border-radius);
  border-top-right-radius: r-theme(card-border-radius);

  color: r-theme(card-header-text-color);
  font-family: r-theme(card-header-text-font-family);
  font-size: r-theme(card-header-text-font-size);
  font-weight: r-theme(card-header-text-font-weight);
  line-height: r-theme(card-header-text-line-height);

  @include r-headings();
}

@mixin r-card-theme() {
  r-card {
    background-color: r-theme(card-background-color);
    border: r-theme(card-border-width) r-theme(card-border-style) r-theme(card-border-color);
    border-radius: r-theme(card-border-radius);
    box-shadow: r-theme(card-shadow);

    &:not(.status-basic) {
      box-shadow: r-theme(navbar-shadow);
    }

    color: r-theme(card-text-color);
    font-family: r-theme(card-text-font-family);
    font-size: r-theme(card-text-font-size);
    font-weight: r-theme(card-text-font-weight);
    line-height: r-theme(card-text-line-height);

    // TODO: move card margin style to layout
    margin-bottom: r-theme(card-margin-bottom);

    @include r-scrollbars(
        r-theme(card-scrollbar-color),
        r-theme(card-scrollbar-background-color),
        r-theme(card-scrollbar-width));

    @each $size in r-get-sizes() {
      &.size-#{$size} {
        height: r-theme(card-height-#{$size});
      }
    }

    @each $status in r-get-statuses() {
      &.status-#{$status} {
        r-card-header {
          background-color: r-theme(card-header-#{$status}-background-color);
          border-bottom-width: 0;
          border-bottom-color: r-theme(card-header-#{$status}-background-color);
          color: r-theme(card-header-#{$status}-text-color);

          a,
          a:hover {
            color: r-theme(card-header-#{$status}-text-color);
          }
        }
      }
    }

    @each $status in r-get-core-statuses() {
      &.accent-#{$status} {
        border-top-color: r-theme(card-header-#{$status}-background-color);
      }
    }

    &.accent {
      border-top-style: r-theme(card-border-style);
      border-top-width: r-theme(card-border-radius);

      & r-card-header {
        border-radius: 0;
      }
    }
  }

  r-card-body {
    flex: 1;
    -ms-flex: 1 1 auto;
    overflow: auto;
    padding: r-theme(card-padding);
    position: relative;
    @include r-scrollbars(
        r-theme(card-scrollbar-color),
        r-theme(card-scrollbar-background-color),
        r-theme(card-scrollbar-width));
  }

  r-card-footer {
    padding: r-theme(card-padding);
    border-top: r-theme(card-divider-width) r-theme(card-divider-style) r-theme(card-divider-color);
    border-bottom-left-radius: r-theme(card-border-radius);
    border-bottom-right-radius: r-theme(card-border-radius);
  }

  r-card-header {
    @include r-card-header();
  }
}


@mixin r-expansion-panel-theme() {
  r-expansion-panel {
    r-expansion-panel-header {
      padding: 1rem;
      border-bottom: 1px solid r-theme(card-border-color);
      r-icon {
        color: r-theme(text-basic-color);
      }
    }
    r-expansion-panel-body {
      width: 100%;
      padding: 1rem 2rem;
      border-bottom: 1px solid r-theme(card-border-color);
    }
  }
}
@mixin r-alert-theme() {
  r-alert {
    border-radius: r-theme(alert-border-radius);
    box-shadow: r-theme(alert-shadow);
    font-family: r-theme(alert-text-font-family);
    font-size: r-theme(alert-text-font-size);
    font-weight: r-theme(alert-text-font-weight);
    line-height: r-theme(alert-text-line-height);
    padding: r-theme(alert-padding);

    // TODO: move alert margin style to layout
    margin-bottom: r-theme(alert-bottom-margin);

    @include r-scrollbars(
      r-theme(alert-scrollbar-color),
      r-theme(alert-scrollbar-background-color),
      r-theme(alert-scrollbar-width)
    );

    &.closable {
      @include r-ltr(padding-right, r-theme(alert-closable-start-padding));
      @include r-rtl(padding-left, r-theme(alert-closable-start-padding));
    }

    .close {
      padding: r-theme(alert-padding);
      font-size: 1.5rem;
      line-height: 1;
      cursor: pointer;
      font-family: monospace;
    }
  }

  @each $size in r-get-sizes() {
    r-alert.size-#{$size} {
      height: r-theme(alert-#{$size}-height);
    }
  }

  @each $status in r-get-statuses() {
    r-alert {
      &.status-#{$status} {
        color: r-theme(alert-#{$status}-text-color);
        background-color: r-theme(alert-#{$status}-background-color);

        a,
        a:hover {
          color: r-theme(alert-#{$status}-text-color);
        }
      }

      &.accent-#{$status} {
        border-top: r-theme(alert-border-radius)
          solid
          r-theme(alert-accent-#{$status}-color);
      }

      &.outline-#{$status} {
        border: r-theme(alert-outline-width)
          solid
          r-theme(alert-outline-#{$status}-color);
      }
    }
  }
}



@mixin r-dialog-theme() {
  r-dialog-container {
    background-color: r-theme(dialog-background-color);
    box-shadow: r-theme(dialog-shadow);
  }
}

@mixin r-spinner-theme() {
  .r-spinner-container {
    position: relative;
  }

  r-spinner .message {
    color: r-theme(spinner-text-color);
    font-family: r-theme(spinner-text-font-family);
    font-size: r-theme(spinner-text-font-size);
    font-weight: r-theme(spinner-text-font-weight);
    line-height: r-theme(spinner-text-line-height);
  }

  @each $status in r-get-statuses() {
    r-spinner.status-#{$status} {
      background-color: r-theme(spinner-#{$status}-background-color);

      .spin-circle {
        border-top-color: r-theme(spinner-#{$status}-circle-filled-color);
        border-right-color: r-theme(spinner-#{$status}-circle-empty-color);
        border-bottom-color: r-theme(spinner-#{$status}-circle-filled-color);
        border-left-color: r-theme(spinner-#{$status}-circle-filled-color);
      }
    }
  }

  @each $size in r-get-sizes() {
    r-spinner.size-#{$size} {
      font-size: r-theme(spinner-height-#{$size});
    }
  }

  @keyframes spin {
    0% {
      transform: rotate(0deg);
    }
    40% {
      transform: rotate(230deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
}

@mixin r-progress-bar-theme() {
  r-progress-bar {
    .progress-container {
      border-radius: r-theme(progress-bar-border-radius);
    }

    .progress-value {
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: r-theme(progress-bar-text-font-family);
      transition-duration: r-theme(progress-bar-animation-duration);
      transition-property: width, background-color;
    }
  }

  @each $size in r-get-sizes() {

    r-progress-bar.size-#{$size} {
      .progress-container {
        height: r-theme(progress-bar-#{$size}-height);
      }

      .progress-value {
        font-size: r-theme(progress-bar-#{$size}-text-font-size);
        font-weight: r-theme(progress-bar-#{$size}-text-font-weight);
        line-height: r-theme(progress-bar-#{$size}-text-line-height);
      }
    }
  }

  @each $status in r-get-statuses() {

    r-progress-bar.status-#{$status} {
      .progress-container {
        background-color: r-theme(progress-bar-#{$status}-background-color);
      }

      .progress-value {
        background-color: r-theme(progress-bar-#{$status}-filled-background-color);
        color: r-theme(progress-bar-#{$status}-text-color);
      }
    }
  }
}


@mixin r-stepper-theme {
  r-stepper {

    &.horizontal {
      .header .step {
        width: r-theme(stepper-step-index-width);
        margin: 0 r-theme(stepper-step-index-width) / 2;
      }

      .header .connector {
        margin: r-theme(stepper-horizontal-connector-margin);
      }
    }

    &.vertical {
      .header .connector {
        margin: r-theme(stepper-vertical-connector-margin);
      }
    }

    .header {
      .connector {
        background-color: r-theme(stepper-connector-background-color);
      }

      .connector-past {
        background-color: r-theme(stepper-connector-completed-background-color);
      }

      .label-index {
        border-radius: r-theme(stepper-step-index-border-radius);
        border-color: r-theme(stepper-step-index-border-color);
        border-style: r-theme(stepper-step-index-border-style);
        border-width: r-theme(stepper-step-index-border-width);
        width: r-theme(stepper-step-index-width);
        height: r-theme(stepper-step-index-width);
      }

      .step {
        color: r-theme(stepper-step-text-color);
        font-family: r-theme(stepper-step-text-font-family);
        font-size: r-theme(stepper-step-text-font-size);
        font-weight: r-theme(stepper-step-text-font-weight);
        line-height: r-theme(stepper-step-text-line-height);

        &.label-index {
          border-color: r-theme(stepper-step-index-border-color);
        }

        &.selected {
          color: r-theme(stepper-step-active-text-color);

          .label-index {
            border-color: r-theme(stepper-step-index-active-border-color);
          }
        }

        &.completed {
          color: r-theme(stepper-step-completed-text-color);

          .label-index {
            background-color: r-theme(stepper-step-index-completed-background-color);
            border-color: r-theme(stepper-step-index-completed-border-color);
            color: r-theme(stepper-step-index-completed-text-color);
          }
        }
      }
    }

    .step-content {
      padding: r-theme(stepper-step-content-padding);
    }
  }
}

@mixin r-tabset-theme() {

  r-tabset {
    background-color: r-theme(tabset-background-color);
    border-radius: r-theme(tabset-border-radius);
    box-shadow: r-theme(tabset-shadow);

    .tabset {
      border-bottom: r-theme(tabset-divider-width) r-theme(tabset-divider-style) r-theme(tabset-divider-color);
    }

    .tab-link {
      background-color: r-theme(tabset-tab-background-color);
      cursor: pointer;
      padding: r-theme(tabset-tab-padding);
      color: r-theme(tabset-tab-text-color);
      font-family: r-theme(tabset-tab-text-font-family);
      font-size: r-theme(tabset-tab-text-font-size);
      font-weight: r-theme(tabset-tab-text-font-weight);
      line-height: r-theme(tabset-tab-text-line-height);
      text-transform: r-theme(tabset-tab-text-transform);

      &::before {
        background-color: r-theme(tabset-tab-underline-color);
        height: r-theme(tabset-tab-underline-width);
      }
    }

    r-badge.dot-mode.position-left {
      left: r-theme(tabset-tab–badge-dot-mode-horizontal-offset);
    }

    r-badge.dot-mode.position-right {
      right: r-theme(tabset-tab–badge-dot-mode-horizontal-offset);
    }

    r-badge.dot-mode.position-start {
      @include r-ltr(left, r-theme(tabset-tab–badge-dot-mode-horizontal-offset));
      @include r-rtl(right, r-theme(tabset-tab–badge-dot-mode-horizontal-offset));
    }

    r-badge.dot-mode.position-end {
      @include r-ltr(right, r-theme(tabset-tab–badge-dot-mode-horizontal-offset));
      @include r-rtl(left, r-theme(tabset-tab–badge-dot-mode-horizontal-offset));
    }

    .tab.active {
      .tab-link {
        background-color: r-theme(tabset-tab-active-background-color);
        color: r-theme(tabset-tab-active-text-color);
        &::before {
          background-color: r-theme(tabset-tab-active-underline-color);
        }
      }
    }

    .tab:focus {
      .tab-link {
        background-color: r-theme(tabset-tab-focus-background-color);
        color: r-theme(tabset-tab-focus-text-color);
        &::before {
          background-color: r-theme(tabset-tab-focus-underline-color);
        }
      }
    }

    .tab:hover {
      .tab-link {
        color: r-theme(tabset-tab-hover-text-color);
        background-color: r-theme(tabset-tab-hover-background-color);
        &::before {
          background-color: r-theme(tabset-tab-hover-underline-color);
        }
      }
    }

    .tab.disabled {
      cursor: default;
      pointer-events: none;

      .tab-link {
        background-color: r-theme(tabset-tab-disabled-background-color);
        color: r-theme(tabset-tab-disabled-text-color);
        cursor: default;
        pointer-events: none;
        &::before {
          background-color: r-theme(tabset-tab-disabled-underline-color);
        }
      }
    }

    .tab.responsive {
      @media screen and (max-width: r-theme(tabset-tab-text-hide-breakpoint)) {
        .tab-text {
          display: none;
        }
      }
    }

    r-tab {
      background-color: r-theme(tabset-content-background-color);
      color: r-theme(tabset-content-text-color);
      font-family: r-theme(tabset-content-text-font-family);
      font-size: r-theme(tabset-content-text-font-size);
      font-weight: r-theme(tabset-content-text-font-weight);
      line-height: r-theme(tabset-content-text-line-height);
      padding: r-theme(tabset-content-padding);

      @include r-scrollbars(
          r-theme(tabset-scrollbar-color),
          r-theme(tabset-scrollbar-background-color),
          r-theme(tabset-scrollbar-width));
    }
  }
}


@mixin input-statuses() {
  @each $status in r-get-statuses() {
    &.status-#{$status} {
      background-color: r-theme(input-#{$status}-background-color);
      border-color: r-theme(input-#{$status}-border-color);
      color: r-theme(input-#{$status}-text-color);

      &::placeholder {
        color: r-theme(input-#{$status}-placeholder-text-color);
      }

      &:focus {
        background-color: r-theme(input-#{$status}-focus-background-color);
        border-color: r-theme(input-#{$status}-focus-border-color);
      }
      &:hover {
        background-color: r-theme(input-#{$status}-hover-background-color);
        border-color: r-theme(input-#{$status}-hover-border-color);
      }

      &:disabled {
        background-color: r-theme(input-#{$status}-disabled-background-color);
        border-color: r-theme(input-#{$status}-disabled-border-color);
        color: r-theme(input-#{$status}-disabled-text-color);

        &::placeholder {
          color: r-theme(input-#{$status}-disabled-placeholder-text-color);
        }
      }
    }
  }
}

@mixin input-sizes() {
  @each $size in r-get-sizes() {
    &.size-#{$size} {
      font-size: r-theme(input-#{$size}-text-font-size);
      font-weight: r-theme(input-#{$size}-text-font-weight);
      line-height: r-theme(input-#{$size}-text-line-height);
      padding: r-theme(input-#{$size}-padding);

      &:not(.input-full-width) {
        max-width: r-theme(input-#{$size}-max-width);
      }

      &::placeholder {
        font-size: r-theme(input-#{$size}-placeholder-text-font-size);
        font-weight: r-theme(input-#{$size}-placeholder-text-font-weight);
        // TODO: this seems to be unused
        line-height: r-theme(input-#{$size}-placeholder-text-line-height);
      }
    }
  }
}

@mixin input-shapes() {
  @each $shape in r-get-shapes() {
    &.shape-#{$shape} {
      border-radius: r-theme(input-#{$shape}-border-radius);
    }
  }
}


@mixin r-input-theme() {
  .r-error {
    font-size: 12px;
    line-height: 12px;
    color: r-theme(input-danger-border-color);
    padding-left: 24px;
    margin-top: -12px;
    font-weight: 500;
  }
  [rInput] {
    margin: 6px 6px 18px;
    @include r-input-core-theme();
    @include input-statuses();
    @include input-sizes();
    @include input-shapes();
    &:focus {
      @include r-outline(r-theme(button-outline-width), r-theme(button-outline-color));
    }
  }
}

@mixin r-input-core-theme() {
  border-style: r-theme(input-border-style);
  border-width: r-theme(input-border-width);
  font-family: r-theme(input-text-font-family);
  appearance: none; // removes inner shadow on iOS

  &.r-transition {
    @include r-component-animation(border, background-color, color, box-shadow);
  }

  &::placeholder {
    font-family: r-theme(input-placeholder-text-font-family);
    text-overflow: ellipsis;
  }

  &:focus {
    outline: none;
  }

  &.input-full-width {
    flex: 1;
  }
}

/**
 * @license
 * Copyright renie.tech, all Rights Reserved.
 * Licensed under the MIT License. See LICENSE in the project root for more information.
 */

@mixin r-file-input-theme() {
  r-file-input {
    r-icon {
      color: r-theme(file-input-icon-color);
    }
    [r-icon-button] {
      &.status-basic {
        color: r-theme(file-input-basic-icon-color);
      }
    }
  }
}

@mixin r-calendar-theme() {
  r-base-calendar {
    r-card {
      background-color: r-theme(calendar-background-color);
      border: r-theme(calendar-border-width) r-theme(calendar-border-style) r-theme(calendar-border-color);
      box-shadow: none;
      margin: 0;
      width: r-theme(calendar-width);
      overflow: hidden;
    }

    r-card-body {
      padding: 0;
    }

    .calendar-navigation {
      border: none;
      display: flex;
      justify-content: space-between;

      padding: r-theme(calendar-navigation-padding);
      color: r-theme(calendar-navigation-text-color);
      font-family: r-theme(calendar-navigation-text-font-family);
      font-size: r-theme(calendar-navigation-title-text-font-size);
      font-weight: r-theme(calendar-navigation-title-text-font-weight);
      line-height: r-theme(calendar-navigation-title-text-line-height);
    }

    &:not(.has-navigation) {
      r-calendar-week-numbers .sign-container,
      r-calendar-days-names {
        border-top: 0;
      }
    }

    &.has-week-number {
      r-card {
        $calendar-width: r-theme(calendar-width);
        $week-col-width: r-theme(calendar-weeknumber-width);
        $divider-width: r-theme(calendar-weeknumber-divider-width);
        width: calc(#{$calendar-width} + #{$week-col-width} + #{$divider-width});
      }

      .month-cell,
      .year-cell {
        flex: 1 0 auto;
      }
    }

    &.size-large {
      r-card {
        width: r-theme(calendar-large-width);
      }

      &.has-week-number r-card {
        $week-column-width: r-theme(calendar-weeknumber-large-width);
        $divider-width: r-theme(calendar-weeknumber-divider-width);
        $large-cal-width: r-theme(calendar-large-width);
        width: calc(#{$large-cal-width} + #{$week-column-width} + #{$divider-width});
      }
    }
  }
}

@mixin r-calendar-navigation-theme() {
  r-calendar-view-mode,
  r-calendar-pageable-navigation {
    [r-button].appearance-ghost.status-basic, [r-icon-button].appearance-ghost.status-basic {
      margin: 0;
      &,
      &:hover,
      &:focus,
      &:active {
        color: r-theme(calendar-navigation-text-color);
        font-family: r-theme(calendar-navigation-text-font-family);
        font-size: r-theme(calendar-navigation-title-text-font-size);
        font-weight: r-theme(calendar-navigation-title-text-font-weight);
        line-height: r-theme(calendar-navigation-title-text-line-height);
      }
      &:focus {
        &,
        &:not(:hover):not(:active) {
          box-shadow: none;
        }
      }
    }
  }

  r-calendar-pageable-navigation {
    @include r-ltr(margin-left, auto);
    @include r-rtl(margin-right, auto);
  }
}

@mixin r-calendar-picker-theme() {
  r-calendar-picker {
    display: block;
    padding-top: r-theme(calendar-picker-padding-top);
    padding-bottom: r-theme(calendar-picker-padding-bottom);

    // @include r-ltr() {
    //   padding-right: r-theme(calendar-picker-padding-end);
    //   padding-left: r-theme(calendar-picker-padding-start);
    // };
    // @include r-rtl() {
    //   padding-right: r-theme(calendar-picker-padding-start);
    //   padding-left: r-theme(calendar-picker-padding-end);
    // };
  }
}

@mixin r-calendar-days-names-theme() {
  r-calendar-days-names {
    background: r-theme(calendar-weekday-background);
    $border: r-theme(calendar-weekday-divider-width) solid r-theme(calendar-weekday-divider-color);
    border-top: $border;
    border-bottom: $border;

    // @include r-ltr() {
    //   padding-left: r-theme(calendar-picker-padding-start);
    //   padding-right: r-theme(calendar-picker-padding-end);
    // };
    // @include r-rtl() {
    //   padding-left: r-theme(calendar-picker-padding-end);
    //   padding-right: r-theme(calendar-picker-padding-start);
    // };

    .day {
      width: r-theme(calendar-weekday-width);
      height: r-theme(calendar-weekday-height);
      color: r-theme(calendar-weekday-text-color);
      font-size: r-theme(calendar-weekday-text-font-size);
      font-weight: r-theme(calendar-weekday-text-font-weight);
      line-height: r-theme(calendar-weekday-text-line-height);

      &.holiday {
        color: r-theme(calendar-weekday-holiday-text-color);
      }
    }

    &.size-large .day {
      width: r-theme(calendar-weekday-large-width);
      height: r-theme(calendar-weekday-large-height);
    }
  }
}

/**
 * @license
 * Copyright Akveo. All Rights Reserved.
 * Licensed under the MIT License. See License.txt in the project root for license information.
 */

@mixin r-calendar-week-numbers-theme() {
  r-calendar-week-numbers {
    background: r-theme(calendar-weeknumber-background);
    font-size: r-theme(calendar-weeknumber-text-font-size);
    font-weight: r-theme(calendar-weeknumber-text-font-weight);
    line-height: r-theme(calendar-weeknumber-text-line-height);
    color: r-theme(calendar-weeknumber-text-color);
    padding-bottom: r-theme(calendar-picker-padding-bottom);

    .sign-container {
      display: flex;
      flex-direction: column;
      $border: r-theme(calendar-weeknumber-divider-width) solid r-theme(calendar-weeknumber-divider-color);
      border-top: $border;
      border-bottom: $border;
      margin-bottom: r-theme(calendar-picker-padding-top);
    }

    .sign,
    .week-number {
      display: flex;
      align-items: center;
      justify-content: center;
      height: r-theme(calendar-weeknumber-height);
      width: r-theme(calendar-weeknumber-width);
    }

    &.size-large {
      .sign,
      .week-number {
        height: r-theme(calendar-weeknumber-large-height);
        width: r-theme(calendar-weeknumber-large-width);
      }
    }
  }
}

@mixin r-calendar-day-picker-theme {
  r-calendar-day-picker r-calendar-week-numbers {
    $border: r-theme(calendar-weeknumber-divider-width) solid r-theme(calendar-weeknumber-divider-color);
    // @include r-ltr(border-right, $border);
    // @include r-rtl(border-left, $border);
  }
}

@mixin r-calendar-cell-theme() {
  r-calendar-picker {
    .day-cell {
      width: r-theme(calendar-day-cell-width);
      height: r-theme(calendar-day-cell-height);

      &.size-large {
        width: r-theme(calendar-day-cell-large-width);
        height: r-theme(calendar-day-cell-large-height);
      }
    }

    .month-cell {
      width: r-theme(calendar-month-cell-width);
      height: r-theme(calendar-month-cell-height);

      &.size-large {
        width: r-theme(calendar-month-cell-large-width);
        height: r-theme(calendar-month-cell-large-height);
      }
    }

    .year-cell {
      width: r-theme(calendar-year-cell-width);
      height: r-theme(calendar-year-cell-height);

      &.size-large {
        width: r-theme(calendar-year-cell-large-width);
        height: r-theme(calendar-year-cell-large-height);
      }
    }

    .cell-content {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100%;
      width: 100%;

      border-radius: r-theme(calendar-border-radius);
    }

    .day-cell,
    .month-cell,
    .year-cell {
      display: flex;

      align-items: center;
      justify-content: center;

      font-family: r-theme(calendar-text-font-family);
      font-size: r-theme(calendar-text-font-size);
      font-weight: r-theme(calendar-text-font-weight);
      line-height: r-theme(calendar-text-line-height);
      color: r-theme(calendar-text-color);
      text-transform: uppercase;

      cursor: pointer;

      &,
      & .cell-content {
        @include r-component-animation(background-color, border-color, color);
      }

      &.empty,
      &.disabled {
        cursor: default;
      }

      &.bounding-month {
        color: r-theme(calendar-cell-inactive-text-color);
      }

      &:not(.disabled):not(.empty) {
        &:hover .cell-content {
          background-color: r-theme(calendar-cell-hover-background-color);
          border-color: r-theme(calendar-cell-hover-border-color);
          color: r-theme(calendar-cell-hover-text-color);
          font-size: r-theme(calendar-cell-hover-text-font-size);
          font-weight: r-theme(calendar-cell-hover-text-font-weight);
          line-height: r-theme(calendar-cell-hover-text-line-height);
        }

        &:active .cell-content {
          background-color: r-theme(calendar-cell-active-background-color);
          border-color: r-theme(calendar-cell-active-border-color);
          color: r-theme(calendar-cell-active-text-color);
          font-size: r-theme(calendar-cell-active-text-font-size);
          font-weight: r-theme(calendar-cell-active-text-font-weight);
          line-height: r-theme(calendar-cell-active-text-line-height);
        }

        &.today .cell-content {
          background-color: r-theme(calendar-cell-today-background-color);
          border: 1px solid r-theme(calendar-cell-today-border-color);
          color: r-theme(calendar-cell-today-text-color);
          font-size: r-theme(calendar-cell-today-text-font-size);
          font-weight: r-theme(calendar-cell-today-text-font-weight);
          line-height: r-theme(calendar-cell-today-text-line-height);

          &:hover {
            background-color: r-theme(
              calendar-cell-today-hover-background-color
            );
            border-color: r-theme(calendar-cell-today-hover-border-color);
          }

          &:active {
            background-color: r-theme(
              calendar-cell-today-active-background-color
            );
            border-color: r-theme(calendar-cell-today-active-border-color);
          }
        }

        &.selected .cell-content {
          background-color: r-theme(calendar-cell-selected-background-color);
          border-color: r-theme(calendar-cell-selected-border-color);
          color: r-theme(calendar-cell-selected-text-color);
          font-size: r-theme(calendar-cell-selected-text-font-size);
          font-weight: r-theme(calendar-cell-selected-text-font-weight);
          line-height: r-theme(calendar-cell-selected-text-line-height);

          &:hover {
            background-color: r-theme(
              calendar-cell-selected-hover-background-color
            );
            border-color: r-theme(calendar-cell-selected-hover-border-color);
          }

          &:active {
            background-color: r-theme(
              calendar-cell-selected-active-background-color
            );
            border-color: r-theme(calendar-cell-selected-active-border-color);
          }
        }

        &.today.selected {
          background-color: r-theme(calendar-cell-selected-background-color);
          border-radius: r-theme(calendar-border-radius);

          .cell-content {
            background-color: r-theme(
              calendar-cell-today-selected-background-color
            );
            border-color: r-theme(calendar-cell-today-selected-border-color);
            color: r-theme(calendar-cell-today-selected-text-color);

            &:hover {
              background-color: r-theme(
                calendar-cell-today-selected-hover-background-color
              );
              border-color: r-theme(
                calendar-cell-today-selected-hover-border-color
              );
            }

            &:focus {
              background-color: r-theme(
                calendar-cell-today-selected-active-background-color
              );
              border-color: r-theme(
                calendar-cell-today-selected-active-border-color
              );
            }
          }
        }
      }

      &.disabled {
        color: r-theme(calendar-cell-disabled-text-color);

        &.today .cell-content {
          border: 1px solid r-theme(calendar-cell-today-disabled-border-color);
        }
      }
    }

    .range-cell.in-range.selected:not(.disabled):not(.empty) {
      background-color: r-theme(calendar-cell-selected-background-color);
      border-radius: 0;

      // &.start {
      //   @include r-ltr() {
      //     border-top-left-radius: r-theme(calendar-border-radius);
      //     border-bottom-left-radius: r-theme(calendar-border-radius);
      //   }
      //   @include r-rtl() {
      //     border-top-right-radius: r-theme(calendar-border-radius);
      //     border-bottom-right-radius: r-theme(calendar-border-radius);
      //   }
      // }

      // &.end {
      //   @include r-ltr() {
      //     border-top-right-radius: r-theme(calendar-border-radius);
      //     border-bottom-right-radius: r-theme(calendar-border-radius);
      //   }
      //   @include r-rtl() {
      //     border-top-left-radius: r-theme(calendar-border-radius);
      //     border-bottom-left-radius: r-theme(calendar-border-radius);
      //   }
      // }
    }
  }
}


@mixin r-calendar-kit-theme() {
  @include r-calendar-navigation-theme();
  @include r-calendar-picker-theme();
  @include r-calendar-days-names-theme();
  @include r-calendar-week-numbers-theme();
  @include r-calendar-day-picker-theme();
  @include r-calendar-cell-theme();
}





@mixin r-datepicker-theme {
  $border: r-theme(datepicker-border-width) r-theme(datepicker-border-style) r-theme(datepicker-border-color);

  .datepicker-overlay-panel r-card {
    border-color: r-theme(datepicker-border-color);
    border-style: r-theme(datepicker-border-style);
    border-width: r-theme(datepicker-border-width);
    border-radius: r-theme(datepicker-border-radius);
    background: r-theme(datepicker-background-color);
    box-shadow: r-theme(datepicker-shadow);
  }
  r-calendar-with-time {
    .r-timepicker-container,
    r-base-calendar r-card {
      border: none;
    }

    .column-header {
      border-top: $border;
      border-radius: 0;
    }

    .timepicker-section.size-large r-list-item {
      height: r-theme(calendar-day-cell-large-height);
    }

    .timepicker-section.size-large .header-cell {
      height: r-theme(calendar-weekday-large-height);
    }

    .timepicker-section {
      // @include r-ltr(border-left, $border);
      // @include r-rtl(border-right, $border);
    }

    .timepicker-single-column-width {
      width: r-theme(timepicker-single-column-width);;
    }

    .timepicker-multiple-column-width {
      width: r-theme(timepicker-multiple-column-width);
    }

    .picker-title {
      height: r-theme(timepicker-title-height);
      padding: r-theme(timepicker-title-padding);
    }
  }
}

@mixin r-toastr-theme() {
  r-toast {
    border-style: r-theme(toastr-border-style);
    border-width: r-theme(toastr-border-width);
    border-radius: r-theme(toastr-border-radius);
    padding: r-theme(toastr-padding);
    box-shadow: r-theme(toastr-shadow);

    .title {
      font-family: r-theme(toastr-title-text-font-family);
      font-size: r-theme(toastr-title-text-font-size);
      font-weight: r-theme(toastr-title-text-font-weight);
      line-height: r-theme(toastr-title-text-line-height);
    }

    .message {
      font-family: r-theme(toastr-text-font-family);
      font-size: r-theme(toastr-text-font-size);
      font-weight: r-theme(toastr-text-font-weight);
      line-height: r-theme(toastr-text-line-height);
    }

    .icon-container {
      margin-right: 1.25rem;
      border-radius: r-theme(toastr-border-radius);
      min-width: 2.5rem;
      min-height: 2.5rem;
      display: flex;
      justify-content: center;
      align-items: center;

      r-icon {
        font-size: 1.5rem;
      }
    }
  }

  @each $status in r-get-statuses() {
    r-toast.status-#{$status} {
      background: r-theme(toastr-#{$status}-background-color);
      border-color: r-theme(toastr-#{$status}-border-color);
      color: r-theme(toastr-#{$status}-text-color);

      .title {
        color: r-theme(toastr-#{$status}-text-color);
      }

      &.destroy-by-click:hover {
        background: r-theme(toastr-destroyable-#{$status}-hover-background-color);
        border-color: r-theme(toastr-destroyable-#{$status}-hover-border-color);
      }

      .icon-container {
        background: r-theme(toastr-icon-#{$status}-background-color);
        r-icon {
          color: r-theme(toastr-icon-#{$status}-color);
        }
      }
    }
  }

}

@mixin r-radio-theme() {
  r-radio {
    .outer-circle,
    .inner-circle {
      height: r-theme(radio-height);
      width: r-theme(radio-width);
    }

    .outer-circle {
      border-style: r-theme(radio-border-style);
      border-width: r-theme(radio-border-width);
    }

    .native-input:enabled:focus + .outer-circle {
      @include r-outline(r-theme(radio-outline-width), r-theme(radio-outline-color));
    }

    @each $status in r-get-statuses() {
      &.status-#{$status} .native-input:enabled + .outer-circle {
        background-color: r-theme(radio-#{$status}-background-color);
        border-color: r-theme(radio-#{$status}-border-color);
      }

      &.status-#{$status} .native-input:enabled:checked {
        & + .outer-circle {
          background-color: r-theme(radio-#{$status}-checked-background-color);
          border-color: r-theme(radio-#{$status}-checked-border-color);
        }
        & ~ .inner-circle {
          background-color: r-theme(radio-#{$status}-inner-circle-color);
        }
      }

      &.status-#{$status} .native-input:enabled:focus + .outer-circle {
        background-color: r-theme(radio-#{$status}-focus-background-color);
        border-color: r-theme(radio-#{$status}-focus-border-color);
      }
      &.status-#{$status} .native-input:enabled:checked:focus {
        & + .outer-circle {
          background-color: r-theme(radio-#{$status}-focus-checked-background-color);
          border-color: r-theme(radio-#{$status}-focus-checked-border-color);
        }
        & ~ .inner-circle {
          background-color: r-theme(radio-#{$status}-focus-inner-circle-color);
        }
      }

      &.status-#{$status} label:hover .native-input:enabled + .outer-circle {
        background-color: r-theme(radio-#{$status}-hover-background-color);
        border-color: r-theme(radio-#{$status}-hover-border-color);
      }
      &.status-#{$status} label:hover .native-input:checked:enabled {
        + .outer-circle {
          background-color: r-theme(radio-#{$status}-hover-checked-background-color);
          border-color: r-theme(radio-#{$status}-hover-checked-border-color);
        }
        ~ .inner-circle {
          background-color: r-theme(radio-#{$status}-hover-inner-circle-color);
        }
      }

      &.status-#{$status} label .native-input:enabled:active + .outer-circle {
        background-color: r-theme(radio-#{$status}-active-background-color);
        border-color: r-theme(radio-#{$status}-active-border-color);
      }
      &.status-#{$status} label .native-input:enabled:checked:active {
        & + .outer-circle {
          background-color: r-theme(radio-#{$status}-active-checked-background-color);
          border-color: r-theme(radio-#{$status}-active-checked-border-color);
        }
        & ~ .inner-circle {
          background-color: r-theme(radio-#{$status}-active-inner-circle-color);
        }
      }

      &.status-#{$status} .text {
        color: r-theme(radio-#{$status}-text-color);
      }

      &.status-#{$status} .native-input:disabled {
        & + .outer-circle {
          background-color: r-theme(radio-#{$status}-disabled-background-color);
          border-color: r-theme(radio-#{$status}-disabled-border-color);
        }
        & ~ .text {
          color: r-theme(radio-#{$status}-disabled-text-color);
        }

        &:checked {
          & + .outer-circle {
            background-color: r-theme(radio-#{$status}-disabled-checked-background-color);
            border-color: r-theme(radio-#{$status}-disabled-checked-border-color);
          }
          ~ .inner-circle {
            background-color: r-theme(radio-#{$status}-disabled-checked-inner-circle-color);
          }
        }
      }
    }

    .text {
      font-family: r-theme(radio-text-font-family);
      font-size: r-theme(radio-text-font-size);
      font-weight: r-theme(radio-text-font-weight);
      line-height: r-theme(radio-text-line-height);
      margin-left: r-theme(radio-width);
    }
  }
}

@mixin r-table-theme() {
  table.r-table {
    width: 100%;
    flex: 1;
    border-spacing: unset;
    padding: 12px;
    td {
      padding: 12px 0;
    }
    .r-header-cell {
      text-align: left;
      padding: 12px 0;
      padding-top: 0;
    }
    @include media-breakpoint-down(sm) {
      padding: 8px;
      td {
        padding: 8px 0;
      }
      .r-header-cell {
        padding: 8px 0;
        padding-top: 0;
      }
    }
    .r-cell, .r-header-cell {
      border-bottom: {
        width: r-theme(card-border-width);
        color: r-theme(card-border-color);
        style: r-theme(card-border-style); 
      };
    }
  }
}
@mixin r-drag-drop-theme() {
  .r-drag-container {
    width: 400px;
    max-width: 100%;
    margin: 0 25px 25px 0;
    display: inline-block;
    vertical-align: top;
  }

  .r-drag-list {
    border: 1px solid r-theme(card-border-color);
    min-height: 60px;
    background: r-theme(card-background-color);
    border-radius: 4px;
    overflow: hidden;
    display: block;
  }

  .r-drag-box {
    padding: 20px 10px;
    border-bottom: 1px solid r-theme(card-border-color);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    cursor: move;
    background: r-theme(card-background-color);
    font-size: 14px;
  }

  .r-drag-preview {
    box-sizing: border-box;
    border-radius: 4px;
    box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
                0 8px 10px 1px rgba(0, 0, 0, 0.14),
                0 3px 14px 2px rgba(0, 0, 0, 0.12);
  }

  .r-drag-placeholder {
    opacity: 0;
  }
  
  .r-drag-animating {
    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
  }

  .r-drag-box:last-child {
    border: none;
  }
  
  .r-drag-list.r-drop-list-dragging .r-drag-box:not(.r-drag-placeholder) {
    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
  }
}


@mixin r-theme-components() {
  @include r-typography();
  @include r-overlay();
  @include r-select-theme();
  @include r-option-list-theme();
  @include r-checkbox-theme();
  @include r-navbar-theme();
  @include r-sidenav-theme();
  @include r-layout-theme();
  @include r-user-theme();
  @include r-alert-theme();
  @include r-list-theme();
  @include r-button-theme();
  @include r-icon-theme();
  @include r-card-theme();
  @include r-expansion-panel-theme();
  @include r-dialog-theme();
  @include r-progress-bar-theme();
  @include r-spinner-theme();
  @include r-stepper-theme();
  @include r-tabset-theme();
  @include r-input-theme();
  @include r-file-input-theme();
  @include r-calendar-theme();
  @include r-calendar-kit-theme();
  @include r-calendar-cell-theme();
  @include r-calendar-day-picker-theme();
  @include r-calendar-days-names-theme();
  @include r-calendar-navigation-theme();
  @include r-datepicker-theme();
  @include r-toastr-theme();
  @include r-radio-theme();
  @include r-table-theme();
  @include r-drag-drop-theme();
}

.visually-hidden {
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px);
}


@mixin r-theme-global() {
  @include r-theme-components();
}
