:root
{
  /* Colors */
  --rrui-white-color        : #ffffff;
  --rrui-black-color        : #000000;
  --rrui-accent-color       : #03b2cb;
  --rrui-accent-color-light : #2bd7f0;
  --rrui-error-color        : #d30f00;

  --rrui-gray-color: #888888;
  --rrui-gray-color-light: #cacaca;
  --rrui-gray-color-lightest: #f3f3f3;

  /* Modular grid unit. */
  --rrui-unit : 0.6rem;

  /* `<TextInput/>`, `<Select/>`, `<Button/>` height. */
  --rrui-input-height : calc(var(--rrui-unit) * 3);

  /* For `small-screen/*.Fullscreen.css` styles (only if used). */
  --rrui-fullscreen-input-height : calc(var(--rrui-unit) * 4);

  /* `<TextInput multiline/>` */
  --rrui-multiline-text-height                 : calc(var(--rrui-unit) * 7);
  --rrui-multiline-text-input-vertical-padding : calc(var(--rrui-unit) / 2);

  /* `<TextInput/>`, `<Select/>`, `<Autocomplete/>` input side padding. */
  --rrui-input-field-side-padding : 0rem;

  /* `<Select/>`, `<Autocomplete/>` options list side padding. */
  --rrui-options-list-negative-side-margin : calc(var(--rrui-list-item-side-padding) - var(--rrui-input-field-side-padding));

  /* `<TextInput/>`, `<Select/>`, `<Autocomplete/>`, etc. */
  /* Background color is set to white instead of transparent because
     `box-shadow` is used to disabled Chrome's yellow autocomplete background. */
  --rrui-input-field-background-color : var(--rrui-white-color);
  --rrui-input-field-background-color--autofill : var(--rrui-input-field-background-color);
  --rrui-input-field-background-color-focus : var(--rrui-input-field-background-color);
  --rrui-input-field-background-color-focus--autofill : var(--rrui-input-field-background-color-focus);
  --rrui-input-field-background-color-error : var(--rrui-input-field-background-color);
  --rrui-input-field-background-color-error--autofill : var(--rrui-input-field-background-color-error);
  --rrui-input-field-background-color-error-focus : var(--rrui-input-field-background-color-error);
  --rrui-input-field-background-color-error-focus--autofill : var(--rrui-input-field-background-color-error-focus);
  --rrui-input-field-shadow-radius--autofill : 1000px;
  --rrui-input-field-background-color-disabled : var(--rrui-input-field-background-color);
  --rrui-input-field-transition : border 0.1s;
  --rrui-input-field-text-color : var(--rrui-black-color);
  --rrui-input-field-font-size : inherit;
  --rrui-input-field-icon-size : calc(var(--rrui-input-height) - 1.5 * var(--rrui-unit));
  --rrui-input-field-icon-margin-right : calc(0.75 * var(--rrui-unit));
  --rrui-input-field-icon-margin-left : 0px;
  --rrui-input-field-icon-color : var(--rrui-gray-color);

  /* `<Button/>` */
  --rrui-button-side-padding: 0rem;
  --rrui-button-border-width: 0px;
  --rrui-button-border-color: var(--rrui-accent-color);
  --rrui-button-border-radius: 0rem;
  --rrui-button-busy-indicator-width: 0.1em;
  --rrui-button-busy-indicator-bottom: calc(50% - 0.7em);

  /* `<Button/>` colors. */
  --rrui-button-background-color: transparent;
  --rrui-button-text-color: var(--rrui-accent-color);
  --rrui-button-transition: none;
  --rrui-button-background-color-active : var(--rrui-button-background-color);
  --rrui-button-text-color-active : var(--rrui-accent-color-light);

  /* `<ExpandableMenu/>` */
  /* `--rrui-collapsible-menu-item-side-padding` name is deprecated,
     use `--rrui-expandable-menu-item-side-padding` name instead. */
  --rrui-collapsible-menu-item-side-padding : calc(var(--rrui-unit) * 2.5);
  --rrui-expandable-menu-item-side-padding  : var(--rrui-collapsible-menu-item-side-padding);

  /* `<Snackbar/>` */
  --rrui-snackbar-height       : calc(var(--rrui-unit) * 4);
  --rrui-snackbar-side-padding : calc(var(--rrui-unit) * 1.5);
  --rrui-snackbar-margin       : calc(var(--rrui-unit) * 2);
  --rrui-snackbar-border-radius : var(--rrui-border-radius-small);
  --rrui-snackbar-background-color : var(--rrui-black-color);
  --rrui-snackbar-text-color : var(--rrui-white-color);
  --rrui-snackbar-notifications-count-size : 1.4em;
  --rrui-snackbar-notifications-count-border-color : currentColor;
  --rrui-snackbar-notifications-count-background-color : var(--rrui-snackbar-background-color); /* #d30f00; */
  --rrui-snackbar-close-button-color: var(--rrui-gray-color-lightest);
  --rrui-snackbar-close-button-color-active: var(--rrui-gray-color-light);

  /* `<Tooltip/>` */
  --rrui-tooltip-side-padding : calc(var(--rrui-unit) * 1.5);
  --rrui-tooltip-height       : calc(var(--rrui-unit) * 4);
  --rrui-tooltip-animation-duration : 120ms;
  /* `--rrui-tooltip-visible-distance` is deprecated,
     pass `offsetTop` property (in pixels) instead
     and set `--rrui-tooltip-visible-distance` to `0px`. */
  --rrui-tooltip-visible-distance : 0.2em;
  /* `--rrui-tooltip-hidden-distance` may be renamed into
     something like `--rrui-tooltip-translateY--hidden` in some future. */
  --rrui-tooltip-hidden-distance  : 0.5em;
  --rrui-tooltip-border-radius : var(--rrui-border-radius-small);
  /* `<Tooltip/>` colors. */
  --rrui-tooltip-background-color : var(--rrui-black-color);
  --rrui-tooltip-text-color : var(--rrui-white-color);
  --rrui-tooltip-opacity : 1;

  /* `<Switch/>` and `<Checkbox/>` */
  --rrui-control-label-margin : var(--rrui-unit);

  /* `<SlideOutMenu/>` */
  --rrui-slideout-menu-animation-duration : 220ms;

  /* Close icon */
  --rrui-close-margin : calc(var(--rrui-unit) * 2);
  --rrui-close-size   : calc(var(--rrui-unit) * 2);

  /* Menu button */
  --rrui-menu-button-animation-duration : 0.25s;

  /* Border radius */
  --rrui-border-radius-big   : 0.2rem;
  --rrui-border-radius-small : 0.1rem;

  /* "Cards" are `<Modal/>`, `<Select/>`, `<Autocomplete/>`, `<DatePicker/>`. */
  --rrui-card-background-color : var(--rrui-white-color);
  --rrui-card-text-color : var(--rrui-black-color);

  /* `<TextInput/>`, `<Select/>` and `<DatePicker/>` border. */
  --rrui-input-field-border-radius : 0rem;
  --rrui-input-field-border-width : 0px;
  --rrui-input-field-border-bottom-width : 1px;
  --rrui-input-field-border-color : var(--rrui-gray-color-light);
  --rrui-input-field-border-color-disabled : var(--rrui-input-field-border-color);
  --rrui-input-field-border-color-focus : var(--rrui-accent-color);
  --rrui-input-field-border-color-error : var(--rrui-error-color);
  --rrui-input-field-border-color-error-focus : var(--rrui-input-field-border-color-error);

  /* `<TextInput/>`, `<Select/>` and `<DatePicker/>` label. */
  --rrui-input-label-focus-top-offset : -70%;
  --rrui-input-label-focus-scale : 0.8;

  /* `<TextInput/>`, `<Select/>` and `<DatePicker/>` label color. */
  --rrui-input-field-label-color : var(--rrui-gray-color);
  --rrui-input-field-label-color-focus : var(--rrui-accent-color);
  --rrui-input-field-label-color-error : var(--rrui-error-color);

  /* `<Expandable/>`. */
  --rrui-expandable-transition-hide: all 150ms ease-out; /* 250ms - too slow for short lists */
  --rrui-expandable-transition-show: all 150ms cubic-bezier(0.23, 1, 0.32, 1);
  --rrui-expandable-transform-hide: scaleY(0.8);
  --rrui-expandable-transform-show: scaleY(1);
  --rrui-expandable-transform-origin: 50% top 0px;
  --rrui-expandable-transform-origin-upward: 50% bottom 0px;
  --rrui-expandable-content-transition: opacity 100ms ease-out;
  --rrui-expandable-content-opacity-hide: 0;
  --rrui-expandable-margin: 1em;
  --rrui-expandable-fade-distance: 0.5em;

  /* `<Select/>` toggler color. */
  --rrui-select-toggler-text-color-active : var(--rrui-accent-color);
  --rrui-select-toggler-text-color-empty : var(--rrui-gray-color);
  --rrui-select-toggler-transition : color 30ms ease-out;

  /* `<Select/>` */
  --rrui-list-vertical-padding  : var(--rrui-unit);
  --rrui-list-item-height       : calc(var(--rrui-unit) * 4);
  --rrui-list-item-side-padding : calc(var(--rrui-unit) * 1.5);
  --rrui-list-item-icon-margin  : var(--rrui-unit);

  /* `<Select/>` options colors. */
  --rrui-list-item-background-color : var(--rrui-card-background-color);
  --rrui-list-item-text-color : var(--rrui-card-text-color);

  /* `<Select/>` options hover/focused colors. */
  --rrui-list-item-background-color-focus : var(--rrui-gray-color-lightest);
  --rrui-list-item-text-color-focus : var(--rrui-list-item-text-color);

  /* `<Select/>`'s currently selected option colors. */
  --rrui-list-item-background-color-selected : var(--rrui-accent-color);
  --rrui-list-item-text-color-selected : var(--rrui-white-color);

  /* `<Select/>` arrow. */
  --rrui-select-arrow-color: var(--rrui-gray-color);
  --rrui-select-arrow-opacity: 0.6;
  --rrui-select-arrow-border-width: 0.35em 0.22em 0 0.22em;
  --rrui-select-arrow-margin-top: 0.1em;
  --rrui-select-arrow-margin-left: calc(var(--rrui-unit) * 2 / 3);
  --rrui-select-arrow-margin-right: calc(var(--rrui-unit) * 2 / 3);

  /* `<Checkbox/>` size. */
  --rrui-checkbox-size : 0.9em;

  /* `<Checkbox/>` colors. */
  --rrui-checkbox-stroke-color : var(--rrui-black-color);
  --rrui-checkbox-fill-color : var(--rrui-input-field-background-color);
  --rrui-checkbox-fill-color-error : var(--rrui-input-field-background-color-error);
  --rrui-checkbox-color-focus : var(--rrui-accent-color);
  --rrui-checkbox-color-checked : var(--rrui-accent-color);
  --rrui-checkbox-color-checked-focus : var(--rrui-checkbox-color-focus);
  --rrui-checkbox-color-active : var(--rrui-accent-color-light);
  --rrui-checkbox-focus-ring-size : 250%;
  --rrui-checkbox-focus-ring-background-color : transparent;
  --rrui-checkbox-focus-ring-background-color-active : transparent;

  /* `<Modal/>`. */
  --rrui-modal-padding: calc(var(--rrui-unit) * 2.5);
  --rrui-modal-padding--horizontal: var(--rrui-modal-padding);
  --rrui-modal-padding--vertical: calc(var(--rrui-modal-padding) - var(--rrui-unit) * 0.5);
  --rrui-modal-border-radius: var(--rrui-border-radius-big);

  /* `<Modal/>` colors. */
  --rrui-modal-background-color : var(--rrui-card-background-color);
  --rrui-modal-text-color : var(--rrui-card-text-color);
  --rrui-modal-close-button-background-color-focus : var(--rrui-gray-color-lightest);

  /* `<SlideOutMenu/>` colors. */
  --rrui-slide-out-menu-background-color : var(--rrui-black-color);
  --rrui-slide-out-menu-text-color : var(--rrui-white-color);

  /* `<SlideOutMenu/>` colors :active. */
  --rrui-slide-out-menu-background-color-active : var(--rrui-accent-color);
  --rrui-slide-out-menu-text-color-active : var(--rrui-slide-out-menu-text-color);

  /* `<Switch/>`. */
  --rrui-switch-width: 1.65em;
  --rrui-switch-height: 1em;
  --rrui-switch-clickable-padding: calc(var(--rrui-unit) / 2);
  --rrui-switch-focus-outline-shadow : 0 0 0 0 transparent;
  --rrui-switch-background-color : var(--rrui-checkbox-fill-color);
  --rrui-switch-accent-color : var(--rrui-checkbox-color-checked);
  --rrui-switch-label-color-on : initial;
  --rrui-switch-groove-border-color : rgba(0,0,0,0.16);
  --rrui-switch-groove-border-width : 0.0625em;
  --rrui-switch-groove-transition : all 0.40s cubic-bezier(.17,.67,.43,.98);
  --rrui-switch-knob-size: 0.875em;
  /* `transform` uses pre-calculated `translateX` because IE11
    doesn't know how to handle `calc()` inside `transofrm`. */
  /* https://stackoverflow.com/questions/21469350/not-possible-to-use-css-calc-with-transformtranslatex-in-ie */
  --rrui-switch-knob-translate-on: calc(var(--rrui-switch-width) - var(--rrui-switch-knob-size) - (var(--rrui-switch-height) - var(--rrui-switch-knob-size)));
  --rrui-switch-knob-transition: all 0.25s ease-out;
  --rrui-switch-knob-box-shadow: inset 0 0 0 0.03em rgba(0,0,0,0.3), 0 0 0.05em rgba(0,0,0,0.05), 0 0.1em 0.2em rgba(0,0,0,0.2);
  --rrui-switch-knob-border-color-focus : var(--rrui-accent-color);
  --rrui-switch-knob-background-color : var(--rrui-switch-background-color);
  --rrui-switch-knob-background-color-on: var(--rrui-switch-knob-background-color);

  /* `<Switcher/>`. */
  --rrui-switcher-border-radius : var(--rrui-border-radius-big);

  /* `<Switcher/>` colors. */
  --rrui-switcher-background-color : transparent;
  --rrui-switcher-text-color : var(--rrui-accent-color);

  /* `<Switcher/>` colors :active. */
  --rrui-switcher-background-color-active : var(--rrui-accent-color-light);
  --rrui-switcher-text-color-active : var(--rrui-white-color);

  /* `<Switcher/>` colors selected. */
  --rrui-switcher-background-color-selected : var(--rrui-accent-color);
  --rrui-switcher-text-color-selected : var(--rrui-white-color);

  /* `<DatePicker/>`. */
  --rrui-date-picker-calendar-day-color-outside: var(--rrui-gray-color);
  --rrui-date-picker-calendar-day-color-disabled: var(--rrui-gray-color-light);
  --rrui-date-picker-calendar-day-color-active: var(--rrui-white-color);
  --rrui-date-picker-calendar-day-background-color-active: var(--rrui-accent-color-light);
  --rrui-date-picker-calendar-day-color-selected: var(--rrui-white-color);
  --rrui-date-picker-calendar-day-background-color-selected: var(--rrui-accent-color);
  --rrui-date-picker-calendar-day-color-focus: var(--rrui-list-item-text-color-focus);
  --rrui-date-picker-calendar-day-background-color-focus: var(--rrui-list-item-background-color-focus);
  --rrui-date-picker-calendar-border-color-focus: var(--rrui-input-field-border-color-focus);
  --rrui-date-picker-calendar-weekday-color: var(--rrui-gray-color);
  --rrui-date-picker-calendar-day-color--today: #d0021b;
  --rrui-date-picker-calendar-day-font-weight--today: 700;

  /* `<ExpansionPanel/>` */
  --rrui-expansion-panel-background-color: var(--rrui-white-color);
  --rrui-expansion-panel-header-height: auto;
  --rrui-expansion-panel-header-height-expanded: var(--rrui-expansion-panel-header-height);
  --rrui-expansion-panel-animation-duration: 210ms;
  --rrui-expansion-panel-animation-easing: cubic-bezier(0.4, 0, 0.2, 1);
  --rrui-expansion-panel-padding-left: 0px;
  --rrui-expansion-panel-padding-right: 0px;
  --rrui-expansion-panel-content-padding-top: calc(var(--rrui-unit) * 2);
  --rrui-expansion-panel-content-padding-bottom: calc(var(--rrui-unit) * 2);
  --rrui-expansion-panel-toggle-icon-width: 0.65em;
  --rrui-expansion-panel-toggle-icon-rotate: -90deg;
  --rrui-expansion-panel-toggle-icon-rotate-expanded: 0deg;
  --rrui-expansion-panel-toggle-icon-margin: 0.5em;

  /* This is for `MenuIcon2.css` and is not being used currently. */
  --rrui-menu-icon-bar-thickness: 2px;

  /* z-index */
  --rrui-z-index-overlay       : 100;
  --rrui-z-index-above-overlay : 101;
}