@use 'sass:map';
@use 'sass:meta';
@use 'sass:string';
@use 'sass:color';
@use 'sass:list';
@use 'sass:math';
$rmd-utils-ios-scroll-momentum: true !default;
$rmd-utils-auto-dense: false !default;
$rmd-utils-enable-rtl: true !default;
$rmd-utils-temporary-element-z-index: 30 !default;
$rmd-utils-swappable-positions: top right bottom left;
$rmd-utils-swappable-position-prefixes: border margin padding;
$rmd-utils-skip-validation: false !default;
$rmd-utils-fix-moz-focus: true !default;
$rmd-utils-phone-max-width: 47.9375em !default;
$rmd-utils-tablet-min-width: 48em !default;
$rmd-utils-tablet-max-width: 64em !default;
$rmd-utils-desktop-min-width: 64.0625em !default;
$rmd-utils-large-desktop-min-width: 80em !default;
$rmd-grid-columns-var: --rmd-grid-cols;
$rmd-grid-gutter-var: --rmd-grid-gutter;
$rmd-grid-cell-margin-var: --rmd-cell-margin;
$rmd-grid-cell-size-var: --rmd-cell-size;
$rmd-grid-padding: 1rem !default;
$rmd-grid-cell-margin: 1rem !default;
$rmd-grid-columns: null !default;
$rmd-grid-phone-columns: if($rmd-grid-columns, $rmd-grid-columns, 4) !default;
$rmd-grid-tablet-columns: if($rmd-grid-columns, $rmd-grid-columns, 8) !default;
$rmd-grid-desktop-columns: if(
  $rmd-grid-columns,
  $rmd-grid-columns,
  12
) !default;
$rmd-grid-large-desktop-columns: $rmd-grid-desktop-columns !default;
$rmd-grid-list-padding: 0.5rem !default;
$rmd-grid-list-cell-margin: 0.5rem !default;
$rmd-grid-list-cell-max-size: 9.375rem !default;

@function str-replace($string, $search, $replace) {
  $index: string.index($string, $search);

  @if $index {
    @return string.slice($string, 1, $index - 1) + $replace +
      str-replace(
        string.slice($string, $index + string.length($search)),
        $search,
        $replace
      );
  }

  @return $string;
}

@function rmd-utils-validate($list-or-map, $key-or-value, $error-message) {
  $type: meta.type-of($list-or-map);
  $is-map: $type == map;
  $is-list: $type == list;

  @if $rmd-utils-skip-validation {
    @return if($is-list, $key-or-value, map-get($list-or-map, $key-or-value));
  }

  @if not $is-map and not $is-list {
    @error 'Unable to validate anything except for lists and maps at this time. Received: #{$list-or-map}.';
  }

  $choices: if($is-map, map.keys($list-or-map), $list-or-map);
  @if not index($choices, $key-or-value) {
    @error "Invalid #{$error-message}: '#{$key-or-value}'. Choose one of: #{$choices}";
  }

  @return if($is-list, $key-or-value, map-get($list-or-map, $key-or-value));
}

@function rmd-utils-swap-position($style) {
  $prefix: '';
  $position: $style;
  @each $valid-prefix in $rmd-utils-swappable-position-prefixes {
    @if string.index($style, '#{$valid-prefix}-') {
      $prefix: '#{$valid-prefix}-';
      $position: str-replace($style, $prefix, '');
    }
  }

  $current: rmd-utils-validate(
    $rmd-utils-swappable-positions,
    $position,
    'swappable position'
  );

  $next-position: bottom;
  @if $position == left {
    $next-position: right;
  } @else if $position == right {
    $next-position: left;
  } @else if $position == bottom {
    $next-position: top;
  }

  @return '#{$prefix}#{$next-position}';
}

@function rmd-utils-negate-var($css-variable) {
  @return calc(-1 * #{$css-variable});
}

@mixin rmd-utils-map-to-styles($style-map) {
  @if $style-map {
    @each $property, $value in $style-map {
      #{$property}: #{$value};
    }
  }
}

@mixin rmd-utils-rtl {
  @if $rmd-utils-enable-rtl {
    [dir='rtl'] & {
      @content;
    }
  }
}

@mixin rmd-utils-rtl-auto($property, $value, $swapped-value: null) {
  $inversed-property: rmd-utils-swap-position($property);

  @include rmd-utils-rtl {
    @if $swapped-value == null {
      $swapped-value: auto;

      @each $prefix in $rmd-utils-swappable-position-prefixes {
        @if string.index($property, '#{$prefix}-') {
          $swapped-value: 0;
        }
      }
    }

    #{$property}: #{$swapped-value};
    #{$inversed-property}: #{$value};
    @content;
  }

  #{$property}: #{$value};
}

@mixin rmd-utils-rtl-auto-group($styles, $swapped-styles: ()) {
  @include rmd-utils-map-to-styles($styles);
  @include rmd-utils-rtl {
    @each $property, $value in $styles {
      $inversed-property: rmd-utils-swap-position($property);
      $inversed-value: auto;
      @if map-has-key($swapped-styles, $property) {
        $inversed-value: map.get($swapped-styles, $property);
      } @else if map-has-key($styles, $inversed-property) {
        $inversed-value: map.get($swapped-styles, $inversed-property);
      }

      #{$property}: #{$inversed-value};
      #{$inversed-property}: #{$value};

      @content;
    }
  }
}

@mixin rmd-utils-block-centered($vertical-margin: null) {
  display: block;

  @if $vertical-margin {
    margin: $vertical-margin auto;
  } @else {
    margin-left: auto;
    margin-right: auto;
  }
}

@mixin rmd-utils-absolute-centered {
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
}

@mixin rmd-utils-scroll(
  $position: null,
  $type: auto,
  $enable-momentum: $rmd-utils-ios-scroll-momentum
) {
  $style: overflow;
  @if $position == 'x' or $position == 'y' {
    $style: #{$style}-#{$position};
  }

  #{$style}: $type;

  @if $enable-momentum {
    -webkit-overflow-scrolling: touch;
  }
}

@mixin rmd-utils-hide-focus-outline($fix-moz-focus: $rmd-utils-fix-moz-focus) {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

  &:focus {
    outline-style: none;
  }

  @if $fix-moz-focus {
    &::-moz-focus-inner {
      border: 0;
    }
  }
}

@mixin rmd-utils-full-screen($position: fixed) {
  bottom: 0;
  left: 0;
  position: $position;
  right: 0;
  top: 0;
}

@mixin rmd-utils-pseudo-element($z-index: 0, $position: absolute) {
  @include rmd-utils-full-screen($position);

  border-radius: inherit;
  content: '';
  pointer-events: none;
  z-index: $z-index;
}

@mixin rmd-utils-sr-only-focusable {
  &:active,
  &:focus {
    clip: auto;
    clip-path: none;
    height: auto;
    margin: auto;
    overflow: visible;
    white-space: normal;
    width: auto;
  }
}

@mixin rmd-utils-sr-only($focusable: false, $focus-suffix: '&--focusable') {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;

  @if $focusable {
    @if not $focus-suffix {
      @include rmd-utils-sr-only-focusable;
    } @else {
      #{$focus-suffix} {
        @include rmd-utils-sr-only-focusable;
      }
    }
  }
}

@mixin rmd-utils-hide-scrollbar {
  scrollbar-width: none;

  &::-webkit-scrollbar {
    height: 0;
    width: 0;
  }
}

@mixin rmd-utils-phone-media {
  @media screen and (max-width: #{$rmd-utils-phone-max-width}) {
    @content;
  }
}

@mixin rmd-utils-tablet-media {
  @media screen and (min-width: #{$rmd-utils-tablet-min-width}) {
    @content;
  }
}

@mixin rmd-utils-tablet-only-media {
  @media screen and (min-width: #{$rmd-utils-tablet-min-width}) and (max-width: #{$rmd-utils-tablet-max-width}) {
    @content;
  }
}

@mixin rmd-utils-desktop-media {
  @media screen and (min-width: #{$rmd-utils-desktop-min-width}) {
    @content;
  }
}

@mixin rmd-utils-large-desktop-media {
  @media screen and (min-width: #{$rmd-utils-large-desktop-min-width}) {
    @content;
  }
}

@mixin rmd-utils-optional-css-modules(
  $class-name,
  $css-modules: false,
  $parent-selector: true
) {
  $selector: if($css-modules, ':global #{$class-name} :local', $class-name);
  $selector: if($parent-selector, '#{$selector} &', $selector);

  #{$selector} {
    @content;
  }
}

@mixin rmd-utils-touch-only($css-modules: false) {
  @include rmd-utils-optional-css-modules('.rmd-utils--touch', $css-modules) {
    @content;
  }
}

@mixin rmd-utils-keyboard-only($css-modules: false) {
  @include rmd-utils-optional-css-modules(
    '.rmd-utils--keyboard',
    $css-modules
  ) {
    @content;
  }
}

@mixin rmd-utils-mouse-only($css-modules: false) {
  @include rmd-utils-optional-css-modules('.rmd-utils--mouse', $css-modules) {
    @content;
  }
}

@mixin rmd-grid(
  $padding: $rmd-grid-padding,
  $gutter: $rmd-grid-cell-margin,
  $phone-columns: $rmd-grid-phone-columns,
  $tablet-columns: $rmd-grid-tablet-columns,
  $desktop-columns: $rmd-grid-desktop-columns,
  $large-desktop-columns: $rmd-grid-large-desktop-columns
) {
  @if $tablet-columns > $phone-columns {
    @include rmd-utils-tablet-media {
      #{$rmd-grid-columns-var}: #{$tablet-columns};
    }
  }

  @if $desktop-columns > $tablet-columns {
    @include rmd-utils-desktop-media {
      #{$rmd-grid-columns-var}: #{$desktop-columns};
    }
  }

  @if $large-desktop-columns > $desktop-columns {
    @include rmd-utils-large-desktop-media {
      #{$rmd-grid-columns-var}: #{$large-desktop-columns};
    }
  }

  display: grid;
  grid-gap: var(#{$rmd-grid-gutter-var}, #{$gutter});
  grid-template-columns: repeat(
    var(#{$rmd-grid-columns-var}, #{$phone-columns}),
    1fr
  );
  padding: $padding;

  > * {
    min-width: 0;
  }
}

@mixin rmd-grid-cell-full {
  grid-column: 1 / span var(#{$rmd-grid-columns-var}, $rmd-grid-phone-columns);
}

@mixin rmd-grid-cell-size(
  $size,
  $phone-columns: $rmd-grid-phone-columns,
  $tablet-columns: $rmd-grid-tablet-columns,
  $desktop-columns: $rmd-grid-desktop-columns
) {
  @if $size >= $desktop-columns {
    @include rmd-utils-desktop-media {
      @include rmd-grid-cell-full;
    }
  }

  @if $size >= $tablet-columns {
    @include rmd-utils-tablet-only-media {
      @include rmd-grid-cell-full;
    }
  }

  @if $size >= $phone-columns {
    @include rmd-utils-phone-media {
      @include rmd-grid-cell-full;
    }
  }

  grid-column-end: span $size;
}

@mixin rmd-grid-cell {
  @for $i from 2 through $rmd-grid-large-desktop-columns {
    &--#{$i} {
      @include rmd-grid-cell-size($i);
    }
  }
}

@mixin rmd-grid-list-cell-size(
  $property,
  $max-size: $rmd-grid-list-cell-max-size,
  $margin: $rmd-grid-list-cell-margin
) {
  $size: var(#{$rmd-grid-cell-size-var}, #{$max-size});
  @if $margin and $margin > 0 {
    $size: calc(
      #{$size} - calc(var(#{$rmd-grid-cell-margin-var}, #{$margin}) * 2)
    );
  }

  #{$property}: $size;
}

@mixin rmd-grid-list-cell(
  $margin: $rmd-grid-list-cell-margin,
  $max-size: $rmd-grid-list-cell-max-size,
  $include-height: true
) {
  @if $include-height {
    @include rmd-grid-list-cell-size(height, $max-size, $margin);
  }
  @include rmd-grid-list-cell-size(width, $max-size, $margin);

  margin: var(#{$rmd-grid-cell-margin-var}, #{$margin});
}

@mixin rmd-grid-list($padding: $rmd-grid-list-padding, $margin: 0 auto) {
  align-items: flex-start;
  display: flex;
  flex-flow: row wrap;
  margin: $margin;
  padding: $padding;
}

@mixin react-md-utils-grid {
  .rmd-grid {
    @include rmd-grid;

    &--no-padding {
      padding: 0;
    }

    &__cell {
      @include rmd-grid-cell;
    }
  }

  .rmd-grid-list {
    @include rmd-grid-list;

    &__cell {
      @include rmd-grid-list-cell($include-height: false);

      &--square {
        @include rmd-grid-list-cell-size(height);
      }
    }
  }
}

@mixin rmd-utils-base {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  html,
  body {
    height: 100%;
    margin: 0;
    padding: 0;
  }

  html {
    @if mixin-exists(rmd-theme) {
      @include rmd-theme(background-color, background);
      @include rmd-theme(color, text-primary-on-background);
    }

    @if mixin-exists(rmd-typography-base) {
      @include rmd-typography-base;
    }
  }

  [hidden] {
    display: none !important;
  }

  body {
    &.rmd-utils--touch {
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

      cursor: pointer;
    }
  }
}

@mixin rmd-utils-dense {
  @if mixin-exists(rmd-tooltip-dense-theme) {
    @include rmd-tooltip-dense-theme;
  }

  @if mixin-exists(rmd-icon-dense-theme) {
    @include rmd-icon-dense-theme;
  }

  @if mixin-exists(rmd-app-bar-dense-theme) {
    @include rmd-app-bar-dense-theme;
  }

  @if mixin-exists(rmd-list-dense-theme) {
    @include rmd-list-dense-theme;
  }

  @if mixin-exists(rmd-list-item-dense-theme) {
    @include rmd-list-item-dense-theme;
  }

  @if mixin-exists(rmd-toggle-dense-theme) {
    @include rmd-toggle-dense-theme;
  }
}

@mixin react-md-utils {
  @include rmd-utils-base;
  @include react-md-utils-grid;

  @if mixin-exists(react-md-theme) {
    @include react-md-theme;
  }

  @if mixin-exists(react-md-typography) {
    @include react-md-typography;
  }

  @if mixin-exists(react-md-transition) {
    @include react-md-transition;
  }

  @if mixin-exists(react-md-states) {
    @include react-md-states;
  }

  @if mixin-exists(react-md-tooltip) {
    @include react-md-tooltip;
  }

  @if mixin-exists(react-md-divider) {
    @include react-md-divider;
  }

  @if mixin-exists(react-md-icon) {
    @include react-md-icon;
  }

  @if mixin-exists(react-md-avatar) {
    @include react-md-avatar;
  }

  @if mixin-exists(react-md-media) {
    @include react-md-media;
  }

  @if mixin-exists(react-md-link) {
    @include react-md-link;
  }

  @if mixin-exists(react-md-overlay) {
    @include react-md-overlay;
  }

  @if mixin-exists(react-md-progress) {
    @include react-md-progress;
  }

  @if mixin-exists(react-md-button) {
    @include react-md-button;
  }

  @if mixin-exists(react-md-badge) {
    @include react-md-badge;
  }

  @if mixin-exists(react-md-chip) {
    @include react-md-chip;
  }

  @if mixin-exists(react-md-alert) {
    @include react-md-alert;
  }

  @if mixin-exists(react-md-app-bar) {
    @include react-md-app-bar;
  }

  @if mixin-exists(react-md-card) {
    @include react-md-card;
  }

  @if mixin-exists(react-md-expansion-panel) {
    @include react-md-expansion-panel;
  }

  @if mixin-exists(react-md-list) {
    @include react-md-list;
  }

  @if mixin-exists(react-md-dialog) {
    @include react-md-dialog;
  }

  @if mixin-exists(react-md-menu) {
    @include react-md-menu;
  }

  @if mixin-exists(react-md-sheet) {
    @include react-md-sheet;
  }

  @if mixin-exists(react-md-tabs) {
    @include react-md-tabs;
  }

  @if mixin-exists(react-md-tree) {
    @include react-md-tree;
  }

  @if mixin-exists(react-md-table) {
    @include react-md-table;
  }

  @if mixin-exists(react-md-form) {
    @include react-md-form;
  }

  @if mixin-exists(react-md-layout) {
    @include react-md-layout;
  }

  @if $rmd-utils-auto-dense {
    :root {
      @include rmd-utils-desktop-media {
        @include rmd-utils-dense;
      }
    }
  }
}
$rmd-red-50: #ffebee;
$rmd-red-100: #ffcdd2;
$rmd-red-200: #ef9a9a;
$rmd-red-300: #e57373;
$rmd-red-400: #ef5350;
$rmd-red-500: #f44336;
$rmd-red-600: #e53935;
$rmd-red-700: #d32f2f;
$rmd-red-800: #c62828;
$rmd-red-900: #b71c1c;
$rmd-red-a-100: #ff8a80;
$rmd-red-a-200: #ff5252;
$rmd-red-a-400: #ff1744;
$rmd-red-a-700: #d50000;
$rmd-pink-50: #fce4ec;
$rmd-pink-100: #f8bbd0;
$rmd-pink-200: #f48fb1;
$rmd-pink-300: #f06292;
$rmd-pink-400: #ec407a;
$rmd-pink-500: #e91e63;
$rmd-pink-600: #d81b60;
$rmd-pink-700: #c2185b;
$rmd-pink-800: #ad1457;
$rmd-pink-900: #880e4f;
$rmd-pink-a-100: #ff80ab;
$rmd-pink-a-200: #ff4081;
$rmd-pink-a-400: #f50057;
$rmd-pink-a-700: #c51162;
$rmd-purple-50: #f3e5f5;
$rmd-purple-100: #e1bee7;
$rmd-purple-200: #ce93d8;
$rmd-purple-300: #ba68c8;
$rmd-purple-400: #ab47bc;
$rmd-purple-500: #9c27b0;
$rmd-purple-600: #8e24aa;
$rmd-purple-700: #7b1fa2;
$rmd-purple-800: #6a1b9a;
$rmd-purple-900: #4a148c;
$rmd-purple-a-100: #ea80fc;
$rmd-purple-a-200: #e040fb;
$rmd-purple-a-400: #d500f9;
$rmd-purple-a-700: #a0f;
$rmd-deep-purple-50: #ede7f6;
$rmd-deep-purple-100: #d1c4e9;
$rmd-deep-purple-200: #b39ddb;
$rmd-deep-purple-300: #9575cd;
$rmd-deep-purple-400: #7e57c2;
$rmd-deep-purple-500: #673ab7;
$rmd-deep-purple-600: #5e35b1;
$rmd-deep-purple-700: #512da8;
$rmd-deep-purple-800: #4527a0;
$rmd-deep-purple-900: #311b92;
$rmd-deep-purple-a-100: #b388ff;
$rmd-deep-purple-a-200: #7c4dff;
$rmd-deep-purple-a-400: #651fff;
$rmd-deep-purple-a-700: #6200ea;
$rmd-indigo-50: #e8eaf6;
$rmd-indigo-100: #c5cae9;
$rmd-indigo-200: #9fa8da;
$rmd-indigo-300: #7986cb;
$rmd-indigo-400: #5c6bc0;
$rmd-indigo-500: #3f51b5;
$rmd-indigo-600: #3949ab;
$rmd-indigo-700: #303f9f;
$rmd-indigo-800: #283593;
$rmd-indigo-900: #1a237e;
$rmd-indigo-a-100: #8c9eff;
$rmd-indigo-a-200: #536dfe;
$rmd-indigo-a-400: #3d5afe;
$rmd-indigo-a-700: #304ffe;
$rmd-blue-50: #e3f2fd;
$rmd-blue-100: #bbdefb;
$rmd-blue-200: #90caf9;
$rmd-blue-300: #64b5f6;
$rmd-blue-400: #42a5f5;
$rmd-blue-500: #2196f3;
$rmd-blue-600: #1e88e5;
$rmd-blue-700: #1976d2;
$rmd-blue-800: #1565c0;
$rmd-blue-900: #0d47a1;
$rmd-blue-a-100: #82b1ff;
$rmd-blue-a-200: #448aff;
$rmd-blue-a-400: #2979ff;
$rmd-blue-a-700: #2962ff;
$rmd-light-blue-50: #e1f5fe;
$rmd-light-blue-100: #b3e5fc;
$rmd-light-blue-200: #81d4fa;
$rmd-light-blue-300: #4fc3f7;
$rmd-light-blue-400: #29b6f6;
$rmd-light-blue-500: #03a9f4;
$rmd-light-blue-600: #039be5;
$rmd-light-blue-700: #0288d1;
$rmd-light-blue-800: #0277bd;
$rmd-light-blue-900: #01579b;
$rmd-light-blue-a-100: #80d8ff;
$rmd-light-blue-a-200: #40c4ff;
$rmd-light-blue-a-400: #00b0ff;
$rmd-light-blue-a-700: #0091ea;
$rmd-cyan-50: #e0f7fa;
$rmd-cyan-100: #b2ebf2;
$rmd-cyan-200: #80deea;
$rmd-cyan-300: #4dd0e1;
$rmd-cyan-400: #26c6da;
$rmd-cyan-500: #00bcd4;
$rmd-cyan-600: #00acc1;
$rmd-cyan-700: #0097a7;
$rmd-cyan-800: #00838f;
$rmd-cyan-900: #006064;
$rmd-cyan-a-100: #84ffff;
$rmd-cyan-a-200: #18ffff;
$rmd-cyan-a-400: #00e5ff;
$rmd-cyan-a-700: #00b8d4;
$rmd-teal-50: #e0f2f1;
$rmd-teal-100: #b2dfdb;
$rmd-teal-200: #80cbc4;
$rmd-teal-300: #4db6ac;
$rmd-teal-400: #26a69a;
$rmd-teal-500: #009688;
$rmd-teal-600: #00897b;
$rmd-teal-700: #00796b;
$rmd-teal-800: #00695c;
$rmd-teal-900: #004d40;
$rmd-teal-a-100: #a7ffeb;
$rmd-teal-a-200: #64ffda;
$rmd-teal-a-400: #1de9b6;
$rmd-teal-a-700: #00bfa5;
$rmd-green-50: #e8f5e9;
$rmd-green-100: #c8e6c9;
$rmd-green-200: #a5d6a7;
$rmd-green-300: #81c784;
$rmd-green-400: #66bb6a;
$rmd-green-500: #4caf50;
$rmd-green-600: #43a047;
$rmd-green-700: #388e3c;
$rmd-green-800: #2e7d32;
$rmd-green-900: #1b5e20;
$rmd-green-a-100: #b9f6ca;
$rmd-green-a-200: #69f0ae;
$rmd-green-a-400: #00e676;
$rmd-green-a-700: #00c853;
$rmd-light-green-50: #f1f8e9;
$rmd-light-green-100: #dcedc8;
$rmd-light-green-200: #c5e1a5;
$rmd-light-green-300: #aed581;
$rmd-light-green-400: #9ccc65;
$rmd-light-green-500: #8bc34a;
$rmd-light-green-600: #7cb342;
$rmd-light-green-700: #689f38;
$rmd-light-green-800: #558b2f;
$rmd-light-green-900: #33691e;
$rmd-light-green-a-100: #ccff90;
$rmd-light-green-a-200: #b2ff59;
$rmd-light-green-a-400: #76ff03;
$rmd-light-green-a-700: #64dd17;
$rmd-lime-50: #f9fbe7;
$rmd-lime-100: #f0f4c3;
$rmd-lime-200: #e6ee9c;
$rmd-lime-300: #dce775;
$rmd-lime-400: #d4e157;
$rmd-lime-500: #cddc39;
$rmd-lime-600: #c0ca33;
$rmd-lime-700: #afb42b;
$rmd-lime-800: #9e9d24;
$rmd-lime-900: #827717;
$rmd-lime-a-100: #f4ff81;
$rmd-lime-a-200: #eeff41;
$rmd-lime-a-400: #c6ff00;
$rmd-lime-a-700: #aeea00;
$rmd-yellow-50: #fffde7;
$rmd-yellow-100: #fff9c4;
$rmd-yellow-200: #fff59d;
$rmd-yellow-300: #fff176;
$rmd-yellow-400: #ffee58;
$rmd-yellow-500: #ffeb3b;
$rmd-yellow-600: #fdd835;
$rmd-yellow-700: #fbc02d;
$rmd-yellow-800: #f9a825;
$rmd-yellow-900: #f57f17;
$rmd-yellow-a-100: #ffff8d;
$rmd-yellow-a-200: #ff0;
$rmd-yellow-a-400: #ffea00;
$rmd-yellow-a-700: #ffd600;
$rmd-amber-50: #fff8e1;
$rmd-amber-100: #ffecb3;
$rmd-amber-200: #ffe082;
$rmd-amber-300: #ffd54f;
$rmd-amber-400: #ffca28;
$rmd-amber-500: #ffc107;
$rmd-amber-600: #ffb300;
$rmd-amber-700: #ffa000;
$rmd-amber-800: #ff8f00;
$rmd-amber-900: #ff6f00;
$rmd-amber-a-100: #ffe57f;
$rmd-amber-a-200: #ffd740;
$rmd-amber-a-400: #ffc400;
$rmd-amber-a-700: #ffab00;
$rmd-orange-50: #fff3e0;
$rmd-orange-100: #fff0b2;
$rmd-orange-200: #ffcc80;
$rmd-orange-300: #ffb74d;
$rmd-orange-400: #ffa726;
$rmd-orange-500: #ff9800;
$rmd-orange-600: #fb8c00;
$rmd-orange-700: #f57c00;
$rmd-orange-800: #ef6c00;
$rmd-orange-900: #e65100;
$rmd-orange-a-100: #ffd180;
$rmd-orange-a-200: #ffab40;
$rmd-orange-a-400: #ff9100;
$rmd-orange-a-700: #ff6d00;
$rmd-deep-orange-50: #fbe9e7;
$rmd-deep-orange-100: #ffccbc;
$rmd-deep-orange-200: #ffab91;
$rmd-deep-orange-300: #ff8a65;
$rmd-deep-orange-400: #ff7043;
$rmd-deep-orange-500: #ff5722;
$rmd-deep-orange-600: #f4511e;
$rmd-deep-orange-700: #e64a19;
$rmd-deep-orange-800: #d84315;
$rmd-deep-orange-900: #bf360c;
$rmd-deep-orange-a-100: #ff9e80;
$rmd-deep-orange-a-200: #ff6e40;
$rmd-deep-orange-a-400: #ff3d00;
$rmd-deep-orange-a-700: #dd2c00;
$rmd-brown-50: #efebe9;
$rmd-brown-100: #d7ccc8;
$rmd-brown-200: #bcaaa4;
$rmd-brown-300: #a1887f;
$rmd-brown-400: #8d6e63;
$rmd-brown-500: #795548;
$rmd-brown-600: #6d4c41;
$rmd-brown-700: #5d4037;
$rmd-brown-800: #4e342e;
$rmd-brown-900: #3e2723;
$rmd-grey-50: #fafafa;
$rmd-grey-100: #f5f5f5;
$rmd-grey-200: #eee;
$rmd-grey-300: #e0e0e0;
$rmd-grey-400: #bdbdbd;
$rmd-grey-500: #9e9e9e;
$rmd-grey-600: #757575;
$rmd-grey-700: #616161;
$rmd-grey-800: #424242;
$rmd-grey-900: #212121;
$rmd-blue-grey-50: #eceff1;
$rmd-blue-grey-100: #cfd8dc;
$rmd-blue-grey-200: #b0bec5;
$rmd-blue-grey-300: #90a4ae;
$rmd-blue-grey-400: #78909c;
$rmd-blue-grey-500: #607d8b;
$rmd-blue-grey-600: #546e7a;
$rmd-blue-grey-700: #455a64;
$rmd-blue-grey-800: #37474f;
$rmd-blue-grey-900: #263238;
$rmd-black-base: #000;
$rmd-white-base: #fff;
$rmd-theme-color-map: (
  rmd-red-50: $rmd-red-50,
  rmd-red-100: $rmd-red-100,
  rmd-red-200: $rmd-red-200,
  rmd-red-300: $rmd-red-300,
  rmd-red-400: $rmd-red-400,
  rmd-red-500: $rmd-red-500,
  rmd-red-600: $rmd-red-600,
  rmd-red-700: $rmd-red-700,
  rmd-red-800: $rmd-red-800,
  rmd-red-900: $rmd-red-900,
  rmd-red-a-100: $rmd-red-a-100,
  rmd-red-a-200: $rmd-red-a-200,
  rmd-red-a-400: $rmd-red-a-400,
  rmd-red-a-700: $rmd-red-a-700,
  rmd-pink-50: $rmd-pink-50,
  rmd-pink-100: $rmd-pink-100,
  rmd-pink-200: $rmd-pink-200,
  rmd-pink-300: $rmd-pink-300,
  rmd-pink-400: $rmd-pink-400,
  rmd-pink-500: $rmd-pink-500,
  rmd-pink-600: $rmd-pink-600,
  rmd-pink-700: $rmd-pink-700,
  rmd-pink-800: $rmd-pink-800,
  rmd-pink-900: $rmd-pink-900,
  rmd-pink-a-100: $rmd-pink-a-100,
  rmd-pink-a-200: $rmd-pink-a-200,
  rmd-pink-a-400: $rmd-pink-a-400,
  rmd-pink-a-700: $rmd-pink-a-700,
  rmd-purple-50: $rmd-purple-50,
  rmd-purple-100: $rmd-purple-100,
  rmd-purple-200: $rmd-purple-200,
  rmd-purple-300: $rmd-purple-300,
  rmd-purple-400: $rmd-purple-400,
  rmd-purple-500: $rmd-purple-500,
  rmd-purple-600: $rmd-purple-600,
  rmd-purple-700: $rmd-purple-700,
  rmd-purple-800: $rmd-purple-800,
  rmd-purple-900: $rmd-purple-900,
  rmd-purple-a-100: $rmd-purple-a-100,
  rmd-purple-a-200: $rmd-purple-a-200,
  rmd-purple-a-400: $rmd-purple-a-400,
  rmd-purple-a-700: $rmd-purple-a-700,
  rmd-deep-purple-50: $rmd-deep-purple-50,
  rmd-deep-purple-100: $rmd-deep-purple-100,
  rmd-deep-purple-200: $rmd-deep-purple-200,
  rmd-deep-purple-300: $rmd-deep-purple-300,
  rmd-deep-purple-400: $rmd-deep-purple-400,
  rmd-deep-purple-500: $rmd-deep-purple-500,
  rmd-deep-purple-600: $rmd-deep-purple-600,
  rmd-deep-purple-700: $rmd-deep-purple-700,
  rmd-deep-purple-800: $rmd-deep-purple-800,
  rmd-deep-purple-900: $rmd-deep-purple-900,
  rmd-deep-purple-a-100: $rmd-deep-purple-a-100,
  rmd-deep-purple-a-200: $rmd-deep-purple-a-200,
  rmd-deep-purple-a-400: $rmd-deep-purple-a-400,
  rmd-deep-purple-a-700: $rmd-deep-purple-a-700,
  rmd-indigo-50: $rmd-indigo-50,
  rmd-indigo-100: $rmd-indigo-100,
  rmd-indigo-200: $rmd-indigo-200,
  rmd-indigo-300: $rmd-indigo-300,
  rmd-indigo-400: $rmd-indigo-400,
  rmd-indigo-500: $rmd-indigo-500,
  rmd-indigo-600: $rmd-indigo-600,
  rmd-indigo-700: $rmd-indigo-700,
  rmd-indigo-800: $rmd-indigo-800,
  rmd-indigo-900: $rmd-indigo-900,
  rmd-indigo-a-100: $rmd-indigo-a-100,
  rmd-indigo-a-200: $rmd-indigo-a-200,
  rmd-indigo-a-400: $rmd-indigo-a-400,
  rmd-indigo-a-700: $rmd-indigo-a-700,
  rmd-blue-50: $rmd-blue-50,
  rmd-blue-100: $rmd-blue-100,
  rmd-blue-200: $rmd-blue-200,
  rmd-blue-300: $rmd-blue-300,
  rmd-blue-400: $rmd-blue-400,
  rmd-blue-500: $rmd-blue-500,
  rmd-blue-600: $rmd-blue-600,
  rmd-blue-700: $rmd-blue-700,
  rmd-blue-800: $rmd-blue-800,
  rmd-blue-900: $rmd-blue-900,
  rmd-blue-a-100: $rmd-blue-a-100,
  rmd-blue-a-200: $rmd-blue-a-200,
  rmd-blue-a-400: $rmd-blue-a-400,
  rmd-blue-a-700: $rmd-blue-a-700,
  rmd-light-blue-50: $rmd-light-blue-50,
  rmd-light-blue-100: $rmd-light-blue-100,
  rmd-light-blue-200: $rmd-light-blue-200,
  rmd-light-blue-300: $rmd-light-blue-300,
  rmd-light-blue-400: $rmd-light-blue-400,
  rmd-light-blue-500: $rmd-light-blue-500,
  rmd-light-blue-600: $rmd-light-blue-600,
  rmd-light-blue-700: $rmd-light-blue-700,
  rmd-light-blue-800: $rmd-light-blue-800,
  rmd-light-blue-900: $rmd-light-blue-900,
  rmd-light-blue-a-100: $rmd-light-blue-a-100,
  rmd-light-blue-a-200: $rmd-light-blue-a-200,
  rmd-light-blue-a-400: $rmd-light-blue-a-400,
  rmd-light-blue-a-700: $rmd-light-blue-a-700,
  rmd-cyan-50: $rmd-cyan-50,
  rmd-cyan-100: $rmd-cyan-100,
  rmd-cyan-200: $rmd-cyan-200,
  rmd-cyan-300: $rmd-cyan-300,
  rmd-cyan-400: $rmd-cyan-400,
  rmd-cyan-500: $rmd-cyan-500,
  rmd-cyan-600: $rmd-cyan-600,
  rmd-cyan-700: $rmd-cyan-700,
  rmd-cyan-800: $rmd-cyan-800,
  rmd-cyan-900: $rmd-cyan-900,
  rmd-cyan-a-100: $rmd-cyan-a-100,
  rmd-cyan-a-200: $rmd-cyan-a-200,
  rmd-cyan-a-400: $rmd-cyan-a-400,
  rmd-cyan-a-700: $rmd-cyan-a-700,
  rmd-teal-50: $rmd-teal-50,
  rmd-teal-100: $rmd-teal-100,
  rmd-teal-200: $rmd-teal-200,
  rmd-teal-300: $rmd-teal-300,
  rmd-teal-400: $rmd-teal-400,
  rmd-teal-500: $rmd-teal-500,
  rmd-teal-600: $rmd-teal-600,
  rmd-teal-700: $rmd-teal-700,
  rmd-teal-800: $rmd-teal-800,
  rmd-teal-900: $rmd-teal-900,
  rmd-teal-a-100: $rmd-teal-a-100,
  rmd-teal-a-200: $rmd-teal-a-200,
  rmd-teal-a-400: $rmd-teal-a-400,
  rmd-teal-a-700: $rmd-teal-a-700,
  rmd-green-50: $rmd-green-50,
  rmd-green-100: $rmd-green-100,
  rmd-green-200: $rmd-green-200,
  rmd-green-300: $rmd-green-300,
  rmd-green-400: $rmd-green-400,
  rmd-green-500: $rmd-green-500,
  rmd-green-600: $rmd-green-600,
  rmd-green-700: $rmd-green-700,
  rmd-green-800: $rmd-green-800,
  rmd-green-900: $rmd-green-900,
  rmd-green-a-100: $rmd-green-a-100,
  rmd-green-a-200: $rmd-green-a-200,
  rmd-green-a-400: $rmd-green-a-400,
  rmd-green-a-700: $rmd-green-a-700,
  rmd-light-green-50: $rmd-light-green-50,
  rmd-light-green-100: $rmd-light-green-100,
  rmd-light-green-200: $rmd-light-green-200,
  rmd-light-green-300: $rmd-light-green-300,
  rmd-light-green-400: $rmd-light-green-400,
  rmd-light-green-500: $rmd-light-green-500,
  rmd-light-green-600: $rmd-light-green-600,
  rmd-light-green-700: $rmd-light-green-700,
  rmd-light-green-800: $rmd-light-green-800,
  rmd-light-green-900: $rmd-light-green-900,
  rmd-light-green-a-100: $rmd-light-green-a-100,
  rmd-light-green-a-200: $rmd-light-green-a-200,
  rmd-light-green-a-400: $rmd-light-green-a-400,
  rmd-light-green-a-700: $rmd-light-green-a-700,
  rmd-lime-50: $rmd-lime-50,
  rmd-lime-100: $rmd-lime-100,
  rmd-lime-200: $rmd-lime-200,
  rmd-lime-300: $rmd-lime-300,
  rmd-lime-400: $rmd-lime-400,
  rmd-lime-500: $rmd-lime-500,
  rmd-lime-600: $rmd-lime-600,
  rmd-lime-700: $rmd-lime-700,
  rmd-lime-800: $rmd-lime-800,
  rmd-lime-900: $rmd-lime-900,
  rmd-lime-a-100: $rmd-lime-a-100,
  rmd-lime-a-200: $rmd-lime-a-200,
  rmd-lime-a-400: $rmd-lime-a-400,
  rmd-lime-a-700: $rmd-lime-a-700,
  rmd-yellow-50: $rmd-yellow-50,
  rmd-yellow-100: $rmd-yellow-100,
  rmd-yellow-200: $rmd-yellow-200,
  rmd-yellow-300: $rmd-yellow-300,
  rmd-yellow-400: $rmd-yellow-400,
  rmd-yellow-500: $rmd-yellow-500,
  rmd-yellow-600: $rmd-yellow-600,
  rmd-yellow-700: $rmd-yellow-700,
  rmd-yellow-800: $rmd-yellow-800,
  rmd-yellow-900: $rmd-yellow-900,
  rmd-yellow-a-100: $rmd-yellow-a-100,
  rmd-yellow-a-200: $rmd-yellow-a-200,
  rmd-yellow-a-400: $rmd-yellow-a-400,
  rmd-yellow-a-700: $rmd-yellow-a-700,
  rmd-amber-50: $rmd-amber-50,
  rmd-amber-100: $rmd-amber-100,
  rmd-amber-200: $rmd-amber-200,
  rmd-amber-300: $rmd-amber-300,
  rmd-amber-400: $rmd-amber-400,
  rmd-amber-500: $rmd-amber-500,
  rmd-amber-600: $rmd-amber-600,
  rmd-amber-700: $rmd-amber-700,
  rmd-amber-800: $rmd-amber-800,
  rmd-amber-900: $rmd-amber-900,
  rmd-amber-a-100: $rmd-amber-a-100,
  rmd-amber-a-200: $rmd-amber-a-200,
  rmd-amber-a-400: $rmd-amber-a-400,
  rmd-amber-a-700: $rmd-amber-a-700,
  rmd-orange-50: $rmd-orange-50,
  rmd-orange-100: $rmd-orange-100,
  rmd-orange-200: $rmd-orange-200,
  rmd-orange-300: $rmd-orange-300,
  rmd-orange-400: $rmd-orange-400,
  rmd-orange-500: $rmd-orange-500,
  rmd-orange-600: $rmd-orange-600,
  rmd-orange-700: $rmd-orange-700,
  rmd-orange-800: $rmd-orange-800,
  rmd-orange-900: $rmd-orange-900,
  rmd-orange-a-100: $rmd-orange-a-100,
  rmd-orange-a-200: $rmd-orange-a-200,
  rmd-orange-a-400: $rmd-orange-a-400,
  rmd-orange-a-700: $rmd-orange-a-700,
  rmd-deep-orange-50: $rmd-deep-orange-50,
  rmd-deep-orange-100: $rmd-deep-orange-100,
  rmd-deep-orange-200: $rmd-deep-orange-200,
  rmd-deep-orange-300: $rmd-deep-orange-300,
  rmd-deep-orange-400: $rmd-deep-orange-400,
  rmd-deep-orange-500: $rmd-deep-orange-500,
  rmd-deep-orange-600: $rmd-deep-orange-600,
  rmd-deep-orange-700: $rmd-deep-orange-700,
  rmd-deep-orange-800: $rmd-deep-orange-800,
  rmd-deep-orange-900: $rmd-deep-orange-900,
  rmd-deep-orange-a-100: $rmd-deep-orange-a-100,
  rmd-deep-orange-a-200: $rmd-deep-orange-a-200,
  rmd-deep-orange-a-400: $rmd-deep-orange-a-400,
  rmd-deep-orange-a-700: $rmd-deep-orange-a-700,
  rmd-brown-50: $rmd-brown-50,
  rmd-brown-100: $rmd-brown-100,
  rmd-brown-200: $rmd-brown-200,
  rmd-brown-300: $rmd-brown-300,
  rmd-brown-400: $rmd-brown-400,
  rmd-brown-500: $rmd-brown-500,
  rmd-brown-600: $rmd-brown-600,
  rmd-brown-700: $rmd-brown-700,
  rmd-brown-800: $rmd-brown-800,
  rmd-brown-900: $rmd-brown-900,
  rmd-grey-50: $rmd-grey-50,
  rmd-grey-100: $rmd-grey-100,
  rmd-grey-200: $rmd-grey-200,
  rmd-grey-300: $rmd-grey-300,
  rmd-grey-400: $rmd-grey-400,
  rmd-grey-500: $rmd-grey-500,
  rmd-grey-600: $rmd-grey-600,
  rmd-grey-700: $rmd-grey-700,
  rmd-grey-800: $rmd-grey-800,
  rmd-grey-900: $rmd-grey-900,
  rmd-blue-grey-50: $rmd-blue-grey-50,
  rmd-blue-grey-100: $rmd-blue-grey-100,
  rmd-blue-grey-200: $rmd-blue-grey-200,
  rmd-blue-grey-300: $rmd-blue-grey-300,
  rmd-blue-grey-400: $rmd-blue-grey-400,
  rmd-blue-grey-500: $rmd-blue-grey-500,
  rmd-blue-grey-600: $rmd-blue-grey-600,
  rmd-blue-grey-700: $rmd-blue-grey-700,
  rmd-blue-grey-800: $rmd-blue-grey-800,
  rmd-blue-grey-900: $rmd-blue-grey-900,
  rmd-black-base: $rmd-black-base,
  rmd-white-base: $rmd-white-base,
);
$rmd-theme-primary-suffixes: 50 100 200 300 400 500 600 700 800 900;
$rmd-theme-accent-suffixes: 100 200 400 700;
$rmd-theme-colors: (
  'red' 'pink' 'purple' 'deep-purple' 'indigo' 'blue' 'light-blue' 'cyan' 'teal'
    'green' 'light-green' 'lime' 'yellow' 'amber' 'orange' 'deep-orange' 'brown'
    'grey' 'blue-grey'
);
$rmd-theme-default-contrast-ratio: 3 !default;
$rmd-theme-better-contrast-colors: true !default;
$rmd-theme-linear-channel-values: (
  0 0.0003035269835488375 0.000607053967097675 0.0009105809506465125
    0.00121410793419535 0.0015176349177441874 0.001821161901293025
    0.0021246888848418626 0.0024282158683907 0.0027317428519395373
    0.003035269835488375 0.003346535763899161 0.003676507324047436
    0.004024717018496307 0.004391442037410293 0.004776953480693729
    0.005181516702338386 0.005605391624202723 0.006048833022857054
    0.006512090792594475 0.006995410187265387 0.007499032043226175
    0.008023192985384994 0.008568125618069307 0.009134058702220787
    0.00972121732023785 0.010329823029626936 0.010960094006488246
    0.011612245179743885 0.012286488356915872 0.012983032342173012
    0.013702083047289686 0.014443843596092545 0.01520851442291271
    0.01599629336550963 0.016807375752887384 0.017641954488384078
    0.018500220128379697 0.019382360956935723 0.0202885630566524
    0.021219010376003555 0.022173884793387385 0.02315336617811041
    0.024157632448504756 0.02518685962736163 0.026241221894849898
    0.027320891639074894 0.028426039504420793 0.0295568344378088
    0.030713443732993635 0.03189603307301153 0.033104766570885055
    0.03433980680868217 0.03560131487502034 0.03688945040110004
    0.0382043715953465 0.03954623527673284 0.04091519690685319
    0.042311410620809675 0.043735029256973465 0.04518620438567554
    0.046665086336880095 0.04817182422688942 0.04970656598412723
    0.05126945837404324 0.052860647023180246 0.05448027644244237
    0.05612849004960009 0.05780543019106723 0.0595112381629812
    0.06124605423161761 0.06301001765316767 0.06480326669290577
    0.06662593864377289 0.06847816984440017 0.07036009569659588
    0.07227185068231748 0.07421356838014963 0.07618538148130785
    0.07818742180518633 0.08021982031446832 0.0822827071298148
    0.08437621154414882 0.08650046203654976 0.08865558628577294
    0.09084171118340768 0.09305896284668745 0.0953074666309647
    0.09758734714186246 0.09989872824711389 0.10224173308810132
    0.10461648409110419 0.10702310297826761 0.10946171077829933
    0.1119324278369056 0.11443537382697373 0.11697066775851084
    0.11953842798834562 0.12213877222960187 0.12477181756095049
    0.12743768043564743 0.1301364766903643 0.13286832155381798
    0.13563332965520566 0.13843161503245183 0.14126329114027164
    0.14412847085805777 0.14702726649759498 0.14995978981060856
    0.15292615199615017 0.1559264637078274 0.1589608350608804 0.162029375639111
    0.1651321945016676 0.16826940018969075 0.1714411007328226
    0.17464740365558504 0.17788841598362912 0.18116424424986022
    0.184474994500441 0.18782077230067787 0.19120168274079138 0.1946178304415758
    0.19806931955994886 0.20155625379439707 0.20507873639031693
    0.20863687014525575 0.21223075741405523 0.21586050011389926
    0.2195261997292692 0.2232279573168085 0.22696587351009836
    0.23074004852434915 0.23455058216100522 0.238397573812271
    0.24228112246555486 0.24620132670783548 0.25015828472995344
    0.25415209433082675 0.2581828529215958 0.26225065752969623
    0.26635560480286247 0.2704977910130658 0.27467731206038465
    0.2788942634768104 0.2831487404299921 0.2874408377269175 0.29177064981753587
    0.2961382707983211 0.3005437944157765 0.3049873140698863 0.30946892281750854
    0.31398871337571754 0.31854677812509186 0.32314320911295075
    0.3277780980565422 0.33245153634617935 0.33716361504833037
    0.3419144249086609 0.3467040563550296 0.35153259950043936 0.3564001441459435
    0.3613067797835095 0.3662525955988395 0.3712376804741491 0.3762621229909065
    0.38132601143253014 0.386429433787049 0.39157247774972326
    0.39675523072562685 0.4019777798321958 0.4072402119017367
    0.41254261348390375 0.4178850708481375 0.4232676699860717 0.4286904966139066
    0.43415363617474895 0.4396571738409188 0.44520119451622786
    0.45078578283822346 0.45641102318040466 0.4620769996544071 0.467783796112159
    0.47353149614800955 0.4793201831008268 0.4851499400560704 0.4910208498478356
    0.4969329950608704 0.5028864580325687 0.5088813208549338 0.5149176653765214
    0.5209955732043543 0.5271151257058131 0.5332764040105052 0.5394794890121072
    0.5457244613701866 0.5520114015120001 0.5583403896342679 0.5647115057049292
    0.5711248294648731 0.5775804404296506 0.5840784178911641 0.5906188409193369
    0.5972017883637634 0.6038273388553378 0.6104955708078648 0.6172065624196511
    0.6239603916750761 0.6307571363461468 0.6375968739940326 0.6444796819705821
    0.6514056374198242 0.6583748172794485 0.665387298282272 0.6724431569576875
    0.6795424696330938 0.6866853124353135 0.6938717612919899 0.7011018919329731
    0.7083757798916868 0.7156935005064807 0.7230551289219693 0.7304607400903537
    0.7379104087727308 0.7454042095403874 0.7529422167760779 0.7605245046752924
    0.768151147247507 0.7758222183174236 0.7835377915261935 0.7912979403326302
    0.799102738014409 0.8069522576692516 0.8148465722161012 0.8227857543962835
    0.8307698767746546 0.83879901174074 0.846873231509858 0.8549926081242338
    0.8631572134541023 0.8713671191987972 0.8796223968878317 0.8879231178819663
    0.8962693533742664 0.9046611743911496 0.9130986517934192 0.9215818562772946
    0.9301108583754237 0.938685728457888 0.9473065367331999 0.9559733532492861
    0.9646862478944651 0.9734452903984125 0.9822505503331171 0.9911020971138298
    1
);

@function rmd-theme-luminance($color) {
  $red: list.nth($rmd-theme-linear-channel-values, color.red($color) + 1);
  $red-multiplier: 0.2126;
  $green: list.nth($rmd-theme-linear-channel-values, color.green($color) + 1);
  $green-multiplier: 0.7152;
  $blue: list.nth($rmd-theme-linear-channel-values, color.blue($color) + 1);
  $blue-multiplier: 0.0722;

  @return ($red * $red-multiplier) + ($green * $green-multiplier) +
    ($blue * $blue-multiplier);
}

@function rmd-theme-contrast($back, $front) {
  $back-luminance: rmd-theme-luminance($back) + 0.05;
  $front-luminance: rmd-theme-luminance($front) + 0.05;

  @return math.div(
    max($back-luminance, $front-luminance),
    min($back-luminance, $front-luminance)
  );
}

@function rmd-theme-tone(
  $color,
  $min-contrast: $rmd-theme-default-contrast-ratio
) {
  @if $color == 'dark' or $color == 'light' {
    @return $color;
  }

  $light-contrast: rmd-theme-contrast($color, $rmd-white-base);
  $dark-contrast: rmd-theme-contrast($color, rgba($rmd-black-base, 0.87));

  @if $light-contrast < $min-contrast and $dark-contrast > $light-contrast {
    @return 'light';
  } @else {
    @return 'dark';
  }
}

@function rmd-theme-contrast-tone(
  $color,
  $min-contrast: $rmd-theme-default-contrast-ratio
) {
  @return if(rmd-theme-tone($color) == 'dark', 'light', 'dark');
}

@function rmd-theme-best-contrast-color(
  $color,
  $light-color: $rmd-white-base,
  $dark-color: $rmd-black-base,
  $enabled: $rmd-theme-better-contrast-colors
) {
  @if not $enabled {
    @return if(
      rmd-theme-tone($color) == light,
      $rmd-black-base,
      $rmd-white-base
    );
  }

  $light-contrast: rmd-theme-contrast($color, $light-color);
  $dark-contrast: rmd-theme-contrast($color, $dark-color);

  @return if($light-contrast > $dark-contrast, $light-color, $dark-color);
}
$rmd-theme-no-css-variables-fallback: true !default;
$rmd-theme-define-colors-with-rgba: false !default;
$rmd-theme-dark-elevation: true !default;
$rmd-theme-light: true !default;
$rmd-theme-primary: $rmd-purple-500 !default;
$rmd-theme-on-primary: rmd-theme-best-contrast-color(
  $rmd-theme-primary
) !default;
$rmd-theme-secondary: $rmd-pink-a-400 !default;
$rmd-theme-on-secondary: rmd-theme-best-contrast-color(
  $rmd-theme-secondary
) !default;
$rmd-theme-warning: $rmd-deep-orange-a-200 !default;
$rmd-theme-on-warning: rmd-theme-best-contrast-color(
  $rmd-theme-warning
) !default;
$rmd-theme-error: $rmd-red-500 !default;
$rmd-theme-on-error: rmd-theme-best-contrast-color($rmd-theme-error) !default;
$rmd-theme-success: $rmd-green-a-700 !default;
$rmd-theme-on-success: rmd-theme-best-contrast-color(
  $rmd-theme-success
) !default;
$rmd-theme-light-background: $rmd-grey-50 !default;
$rmd-theme-light-surface: $rmd-white-base !default;
$rmd-theme-dark-background: if(
  $rmd-theme-dark-elevation,
  #121212,
  #303030
) !default;
$rmd-theme-dark-surface: $rmd-grey-800 !default;
$rmd-theme-dark-class: '.dark-theme' !default;
$rmd-theme-background: if(
  $rmd-theme-light,
  $rmd-theme-light-background,
  $rmd-theme-dark-background
) !default;
$rmd-theme-surface: if(
  $rmd-theme-light,
  $rmd-theme-light-surface,
  $rmd-theme-dark-surface
) !default;
$rmd-theme-on-surface: if(
  rmd-theme-contrast-tone($rmd-theme-surface) == 'dark',
  $rmd-black-base,
  $rmd-white-base
);
$rmd-theme-light-primary-text-color: if(
  $rmd-theme-define-colors-with-rgba,
  rgba($rmd-black-base, 0.87),
  color.adjust($rmd-black-base, $lightness: 13%)
) !default;
$rmd-theme-light-secondary-text-color: if(
  $rmd-theme-define-colors-with-rgba,
  rgba($rmd-black-base, 0.54),
  color.adjust($rmd-black-base, $lightness: 46%)
) !default;
$rmd-theme-light-hint-text-color: if(
  $rmd-theme-define-colors-with-rgba,
  rgba($rmd-black-base, 0.34),
  color.adjust($rmd-black-base, $lightness: 66%)
) !default;
$rmd-theme-light-disabled-text-color: if(
  $rmd-theme-define-colors-with-rgba,
  rgba($rmd-black-base, 0.38),
  color.adjust($rmd-black-base, $lightness: 62%)
) !default;
$rmd-theme-light-icon-color: if(
  $rmd-theme-define-colors-with-rgba,
  rgba($rmd-black-base, 0.54),
  color.adjust($rmd-black-base, $lightness: 46%)
) !default;
$rmd-theme-dark-primary-text-color: color.adjust(
  $rmd-white-base,
  $lightness: -15%
) !default;
$rmd-theme-dark-secondary-text-color: color.adjust(
  $rmd-white-base,
  $lightness: -30%
) !default;
$rmd-theme-dark-hint-text-color: color.adjust(
  $rmd-white-base,
  $lightness: -50%
) !default;
$rmd-theme-dark-disabled-text-color: color.adjust(
  $rmd-white-base,
  $lightness: -50%
) !default;
$rmd-theme-dark-icon-color: color.adjust(
  $rmd-white-base,
  $lightness: -30%
) !default;
$rmd-theme-light-text-colors: (
  primary: $rmd-theme-light-primary-text-color,
  secondary: $rmd-theme-light-secondary-text-color,
  hint: $rmd-theme-light-hint-text-color,
  disabled: $rmd-theme-light-disabled-text-color,
  icon: $rmd-theme-light-icon-color,
);
$rmd-theme-dark-text-colors: (
  primary: $rmd-theme-dark-primary-text-color,
  secondary: $rmd-theme-dark-secondary-text-color,
  hint: $rmd-theme-dark-hint-text-color,
  disabled: $rmd-theme-dark-disabled-text-color,
  icon: $rmd-theme-dark-icon-color,
);

@function rmd-theme-text-color($style, $color) {
  $contrast-tone: rmd-theme-contrast-tone($color);

  @if $contrast-tone == 'light' {
    @return map-get($rmd-theme-dark-text-colors, $style);
  } @else {
    @return map-get($rmd-theme-light-text-colors, $style);
  }
}
$rmd-theme-primary-text-on-background-color: rmd-theme-text-color(
  primary,
  $rmd-theme-background
) !default;
$rmd-theme-secondary-text-on-background-color: rmd-theme-text-color(
  secondary,
  $rmd-theme-background
) !default;
$rmd-theme-hint-text-on-background-color: rmd-theme-text-color(
  hint,
  $rmd-theme-background
) !default;
$rmd-theme-disabled-text-on-background-color: rmd-theme-text-color(
  disabled,
  $rmd-theme-background
) !default;
$rmd-theme-icon-on-background-color: rmd-theme-text-color(
  icon,
  $rmd-theme-background
) !default;
$rmd-theme-primary-text-on-light-color: rmd-theme-text-color(
  primary,
  light
) !default;
$rmd-theme-secondary-text-on-light-color: rmd-theme-text-color(
  secondary,
  light
) !default;
$rmd-theme-hint-text-on-light-color: rmd-theme-text-color(hint, light) !default;
$rmd-theme-disabled-text-on-light-color: rmd-theme-text-color(
  disabled,
  light
) !default;
$rmd-theme-icon-on-light-color: rmd-theme-text-color(icon, light) !default;
$rmd-theme-primary-text-on-dark-color: rmd-theme-text-color(
  primary,
  dark
) !default;
$rmd-theme-secondary-text-on-dark-color: rmd-theme-text-color(
  secondary,
  dark
) !default;
$rmd-theme-hint-text-on-dark-color: rmd-theme-text-color(hint, dark) !default;
$rmd-theme-disabled-text-on-dark-color: rmd-theme-text-color(
  disabled,
  dark
) !default;
$rmd-theme-icon-on-dark-color: rmd-theme-text-color(icon, dark) !default;
$rmd-theme-dark-elevation-colors: (
  0: $rmd-theme-dark-background,
  1: #1f1f1f,
  2: #242424,
  3: #262626,
  4: #282828,
  5: #282828,
  6: #2c2c2c,
  7: #2c2c2c,
  8: #2f2f2f,
  9: #2f2f2f,
  10: #2f2f2f,
  11: #2f2f2f,
  12: #333,
  13: #333,
  14: #333,
  15: #333,
  16: #353535,
  17: #353535,
  18: #353535,
  19: #353535,
  20: #353535,
  21: #353535,
  22: #353535,
  23: #353535,
  24: #383838,
) !default;
$rmd-theme-values: (
  background: $rmd-theme-background,
  primary: $rmd-theme-primary,
  on-primary: $rmd-theme-on-primary,
  secondary: $rmd-theme-secondary,
  on-secondary: $rmd-theme-on-secondary,
  surface: $rmd-theme-surface,
  on-surface: $rmd-theme-on-surface,
  warning: $rmd-theme-warning,
  on-warning: $rmd-theme-on-warning,
  error: $rmd-theme-error,
  on-error: $rmd-theme-on-error,
  success: $rmd-theme-success,
  on-success: $rmd-theme-on-success,
  text-primary-on-background: $rmd-theme-primary-text-on-background-color,
  text-secondary-on-background: $rmd-theme-secondary-text-on-background-color,
  text-hint-on-background: $rmd-theme-hint-text-on-background-color,
  text-disabled-on-background: $rmd-theme-disabled-text-on-background-color,
  text-icon-on-background: $rmd-theme-icon-on-background-color,
  light-background: $rmd-theme-light-background,
  light-surface: $rmd-theme-light-surface,
  dark-background: $rmd-theme-dark-background,
  dark-surface: $rmd-theme-dark-surface,
  text-primary-on-light: $rmd-theme-primary-text-on-light-color,
  text-secondary-on-light: $rmd-theme-secondary-text-on-light-color,
  text-hint-on-light: $rmd-theme-hint-text-on-light-color,
  text-disabled-on-light: $rmd-theme-disabled-text-on-light-color,
  text-icon-on-light: $rmd-theme-icon-on-light-color,
  text-primary-on-dark: $rmd-theme-primary-text-on-dark-color,
  text-secondary-on-dark: $rmd-theme-secondary-text-on-dark-color,
  text-hint-on-dark: $rmd-theme-hint-text-on-dark-color,
  text-disabled-on-dark: $rmd-theme-disabled-text-on-dark-color,
  text-icon-on-dark: $rmd-theme-icon-on-dark-color,
);

@function rmd-theme-get-var-value($theme-name, $theme-map, $theme-group) {
  @if type-of($theme-name) == 'color' or $theme-name == 'currentColor' {
    @return $theme-name;
  }

  @return rmd-utils-validate(
    $theme-map,
    $theme-name,
    '#{$theme-group} property'
  );
}

@function rmd-theme-get-var(
  $theme-name,
  $theme-map,
  $theme-group,
  $fallback: null
) {
  $validated-fallback: rmd-theme-get-var-value(
    $theme-name,
    $theme-map,
    $theme-group
  );
  $fallback: if($fallback == null, $validated-fallback, $fallback);

  @if $fallback == null {
    @return var(--rmd-#{$theme-group}-#{$theme-name});
  }

  @return var(--rmd-#{$theme-group}-#{$theme-name}, #{$fallback});
}

@mixin rmd-theme-apply-rmd-var(
  $property,
  $theme-name,
  $theme-map,
  $theme-group,
  $fallback: null
) {
  @if not $rmd-theme-no-css-variables-fallback {
    #{$property}: rmd-theme-get-var-value(
      $theme-name,
      $theme-map,
      $theme-group
    );
  }

  #{$property}: rmd-theme-get-var(
    $theme-name,
    $theme-map,
    $theme-group,
    $fallback
  );
}

@mixin rmd-theme-update-rmd-var($value, $theme-name, $theme-map, $theme-group) {
  $validated: rmd-utils-validate(
    $theme-map,
    $theme-name,
    '#{$theme-name} property'
  );

  #{--rmd-#{$theme-group}-#{$theme-name}}: $value;
}

@mixin rmd-theme-create-root-theme($theme-map, $theme-group, $exclude: null) {
  :root {
    @each $theme-name, $theme-value in $theme-map {
      @if $theme-value !=
        null and
        ($exclude == null or not index($exclude, $theme-name))
      {
        @include rmd-theme-update-rmd-var(
          $theme-value,
          $theme-name,
          $theme-map,
          $theme-group
        );
      }
    }
  }
}

@function rmd-theme-get-swatch(
  $color,
  $swatch,
  $accent: false,
  $fallback-color: null,
  $fallback-name: null
) {
  $current-color-index: list.index(map.values($rmd-theme-color-map), $color);

  @if not $current-color-index or $current-color-index < 1 {
    @if $fallback-color == null {
      $fallback: if(
        $fallback-name,
        "the '$#{$fallback-name}' variable",
        'a fallback color'
      );

      $error-msg: "Invalid material design color: '#{$color}'. If this was intentional because your app does " +
        'not use material design colors, set #{$fallback} instead to get a correct color for the provided swatch: ' +
        '#{$swatch}.';
      @error $error-msg;
    } @else if type-of($fallback-color) != 'color' {
      @error "Invalid fallback color: '#{$fallback-color}'. This must be a valid color.";
    }

    @return $fallback-color;
  }

  $suffixes: rmd-utils-validate(
    if($accent, $rmd-theme-accent-suffixes, $rmd-theme-primary-suffixes),
    $swatch,
    'material design color swatch'
  );

  $current-color-name: list.nth(
    map.keys($rmd-theme-color-map),
    $current-color-index
  );
  $accent-index: string.index($current-color-name, '-a-');
  @if $accent-index {
    $current-color-name: string.slice(
      $current-color-name,
      1,
      $accent-index - 1
    );
  } @else {
    $index: 1;
    $found: false;
    @while not $found and $index < length($rmd-theme-colors) {
      $suffix: list.nth($rmd-theme-colors, $index);
      $suffix-index: string.index($current-color-name, $suffix);
      @if $suffix-index {
        $found: true;
        $current-color-name: string.slice(
          $current-color-name,
          1,
          $suffix-index - 1 + string.length($suffix)
        );
      }

      $index: $index + 1;
    }
  }

  $color-name: '#{$current-color-name}#{if($accent, '-a', '')}-#{$swatch}';

  @return map-get($rmd-theme-color-map, $color-name);
}

@function rmd-theme($theme-name) {
  @return rmd-theme-get-var-value($theme-name, $rmd-theme-values, theme);
}

@function rmd-theme-var($theme-name, $fallback-color: null) {
  @return rmd-theme-get-var(
    $theme-name,
    $rmd-theme-values,
    theme,
    $fallback-color
  );
}

@mixin rmd-theme($property, $theme-style) {
  @include rmd-theme-apply-rmd-var(
    $property,
    $theme-style,
    $rmd-theme-values,
    theme
  );
}

@mixin rmd-theme-update-var($theme-style, $value) {
  @include rmd-theme-update-rmd-var(
    $value,
    $theme-style,
    $rmd-theme-values,
    theme
  );
}

@mixin rmd-theme-dark-elevation-styles($css-modules: false, $selector: '&') {
  @if $rmd-theme-dark-elevation {
    @if $rmd-theme-dark-class == 'prefers-color-scheme' {
      @media (prefers-color-scheme: dark) {
        #{$selector} {
          @content;
        }
      }
    } @else {
      $parent-selector: $selector == '&';
      $class-name: if(
        $parent-selector or not $selector,
        $rmd-theme-dark-class,
        $rmd-theme-dark-class + ' ' + $selector
      );

      @include rmd-utils-optional-css-modules(
        $class-name,
        $css-modules,
        $parent-selector
      ) {
        @content;
      }
    }
  }
}

@mixin rmd-theme-dark-elevation($z-value, $css-modules: false) {
  @include rmd-theme-dark-elevation-styles($css-modules) {
    @include rmd-theme-update-var(
      background,
      map-get($rmd-theme-dark-elevation-colors, $z-value)
    );
    @include rmd-theme(background-color, background);
  }
}

@mixin rmd-theme-light {
  @include rmd-theme-update-var(background, $rmd-theme-light-background);
  @include rmd-theme-update-var(surface, $rmd-theme-light-surface);
  @include rmd-theme-update-var(on-surface, $rmd-black-base);
  @include rmd-theme-update-var(
    text-primary-on-background,
    $rmd-theme-primary-text-on-light-color
  );
  @include rmd-theme-update-var(
    text-secondary-on-background,
    $rmd-theme-secondary-text-on-light-color
  );
  @include rmd-theme-update-var(
    text-hint-on-background,
    $rmd-theme-hint-text-on-light-color
  );
  @include rmd-theme-update-var(
    text-disabled-on-background,
    $rmd-theme-disabled-text-on-light-color
  );
  @include rmd-theme-update-var(
    text-icon-on-background,
    $rmd-theme-icon-on-light-color
  );

  @if mixin-exists(rmd-alert-theme-update-var) {
    @if $rmd-toast-light-background-color != $rmd-toast-dark-background-color {
      @include rmd-alert-theme-update-var(
        background-color,
        $rmd-toast-light-background-color
      );
    }
    @if $rmd-toast-light-color != $rmd-toast-dark-color {
      @include rmd-alert-theme-update-var(color, $rmd-toast-light-color);
    }
  }

  @if mixin-exists(rmd-app-bar-theme-update-var) {
    @include rmd-app-bar-theme-update-var(
      default-background-color,
      $rmd-app-bar-default-light-theme-background-color
    );
    @include rmd-app-bar-theme-update-var(
      default-color,
      $rmd-app-bar-default-light-theme-color
    );
  }

  @if mixin-exists(rmd-card-theme-update-var) {
    @include rmd-card-theme-update-var(
      color,
      $rmd-theme-primary-text-on-light-color
    );
    @include rmd-card-theme-update-var(
      secondary-color,
      $rmd-theme-secondary-text-on-light-color
    );

    @if $rmd-card-light-background-color != $rmd-card-dark-background-color {
      @include rmd-card-theme-update-var(
        background-color,
        $rmd-card-light-background-color
      );
    }
  }

  @if mixin-exists(rmd-chip-theme-update-var) {
    @include rmd-chip-theme-update-var(
      solid-background-color,
      $rmd-chip-solid-light-background-color
    );
    @include rmd-chip-theme-update-var(
      solid-color,
      $rmd-chip-solid-light-color
    );
    @include rmd-chip-theme-update-var(
      solid-disabled,
      $rmd-chip-solid-light-disabled-background-color
    );
    @include rmd-chip-theme-update-var(
      outline-background-color,
      $rmd-chip-outline-light-background-color
    );
    @include rmd-chip-theme-update-var(
      outline-color,
      $rmd-chip-outline-light-color
    );
  }

  @if mixin-exists(rmd-dialog-theme-update-var) {
    @if $rmd-dialog-light-background-color != $rmd-dialog-dark-background-color
    {
      @include rmd-dialog-theme-update-var(
        background-color,
        $rmd-dialog-light-background-color
      );
    }
  }

  @if mixin-exists(rmd-sheet-theme-update-var) {
    @if $rmd-sheet-light-background-color != $rmd-sheet-dark-background-color {
      @include rmd-sheet-theme-update-var(
        background-color,
        $rmd-sheet-light-background-color
      );
    }
    @if $rmd-sheet-raised-light-background-color !=
      $rmd-sheet-raised-dark-background-color
    {
      @include rmd-sheet-theme-update-var(
        raised-background-color,
        $rmd-sheet-raised-light-background-color
      );
    }
  }

  @if mixin-exists(rmd-divider-theme-update-var) {
    @include rmd-divider-theme-update-var(
      background-color,
      $rmd-divider-background-color-on-light
    );
  }

  @if mixin-exists(rmd-form-theme-update-var) {
    @include rmd-form-theme-update-var(
      text-border-color,
      $rmd-text-field-light-border-color
    );
    @include rmd-form-theme-update-var(
      text-border-hover-color,
      $rmd-text-field-light-border-hover-color
    );
    @include rmd-form-theme-update-var(
      text-filled-color,
      $rmd-text-field-filled-light-background-color
    );

    @if $rmd-listbox-light-background-color !=
      $rmd-listbox-dark-background-color
    {
      @include rmd-form-theme-update-var(
        listbox-background-color,
        $rmd-listbox-light-background-color
      );
    }
  }

  @if mixin-exists(rmd-menu-theme-update-var) {
    @if $rmd-menu-light-background-color != $rmd-menu-dark-background-color {
      @include rmd-menu-theme-update-var(
        background-color,
        $rmd-menu-light-background-color
      );
    }
  }

  @if mixin-exists(rmd-states-theme-update-var) {
    @include rmd-states-theme-update-var(
      hover-color,
      $rmd-states-light-theme-hover-color
    );
    @include rmd-states-theme-update-var(
      focus-color,
      $rmd-states-light-theme-focus-color
    );
    @include rmd-states-theme-update-var(
      pressed-color,
      $rmd-states-light-theme-pressed-color
    );
    @include rmd-states-theme-update-var(
      selected-color,
      $rmd-states-light-theme-selected-color
    );
    @include rmd-states-theme-update-var(
      ripple-background-color,
      $rmd-states-light-theme-ripple-background-color
    );
  }

  @if mixin-exists(rmd-table-theme-update-var) {
    @include rmd-table-theme-update-var(
      border-color,
      $rmd-table-light-border-color
    );
  }

  @if mixin-exists(rmd-tabs-theme-update-var) {
    @include rmd-tabs-theme-update-var(active, $rmd-black-base);
    @include rmd-tabs-theme-update-var(
      inactive,
      $rmd-theme-secondary-text-on-light-color
    );
  }
}

@mixin rmd-theme-dark {
  @include rmd-theme-update-var(background, $rmd-theme-dark-background);
  @include rmd-theme-update-var(surface, $rmd-theme-dark-surface);
  @include rmd-theme-update-var(on-surface, $rmd-white-base);
  @include rmd-theme-update-var(
    text-primary-on-background,
    $rmd-theme-primary-text-on-dark-color
  );
  @include rmd-theme-update-var(
    text-secondary-on-background,
    $rmd-theme-secondary-text-on-dark-color
  );
  @include rmd-theme-update-var(
    text-hint-on-background,
    $rmd-theme-hint-text-on-dark-color
  );
  @include rmd-theme-update-var(
    text-disabled-on-background,
    $rmd-theme-disabled-text-on-dark-color
  );
  @include rmd-theme-update-var(
    text-icon-on-background,
    $rmd-theme-icon-on-dark-color
  );

  @if mixin-exists(rmd-alert-theme-update-var) {
    @if $rmd-toast-light-color != $rmd-toast-dark-color {
      @include rmd-alert-theme-update-var(
        background-color,
        $rmd-toast-dark-color
      );
    }
    @if $rmd-toast-light-background-color != $rmd-toast-dark-background-color {
      @include rmd-alert-theme-update-var(
        background-color,
        $rmd-toast-dark-background-color
      );
    }
  }

  @if mixin-exists(rmd-app-bar-theme-update-var) {
    @include rmd-app-bar-theme-update-var(
      default-background-color,
      $rmd-app-bar-default-dark-theme-background-color
    );
    @include rmd-app-bar-theme-update-var(
      default-color,
      $rmd-app-bar-default-dark-theme-color
    );
  }

  @if mixin-exists(rmd-card-theme-update-var) {
    @include rmd-card-theme-update-var(
      color,
      $rmd-theme-primary-text-on-dark-color
    );
    @include rmd-card-theme-update-var(
      secondary-color,
      $rmd-theme-secondary-text-on-dark-color
    );

    @if $rmd-card-light-background-color != $rmd-card-dark-background-color {
      @include rmd-card-theme-update-var(
        background-color,
        $rmd-card-dark-background-color
      );
    }
  }

  @if mixin-exists(rmd-chip-theme-update-var) {
    @include rmd-chip-theme-update-var(
      solid-background-color,
      $rmd-chip-solid-dark-background-color
    );
    @include rmd-chip-theme-update-var(solid-color, $rmd-chip-solid-dark-color);
    @include rmd-chip-theme-update-var(
      solid-disabled,
      $rmd-chip-solid-dark-disabled-background-color
    );
    @include rmd-chip-theme-update-var(
      outline-background-color,
      $rmd-chip-outline-dark-background-color
    );
    @include rmd-chip-theme-update-var(
      outline-color,
      $rmd-chip-outline-dark-color
    );
  }

  @if mixin-exists(rmd-dialog-theme-update-var) {
    @if $rmd-dialog-light-background-color != $rmd-dialog-dark-background-color
    {
      @include rmd-dialog-theme-update-var(
        background-color,
        $rmd-dialog-dark-background-color
      );
    }
  }

  @if mixin-exists(rmd-sheet-theme-update-var) {
    @if $rmd-sheet-light-background-color != $rmd-sheet-dark-background-color {
      @include rmd-sheet-theme-update-var(
        background-color,
        $rmd-sheet-dark-background-color
      );
    }
    @if $rmd-sheet-raised-light-background-color !=
      $rmd-sheet-raised-dark-background-color
    {
      @include rmd-sheet-theme-update-var(
        raised-background-color,
        $rmd-sheet-raised-dark-background-color
      );
    }
  }

  @if mixin-exists(rmd-divider-theme-update-var) {
    @include rmd-divider-theme-update-var(
      background-color,
      $rmd-divider-background-color-on-dark
    );
  }

  @if mixin-exists(rmd-form-theme-update-var) {
    @include rmd-form-theme-update-var(
      text-border-color,
      $rmd-text-field-dark-border-color
    );
    @include rmd-form-theme-update-var(
      text-border-hover-color,
      $rmd-text-field-dark-border-hover-color
    );
    @include rmd-form-theme-update-var(
      text-filled-color,
      $rmd-text-field-filled-dark-background-color
    );

    @if $rmd-listbox-light-background-color !=
      $rmd-listbox-dark-background-color
    {
      @include rmd-form-theme-update-var(
        listbox-background-color,
        $rmd-listbox-dark-background-color
      );
    }
  }

  @if mixin-exists(rmd-menu-theme-update-var) {
    @if $rmd-menu-light-background-color != $rmd-menu-dark-background-color {
      @include rmd-menu-theme-update-var(
        background-color,
        $rmd-menu-dark-background-color
      );
    }
  }

  @if mixin-exists(rmd-states-theme-update-var) {
    @include rmd-states-theme-update-var(
      hover-color,
      $rmd-states-dark-theme-hover-color
    );
    @include rmd-states-theme-update-var(
      focus-color,
      $rmd-states-dark-theme-focus-color
    );
    @include rmd-states-theme-update-var(
      pressed-color,
      $rmd-states-dark-theme-pressed-color
    );
    @include rmd-states-theme-update-var(
      selected-color,
      $rmd-states-dark-theme-selected-color
    );
    @include rmd-states-theme-update-var(
      ripple-background-color,
      $rmd-states-dark-theme-ripple-background-color
    );
  }

  @if mixin-exists(rmd-table-theme-update-var) {
    @include rmd-table-theme-update-var(
      border-color,
      $rmd-table-dark-border-color
    );
  }

  @if mixin-exists(rmd-tabs-theme-update-var) {
    @include rmd-tabs-theme-update-var(active, $rmd-white-base);
    @include rmd-tabs-theme-update-var(
      inactive,
      $rmd-theme-secondary-text-on-dark-color
    );
  }
}

@mixin react-md-theme {
  @include rmd-theme-create-root-theme($rmd-theme-values, theme);
}
$rmd-transition-sharp: cubic-bezier(0.4, 0, 0.6, 1) !default;
$rmd-transition-standard: cubic-bezier(0.4, 0, 0.2, 1) !default;
$rmd-transition-acceleration: cubic-bezier(0.4, 0, 1, 1) !default;
$rmd-transition-deceleration: cubic-bezier(0, 0, 0.2, 1) !default;
$rmd-transition-enter-duration: 0.2s !default;
$rmd-transition-leave-duration: 0.15s !default;
$rmd-transition-standard-time: 0.15s !default;
$rmd-collapse-enter-transition-func: deceleration !default;
$rmd-collapse-leave-transition-func: acceleration !default;
$rmd-cross-fade-translate-distance: -1rem !default;
$rmd-cross-fade-transition-duration: 0.3s !default;
$rmd-transition-scale-enter-duration: $rmd-transition-enter-duration !default;
$rmd-transition-scale-leave-duration: $rmd-transition-leave-duration !default;
$rmd-transition-scale-y-enter-duration: $rmd-transition-enter-duration !default;
$rmd-transition-scale-y-leave-duration: $rmd-transition-leave-duration !default;
$rmd-transitions: (
  sharp: $rmd-transition-sharp,
  standard: $rmd-transition-standard,
  acceleration: $rmd-transition-acceleration,
  deceleration: $rmd-transition-deceleration,
) !default;

@mixin rmd-transition($type, $animation: false) {
  $function: rmd-utils-validate($rmd-transitions, $type, 'transition');

  @if $animation {
    animation-timing-function: $function;
  } @else {
    transition-timing-function: $function;
  }
}

@mixin rmd-transition-parent-shadow($shadow) {
  box-shadow: $shadow;
  position: relative;
}

@mixin rmd-transition-pseudo-shadow(
  $shadow,
  $duration: $rmd-transition-standard-time,
  $z-index: 0
) {
  @include rmd-transition(standard);
  @include rmd-utils-pseudo-element($z-index);

  box-shadow: $shadow;
  opacity: 0;
  transition: opacity $duration;
}

@mixin rmd-transition-shadow-transition(
  $start-shadow,
  $end-shadow,
  $active-selectors,
  $before: true,
  $duration: $rmd-transition-standard-time,
  $pseudo-z-index: 0
) {
  $shadow-target: if($before, '&::before', '&::after');

  $suffix: string.slice($shadow-target, 2);
  $active-string: '';

  @include rmd-transition-parent-shadow($start-shadow);

  #{$shadow-target} {
    @include rmd-transition-pseudo-shadow(
      $end-shadow,
      $duration,
      $pseudo-z-index
    );
  }

  @if type-of($active-selectors) == string {
    $active-string: $active-selectors + $suffix;
  } @else if type-of($active-selectors) == list {
    @for $i from 1 to length($active-selectors) + 1 {
      $selector: list.nth($active-selectors, $i);

      $prefix: $active-string + if($i > 1, ', ', '');
      $active-string: $prefix + $selector + $suffix;
    }
  }

  #{$active-string} {
    opacity: 1;
  }
}

@mixin rmd-collapse {
  .rmd-collapse {
    transition-property: max-height, padding-bottom, padding-top;
    will-change: max-height, padding-bottom, padding-top;

    &--no-overflow {
      overflow: hidden;
    }

    &--enter {
      @include rmd-transition($rmd-collapse-enter-transition-func);
    }

    &--leave {
      @include rmd-transition($rmd-collapse-leave-transition-func);
    }
  }
}

@mixin rmd-cross-fade {
  .rmd-cross-fade {
    opacity: 0;
    transform: translateY($rmd-cross-fade-translate-distance);

    &--active {
      @include rmd-transition(deceleration);

      opacity: 1;
      transform: translateY(0);
      transition-duration: $rmd-cross-fade-transition-duration;
      transition-property: opacity, transform;
    }
  }
}

@mixin rmd-transition-classes {
  .rmd-transition {
    &--scale-enter {
      opacity: 0;
      transform: scale(0);
    }

    &--scale-enter-active {
      @include rmd-transition(deceleration);

      opacity: 1;
      transform: scale(1);
      transition: transform $rmd-transition-scale-enter-duration,
        opacity $rmd-transition-scale-enter-duration;
    }

    &--scale-exit {
      opacity: 1;
      transform: scale(1);
    }

    &--scale-exit-active {
      @include rmd-transition(acceleration);

      opacity: 0;
      transform: scale(0);
      transition: transform $rmd-transition-scale-leave-duration,
        opacity $rmd-transition-scale-leave-duration;
    }

    &--scale-y-enter {
      opacity: 0;
      transform: scaleY(0);
      transform-origin: 0 0;
    }

    &--scale-y-enter-active {
      @include rmd-transition(deceleration);

      opacity: 1;
      transform: scaleY(1);
      transition: transform $rmd-transition-scale-y-enter-duration,
        opacity $rmd-transition-scale-y-enter-duration;
    }

    &--scale-y-exit {
      opacity: 1;
      transform: scaleY(1);
      transform-origin: 0 0;
    }

    &--scale-y-exit-active {
      @include rmd-transition(acceleration);

      opacity: 0;
      transform: scaleY(0);
      transition: transform $rmd-transition-scale-y-leave-duration,
        opacity $rmd-transition-scale-y-leave-duration;
    }
  }
}

@mixin react-md-transition {
  @include rmd-collapse;
  @include rmd-cross-fade;
  @include rmd-transition-classes;
}

@function rmd-typography-get-global-variable($style) {
  @if $style == 'headline-1' {
    @return $rmd-typography-styles-headline-1;
  } @else if $style == 'headline-2' {
    @return $rmd-typography-styles-headline-2;
  } @else if $style == 'headline-3' {
    @return $rmd-typography-styles-headline-3;
  } @else if $style == 'headline-4' {
    @return $rmd-typography-styles-headline-4;
  } @else if $style == 'headline-5' {
    @return $rmd-typography-styles-headline-5;
  } @else if $style == 'headline-6' {
    @return $rmd-typography-styles-headline-6;
  } @else if $style == 'subtitle-1' {
    @return $rmd-typography-styles-subtitle-1;
  } @else if $style == 'subtitle-2' {
    @return $rmd-typography-styles-subtitle-2;
  } @else if $style == 'body-1' {
    @return $rmd-typography-styles-body-1;
  } @else if $style == 'body-2' {
    @return $rmd-typography-styles-body-2;
  } @else if $style == 'caption' {
    @return $rmd-typography-styles-caption;
  } @else if $style == 'button' {
    @return $rmd-typography-styles-button;
  } @else if $style == 'overline' {
    @return $rmd-typography-styles-overline;
  }

  @return ();
}

@function rmd-typography-set-styles($base-styles, $additional-styles) {
  @each $style, $style-props in $additional-styles {
    $style-props: map.merge($base-styles, $style-props);

    @if global-variable-exists(rmd-typography-styles-#{$style}) {
      $style-props: map.merge(
        $style-props,
        rmd-typography-get-global-variable(#{$style})
      );
    }

    $override: ();
    @if $style == 'headline-1' {
      $override: $rmd-typography-headline-1-styles;
    } @else if $style == 'headline-2' {
      $override: $rmd-typography-headline-2-styles;
    } @else if $style == 'headline-3' {
      $override: $rmd-typography-headline-3-styles;
    } @else if $style == 'headline-4' {
      $override: $rmd-typography-headline-4-styles;
    } @else if $style == 'headline-5' {
      $override: $rmd-typography-headline-5-styles;
    } @else if $style == 'headline-6' {
      $override: $rmd-typography-headline-6-styles;
    } @else if $style == 'subtitle-1' {
      $override: $rmd-typography-subtitle-1-styles;
    } @else if $style == 'subtitle-2' {
      $override: $rmd-typography-subtitle-2-styles;
    } @else if $style == 'body-1' {
      $override: $rmd-typography-body-1-styles;
    } @else if $style == 'body-2' {
      $override: $rmd-typography-body-2-styles;
    } @else if $style == 'button' {
      $override: $rmd-typography-button-styles;
    } @else if $style == 'caption' {
      $override: $rmd-typography-caption-styles;
    } @else if $style == 'overline' {
      $override: $rmd-typography-overline-styles;
    }
    $style-props: map.merge($style-props, $override);

    $additional-styles: map.merge(
      $additional-styles,
      (#{$style}: $style-props)
    );
  }

  @return $additional-styles;
}

@function rmd-typography-get-letter-spacing($tracking, $font-size) {
  @return math.div($tracking, $font-size * 16) * 1em;
}
$rmd-typography-font-family: Roboto, sans-serif !default;
$rmd-typography-mobile-max-line-length: 17em !default;
$rmd-typography-desktop-max-line-length: 40em !default;
$rmd-typography-text-container-breakpoint: 37.5rem !default;
$rmd-typography-base: (
  font-family: $rmd-typography-font-family,
  -moz-osx-font-smoothing: grayscale,
  -webkit-font-smoothing: antialiased,
);
$rmd-typography-thin: 100 !default;
$rmd-typography-light: 300 !default;
$rmd-typography-regular: 400 !default;
$rmd-typography-medium: 500 !default;
$rmd-typography-bold: 700 !default;
$rmd-typography-semi-bold: 800 !default;
$rmd-typography-black: 900 !default;
$rmd-typography-font-weights: (
  thin: $rmd-typography-thin,
  light: $rmd-typography-light,
  regular: $rmd-typography-regular,
  medium: $rmd-typography-medium,
  bold: $rmd-typography-bold,
  semi-bold: $rmd-typography-semi-bold,
  black: $rmd-typography-black,
) !default;
$rmd-typography-default-font-weights: light regular medium bold !default;
$rmd-typography-colors: (
  secondary: text-secondary-on-background,
  hint: text-hint-on-background,
  theme-primary: primary,
  theme-secondary: secondary,
  theme-warning: warning,
  theme-error: error,
) !default;
$rmd-typography-alignments: left center right !default;
$rmd-typography-decorations: underline overline line-through !default;
$rmd-typography-transforms: capitalize uppercase lowercase !default;
$rmd-typography-font-styles: normal italic oblique !default;
$rmd-typography-google-font-weight-suffixes: (
  thin: '-Thin',
  light: '-Light',
  regular: '-Regular',
  medium: '-Medium',
  bold: '-Bold',
  semi-bold: '-SemiBold',
  black: '-Black',
) !default;
$rmd-typography-default-headline-1-styles: (
  font-size: 6rem,
  line-height: 6rem,
  font-weight: map.get($rmd-typography-font-weights, light),
  letter-spacing: rmd-typography-get-letter-spacing(-1.5, 6),
  text-decoration: inherit,
  text-transform: inherit,
);
$rmd-typography-headline-1-styles: () !default;
$rmd-typography-default-headline-2-styles: (
  font-size: 3.75rem,
  line-height: 3.75rem,
  font-weight: map.get($rmd-typography-font-weights, light),
  letter-spacing: rmd-typography-get-letter-spacing(-0.5, 3.75),
  text-decoration: inherit,
  text-transform: inherit,
);
$rmd-typography-headline-2-styles: () !default;
$rmd-typography-default-headline-3-styles: (
  font-size: 3rem,
  line-height: 3.125rem,
  font-weight: map.get($rmd-typography-font-weights, regular),
  letter-spacing: normal,
  text-decoration: inherit,
  text-transform: inherit,
);
$rmd-typography-headline-3-styles: () !default;
$rmd-typography-default-headline-4-styles: (
  font-size: 2.125rem,
  line-height: 2.5rem,
  font-weight: map.get($rmd-typography-font-weights, regular),
  letter-spacing: rmd-typography-get-letter-spacing(0.25, 2.125),
  text-decoration: inherit,
  text-transform: inherit,
);
$rmd-typography-headline-4-styles: () !default;
$rmd-typography-default-headline-5-styles: (
  font-size: 1.5rem,
  line-height: 2rem,
  font-weight: map.get($rmd-typography-font-weights, regular),
  letter-spacing: normal,
  text-decoration: inherit,
  text-transform: inherit,
);
$rmd-typography-headline-5-styles: () !default;
$rmd-typography-default-headline-6-styles: (
  font-size: 1.25rem,
  line-height: 2rem,
  font-weight: map.get($rmd-typography-font-weights, medium),
  letter-spacing: rmd-typography-get-letter-spacing(0.25, 1.25),
  text-decoration: inherit,
  text-transform: inherit,
);
$rmd-typography-headline-6-styles: () !default;
$rmd-typography-default-subtitle-1-styles: (
  font-size: 1rem,
  line-height: 1.75rem,
  font-weight: map.get($rmd-typography-font-weights, regular),
  letter-spacing: rmd-typography-get-letter-spacing(0.15, 1),
  text-decoration: inherit,
  text-transform: inherit,
);
$rmd-typography-subtitle-1-styles: () !default;
$rmd-typography-default-subtitle-2-styles: (
  font-size: 0.875rem,
  line-height: 1.375rem,
  font-weight: map.get($rmd-typography-font-weights, medium),
  letter-spacing: rmd-typography-get-letter-spacing(0.1, 0.875),
  text-decoration: inherit,
  text-transform: inherit,
);
$rmd-typography-subtitle-2-styles: () !default;
$rmd-typography-default-body-1-styles: (
  font-size: 1rem,
  line-height: 1.5rem,
  font-weight: map.get($rmd-typography-font-weights, regular),
  letter-spacing: rmd-typography-get-letter-spacing(0.5, 0.875),
  text-decoration: inherit,
  text-transform: inherit,
);
$rmd-typography-body-1-styles: () !default;
$rmd-typography-default-body-2-styles: (
  font-size: 0.875rem,
  line-height: 1.25rem,
  font-weight: map.get($rmd-typography-font-weights, regular),
  letter-spacing: rmd-typography-get-letter-spacing(0.25, 0.875),
  text-decoration: inherit,
  text-transform: inherit,
);
$rmd-typography-body-2-styles: () !default;
$rmd-typography-default-caption-styles: (
  font-size: 0.75rem,
  line-height: 1.25rem,
  font-weight: map.get($rmd-typography-font-weights, regular),
  letter-spacing: rmd-typography-get-letter-spacing(0.4, 0.75),
  text-decoration: inherit,
  text-transform: inherit,
);
$rmd-typography-caption-styles: () !default;
$rmd-typography-default-button-styles: (
  font-size: 0.875rem,
  line-height: 2.25rem,
  font-weight: map.get($rmd-typography-font-weights, medium),
  letter-spacing: rmd-typography-get-letter-spacing(1.25, 0.875),
  text-decoration: none,
  text-transform: uppercase,
);
$rmd-typography-button-styles: () !default;
$rmd-typography-default-overline-styles: (
  font-size: 0.75rem,
  line-height: 2rem,
  font-weight: map.get($rmd-typography-font-weights, medium),
  letter-spacing: rmd-typography-get-letter-spacing(2, 0.75),
  text-decoration: none,
  text-transform: uppercase,
);
$rmd-typography-overline-styles: () !default;
$rmd-typography-styles: rmd-typography-set-styles(
  $rmd-typography-base,
  (
    headline-1: $rmd-typography-default-headline-1-styles,
    headline-2: $rmd-typography-default-headline-2-styles,
    headline-3: $rmd-typography-default-headline-3-styles,
    headline-4: $rmd-typography-default-headline-4-styles,
    headline-5: $rmd-typography-default-headline-5-styles,
    headline-6: $rmd-typography-default-headline-6-styles,
    subtitle-1: $rmd-typography-default-subtitle-1-styles,
    subtitle-2: $rmd-typography-default-subtitle-2-styles,
    body-1: $rmd-typography-default-body-1-styles,
    body-2: $rmd-typography-default-body-2-styles,
    caption: $rmd-typography-default-caption-styles,
    button: $rmd-typography-default-button-styles,
    overline: $rmd-typography-default-overline-styles,
  )
);
$rmd-typography-theme-values: (
  line-width: $rmd-typography-desktop-max-line-length,
  mobile-line-width: $rmd-typography-mobile-max-line-length,
  desktop-line-width: $rmd-typography-desktop-max-line-length,
) !default;

@function rmd-typography-theme($theme-style) {
  @return rmd-theme-get-var-value(
    $theme-style,
    $rmd-typography-theme-values,
    typography
  );
}

@function rmd-typography-theme-var($theme-style, $fallback: null) {
  @return rmd-theme-get-var(
    $theme-style,
    $rmd-typography-theme-values,
    typography,
    $fallback
  );
}

@function rmd-typography-google-font-suffix($weight) {
  @return rmd-utils-validate(
    $rmd-typography-google-font-weight-suffixes,
    $weight,
    'Google font weight suffix'
  );
}

@function rmd-typography-value($style, $property) {
  $style-props: rmd-utils-validate($rmd-typography-styles, $style, typography);

  @return rmd-utils-validate(
    $style-props,
    $property,
    'typography #{$style} property'
  );
}

@mixin rmd-typography-theme(
  $property,
  $theme-style: $property,
  $fallback: null
) {
  @include rmd-theme-apply-rmd-var(
    $property,
    $theme-style,
    $rmd-typography-theme-values,
    typography
  );
}

@mixin rmd-typography-theme-update-var($theme-style, $value) {
  @include rmd-theme-update-rmd-var(
    $value,
    $theme-style,
    $rmd-typography-theme-values,
    typography
  );
}

@mixin rmd-typography-value($style, $properties...) {
  @if length($properties) == 0 {
    $properties: list.append($properties, font-size);
  }

  @each $property in $properties {
    #{$property}: rmd-typography-value($style, $property);
  }
}

@mixin rmd-typography-base {
  @each $key, $value in $rmd-typography-base {
    #{$key}: $value;
  }
}

@mixin rmd-typography($style, $omit: ()) {
  $style-props: rmd-utils-validate($rmd-typography-styles, $style, typography);

  @each $key, $value in $style-props {
    @if not index($omit, $key) {
      #{$key}: $value;
    }
  }
}

@mixin rmd-text-container-base {
  @include rmd-typography-theme(max-width, line-width);

  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

@mixin rmd-text-container-auto(
  $mobile-max-width: $rmd-typography-mobile-max-line-length,
  $desktop-max-width: $rmd-typography-desktop-max-line-length,
  $mobile-breakpoint: $rmd-typography-text-container-breakpoint
) {
  @media (max-width: #{$mobile-breakpoint}) {
    @include rmd-typography-theme-update-var(
      line-width,
      rmd-typography-theme-var(mobile-line-width)
    );
  }
}

@mixin rmd-text-container {
  @include rmd-text-container-base;

  &--auto {
    @include rmd-text-container-auto;
  }

  &--mobile {
    @include rmd-typography-theme-update-var(
      line-width,
      rmd-typography-theme-var(mobile-line-width)
    );
  }

  &--desktop {
    @include rmd-typography-theme-update-var(
      line-width,
      rmd-typography-theme-var(desktop-line-width)
    );
  }
}

@mixin rmd-typography-text-overflow-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@mixin rmd-typography-line-clamp($lines: 2) {
  -webkit-box-orient: vertical;
  -webkit-line-clamp: $lines;
  display: -webkit-box;
}

@mixin react-md-typography {
  @include rmd-theme-create-root-theme(
    $rmd-typography-theme-values,
    typography
  );

  .rmd-typography {
    @include rmd-typography-base;

    @each $suffix in map-keys($rmd-typography-styles) {
      &--#{$suffix} {
        @include rmd-typography($suffix);
      }
    }

    @each $weight in $rmd-typography-default-font-weights {
      &--#{$weight} {
        font-weight: map.get($rmd-typography-font-weights, $weight);
      }
    }

    @each $font-style in $rmd-typography-font-styles {
      &--#{$font-style} {
        font-style: $font-style;
      }
    }

    @each $suffix, $theme-style in $rmd-typography-colors {
      &--#{$suffix} {
        @include rmd-theme(color, $theme-style);
      }
    }

    @each $align in $rmd-typography-alignments {
      &--#{$align} {
        text-align: $align;
      }
    }

    @each $decoration in $rmd-typography-decorations {
      $suffix: $decoration + if($decoration == overline, '-decoration', '');

      &--#{$suffix} {
        text-decoration: $decoration;
      }
    }

    @each $transform in $rmd-typography-transforms {
      &--#{$transform} {
        text-transform: $transform;
      }
    }

    &--no-margin {
      margin: 0;
    }

    &--no-margin-top {
      margin-top: 0;
    }

    &--no-margin-bottom {
      margin-bottom: 0;
    }
  }

  .rmd-text-container {
    @include rmd-text-container;
  }

  .rmd-sr-only {
    @include rmd-utils-sr-only(true);
  }
}

@mixin rmd-typography-google-font-face(
  $font-name: Roboto,
  $font-weight: map-get($rmd-typography-font-weights, regular),
  $font-url-or-prefix: null
) {
  $full-font-name: str-replace($font-name, ' ', '') +
    rmd-typography-google-font-suffix($font-weight);

  $font-url-prefix: '';
  $font-url: null;
  @if $font-url-or-prefix == null or type-of($font-url-or-prefix) == 'string' {
    $font-url: if(
      $font-url-or-prefix == null,
      '/fonts/' + string.to-lower-case(str-replace($font-name, ' ', '-')),
      $font-url-or-prefix
    );
    $font-url: if(char-at($font-url) != '/', $font-url + '/', $font-url);
    $font-url: url($font-url + $full-font-name + '.ttf');
  } @else {
    $font-url: $font-url-or-prefix;
  }

  @font-face {
    font-family: string.quote($font-name);
    font-style: normal;
    font-weight: $font-weight;
    src: local(#{string.quote($font-name)}),
      local(#{string.quote($full-font-name)}), #{$font-url} format('truetype');
  }
}

@mixin rmd-typography-host-google-font(
  $font-name: Roboto,
  $weights: $rmd-typography-default-font-weights,
  $font-url-prefix-or-url-map: null
) {
  @each $weight in $weights {
    @if type-of($font-url-prefix-or-url-map) ==
      'string' or
      $font-url-prefix-or-url-map ==
      null
    {
      @include rmd-typography-google-font-face(
        $font-name,
        $weight,
        $font-url-prefix-or-url-map
      );
    } @else {
      @include rmd-typography-google-font-face(
        $font-name,
        $weight,
        rmd-utils-validate(
          $font-url-prefix-or-url-map,
          $weight,
          'Google font weight'
        )
      );
    }
  }
}
$rmd-elevation-color: $rmd-black-base;
$rmd-elevation-shadow-1-opacity: 0.2;
$rmd-elevation-shadow-2-opacity: 0.14;
$rmd-elevation-shadow-3-opacity: 0.12;
$rmd-elevation-shadow-1-map: (
  0: '0px 0px 0px 0px',
  1: '0px 2px 1px -1px',
  2: '0px 3px 1px -2px',
  3: '0px 3px 3px -2px',
  4: '0px 2px 4px -1px',
  5: '0px 3px 5px -1px',
  6: '0px 3px 5px -1px',
  7: '0px 4px 5px -2px',
  8: '0px 5px 5px -3px',
  9: '0px 5px 6px -3px',
  10: '0px 6px 6px -3px',
  11: '0px 6px 7px -4px',
  12: '0px 7px 8px -4px',
  13: '0px 7px 8px -4px',
  14: '0px 7px 9px -4px',
  15: '0px 8px 9px -5px',
  16: '0px 8px 10px -5px',
  17: '0px 8px 11px -5px',
  18: '0px 9px 11px -5px',
  19: '0px 9px 12px -6px',
  20: '0px 10px 13px -6px',
  21: '0px 10px 13px -6px',
  22: '0px 10px 14px -6px',
  23: '0px 11px 14px -7px',
  24: '0px 11px 15px -7px',
);
$rmd-elevation-shadow-2-map: (
  0: '0px 0px 0px 0px',
  1: '0px 1px 1px 0px',
  2: '0px 2px 2px 0px',
  3: '0px 3px 4px 0px',
  4: '0px 4px 5px 0px',
  5: '0px 5px 8px 0px',
  6: '0px 6px 10px 0px',
  7: '0px 7px 10px 1px',
  8: '0px 8px 10px 1px',
  9: '0px 9px 12px 1px',
  10: '0px 10px 14px 1px',
  11: '0px 11px 15px 1px',
  12: '0px 12px 17px 2px',
  13: '0px 13px 19px 2px',
  14: '0px 14px 21px 2px',
  15: '0px 15px 22px 2px',
  16: '0px 16px 24px 2px',
  17: '0px 17px 26px 2px',
  18: '0px 18px 28px 2px',
  19: '0px 19px 29px 2px',
  20: '0px 20px 31px 3px',
  21: '0px 21px 33px 3px',
  22: '0px 22px 35px 3px',
  23: '0px 23px 36px 3px',
  24: '0px 24px 38px 3px',
);
$rmd-elevation-shadow-3-map: (
  0: '0px 0px 0px 0px',
  1: '0px 1px 3px 0px',
  2: '0px 1px 5px 0px',
  3: '0px 1px 8px 0px',
  4: '0px 1px 10px 0px',
  5: '0px 1px 14px 0px',
  6: '0px 1px 18px 0px',
  7: '0px 2px 16px 1px',
  8: '0px 3px 14px 2px',
  9: '0px 3px 16px 2px',
  10: '0px 4px 18px 3px',
  11: '0px 4px 20px 3px',
  12: '0px 5px 22px 4px',
  13: '0px 5px 24px 4px',
  14: '0px 5px 26px 4px',
  15: '0px 6px 28px 5px',
  16: '0px 6px 30px 5px',
  17: '0px 6px 32px 5px',
  18: '0px 7px 34px 6px',
  19: '0px 7px 36px 6px',
  20: '0px 8px 38px 7px',
  21: '0px 8px 40px 7px',
  22: '0px 8px 42px 7px',
  23: '0px 9px 44px 8px',
  24: '0px 9px 46px 8px',
);

@function rmd-elevation(
  $z-value,
  $color: $rmd-elevation-color,
  $opacity-boost: 0
) {
  @if type-of($z-value) != 'number' or not unitless($z-value) {
    @error "$z-value must be a unitless number, but received '#{$z-value}'";
  }

  @if $z-value < 0 or $z-value > 24 {
    @error "$z-value must be between 0 and 24, but received '#{$z-value}'";
  }

  $color: rmd-theme($color);
  $shadow-1-value: map.get($rmd-elevation-shadow-1-map, $z-value);
  $shadow-1-color: rgba(
    $color,
    $rmd-elevation-shadow-1-opacity + $opacity-boost
  );

  $shadow-2-value: map.get($rmd-elevation-shadow-2-map, $z-value);
  $shadow-2-color: rgba(
    $color,
    $rmd-elevation-shadow-2-opacity + $opacity-boost
  );

  $shadow-3-value: map.get($rmd-elevation-shadow-3-map, $z-value);
  $shadow-3-color: rgba(
    $color,
    $rmd-elevation-shadow-3-opacity + $opacity-boost
  );

  @return #{'#{$shadow-1-value} #{$shadow-1-color}'},
    #{'#{$shadow-2-value} #{$shadow-2-color}'},
    #{'#{$shadow-3-value} #{$shadow-3-color}'};
}

@mixin rmd-elevation(
  $z-value,
  $color: $rmd-elevation-color,
  $opacity-boost: 0
) {
  box-shadow: rmd-elevation($z-value, $color, $opacity-boost);
}

@mixin rmd-elevation-transition(
  $start,
  $end,
  $active-selectors,
  $before: true,
  $duration: $rmd-transition-standard-time,
  $color: $rmd-elevation-color,
  $opacity-boost: 0
) {
  $start-shadow: if(
    $start == none or $start == 0,
    none,
    rmd-elevation($start, $color, $opacity-boost)
  );
  $end-shadow: if(
    $end == none or $end == 0,
    none,
    rmd-elevation($end, $color, $opacity-boost)
  );

  @include rmd-transition-shadow-transition(
    $start-shadow,
    $end-shadow,
    $active-selectors,
    $before,
    $duration
  );
}
$rmd-divider-size: 1px !default;
$rmd-divider-max-size: 100% !default;
$rmd-divider-inset: 4rem !default;
$rmd-divider-spacing: 0.25rem auto !default;
$rmd-divider-vertical-spacing: auto 0.25rem !default;
$rmd-divider-background-color-on-light: rgba($rmd-black-base, 0.12) !default;
$rmd-divider-background-color-on-dark: rgba($rmd-white-base, 0.12) !default;
$rmd-divider-background-color: if(
  rmd-theme-tone($rmd-theme-background) == light,
  $rmd-divider-background-color-on-light,
  $rmd-divider-background-color-on-dark
) !default;
$rmd-divider-theme-values: (
  background-color: $rmd-divider-background-color,
  background-color-on-light: $rmd-divider-background-color-on-light,
  background-color-on-dark: $rmd-divider-background-color-on-dark,
  size: $rmd-divider-size,
  inset: $rmd-divider-inset,
  spacing: $rmd-divider-spacing,
  vertical-spacing: $rmd-divider-vertical-spacing,
  max-size: $rmd-divider-max-size,
) !default;

@function rmd-divider-theme($theme-style) {
  @return rmd-theme-get-var-value(
    $theme-style,
    $rmd-divider-theme-values,
    divider
  );
}

@function rmd-divider-theme-var($theme-style, $fallback: null) {
  @return rmd-theme-get-var(
    $theme-style,
    $rmd-divider-theme-values,
    divider,
    $fallback
  );
}

@mixin rmd-divider-theme($property, $theme-style: $property, $fallback: null) {
  @include rmd-theme-apply-rmd-var(
    $property,
    $theme-style,
    $rmd-divider-theme-values,
    divider
  );
}

@mixin rmd-divider-theme-update-var($theme-style, $value) {
  @include rmd-theme-update-rmd-var(
    $value,
    $theme-style,
    $rmd-divider-theme-values,
    divider
  );
}

@mixin rmd-divider-border($position) {
  @include rmd-divider-theme(border-color, background-color);
  @include rmd-divider-theme(border-width, size);
  @include rmd-divider-theme('border-#{$position}-width', size);

  border-#{$position}-style: solid;
}

@mixin rmd-divider {
  @include rmd-divider-theme(margin, spacing);
  @include rmd-divider-theme(width, max-size);

  border: rmd-divider-theme(size) inset rmd-divider-theme(background-color);
  display: block;
  flex-shrink: 0;

  &--vertical {
    @include rmd-divider-theme(border-left-width, size);
    @include rmd-divider-theme(border-left-color, background-color);
    @include rmd-divider-theme(height, max-size);
    @include rmd-divider-theme(margin, vertical-spacing);
    @include rmd-divider-theme(width, size);

    border-bottom-style: none;
    border-left-style: inset;
    display: inline-block;
  }

  &--inset {
    @include rmd-divider-theme(margin-left, inset);
    @include rmd-utils-rtl {
      @include rmd-divider-theme(margin-right, inset);

      margin-left: auto;
    }

    width: calc(
      #{rmd-divider-theme-var(max-size)} - #{rmd-divider-theme-var(inset)}
    );
  }
}

@mixin react-md-divider {
  @include rmd-theme-create-root-theme($rmd-divider-theme-values, divider);

  .rmd-divider {
    @include rmd-divider;
  }
}
$rmd-media-overlay-background-color: rgba($rmd-black-base, 0.54) !default;
$rmd-media-selectors: (img '>svg' iframe video embed object) !default;
$rmd-media-default-aspect-ratio: math.percentage(math.div(9, 16)) !default;
$rmd-media-default-aspect-ratios: (
  '16-9': 16 9,
  '4-3': 4 3,
  '1-1': 1 1,
) !default;
$rmd-media-overlay-padding: 1rem !default;
$rmd-media-overlay-horizontal-width: 30% !default;
$rmd-media-overlay-positions: (
  top right bottom left middle center absolute-center
) !default;

@mixin rmd-media-aspect-ratio($width, $height) {
  padding-bottom: math.percentage(math.div($height, $width));
}

@mixin rmd-media-aspect-ratio-container($width: null, $height: null) {
  display: block;
  height: 0;
  overflow: hidden;
  padding: 0;

  @if $width and $height {
    @include rmd-media-aspect-ratio($width, $height);
  }
}

@mixin rmd-media-forced-aspect-ratio-item {
  bottom: 0;
  height: 100%;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
}

@mixin rmd-media-responsive-item {
  height: auto;
  width: 100%;
}

@mixin rmd-media-overlay-position($position) {
  $position: rmd-utils-validate(
    $rmd-media-overlay-positions,
    $position,
    'rmd-media-overlay-positions'
  );

  @if $position == left or $position == right or $position == center {
    bottom: 0;
    top: 0;
    width: $rmd-media-overlay-horizontal-width;

    @if $position == left {
      left: 0;
    } @else if $position == right {
      right: 0;
    } @else if $position == center {
      left: 50%;
      transform: translateX(-50%);
    }
  } @else if $position == top or $position == bottom or $position == middle {
    left: 0;
    right: 0;

    @if $position == top {
      top: 0;
    } @else if $position == bottom {
      bottom: 0;
    } @else if $position == middle {
      top: 50%;
      transform: translateY(-50%);
    }
  } @else if $position == absolute-center {
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
  }
}

@mixin rmd-media-overlay(
  $background-color: $rmd-media-overlay-background-color,
  $color: null
) {
  @if $color == null {
    $light: rmd-theme-tone($background-color) == 'light';
    $color: rmd-theme-var(
      if($light, text-primary-on-light, text-primary-on-dark)
    );
    $secondary-color: rmd-theme-var(
      if($light, text-secondary-on-light, text-secondary-on-dark)
    );

    @include rmd-theme-update-var(
      text-secondary-on-background,
      $secondary-color
    );
  }

  @include rmd-theme-update-var(background, $background-color);
  @include rmd-theme-update-var(text-primary-on-background, $color);
  @include rmd-theme(background-color, background);
  @include rmd-theme(color, text-primary-on-background);

  padding: $rmd-media-overlay-padding;
  position: absolute;
  z-index: 1;

  @if $rmd-media-overlay-positions != null {
    @each $position in $rmd-media-overlay-positions {
      &--#{$position} {
        @include rmd-media-overlay-position($position);
      }
    }
  }
}

@mixin rmd-media-container {
  display: inline-block;
  position: relative;

  @each $selector in $rmd-media-selectors {
    &--auto #{$selector} {
      @include rmd-media-responsive-item;
    }

    &--aspect-ratio #{$selector} {
      @include rmd-media-forced-aspect-ratio-item;
    }
  }

  &--aspect-ratio {
    @include rmd-media-aspect-ratio-container;
  }

  @each $key, $value in $rmd-media-default-aspect-ratios {
    &--#{$key} {
      @include rmd-media-aspect-ratio(nth($value, 1), nth($value, 2));
    }
  }

  &--full-width {
    display: block;
    width: 100%;
  }
}

@mixin react-md-media {
  .rmd-media-container {
    @include rmd-media-container;
  }

  .rmd-media {
    @include rmd-media-responsive-item;
  }

  .rmd-media-overlay {
    @include rmd-media-overlay;
  }
}
$rmd-icon-color: rmd-theme-var(text-icon-on-background) !default;
$rmd-icon-size: 1.5rem !default;
$rmd-icon-dense-size: 1.25rem !default;
$rmd-icon-include-dense: true !default;
$rmd-icon-material-icons-font: false !default;
$rmd-icon-use-font-icons: true !default;
$rmd-icon-use-svg-icons: true !default;
$rmd-icon-spacing-with-text: 0.5rem !default;
$rmd-icon-rotator-transition-time: 0.15s !default;
$rmd-icon-rotator-from: rotate(0deg) !default;
$rmd-icon-rotator-to: rotate(180deg) !default;
$rmd-icon-theme-values: (
  color: $rmd-icon-color,
  size: $rmd-icon-size,
  dense-size: $rmd-icon-dense-size,
  text-spacing: $rmd-icon-spacing-with-text,
  rotate-to: $rmd-icon-rotator-to,
  rotate-from: $rmd-icon-rotator-from,
) !default;

@function rmd-icon-theme($theme-style) {
  @return rmd-theme-get-var-value($theme-style, $rmd-icon-theme-values, icon);
}

@function rmd-icon-theme-var($theme-style, $fallback: null) {
  @return rmd-theme-get-var(
    $theme-style,
    $rmd-icon-theme-values,
    icon,
    $fallback
  );
}

@mixin rmd-icon-theme($property, $theme-style: $property, $fallback: null) {
  @include rmd-theme-apply-rmd-var(
    $property,
    $theme-style,
    $rmd-icon-theme-values,
    icon
  );
}

@mixin rmd-icon-theme-update-var($theme-style, $value) {
  @include rmd-theme-update-rmd-var(
    $value,
    $theme-style,
    $rmd-icon-theme-values,
    icon
  );
}

@mixin rmd-icon-base {
  flex-shrink: 0;
  user-select: none;
}

@mixin rmd-icon-font {
  @include rmd-icon-theme(color);
  @include rmd-icon-theme(font-size, size);

  text-align: center;
}

@mixin rmd-icon-dense-theme {
  @include rmd-icon-theme-update-var(size, rmd-icon-theme-var(dense-size));
}

@mixin rmd-icon-svg {
  @include rmd-icon-theme(fill, color);
  @include rmd-icon-theme(height, size);
  @include rmd-icon-theme(width, size);
}

@mixin rmd-icon-text-spacing(
  $spacing: $rmd-icon-spacing-with-text,
  $property: margin-left
) {
  @if $property == 'margin-left' or $property == 'margin-right' {
    @include rmd-utils-rtl-auto($property, $spacing, 0);
  } @else {
    #{$property}: $spacing;
  }
}

@mixin rmd-icon-spaced-with-text(
  $before-selector: '&--before',
  $after-selector: '&--after',
  $above-selector: '&--above',
  $below-selector: '&--below',
  $spacing: $rmd-icon-spacing-with-text
) {
  @if $before-selector != null {
    #{$before-selector} {
      @include rmd-icon-text-spacing(
        rmd-icon-theme-var(text-spacing),
        margin-right
      );
    }
  }

  @if $after-selector != null {
    #{$after-selector} {
      @include rmd-icon-text-spacing(
        rmd-icon-theme-var(text-spacing),
        margin-left
      );
    }
  }

  @if $above-selector != null {
    #{$above-selector} {
      @include rmd-icon-text-spacing(
        rmd-icon-theme-var(text-spacing),
        margin-bottom
      );
    }
  }

  @if $below-selector != null {
    #{$below-selector} {
      @include rmd-icon-text-spacing(
        rmd-icon-theme-var(text-spacing),
        margin-top
      );
    }
  }
}

@mixin rmd-icon-rotator {
  .rmd-icon-rotator {
    @include rmd-icon-theme(transform, rotate-from);

    &--animate {
      transition: transform $rmd-icon-rotator-transition-time linear;
    }

    &--rotated {
      @include rmd-icon-theme(transform, rotate-to);
    }
  }
}

@mixin rmd-icon {
  .rmd-icon {
    @include rmd-icon-base;

    @if $rmd-icon-material-icons-font {
      &.material-icons {
        @include rmd-icon-theme(font-size, size);
      }
    }

    &--forced-font {
      font-size: rmd-icon-theme-var(size) !important;
    }

    &--forced-size {
      height: rmd-icon-theme-var(size) !important;
      width: rmd-icon-theme-var(size) !important;
    }

    @if $rmd-icon-include-dense {
      &--dense {
        @include rmd-icon-dense-theme;
      }
    }

    @if $rmd-icon-use-font-icons {
      &--font {
        @include rmd-icon-font;
      }
    }

    @if $rmd-icon-use-svg-icons {
      &--svg {
        @include rmd-icon-svg;

        * {
          pointer-events: none;
        }
      }
    }

    @include rmd-icon-spaced-with-text;
  }
}

@mixin rmd-icon-spacing {
  .rmd-text-icon-spacing {
    align-items: center;
    display: inline-flex;
  }
}

@mixin react-md-icon {
  @if not $rmd-icon-use-font-icons and not $rmd-icon-use-svg-icons {
    @error 'Either svg or font icons must be used for this package but both were set to false. Please enable one of them to include icons.';
  }

  @include rmd-theme-create-root-theme($rmd-icon-theme-values, icon);

  @include rmd-icon;
  @include rmd-icon-spacing;
  @include rmd-icon-rotator;
}

@mixin rmd-icon-material-icons-font-face(
  $font-url-or-map: '/fonts/material-icons',
  $old-ie-support: false
) {
  $font-family: 'Material Icons';
  $font-name: 'MaterialIcons-Regular';

  $font-url: '';
  $font-map: null;
  @if type-of($font-url-or-map) == 'string' {
    $font-url: if(char-at($font-url) != '/', $font-url + '/', $font-url) +
      $font-name;
  } @else {
    $font-map: $font-url-or-map;
    $required-keys: woff2 woff truetype;
    @if $old-ie-support {
      $required-keys: #{$required-keys} eot;
    }

    @each $key in $required-keys {
      @if not map-has-key($font-map, $key) {
        @error 'It is required to include all of \'#{$required-keys}\' in your font url map, but one or more was missing! Provided keys: #{map-keys($font-map)}.';
      }
    }
  }

  @font-face {
    font-family: $font-family;
    font-style: normal;
    font-weight: map.get($rmd-typography-font-weights, normal);

    @if $old-ie-support {
      @if $font-map == null {
        src: url($font-url + '.eot');
      } @else {
        src: #{map.get($font-map, eot)};
      }
    }

    @if $font-map == null {
      src: local($font-family), local($font-name),
        url($font-url + '.woff2') format('woff2'),
        url($font-url + '.woff')
          format('woff')
          url($font-url + '.ttf')
          format('truetype');
    } @else {
      $woff2: map.get($font-url-or-map, woff2);
      $woff: map.get($font-url-or-map, woff);
      $truetype: map.get($font-url-or-map, truetype);

      $src: local($font-family), local($font-name);
      $src: "local(#{$font-family}), local(#{$font-name}), #{$woff2} format('woff2'), #{$woff} format('woff'), #{$truetype} format('truetype')";

      src: #{$src};
    }
  }
}

@mixin rmd-icon-material-icons-class($include-font-size: false) {
  .material-icons {
    @if $include-font-size {
      @include rmd-icon-theme(font-size, size);
    }

    direction: ltr;
    display: inline-block;
    font-family: 'Material Icons';

    font-feature-settings: 'liga';

    -moz-osx-font-smoothing: grayscale;

    -webkit-font-smoothing: antialiased;
    font-style: normal;
    font-weight: normal;
    letter-spacing: normal;
    line-height: 1;

    text-rendering: optimizelegibility;
    text-transform: none;
    white-space: nowrap;
    word-wrap: normal;
  }
}

@mixin rmd-icon-host-material-icons(
  $font-url-or-map: '/fonts/material-icons',
  $include-font-size: false,
  $old-ie-support: false
) {
  @include rmd-icon-material-icons-font-face($font-url-or-map, $old-ie-support);
  @include rmd-icon-material-icons-class($include-font-size);
}
$rmd-states-use-ripple: true !default;
$rmd-states-use-pressed-states-fallback: true !default;
$rmd-states-use-focus-shadow: true !default;
$rmd-states-use-focus-background: true !default;
$rmd-states-light-theme-background-color: $rmd-black-base !default;
$rmd-states-dark-theme-background-color: $rmd-black-base !default;
$rmd-states-light-theme-hover-color: rgba(
  $rmd-states-light-theme-background-color,
  0.08
) !default;
$rmd-states-light-theme-focus-color: rgba(
  $rmd-states-light-theme-background-color,
  0.24
) !default;
$rmd-states-light-theme-pressed-color: rgba(
  $rmd-states-light-theme-background-color,
  0.32
) !default;
$rmd-states-light-theme-selected-color: rgba(
  $rmd-states-light-theme-background-color,
  0.16
) !default;
$rmd-states-dark-theme-hover-color: rgba(
  $rmd-states-dark-theme-background-color,
  0.04
) !default;
$rmd-states-dark-theme-focus-color: rgba(
  $rmd-states-dark-theme-background-color,
  0.12
) !default;
$rmd-states-dark-theme-pressed-color: rgba(
  $rmd-states-dark-theme-background-color,
  0.16
) !default;
$rmd-states-dark-theme-selected-color: rgba(
  $rmd-states-dark-theme-background-color,
  0.12
) !default;
$rmd-states-light-theme-ripple-background-color: rgba(
  $rmd-black-base,
  0.08
) !default;
$rmd-states-dark-theme-ripple-background-color: rgba(
  $rmd-black-base,
  0.08
) !default;
$rmd-states-background-color: if(
  $rmd-theme-light,
  $rmd-states-light-theme-background-color,
  $rmd-states-dark-theme-background-color
) !default;
$rmd-states-hover-color: if(
  $rmd-theme-light,
  $rmd-states-light-theme-hover-color,
  $rmd-states-dark-theme-hover-color
) !default;
$rmd-states-focus-color: if(
  $rmd-theme-light,
  $rmd-states-light-theme-focus-color,
  $rmd-states-dark-theme-focus-color
) !default;
$rmd-states-pressed-color: if(
  $rmd-theme-light,
  $rmd-states-light-theme-pressed-color,
  $rmd-states-dark-theme-pressed-color
) !default;
$rmd-states-selected-color: if(
  $rmd-theme-light,
  $rmd-states-light-theme-selected-color,
  $rmd-states-dark-theme-selected-color
) !default;
$rmd-states-focus-shadow-width: 0.125rem !default;
$rmd-states-focus-shadow-color: $rmd-blue-500 !default;
$rmd-states-focus-shadow: inset 0 0 0 $rmd-states-focus-shadow-width
  $rmd-states-focus-shadow-color !default;
$rmd-states-ripple-background-color: if(
  $rmd-theme-light,
  $rmd-states-light-theme-ripple-background-color,
  $rmd-states-dark-theme-ripple-background-color
) !default;
$rmd-states-ripple-transform-duration: 0.45s !default;
$rmd-states-ripple-opacity-duration: 0.3s !default;
$rmd-states-pressed-class-name: '.rmd-states--pressed' !default;
$rmd-states-theme-values: (
  background-color: transparent,
  hover-color: $rmd-states-hover-color,
  focus-color: $rmd-states-focus-color,
  focus-shadow: $rmd-states-focus-shadow,
  pressed-color: $rmd-states-pressed-color,
  selected-color: $rmd-states-selected-color,
  ripple-background-color: $rmd-states-ripple-background-color,
  light-hover-color: $rmd-states-light-theme-hover-color,
  light-focus-color: $rmd-states-light-theme-focus-color,
  light-pressed-color: $rmd-states-light-theme-pressed-color,
  light-selected-color: $rmd-states-light-theme-selected-color,
  light-ripple-background-color: $rmd-states-light-theme-ripple-background-color,
  dark-hover-color: $rmd-states-dark-theme-hover-color,
  dark-focus-color: $rmd-states-dark-theme-focus-color,
  dark-pressed-color: $rmd-states-dark-theme-pressed-color,
  dark-selected-color: $rmd-states-dark-theme-selected-color,
  dark-ripple-background-color: $rmd-states-dark-theme-ripple-background-color,
) !default;

@function rmd-states-theme($theme-style) {
  @return rmd-theme-get-var-value(
    $theme-style,
    $rmd-states-theme-values,
    states
  );
}

@function rmd-states-theme-var($theme-style, $fallback: null) {
  @return rmd-theme-get-var(
    $theme-style,
    $rmd-states-theme-values,
    states,
    $fallback
  );
}

@mixin rmd-states-theme($property, $theme-style: $property, $fallback: null) {
  @include rmd-theme-apply-rmd-var(
    $property,
    $theme-style,
    $rmd-states-theme-values,
    states
  );
}

@mixin rmd-states-theme-update-var($theme-style, $value) {
  @include rmd-theme-update-rmd-var(
    $value,
    $theme-style,
    $rmd-states-theme-values,
    states
  );
}

@mixin rmd-states-surface-base {
  @include rmd-transition(standard);
  @include rmd-utils-pseudo-element;
  @include rmd-states-theme(background-color);

  transition: background-color $rmd-transition-standard-time;
}

@mixin rmd-states-pressed-styles(
  $pressed-class-name: $rmd-states-pressed-class-name,
  $css-modules: false
) {
  @include rmd-utils-optional-css-modules(
    '&#{$pressed-class-name}',
    $css-modules
  ) {
    @content;
  }
}

@mixin rmd-states-focus-shadow(
  $focus-selector: '&:focus',
  $create-pseudo: false,
  $after: false,
  $css-modules: false
) {
  $pseudo-selector: if($after, '&::after', '&::before');

  @if $create-pseudo {
    #{$pseudo-selector} {
      @include rmd-utils-pseudo-element;
    }
  }

  @if $rmd-states-use-focus-shadow {
    @include rmd-utils-keyboard-only($css-modules) {
      #{$focus-selector} {
        #{$pseudo-selector} {
          @include rmd-states-theme(box-shadow, focus-shadow);
        }
      }
    }
  }
}

@mixin rmd-states-surface(
  $focus-selector: '&:focus',
  $clickable: true,
  $no-focus-state: false,
  $css-modules: false
) {
  @include rmd-utils-hide-focus-outline;
  @include rmd-states-focus-shadow($focus-selector, $css-modules: $css-modules);
  @include rmd-utils-touch-only($css-modules) {
    &:focus,
    &:hover {
      @include rmd-states-theme-update-var(background-color, transparent);
    }
  }

  &::before {
    @include rmd-states-surface-base;
  }

  &:disabled,
  &[aria-disabled='true'] {
    @include rmd-states-theme-update-var(hover-color, transparent);
  }

  &:hover {
    @include rmd-states-theme-update-var(
      background-color,
      rmd-states-theme-var(hover-color)
    );
  }

  @if $clickable {
    &:not(:disabled):not([aria-disabled='true']):hover {
      cursor: pointer;
    }
  }

  @if $rmd-states-use-focus-background and not $no-focus-state {
    @include rmd-utils-keyboard-only($css-modules) {
      #{$focus-selector} {
        @include rmd-states-theme-update-var(
          background-color,
          rmd-states-theme-var(focus-color)
        );

        &:hover {
          @include rmd-states-theme-update-var(
            background-color,
            rmd-states-theme-var(hover-color)
          );
        }
      }
    }
  }

  @if $rmd-states-use-pressed-states-fallback {
    @include rmd-states-pressed-styles($css-modules) {
      @include rmd-states-theme-update-var(
        background-color,
        rmd-states-theme-var(pressed-color)
      );
      @include rmd-utils-keyboard-only($css-modules) {
        @include rmd-states-theme-update-var(
          background-color,
          rmd-states-theme-var(pressed-color)
        );
      }
    }
  }
}

@mixin rmd-states-surface-selected(
  $selector: '&--selected',
  $css-modules: false
) {
  #{$selector} {
    @include rmd-states-theme-update-var(
      background-color,
      rmd-states-theme-var(selected-color)
    );

    @include rmd-utils-touch-only($css-modules) {
      &:hover,
      &:focus {
        @include rmd-states-theme-update-var(
          background-color,
          rmd-states-theme-var(selected-color)
        );
      }
    }
  }
}

@mixin rmd-states-ripple-container {
  border-radius: inherit;
  bottom: 0;
  left: 0;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 0;
}

@mixin rmd-states-ripple {
  @include rmd-states-theme(background-color, ripple-background-color);

  border-radius: 50%;
  position: absolute;
  transform: scale(0);

  &--animating {
    transition: transform $rmd-states-ripple-transform-duration
        $rmd-transition-deceleration,
      opacity $rmd-states-ripple-opacity-duration $rmd-transition-acceleration;
  }

  &--scaling {
    transform: scale(1);
  }

  &--fading {
    opacity: 0;
  }
}

@mixin react-md-states {
  $ignored: background-color hover-color focus-color selected-color;
  @include rmd-theme-create-root-theme(
    $rmd-states-theme-values,
    states,
    $ignored
  );

  @if $rmd-states-use-ripple {
    .rmd-ripple-container {
      @include rmd-states-ripple-container;
    }

    .rmd-ripple {
      @include rmd-states-ripple;
    }
  }
}
$rmd-overlay-z-index: $rmd-utils-temporary-element-z-index !default;
$rmd-overlay-transition-duration: $rmd-transition-standard-time !default;
$rmd-overlay-color: rgba($rmd-black-base, 0.4) !default;
$rmd-overlay-theme-values: (
  background-color: $rmd-overlay-color,
  active-opacity: 1,
  z-index: $rmd-overlay-z-index,
) !default;

@function rmd-overlay-theme($theme-style) {
  @return rmd-theme-get-var-value(
    $theme-style,
    $rmd-overlay-theme-values,
    overlay
  );
}

@function rmd-overlay-theme-var($theme-style, $fallback: null) {
  @return rmd-theme-get-var(
    $theme-style,
    $rmd-overlay-theme-values,
    overlay,
    $fallback
  );
}

@mixin rmd-overlay-theme($property, $theme-style: $property, $fallback: null) {
  @include rmd-theme-apply-rmd-var(
    $property,
    $theme-style,
    $rmd-overlay-theme-values,
    overlay
  );
}

@mixin rmd-overlay-theme-update-var($theme-style, $value) {
  @include rmd-theme-update-rmd-var(
    $value,
    $theme-style,
    $rmd-overlay-theme-values,
    overlay
  );
}

@mixin rmd-overlay {
  @include rmd-utils-hide-focus-outline;
  @include rmd-overlay-theme(background-color);
  @include rmd-overlay-theme(z-index);
  @include rmd-transition(standard);
  @include rmd-utils-full-screen;

  opacity: 0;
  pointer-events: none;
  transition: opacity $rmd-overlay-transition-duration;

  &--active {
    @include rmd-overlay-theme(opacity, active-opacity);
  }

  &--clickable {
    cursor: pointer;
  }

  &--visible {
    pointer-events: auto;
  }
}

@mixin react-md-overlay {
  @include rmd-theme-create-root-theme($rmd-overlay-theme-values, overlay);

  .rmd-overlay {
    @include rmd-overlay;
  }
}
$rmd-tooltip-background-color: #616161 !default;
$rmd-tooltip-color: if(
  rmd-theme-tone($rmd-tooltip-background-color) == light,
  rmd-theme-var(text-primary-on-light),
  rmd-theme-var(text-primary-on-dark)
) !default;
$rmd-tooltip-max-width: 15rem !default;
$rmd-tooltip-enter-duration: $rmd-transition-standard-time !default;
$rmd-tooltip-exit-duration: $rmd-transition-standard-time !default;
$rmd-tooltip-z-index: $rmd-utils-temporary-element-z-index + 20 !default;
$rmd-tooltip-font-size: 1rem !default;
$rmd-tooltip-line-height: 1.5rem !default;
$rmd-tooltip-min-height: 2rem !default;
$rmd-tooltip-horizontal-padding: 1rem !default;
$rmd-tooltip-line-wrap-vertical-padding: 0.5625rem !default;
$rmd-tooltip-spacing: 1.5rem !default;
$rmd-tooltip-dense-font-size: 0.625rem !default;
$rmd-tooltip-dense-line-height: 0.825rem !default;
$rmd-tooltip-dense-min-height: 1.375rem !default;
$rmd-tooltip-dense-horizontal-padding: 0.5rem !default;
$rmd-tooltip-dense-line-wrap-vertical-padding: 0.375rem !default;
$rmd-tooltip-dense-spacing: 0.875rem !default;
$rmd-tooltip-border-radius: 0.25rem !default;
$rmd-tooltip-transition-distance: 0.5rem !default;
$rmd-tooltip-position-values: above below left right;
$rmd-tooltip-theme-values: (
  background-color: $rmd-tooltip-background-color,
  color: $rmd-tooltip-color,
  transition-distance: $rmd-tooltip-transition-distance,
  z-index: $rmd-tooltip-z-index,
  spacing: $rmd-tooltip-spacing,
  min-height: $rmd-tooltip-min-height,
  max-width: $rmd-tooltip-max-width,
  font-size: $rmd-tooltip-font-size,
  line-height: $rmd-tooltip-line-height,
  horizontal-padding: $rmd-tooltip-horizontal-padding,
  vertical-padding: $rmd-tooltip-line-wrap-vertical-padding,
  dense-spacing: $rmd-tooltip-dense-spacing,
  dense-min-height: $rmd-tooltip-dense-min-height,
  dense-font-size: $rmd-tooltip-dense-font-size,
  dense-line-height: $rmd-tooltip-dense-line-height,
  dense-horizontal-padding: $rmd-tooltip-dense-horizontal-padding,
  dense-vertical-padding: $rmd-tooltip-dense-line-wrap-vertical-padding,
);

@function rmd-tooltip-theme($theme-style) {
  @return rmd-theme-get-var-value(
    $theme-style,
    $rmd-tooltip-theme-values,
    tooltip
  );
}

@function rmd-tooltip-theme-var($theme-style, $fallback: null) {
  @return rmd-theme-get-var(
    $theme-style,
    $rmd-tooltip-theme-values,
    tooltip,
    $fallback
  );
}

@function rmd-tooltip-position-to-property($position) {
  $position: rmd-utils-validate(
    $rmd-tooltip-position-values,
    $position,
    'tooltip position'
  );

  @if $position == 'below' {
    @return 'bottom';
  } @else if $position == 'above' {
    @return 'top';
  }

  @return $position;
}

@function rmd-tooltip-inverse-position($position) {
  $position: rmd-utils-validate(
    $rmd-tooltip-position-values,
    $position,
    'tooltip position'
  );

  @if $position == 'left' {
    @return 'right';
  } @else if $position == 'right' {
    @return 'left';
  } @else if $position == 'below' {
    @return 'above';
  }

  @return 'below';
}

@mixin rmd-tooltip-theme($property, $theme-style: $property, $fallback: null) {
  @include rmd-theme-apply-rmd-var(
    $property,
    $theme-style,
    $rmd-tooltip-theme-values,
    tooltip
  );
}

@mixin rmd-tooltip-theme-update-var($theme-style, $value) {
  @include rmd-theme-update-rmd-var(
    $value,
    $theme-style,
    $rmd-tooltip-theme-values,
    tooltip
  );
}

@mixin rmd-tooltip-base {
  @include rmd-typography-base;
  @include rmd-typography-value(body-1, letter-spacing);
  @include rmd-tooltip-theme(background-color);
  @include rmd-tooltip-theme(color);
  @include rmd-tooltip-theme(font-size);
  @include rmd-tooltip-theme(line-height);
  @include rmd-tooltip-theme(min-height);
  @include rmd-tooltip-theme(max-width);
  @include rmd-tooltip-theme(padding-left, horizontal-padding);
  @include rmd-tooltip-theme(padding-right, horizontal-padding);
  @include rmd-tooltip-theme(z-index);

  align-items: center;
  border-radius: $rmd-tooltip-border-radius;
  display: flex;
  opacity: 0;
  pointer-events: none;
  position: fixed;
  text-transform: none;
  user-select: none;
  white-space: nowrap;
}

@mixin rmd-tooltip-line-wrap {
  @include rmd-tooltip-theme(padding-bottom, vertical-padding);
  @include rmd-tooltip-theme(padding-top, vertical-padding);

  white-space: normal;
}

@mixin rmd-tooltip-dense-theme {
  @include rmd-tooltip-theme-update-var(
    font-size,
    rmd-tooltip-theme-var(dense-font-size)
  );
  @include rmd-tooltip-theme-update-var(
    line-height,
    rmd-tooltip-theme-var(dense-line-height)
  );
  @include rmd-tooltip-theme-update-var(
    min-height,
    rmd-tooltip-theme-var(dense-min-height)
  );
  @include rmd-tooltip-theme-update-var(
    horizontal-padding,
    rmd-tooltip-theme-var(dense-horizontal-padding)
  );
  @include rmd-tooltip-theme-update-var(
    vertical-padding,
    rmd-tooltip-theme-var(dense-vertical-padding)
  );
  @include rmd-tooltip-theme-update-var(
    spacing,
    rmd-tooltip-theme-var(dense-spacing)
  );
}

@mixin rmd-tooltip {
  @include rmd-tooltip-base;

  &--line-wrap {
    @include rmd-tooltip-line-wrap;
  }

  &--dense {
    @include rmd-tooltip-dense-theme;
  }

  &--above {
    transform: translateY(
      rmd-utils-negate-var(rmd-tooltip-theme-var(transition-distance))
    );
  }

  &--below {
    transform: translateY(rmd-tooltip-theme-var(transition-distance));
  }

  &--left {
    transform: translateX(
      rmd-utils-negate-var(rmd-tooltip-theme-var(transition-distance))
    );
  }

  &--right {
    transform: translateX(rmd-tooltip-theme-var(transition-distance));
  }

  &--visible {
    opacity: 1;
    transform: none;
  }

  &--enter {
    @include rmd-transition(deceleration);

    transition: opacity $rmd-tooltip-enter-duration,
      transform $rmd-tooltip-enter-duration * 2;
  }

  &--exit {
    @include rmd-transition(acceleration);

    transition-duration: $rmd-tooltip-exit-duration;
  }

  &--exit-active {
    opacity: 0;
  }
}

@mixin react-md-tooltip {
  @include rmd-theme-create-root-theme($rmd-tooltip-theme-values, tooltip);

  .rmd-tooltip {
    @include rmd-tooltip;
  }
}
$rmd-avatar-color: $rmd-grey-100 !default;
$rmd-avatar-background-color: $rmd-grey-700 !default;
$rmd-avatar-border-color: rgba(
  if(
    rmd-theme-tone($rmd-theme-background) == light,
    $rmd-black-base,
    $rmd-white-base
  ),
  0.12
) !default;
$rmd-avatar-border-radius: 50% !default;
$rmd-avatar-size: 2.5rem !default;
$rmd-avatar-font-size: 1.5rem !default;
$rmd-avatar-line-height: rmd-typography-value(subtitle-1, line-height) !default;
$rmd-avatar-colors: (
  red: $rmd-red-a-700 $rmd-red-50,
  pink: $rmd-pink-600 $rmd-white-base,
  purple: $rmd-purple-700 $rmd-purple-100,
  deep-purple: $rmd-deep-purple-900 $rmd-deep-purple-100,
  indigo: $rmd-indigo-600 $rmd-indigo-100,
  blue: $rmd-blue-a-700 $rmd-white-base,
  light-blue: $rmd-light-blue-300 $rmd-deep-purple-900,
  cyan: $rmd-cyan-400 $rmd-teal-900,
  teal: $rmd-teal-a-400 $rmd-teal-900,
  green: $rmd-green-800 $rmd-green-50,
  light-green: $rmd-light-green-300 $rmd-green-900,
  lime: $rmd-lime-400 $rmd-teal-800,
  yellow: $rmd-yellow-a-200 $rmd-brown-500,
  amber: $rmd-amber-400 $rmd-brown-800,
  orange: $rmd-orange-600 $rmd-grey-900,
  deep-orange: $rmd-deep-orange-a-400 $rmd-grey-900,
  brown: $rmd-brown-500 $rmd-brown-50,
  grey: $rmd-grey-700 $rmd-grey-100,
  blue-grey: $rmd-blue-grey-700 $rmd-blue-grey-50,
) !default;
$rmd-avatar-theme-values: (
  background-color: $rmd-avatar-background-color,
  border-color: $rmd-avatar-border-color,
  border-radius: $rmd-avatar-border-radius,
  color: $rmd-avatar-color,
  font-size: $rmd-avatar-font-size,
  size: $rmd-avatar-size,
) !default;

@function rmd-avatar-theme($theme-style) {
  @return rmd-theme-get-var-value(
    $theme-style,
    $rmd-avatar-theme-values,
    avatar
  );
}

@function rmd-avatar-theme-var($theme-style, $fallback: null) {
  @return rmd-theme-get-var(
    $theme-style,
    $rmd-avatar-theme-values,
    avatar,
    $fallback
  );
}

@mixin rmd-avatar-theme($property, $theme-style: $property, $fallback: null) {
  @include rmd-theme-apply-rmd-var(
    $property,
    $theme-style,
    $rmd-avatar-theme-values,
    avatar
  );
}

@mixin rmd-avatar-theme-update-var($theme-style, $value) {
  @include rmd-theme-update-rmd-var(
    $value,
    $theme-style,
    $rmd-avatar-theme-values,
    avatar
  );
}

@mixin rmd-avatar-color($background-color, $color) {
  @include rmd-avatar-theme-update-var(background-color, $background-color);
  @include rmd-avatar-theme-update-var(color, $color);
}

@mixin rmd-avatar-colors($color-map: $rmd-avatar-colors) {
  @each $color-name, $values in $color-map {
    @if length($values) != 2 {
      @error 'Unable to create an avatar color because the list of values is not of length 2. The first value should be the background-color and the second should be the text color. "#{$values}"';
    }

    $class-name: 'rmd-avatar--' + $color-name;

    .#{$class-name} {
      @include rmd-avatar-color(nth($values, 1), nth($values, 2));
    }
  }
}

@mixin react-md-avatar {
  @include rmd-theme-create-root-theme($rmd-avatar-theme-values, avatar);

  .rmd-avatar {
    @include rmd-typography-base;
    @include rmd-icon-theme-update-var(color, currentColor);
    @include rmd-avatar-theme(border-radius);
    @include rmd-avatar-theme(font-size);
    @include rmd-avatar-theme(height, size);
    @include rmd-avatar-theme(width, size);
    @include rmd-avatar-theme(border-color);
    @include rmd-avatar-theme(background-color);
    @include rmd-avatar-theme(color);

    align-items: center;
    border: 1px solid;
    display: inline-flex;
    flex-shrink: 0;
    justify-content: center;
    line-height: $rmd-avatar-line-height;
    overflow: hidden;

    &__image {
      height: 100%;
      width: auto;
    }
  }

  @include rmd-avatar-colors;
}
$rmd-button-text-icon-inherit-color: true !default;
$rmd-button-text-border-radius: 0.5rem !default;
$rmd-button-text-horizontal-padding: 1rem !default;
$rmd-button-text-vertical-padding: 0 !default;
$rmd-button-text-height: 2.25rem !default;
$rmd-button-text-min-width: 4rem !default;
$rmd-button-text-icon-size: 1.125rem !default;
$rmd-button-icon-border-radius: 50% !default;
$rmd-button-icon-size: 3rem !default;
$rmd-button-outline-width: 1px !default;
$rmd-button-box-shadow: inset 0 0 0 !default;
$rmd-button-outline-color: #999 !default;
$rmd-button-background-color: transparent !default;
$rmd-button-color: rmd-theme-var(text-primary-on-background) !default;
$rmd-button-contained-elevation-transition-time: 0.15s !default;
$rmd-button-contained-resting-elevation: 2 !default;
$rmd-button-contained-pressed-elevation: 4 !default;
$rmd-button-floating-z-index: $rmd-utils-temporary-element-z-index !default;
$rmd-button-floating-margin: 1.5rem !default;
$rmd-button-circular-progress-size: rmd-icon-theme-var(size) !default;
$rmd-button-floating-positions: (
  tl: (
    left: $rmd-button-floating-margin,
    top: $rmd-button-floating-margin,
  ),
  tr: (
    right: $rmd-button-floating-margin,
    top: $rmd-button-floating-margin,
  ),
  bl: (
    bottom: $rmd-button-floating-margin,
    left: $rmd-button-floating-margin,
  ),
  br: (
    bottom: $rmd-button-floating-margin,
    right: $rmd-button-floating-margin,
  ),
) !default;
$rmd-button-theme-values: (
  text-border-radius: $rmd-button-text-border-radius,
  text-horizontal-padding: $rmd-button-text-horizontal-padding,
  text-vertical-padding: $rmd-button-text-vertical-padding,
  text-height: $rmd-button-text-height,
  text-min-width: $rmd-button-text-min-width,
  icon-border-radius: $rmd-button-icon-border-radius,
  icon-size: $rmd-button-icon-size,
  background-color: $rmd-button-background-color,
  color: $rmd-button-color,
  outline: $rmd-button-outline-color,
  outline-width: $rmd-button-outline-width,
) !default;

@function rmd-button-theme($theme-style) {
  @return rmd-theme-get-var-value(
    $theme-style,
    $rmd-button-theme-values,
    button
  );
}

@function rmd-button-theme-var($theme-style, $fallback: null) {
  @return rmd-theme-get-var(
    $theme-style,
    $rmd-button-theme-values,
    button,
    $fallback
  );
}

@mixin rmd-button-theme($property, $theme-style: $property, $fallback: null) {
  @include rmd-theme-apply-rmd-var(
    $property,
    $theme-style,
    $rmd-button-theme-values,
    button
  );
}

@mixin rmd-button-theme-update-var($theme-style, $value) {
  @include rmd-theme-update-rmd-var(
    $value,
    $theme-style,
    $rmd-button-theme-values,
    button
  );
}

@mixin rmd-button-reset {
  @include rmd-utils-hide-focus-outline;

  background-color: transparent;
  border-width: 0;
}

@mixin rmd-button-base {
  @include rmd-utils-hide-focus-outline;
  @include rmd-button-theme(background-color);
  @include rmd-button-theme(color);

  align-items: center;
  border-width: 0;
  display: inline-flex;
  flex-shrink: 0; // buttons should not shrink in flex containers by default.
  justify-content: center;
  position: relative;
}

@mixin rmd-button-text {
  @include rmd-typography(button);

  @if $rmd-icon-use-font-icons or $rmd-icon-use-svg-icons {
    @include rmd-icon-theme-update-var(size, $rmd-button-text-icon-size);
  }

  @include rmd-button-theme(border-radius, text-border-radius);
  @include rmd-button-theme(min-height, text-height);
  @include rmd-button-theme(min-width, text-min-width);

  padding: rmd-button-theme-var(text-vertical-padding)
    rmd-button-theme-var(text-horizontal-padding);
}

@mixin rmd-button-icon {
  @if not $rmd-button-text-icon-inherit-color {
    @include rmd-icon-theme-update-var(color, currentColor);
  }

  @include rmd-button-theme(border-radius, icon-border-radius);
  @include rmd-button-theme(height, icon-size);
  @include rmd-button-theme(width, icon-size);

  padding: 0;
}

@mixin rmd-button {
  @if $rmd-button-text-icon-inherit-color {
    @include rmd-icon-theme-update-var(color, currentColor);
  }
  @include rmd-button-base;
  @include rmd-states-surface;
  @if $rmd-button-circular-progress-size !=
    null and
    mixin-exists(rmd-progress-theme-update-var)
  {
    @include rmd-progress-theme-update-var(
      circular-size,
      $rmd-button-circular-progress-size
    );
  }

  &--text {
    @include rmd-button-text;
  }

  &--icon {
    @include rmd-button-icon;
  }

  &--outline {
    box-shadow: $rmd-button-box-shadow rmd-button-theme-var(outline-width)
      rmd-button-theme-var(outline);
  }

  &--contained {
    @include rmd-button-theme-update-var(
      background-color,
      rmd-theme-var(surface)
    );
    @include rmd-elevation-transition(
      $rmd-button-contained-resting-elevation,
      $rmd-button-contained-pressed-elevation,
      '&#{$rmd-states-pressed-class-name}',
      false,
      $rmd-button-contained-elevation-transition-time
    );

    @include rmd-states-theme-update-var(background-color, transparent);
  }

  &--disabled {
    @include rmd-button-theme-update-var(
      color,
      rmd-theme-var(text-disabled-on-background)
    );
    @include rmd-button-theme-update-var(
      outline,
      rmd-theme-var(text-disabled-on-background)
    );
  }

  &--primary {
    @include rmd-button-theme-update-var(
      background-color,
      rmd-theme-var(primary)
    );
    @include rmd-button-theme-update-var(color, rmd-theme-var(on-primary));
  }

  &--text-primary {
    @include rmd-button-theme-update-var(color, rmd-theme-var(primary));
    @include rmd-button-theme-update-var(outline, rmd-theme-var(primary));
  }

  &--secondary {
    @include rmd-button-theme-update-var(
      background-color,
      rmd-theme-var(secondary)
    );
    @include rmd-button-theme-update-var(color, rmd-theme-var(on-secondary));
  }

  &--text-secondary {
    @include rmd-button-theme-update-var(color, rmd-theme-var(secondary));
    @include rmd-button-theme-update-var(outline, rmd-theme-var(secondary));
  }

  &--warning {
    @include rmd-button-theme-update-var(
      background-color,
      rmd-theme-var(warning)
    );
    @include rmd-button-theme-update-var(color, rmd-theme-var(on-warning));
  }

  &--text-warning {
    @include rmd-button-theme-update-var(color, rmd-theme-var(warning));
    @include rmd-button-theme-update-var(outline, rmd-theme-var(warning));
  }

  &--error {
    @include rmd-button-theme-update-var(
      background-color,
      rmd-theme-var(error)
    );
    @include rmd-button-theme-update-var(color, rmd-theme-var(on-error));
  }

  &--text-error {
    @include rmd-button-theme-update-var(color, rmd-theme-var(error));
    @include rmd-button-theme-update-var(outline, rmd-theme-var(error));
  }
}

@mixin rmd-button-unstyled($css-modules: false) {
  @include rmd-button-reset;
  @include rmd-states-focus-shadow(
    $create-pseudo: true,
    $css-modules: $css-modules
  );

  display: inline-flex;
  position: relative;

  &:not(:disabled):hover {
    cursor: pointer;
  }
}

@mixin rmd-button-floating-positions {
  @each $name, $styles in $rmd-button-floating-positions {
    &--#{$name} {
      @each $property, $value in $styles {
        @if $property == left or $property == right {
          @include rmd-utils-rtl-auto($property, $value);
        } @else {
          #{$property}: #{$value};
        }
      }
    }
  }
}

@mixin rmd-fab {
  @include rmd-button-floating-positions;

  position: fixed;
  z-index: $rmd-button-floating-z-index;
}

@mixin react-md-button {
  @include rmd-theme-create-root-theme($rmd-button-theme-values, button);

  .rmd-button {
    @include rmd-button;
  }

  .rmd-button-unstyled {
    @include rmd-button-unstyled;
  }

  @if $rmd-button-floating-positions {
    .rmd-fab {
      @include rmd-fab;
    }
  }
}
$rmd-snackbar-margin: 1rem !default;
$rmd-snackbar-z-index: $rmd-utils-temporary-element-z-index + 10 !default;
$rmd-toast-elevation: 6 !default;
$rmd-toast-border-radius: 0.25rem !default;
$rmd-toast-light-background-color: #323232 !default;
$rmd-toast-light-color: $rmd-white-base !default;
$rmd-toast-dark-elevation-background-color: map.get(
  $rmd-theme-dark-elevation-colors,
  $rmd-toast-elevation
) !default;
$rmd-toast-dark-background-color: if(
  $rmd-theme-dark-elevation and $rmd-toast-dark-elevation-background-color,
  $rmd-toast-dark-elevation-background-color,
  $rmd-toast-light-background-color
) !default;
$rmd-toast-dark-color: $rmd-toast-light-color !default;
$rmd-toast-background-color: if(
  $rmd-theme-light,
  $rmd-toast-light-background-color,
  $rmd-toast-dark-background-color
) !default;
$rmd-toast-color: if(
  $rmd-theme-light,
  $rmd-toast-light-color,
  $rmd-toast-dark-color
) !default;
$rmd-toast-min-height: 3rem !default;
$rmd-toast-two-line-min-height: 4.25rem !default;
$rmd-toast-min-width: 21.5rem !default;
$rmd-toast-vertical-padding: 0.75rem !default;
$rmd-toast-horizontal-padding: 1rem !default;
$rmd-toast-action-margin: 0.5rem !default;
$rmd-toast-stacked-action-margin-top: 0.25rem !default;
$rmd-toast-enter-duration: $rmd-transition-standard-time !default;
$rmd-toast-exit-duration: $rmd-transition-standard-time !default;
$rmd-alert-theme-values: (
  background-color: $rmd-toast-background-color,
  color: $rmd-toast-color,
  light-background-color: $rmd-toast-light-background-color,
  light-color: $rmd-toast-light-color,
  dark-background-color: $rmd-toast-dark-background-color,
  dark-color: $rmd-toast-dark-color,
) !default;

@function rmd-alert-theme($theme-style) {
  @return rmd-theme-get-var-value($theme-style, $rmd-alert-theme-values, alert);
}

@function rmd-alert-theme-var($theme-style, $fallback: null) {
  @return rmd-theme-get-var(
    $theme-style,
    $rmd-alert-theme-values,
    alert,
    $fallback
  );
}

@mixin rmd-alert-theme($property, $theme-style: $property, $fallback: null) {
  @include rmd-theme-apply-rmd-var(
    $property,
    $theme-style,
    $rmd-alert-theme-values,
    alert
  );
}

@mixin rmd-alert-theme-update-var($theme-style, $value) {
  @include rmd-theme-update-rmd-var(
    $value,
    $theme-style,
    $rmd-alert-theme-values,
    alert
  );
}

@mixin rmd-snackbar {
  display: flex;
  justify-content: center;
  left: 0;
  margin: $rmd-snackbar-margin;

  pointer-events: none;
  position: fixed;
  right: 0;
  z-index: $rmd-snackbar-z-index;

  &--top {
    top: 0;
  }

  &--bottom {
    bottom: 0;
  }
}

@mixin rmd-toast {
  @include rmd-elevation($rmd-toast-elevation);
  @include rmd-typography(subtitle-2);
  @include rmd-alert-theme(background-color);
  @include rmd-alert-theme(color);

  align-items: center;
  border-radius: $rmd-toast-border-radius;
  display: flex;
  min-height: $rmd-toast-min-height;
  min-width: $rmd-toast-min-width;
  padding: 0 $rmd-toast-horizontal-padding;
  pointer-events: auto;
  transform-origin: center;

  &--padded {
    padding-bottom: $rmd-toast-vertical-padding;
    padding-top: $rmd-toast-vertical-padding;
  }

  &--action {
    @include rmd-utils-rtl-auto(
      padding-right,
      0,
      $rmd-toast-horizontal-padding
    );
  }

  &--two-lines {
    min-height: $rmd-toast-two-line-min-height;
  }

  &--stacked {
    flex-direction: column;
    padding-bottom: 0;
  }

  &--enter {
    @include rmd-transition(deceleration);

    opacity: 0;
    transform: scale(0);
    transition: opacity $rmd-toast-enter-duration,
      transform $rmd-toast-enter-duration;
  }

  &--enter-active {
    opacity: 1;
    transform: scale(1);
  }

  &--exit {
    @include rmd-transition(acceleration);

    opacity: 1;
    transform: scale(1);
  }

  &--exit-active {
    opacity: 0;
    transform: scale(0);
    transition: opacity $rmd-toast-exit-duration,
      transform $rmd-toast-exit-duration;
  }

  &__message {
    @include rmd-utils-rtl-auto(margin-right, auto);

    display: inline-flex;
    flex: 1 1 auto;
    flex-wrap: wrap;

    &--action {
      @include rmd-utils-rtl-auto(
        padding-right,
        $rmd-toast-horizontal-padding,
        0
      );
    }

    p {
      margin: 0;
      width: 100%;
    }
  }

  &__action {
    display: inline-flex;
    flex-shrink: 0;
    margin: 0 $rmd-toast-action-margin;

    &--stacked {
      align-self: flex-end;
      margin-bottom: $rmd-toast-action-margin;
      margin-top: $rmd-toast-stacked-action-margin-top;
    }
  }
}

@mixin react-md-alert {
  @include rmd-theme-create-root-theme($rmd-alert-theme-values, alert);

  .rmd-snackbar {
    @include rmd-snackbar;
  }

  .rmd-toast {
    @include rmd-toast;
  }
}
$rmd-app-bar-z-index: 10 !default;
$rmd-app-bar-fixed-elevation: 2 !default;
$rmd-app-bar-height: 3.5rem !default;
$rmd-app-bar-dense-height: 3rem !default;
$rmd-app-bar-prominent-height: $rmd-app-bar-height * 2 !default;
$rmd-app-bar-prominent-dense-height: $rmd-app-bar-dense-height * 2 !default;
$rmd-app-bar-keyline: 1rem !default;
$rmd-app-bar-nav-margin: $rmd-app-bar-keyline -
  (($rmd-button-icon-size - $rmd-icon-size) * 0.5);
$rmd-app-bar-title-keyline: 4.5rem !default;
$rmd-app-bar-title-nav-margin: $rmd-app-bar-title-keyline -
  $rmd-app-bar-nav-margin - $rmd-button-icon-size;
$rmd-app-bar-lr-margin: 0.25rem !default;
$rmd-app-bar-primary-background-color: rmd-theme-var(primary) !default;
$rmd-app-bar-primary-color: rmd-theme-var(on-primary) !default;
$rmd-app-bar-secondary-background-color: rmd-theme-var(secondary) !default;
$rmd-app-bar-secondary-color: rmd-theme-var(on-secondary) !default;
$rmd-app-bar-default-light-theme-background-color: $rmd-grey-100 !default;
$rmd-app-bar-default-light-theme-color: if(
  rmd-theme-tone($rmd-app-bar-default-light-theme-background-color) == light,
  $rmd-black-base,
  $rmd-white-base
) !default;
$rmd-app-bar-default-dark-theme-background-color: $rmd-grey-900 !default;
$rmd-app-bar-default-dark-theme-color: if(
  rmd-theme-tone($rmd-app-bar-default-dark-theme-background-color) == light,
  $rmd-black-base,
  $rmd-white-base
) !default;
$rmd-app-bar-default-background-color: if(
  rmd-theme-tone($rmd-theme-background) == light,
  $rmd-app-bar-default-light-theme-background-color,
  $rmd-app-bar-default-dark-theme-background-color
) !default;
$rmd-app-bar-default-color: if(
  rmd-theme-tone($rmd-app-bar-default-background-color) == light,
  $rmd-app-bar-default-light-theme-color,
  $rmd-app-bar-default-dark-theme-color
) !default;
$rmd-app-bar-theme-values: (
  background-color: transparent,
  color: rmd-theme-var(text-primary-on-background),
  primary: $rmd-app-bar-primary-background-color,
  on-primary: $rmd-app-bar-primary-color,
  secondary: $rmd-app-bar-secondary-background-color,
  on-secondary: $rmd-app-bar-secondary-color,
  default-background-color: $rmd-app-bar-default-background-color,
  default-light-background-color:
    $rmd-app-bar-default-light-theme-background-color,
  default-dark-background-color:
    $rmd-app-bar-default-dark-theme-background-color,
  default-color: $rmd-app-bar-default-color,
  default-light-color: $rmd-app-bar-default-light-theme-color,
  default-dark-color: $rmd-app-bar-default-dark-theme-color,
  height: $rmd-app-bar-height,
  dense-height: $rmd-app-bar-dense-height,
  prominent-height: $rmd-app-bar-prominent-height,
  prominent-dense-height: $rmd-app-bar-prominent-dense-height,
) !default;

@function rmd-app-bar-theme($theme-style) {
  @return rmd-theme-get-var-value(
    $theme-style,
    $rmd-app-bar-theme-values,
    app-bar
  );
}

@function rmd-app-bar-theme-var($theme-style, $fallback: null) {
  @return rmd-theme-get-var(
    $theme-style,
    $rmd-app-bar-theme-values,
    app-bar,
    $fallback
  );
}

@mixin rmd-app-bar-theme($property, $theme-style: $property, $fallback: null) {
  @include rmd-theme-apply-rmd-var(
    $property,
    $theme-style,
    $rmd-app-bar-theme-values,
    app-bar
  );
}

@mixin rmd-app-bar-theme-update-var($theme-style, $value) {
  @include rmd-theme-update-rmd-var(
    $value,
    $theme-style,
    $rmd-app-bar-theme-values,
    app-bar
  );
}

@mixin rmd-app-bar-fixed {
  $positions: top right bottom left;

  &--fixed {
    @include rmd-theme-update-var(
      surface,
      rmd-app-bar-theme-var(background-color)
    );

    left: 0;
    position: fixed;
    right: 0;
    z-index: $rmd-app-bar-z-index;
  }

  &--fixed-elevation {
    @include rmd-elevation($rmd-app-bar-fixed-elevation);
  }

  @each $position in $positions {
    &--#{$position} {
      #{$position}: 0;
    }
  }
}

@mixin rmd-app-bar-themes {
  @include rmd-app-bar-theme(background-color);
  @include rmd-app-bar-theme(color);

  &--primary {
    @include rmd-app-bar-theme-update-var(
      background-color,
      rmd-app-bar-theme-var(primary)
    );
    @include rmd-app-bar-theme-update-var(
      color,
      rmd-app-bar-theme-var(on-primary)
    );
  }

  &--secondary {
    @include rmd-app-bar-theme-update-var(
      background-color,
      rmd-app-bar-theme-var(secondary)
    );
    @include rmd-app-bar-theme-update-var(
      color,
      rmd-app-bar-theme-var(on-secondary)
    );
  }

  &--default {
    @include rmd-app-bar-theme-update-var(
      background-color,
      rmd-app-bar-theme-var(default-background-color)
    );
    @include rmd-app-bar-theme-update-var(
      color,
      rmd-app-bar-theme-var(default-color)
    );
  }
}

@mixin rmd-app-bar-nav {
  @include rmd-utils-rtl-auto-group(
    (
      margin-left: $rmd-app-bar-lr-margin,
      margin-right: $rmd-app-bar-title-nav-margin,
    )
  );

  flex-shrink: 0;

  &--inherit {
    color: inherit;
  }
}

@mixin rmd-app-bar-title {
  @include rmd-typography(headline-6);
  @include rmd-utils-rtl-auto(margin-left, $rmd-app-bar-keyline);
  @include rmd-utils-hide-focus-outline;

  flex: 1 1 auto;
  margin-bottom: 0;
  margin-top: 0;

  .rmd-app-bar__nav ~ & {
    @include rmd-utils-rtl-auto(margin-left, 0);
  }

  &--keyline {
    @include rmd-utils-rtl-auto(margin-left, $rmd-app-bar-title-keyline, auto);
  }

  &--no-wrap {
    @include rmd-typography-text-overflow-ellipsis;
  }

  &--inherit {
    color: inherit;
  }
}

@mixin rmd-app-bar-action-position($first) {
  @if $first {
    @include rmd-utils-rtl-auto(margin-left, auto);
  } @else {
    @include rmd-utils-rtl-auto(margin-right, $rmd-app-bar-lr-margin);
  }
}

@mixin rmd-app-bar-action {
  flex-shrink: 0;

  &--last {
    @include rmd-app-bar-action-position(false);
  }

  &--first {
    @include rmd-app-bar-action-position(true);
  }

  &--inherit {
    color: inherit;
  }
}

@mixin rmd-app-bar-offset($property: padding-top, $height-type: height) {
  $valid-properties: (
    padding-top padding-bottom margin-top margin-bottom top bottom
  );
  $property: rmd-utils-validate(
    $valid-properties,
    $property,
    'app bar offset property'
  );

  @include rmd-app-bar-theme($property, $height-type);
}

@mixin rmd-app-bar-offsets($property: padding-top) {
  .rmd-app-bar-offset {
    @include rmd-app-bar-offset($property, height);

    &--dense {
      @include rmd-app-bar-offset($property, dense-height);
    }

    &--prominent {
      @include rmd-app-bar-offset($property, prominent-height);
    }

    &--prominent-dense {
      @include rmd-app-bar-offset($property, prominent-dense-height);
    }
  }
}

@mixin rmd-app-bar-dense-theme {
  @include rmd-app-bar-theme-update-var(
    height,
    rmd-app-bar-theme-var(dense-height)
  );
  @include rmd-app-bar-theme-update-var(
    prominent-height,
    rmd-app-bar-theme-var(prominent-dense-height)
  );
}

@mixin react-md-app-bar {
  @include rmd-theme-create-root-theme($rmd-app-bar-theme-values, app-bar);

  .rmd-app-bar {
    @include rmd-app-bar-fixed;
    @include rmd-app-bar-themes;

    align-items: center;
    display: flex;

    flex: 0 0 auto;
    width: 100%;

    &--wrap {
      flex-wrap: wrap;
    }

    &--normal {
      @include rmd-app-bar-theme(height);
    }

    &--dense {
      @include rmd-app-bar-theme(height, dense-height);
    }

    &--prominent {
      @include rmd-app-bar-theme(height, prominent-height);
    }

    &--prominent-dense {
      @include rmd-app-bar-theme(height, prominent-dense-height);
    }

    &__nav {
      @include rmd-app-bar-nav;
    }

    &__title {
      @include rmd-app-bar-title;
    }

    &__action {
      @include rmd-app-bar-action;
    }
  }

  @include rmd-app-bar-offsets;
}
$rmd-badge-size: 1.5rem !default;
$rmd-badge-border-radius: 50% !default;
$rmd-badge-default-background-color: rgba($rmd-black-base, 0.2) !default;
$rmd-badge-default-color: if(
  rmd-theme-tone($rmd-badge-default-background-color) == light,
  $rmd-black-base,
  $rmd-white-base
) !default;
$rmd-badge-font-size: 0.625rem !default;
$rmd-badge-offset-top: 0 !default;
$rmd-badge-offset-right: 0 !default;
$rmd-badge-theme-values: (
  background-color: $rmd-badge-default-background-color,
  color: $rmd-badge-default-color,
  border-radius: $rmd-badge-border-radius,
  font-size: $rmd-badge-font-size,
  size: $rmd-badge-size,
  top: $rmd-badge-offset-top,
  right: $rmd-badge-offset-right,
) !default;

@function rmd-badge-theme($theme-style) {
  @return rmd-theme-get-var-value($theme-style, $rmd-badge-theme-values, badge);
}

@function rmd-badge-theme-var($theme-style, $fallback: null) {
  @return rmd-theme-get-var(
    $theme-style,
    $rmd-badge-theme-values,
    badge,
    $fallback
  );
}

@mixin rmd-badge-theme($property, $theme-style: $property, $fallback: null) {
  @include rmd-theme-apply-rmd-var(
    $property,
    $theme-style,
    $rmd-badge-theme-values,
    badge
  );
}

@mixin rmd-badge-theme-update-var($theme-style, $value) {
  @include rmd-theme-update-rmd-var(
    $value,
    $theme-style,
    $rmd-badge-theme-values,
    badge
  );
}

@mixin rmd-badge-container {
  display: inline-flex;
  position: relative;
}

@mixin rmd-badge {
  @include rmd-typography(body-1, (line-height font-size));
  @include rmd-badge-theme(border-radius);
  @include rmd-badge-theme(height, size);
  @include rmd-badge-theme(width, size);
  @include rmd-badge-theme(font-size);
  @include rmd-badge-theme(right);
  @include rmd-badge-theme(top);
  @include rmd-utils-rtl {
    @include rmd-badge-theme(left, right);

    right: auto;
  }

  align-items: center;
  display: inline-flex;
  justify-content: center;
  pointer-events: none; // badges are _kind_ of presentational and shouldn't trigger mouse events
  position: absolute;

  &--primary {
    @include rmd-theme(background-color, primary);
    @include rmd-theme(color, on-primary);
  }

  &--secondary {
    @include rmd-theme(background-color, secondary);
    @include rmd-theme(color, on-secondary);
  }

  &--default {
    @include rmd-badge-theme(background-color);
    @include rmd-badge-theme(color);
  }
}

@mixin react-md-badge {
  @include rmd-theme-create-root-theme($rmd-badge-theme-values, badge);

  .rmd-badge-container {
    @include rmd-badge-container;
  }

  .rmd-badge {
    @include rmd-badge;
  }
}
$rmd-card-elevation: 2 !default;
$rmd-card-light-background-color: rmd-theme-var(surface) !default;
$rmd-card-dark-elevation-background-color: map.get(
  $rmd-theme-dark-elevation-colors,
  $rmd-card-elevation
);
$rmd-card-dark-background-color: if(
  $rmd-theme-dark-elevation and $rmd-card-dark-elevation-background-color,
  $rmd-card-dark-elevation-background-color,
  rmd-theme-var(surface)
) !default;
$rmd-card-background-color: if(
  $rmd-theme-light,
  $rmd-card-light-background-color,
  $rmd-card-dark-background-color
) !default;
$rmd-card-color: rmd-theme-var(on-surface) !default;
$rmd-card-secondary-color: if(
  rmd-theme-tone($rmd-theme-surface) == light,
  rmd-theme-var(text-primary-on-light),
  rmd-theme-var(text-primary-on-dark)
) !default;
$rmd-card-base-elevation: 1 !default;
$rmd-card-raised-elevation: 8 !default;
$rmd-card-border-radius: 0.25rem !default;
$rmd-card-header-padding: 1rem !default;
$rmd-card-header-padding-top: 1.5rem !default;
$rmd-card-header-spacing: 1rem !default;
$rmd-card-content-padding: 1rem !default;
$rmd-card-content-padding-extra: 1.5rem !default;
$rmd-card-actions-padding: 0.5rem !default;
$rmd-card-border-color: rmd-divider-theme-var(background-color) !default;
$rmd-card-border-width: $rmd-divider-size !default;
$rmd-card-theme-values: (
  background-color: $rmd-card-background-color,
  color: $rmd-card-color,
  secondary-color: $rmd-card-secondary-color,
) !default;

@function rmd-card-theme($theme-style) {
  @return rmd-theme-get-var-value($theme-style, $rmd-card-theme-values, card);
}

@function rmd-card-theme-var($theme-style, $fallback: null) {
  @return rmd-theme-get-var(
    $theme-style,
    $rmd-card-theme-values,
    card,
    $fallback
  );
}

@mixin rmd-card-theme($property, $theme-style: $property, $fallback: null) {
  @include rmd-theme-apply-rmd-var(
    $property,
    $theme-style,
    $rmd-card-theme-values,
    card
  );
}

@mixin rmd-card-theme-update-var($theme-style, $value) {
  @include rmd-theme-update-rmd-var(
    $value,
    $theme-style,
    $rmd-card-theme-values,
    card
  );
}

@mixin rmd-card {
  @include rmd-theme-update-var(
    background,
    rmd-card-theme-var(background-color)
  );
  @include rmd-theme-update-var(
    text-primary-on-background,
    rmd-card-theme-var(color)
  );
  @include rmd-theme-update-var(
    text-secondary-on-background,
    rmd-card-theme-var(secondary-color)
  );
  @include rmd-card-theme(background-color);
  @include rmd-card-theme(color);
  @include rmd-utils-mouse-only {
    &--raiseable,
    &--raisable {
      @include rmd-elevation-transition(
        $rmd-card-base-elevation,
        $rmd-card-raised-elevation,
        '&:hover'
      );
    }
  }

  border-radius: $rmd-card-border-radius;
  display: inline-block;

  &--shadowed {
    @include rmd-elevation($rmd-card-elevation);
  }

  &--bordered {
    border: $rmd-card-border-width solid $rmd-card-border-color;
  }

  &--full-width {
    display: block;
    width: 100%;
  }

  &--no-wrap {
    @include rmd-typography-text-overflow-ellipsis;
  }
}

@mixin rmd-card-header {
  @include rmd-icon-theme-update-var(text-spacing, $rmd-card-header-spacing);

  display: flex;
  padding: $rmd-card-header-padding;
  padding-top: $rmd-card-header-padding-top;

  &--top {
    align-items: flex-start;
  }

  &--center {
    align-items: center;
  }

  &--bottom {
    align-items: flex-end;
  }
}

@mixin rmd-card-title {
  @include rmd-typography(headline-5);

  margin-bottom: 0;
  margin-top: 0;

  &--small {
    @include rmd-typography-value(
      subtitle-1,
      line-height,
      font-size,
      letter-spacing
    );
  }
}

@mixin rmd-card-subtitle {
  @include rmd-typography(subtitle-2);

  margin-bottom: 0;
  margin-top: 0;

  &--secondary {
    @include rmd-theme(color, text-secondary-on-background);
  }
}

@mixin rmd-card-content {
  &--secondary {
    @include rmd-theme(color, text-secondary-on-background);
  }

  &--remove-margin p {
    margin-top: 0;

    &:last-child {
      margin-bottom: 0;
    }
  }

  &--padded {
    padding: $rmd-card-content-padding;
  }

  &--extra-padding:last-child {
    padding-bottom: $rmd-card-content-padding-extra;
  }
}

@mixin rmd-card-actions {
  align-items: center;
  display: flex;
  justify-content: flex-end;
  padding: $rmd-card-actions-padding;

  &--start {
    justify-content: flex-start;
  }

  &--center {
    justify-content: center;
  }
}

@mixin react-md-card {
  @include rmd-theme-create-root-theme($rmd-card-theme-values, card);

  .rmd-card {
    @include rmd-card;

    &__header {
      @include rmd-card-header;
    }

    &__header-addon {
      flex-shrink: 0;
    }

    &__header-content {
      flex-grow: 1;
      min-width: 0;
    }

    &__title {
      @include rmd-card-title;
    }

    &__subtitle {
      @include rmd-card-subtitle;
    }

    &__content {
      @include rmd-card-content;
    }

    &__actions {
      @include rmd-card-actions;
    }
  }
}
$rmd-chip-disable-focus-background-color: $rmd-states-use-focus-shadow !default;
$rmd-chip-height: 2rem !default;
$rmd-chip-border-radius: 1rem !default;
$rmd-chip-small-spacing: 0.25rem !default;
$rmd-chip-medium-spacing: 0.5rem !default;
$rmd-chip-large-spacing: 0.75rem !default;
$rmd-chip-icon-size: 1.125rem !default;
$rmd-chip-avatar-size: 1.5rem !default;
$rmd-chip-progress-size: $rmd-chip-icon-size !default;
$rmd-chip-progress-width: 12 !default;
$rmd-chip-themed-background-color: rmd-theme-get-swatch(
  $rmd-theme-primary,
  300,
  false,
  color.adjust($rmd-theme-primary, $lightness: -20%),
  rmd-chip-themed-background-color
) !default;
$rmd-chip-themed-color: if(
  rmd-theme-tone($rmd-chip-themed-background-color) == light,
  $rmd-black-base,
  $rmd-white-base
) !default;
$rmd-chip-solid-light-background-color: $rmd-grey-300 !default;
$rmd-chip-solid-light-color: if(
  rmd-theme-tone($rmd-chip-solid-light-background-color) == light,
  $rmd-black-base,
  $rmd-white-base
) !default;
$rmd-chip-solid-light-disabled-background-color: $rmd-grey-100 !default;
$rmd-chip-solid-dark-background-color: if(
  $rmd-theme-dark-elevation,
  map.get($rmd-theme-dark-elevation-colors, 12),
  $rmd-grey-900
) !default;
$rmd-chip-solid-dark-color: if(
  rmd-theme-tone($rmd-chip-solid-dark-background-color) == light,
  $rmd-black-base,
  $rmd-white-base
) !default;
$rmd-chip-solid-dark-disabled-background-color: color.adjust(
  $rmd-grey-900,
  $lightness: 2%
) !default;
$rmd-chip-solid-background-color: if(
  $rmd-theme-light,
  $rmd-chip-solid-light-background-color,
  $rmd-chip-solid-dark-background-color
) !default;
$rmd-chip-solid-color: if(
  $rmd-theme-light,
  $rmd-chip-solid-light-color,
  $rmd-chip-solid-dark-color
) !default;
$rmd-chip-solid-disabled-background-color: if(
  $rmd-theme-light,
  $rmd-chip-solid-light-disabled-background-color,
  $rmd-chip-solid-dark-disabled-background-color
) !default;
$rmd-chip-outline-light-background-color: $rmd-theme-light-surface !default;
$rmd-chip-outline-light-color: if(
  rmd-theme-tone($rmd-chip-outline-light-background-color) == light,
  $rmd-black-base,
  $rmd-white-base
) !default;
$rmd-chip-outline-dark-background-color: if(
  $rmd-theme-dark-elevation,
  map.get($rmd-theme-dark-elevation-colors, 8),
  $rmd-theme-dark-surface
) !default;
$rmd-chip-outline-dark-color: if(
  rmd-theme-tone($rmd-chip-outline-dark-background-color) == light,
  $rmd-black-base,
  $rmd-white-base
) !default;
$rmd-chip-outline-background-color: if(
  $rmd-theme-light,
  $rmd-chip-outline-light-background-color,
  $rmd-chip-outline-dark-background-color
) !default;
$rmd-chip-outline-color: if(
  $rmd-theme-light,
  $rmd-chip-outline-light-color,
  $rmd-chip-outline-dark-color
) !default;
$rmd-chip-outline-border-color: $rmd-grey-300 !default;
$rmd-chip-transition-duration: $rmd-transition-standard-time !default;
$rmd-chip-box-shadow: inset 0 0 0 1px !default;
$rmd-chip-theme-values: (
  height: $rmd-chip-height,
  border-radius: $rmd-chip-border-radius,
  themed-background-color: $rmd-chip-themed-background-color,
  themed-color: $rmd-chip-themed-color,
  solid-background-color: $rmd-chip-solid-background-color,
  solid-color: $rmd-chip-solid-color,
  solid-disabled: $rmd-chip-solid-disabled-background-color,
  outline-background-color: $rmd-chip-outline-background-color,
  outline-color: $rmd-chip-outline-color,
  outline-border-color: $rmd-chip-outline-border-color,
  small-spacing: $rmd-chip-small-spacing,
  medium-spacing: $rmd-chip-medium-spacing,
  large-spacing: $rmd-chip-large-spacing,
) !default;

@function rmd-chip-theme($theme-style) {
  @return rmd-theme-get-var-value($theme-style, $rmd-chip-theme-values, chip);
}

@function rmd-chip-theme-var($theme-style, $fallback: null) {
  @return rmd-theme-get-var(
    $theme-style,
    $rmd-chip-theme-values,
    chip,
    $fallback
  );
}

@mixin rmd-chip-theme($property, $theme-style: $property, $fallback: null) {
  @include rmd-theme-apply-rmd-var(
    $property,
    $theme-style,
    $rmd-chip-theme-values,
    chip
  );
}

@mixin rmd-chip-theme-update-var($theme-style, $value) {
  @include rmd-theme-update-rmd-var(
    $value,
    $theme-style,
    $rmd-chip-theme-values,
    chip
  );
}

@mixin rmd-chip {
  @include rmd-utils-hide-focus-outline;
  @include rmd-states-surface(
    $no-focus-state: $rmd-chip-disable-focus-background-color
  );
  @include rmd-states-surface-selected;
  @include rmd-typography(body-2);
  @include rmd-chip-theme(height);
  @include rmd-chip-theme(border-radius);
  @include rmd-chip-theme(padding-left, large-spacing);
  @include rmd-chip-theme(padding-right, large-spacing);

  @include rmd-icon-theme-update-var(size, $rmd-chip-icon-size);
  @if mixin-exists(rmd-avatar-theme-update-var) {
    @include rmd-avatar-theme-update-var(size, $rmd-chip-avatar-size);
  }
  @if mixin-exists(rmd-progress-theme-update-var) {
    @include rmd-progress-theme-update-var(
      circular-size,
      $rmd-chip-progress-size
    );
    @include rmd-progress-theme-update-var(
      circular-width,
      $rmd-chip-progress-width
    );
  }

  align-items: center;
  border-width: 0;
  display: inline-flex;
  flex-shrink: 0;
  max-width: 100%;
  position: relative;

  &--noninteractable {
    @include rmd-states-theme-update-var(hover-color, transparent);

    &:hover {
      cursor: initial !important;
    }
  }

  &--solid {
    @include rmd-elevation-transition(
      0,
      4,
      '&#{$rmd-states-pressed-class-name}',
      false,
      $rmd-chip-transition-duration
    );
    @include rmd-chip-theme(background-color, solid-background-color);
    @include rmd-chip-theme(color, solid-color);
  }

  &--outline {
    @include rmd-elevation-transition(
      0,
      8,
      '&#{$rmd-states-pressed-class-name}',
      false,
      $rmd-chip-transition-duration
    );
    @include rmd-chip-theme(background-color, outline-background-color);
    @include rmd-chip-theme(color, outline-color);

    box-shadow: $rmd-chip-box-shadow rmd-chip-theme-var(outline-border-color);
  }

  &--themed {
    @include rmd-chip-theme(background-color, themed-background-color);
    @include rmd-chip-theme(color, themed-color);
    @include rmd-icon-theme-update-var(color, currentColor);
  }

  &--disabled {
    @include rmd-theme(color, text-disabled-on-background);
    @include rmd-icon-theme-update-var(color, currentColor);
  }

  &--solid-disabled {
    @include rmd-chip-theme(background-color, solid-disabled);
  }

  &--leading-icon {
    @include rmd-chip-theme(padding-left, small-spacing);
    @include rmd-utils-rtl {
      @include rmd-chip-theme(padding-left, large-spacing);
      @include rmd-chip-theme(padding-right, small-spacing);
    }
  }

  &--trailing-icon {
    @include rmd-chip-theme(padding-right, medium-spacing);
    @include rmd-utils-rtl {
      @include rmd-chip-theme(padding-left, medium-spacing);
      @include rmd-chip-theme(padding-right, large-spacing);
    }
  }

  &--surrounded {
    @include rmd-chip-theme(padding-left, small-spacing);
    @include rmd-chip-theme(padding-right, medium-spacing);
    @include rmd-utils-rtl {
      @include rmd-chip-theme(padding-left, medium-spacing);
      @include rmd-chip-theme(padding-right, small-spacing);
    }
  }

  &__content {
    @include rmd-typography-text-overflow-ellipsis;

    flex: 1 1 auto;
  }

  &__selected-icon {
    @include rmd-transition(standard);

    max-width: 0;
    overflow: hidden;
    transition: max-width $rmd-transition-standard-time;

    &--visible {
      @include rmd-icon-theme(max-width, size);
    }
  }
}

@mixin react-md-chip {
  @include rmd-theme-create-root-theme($rmd-chip-theme-values, chip);

  .rmd-chip {
    @include rmd-chip;
  }
}
$rmd-link-transition-time: $rmd-transition-standard-time !default;
$rmd-link-color: $rmd-blue-500 !default;
$rmd-link-visited-color: $rmd-blue-600 !default;
$rmd-link-hover-color: $rmd-blue-400 !default;
$rmd-link-skip-z-index: 10000 !default;
$rmd-link-skip-styles: (
  color: rmd-theme-var(on-primary),
  left: 50%,
  padding: 0.25rem 1rem,
  top: 0.25rem,
  transform: translateX(-50%),
) !default;
$rmd-link-skip-active-styles: (
  outline: 0.25rem dashed $rmd-black-base,
) !default;
$rmd-link-theme-values: (
  color: $rmd-link-color,
  hover-color: $rmd-link-hover-color,
  visited-color: $rmd-link-visited-color,
) !default;

@function rmd-link-theme($theme-style) {
  @return rmd-theme-get-var-value($theme-style, $rmd-link-theme-values, link);
}

@function rmd-link-theme-var($theme-style, $fallback: null) {
  @return rmd-theme-get-var(
    $theme-style,
    $rmd-link-theme-values,
    link,
    $fallback
  );
}

@mixin rmd-link-theme($property, $theme-style: $property, $fallback: null) {
  @include rmd-theme-apply-rmd-var(
    $property,
    $theme-style,
    $rmd-link-theme-values,
    link
  );
}

@mixin rmd-link-theme-update-var($theme-style, $value) {
  @include rmd-theme-update-rmd-var(
    $value,
    $theme-style,
    $rmd-link-theme-values,
    link
  );
}

@mixin rmd-link {
  @include rmd-link-theme(color);
  @include rmd-typography-base;

  @if $rmd-states-use-focus-shadow {
    @include rmd-utils-keyboard-only {
      &:focus {
        outline: $rmd-states-focus-shadow-width solid
          $rmd-states-focus-shadow-color;
      }
    }
  } @else {
    @include rmd-utils-hide-focus-outline;
  }

  transition: color $rmd-link-transition-time;

  &--flex-centered {
    align-items: center;
    display: inline-flex;
  }

  &:visited {
    @include rmd-link-theme(color, visited-color);
  }

  &:hover {
    @include rmd-link-theme(color, hover-color);
  }
}

@mixin rmd-link-skip {
  @include rmd-typography-value(
    headline-6,
    font-size,
    font-weight,
    letter-spacing
  );
  @include rmd-utils-sr-only(true, null);
  @include rmd-utils-hide-focus-outline;

  z-index: $rmd-link-skip-z-index;

  &--styled {
    @include rmd-utils-map-to-styles($rmd-link-skip-styles);

    @include rmd-utils-keyboard-only {
      &:focus,
      &:active {
        @include rmd-utils-map-to-styles($rmd-link-skip-active-styles);
      }
    }
  }
}

@mixin react-md-link {
  @include rmd-theme-create-root-theme($rmd-link-theme-values, link);

  .rmd-link {
    @include rmd-link;
  }

  .rmd-link-skip {
    @include rmd-link-skip;
  }
}
$rmd-list-vertical-padding: 0.5rem !default;
$rmd-list-dense-vertical-padding: 0.25rem !default;
$rmd-list-horizontal-padding: 0 !default;
$rmd-list-dense-horizontal-padding: $rmd-list-horizontal-padding !default;
$rmd-list-line-height: rmd-typography-value(body-1, line-height) !default;
$rmd-list-font-size: rmd-typography-value(subtitle-1, font-size) !default;
$rmd-list-dense-font-size: 0.8125rem !default;
$rmd-list-item-vertical-padding: 0.5rem !default;
$rmd-list-item-horizontal-padding: 1rem !default;
$rmd-list-item-height: 3rem !default;
$rmd-list-item-dense-height: 2.5rem !default;
$rmd-list-item-medium-height: 3.5rem !default;
$rmd-list-item-dense-medium-height: 3rem !default;
$rmd-list-item-large-height: 4rem !default;
$rmd-list-item-dense-large-height: 3.5rem !default;
$rmd-list-item-extra-large-height: 4.5rem !default;
$rmd-list-item-dense-extra-large-height: 4rem !default;
$rmd-list-item-three-line-height: 5.5rem !default;
$rmd-list-item-dense-three-line-height: 5rem !default;
$rmd-list-item-secondary-text-line-height: 1.42857 !default;
$rmd-list-item-secondary-text-three-line-max-height: 3rem !default;
$rmd-list-item-dense-secondary-text-three-line-max-height: 2.25rem !default;
$rmd-list-item-text-keyline: 4.5rem !default;
$rmd-list-item-media-size: 3.5rem !default;
$rmd-list-item-media-large-size: 6.25rem !default;
$rmd-list-item-media-spacing: 1rem !default;
$rmd-list-item-disabled-opacity: 0.5 !default;
$rmd-list-theme-values: (
  vertical-padding: $rmd-list-vertical-padding,
  horizontal-padding: $rmd-list-horizontal-padding,
  font-size: $rmd-list-font-size,
  text-keyline: $rmd-list-item-text-keyline,
  item-height: $rmd-list-item-height,
  item-medium-height: $rmd-list-item-medium-height,
  item-large-height: $rmd-list-item-large-height,
  item-extra-large-height: $rmd-list-item-extra-large-height,
  item-three-line-height: $rmd-list-item-three-line-height,
  item-vertical-padding: $rmd-list-item-vertical-padding,
  item-horizontal-padding: $rmd-list-item-horizontal-padding,
  item-secondary-three-line-height:
    $rmd-list-item-secondary-text-three-line-max-height,
  dense-font-size: $rmd-list-dense-font-size,
  dense-vertical-padding: $rmd-list-dense-vertical-padding,
  dense-horizontal-padding: $rmd-list-dense-horizontal-padding,
  dense-item-height: $rmd-list-item-dense-height,
  dense-item-medium-height: $rmd-list-item-dense-medium-height,
  dense-item-large-height: $rmd-list-item-dense-large-height,
  dense-item-extra-large-height: $rmd-list-item-dense-extra-large-height,
  dense-item-three-line-height: $rmd-list-item-dense-three-line-height,
  dense-item-secondary-three-line-height:
    $rmd-list-item-dense-secondary-text-three-line-max-height,
  media-size: $rmd-list-item-media-size,
  media-spacing: $rmd-list-item-media-spacing,
  media-large-size: $rmd-list-item-media-large-size,
) !default;

@function rmd-list-theme($theme-style) {
  @return rmd-theme-get-var-value($theme-style, $rmd-list-theme-values, list);
}

@function rmd-list-theme-var($theme-style, $fallback: null) {
  @return rmd-theme-get-var(
    $theme-style,
    $rmd-list-theme-values,
    list,
    $fallback
  );
}

@mixin rmd-list-theme($property, $theme-style: $property, $fallback: null) {
  @include rmd-theme-apply-rmd-var(
    $property,
    $theme-style,
    $rmd-list-theme-values,
    list
  );
}

@mixin rmd-list-theme-update-var($theme-style, $value) {
  @include rmd-theme-update-rmd-var(
    $value,
    $theme-style,
    $rmd-list-theme-values,
    list
  );
}

@mixin rmd-list-unstyled($padding: 0, $margin: 0) {
  list-style-type: none;
  margin: $margin;
  padding: $padding;
}

@mixin rmd-list-dense-theme {
  @include rmd-list-theme-update-var(
    font-size,
    rmd-list-theme-var(dense-font-size)
  );
  @include rmd-list-theme-update-var(
    vertical-padding,
    rmd-list-theme-var(dense-vertical-padding)
  );
  @include rmd-list-theme-update-var(
    horizontal-padding,
    rmd-list-theme-var(dense-horizontal-padding)
  );
}

@mixin rmd-list {
  @include rmd-typography(subtitle-1);
  @include rmd-divider-theme-update-var(
    inset,
    rmd-list-theme-var(text-keyline)
  );
  @include rmd-list-unstyled(null);
  @include rmd-list-theme(font-size);

  line-height: $rmd-list-line-height;
  padding: rmd-list-theme-var(vertical-padding)
    rmd-list-theme-var(horizontal-padding);

  &--horizontal {
    display: flex;
    flex-wrap: nowrap;
    padding: rmd-list-theme-var(horizontal-padding)
      rmd-list-theme-var(vertical-padding);
  }

  &--dense {
    @include rmd-list-dense-theme;
  }
}

@mixin rmd-list-item-base {
  @include rmd-list-theme(min-height, item-height);

  align-items: center;
  display: flex;
  padding: rmd-list-theme-var(item-vertical-padding)
    rmd-list-theme-var(item-horizontal-padding);
  position: relative;
}

@mixin rmd-list-item-dense-theme {
  @include rmd-list-theme-update-var(
    item-height,
    rmd-list-theme-var(dense-item-height)
  );
  @include rmd-list-theme-update-var(
    item-medium-height,
    rmd-list-theme-var(dense-item-medium-height)
  );
  @include rmd-list-theme-update-var(
    item-large-height,
    rmd-list-theme-var(dense-item-large-height)
  );
  @include rmd-list-theme-update-var(
    item-extra-large-height,
    rmd-list-theme-var(dense-item-extra-large-height)
  );
  @include rmd-list-theme-update-var(
    item-three-line-height,
    rmd-list-theme-var(dense-item-three-line-height)
  );
  @include rmd-list-theme-update-var(
    item-secondary-three-line-height,
    rmd-list-theme-var(dense-item-secondary-three-line-height)
  );
}

@mixin rmd-list-item-addon-spacing($subtract) {
  $keyline: rmd-list-theme-var(text-keyline);
  $padding: rmd-list-theme-var(item-horizontal-padding);

  @include rmd-icon-theme-update-var(
    text-spacing,
    calc(#{$keyline} - #{$padding} - #{$subtract})
  );
}

@mixin rmd-list-item {
  @include rmd-list-item-base;

  &--clickable {
    @include rmd-utils-hide-focus-outline;
    @include rmd-states-surface;
  }

  &--disabled {
    pointer-events: none;
  }

  &--disabled-color {
    @include rmd-theme(color, text-disabled-on-background);
    @include rmd-theme-update-var(
      text-secondary-on-background,
      rmd-theme-var(text-disabled-on-background)
    );
  }

  &--disabled-opacity {
    opacity: $rmd-list-item-disabled-opacity;
  }

  &--link {
    color: inherit;
    text-decoration: none;
  }

  &--medium {
    @include rmd-list-theme-update-var(
      item-height,
      rmd-list-theme-var(item-medium-height)
    );
  }

  &--large {
    @include rmd-list-theme-update-var(
      item-height,
      rmd-list-theme-var(item-large-height)
    );
  }

  &--extra-large {
    @include rmd-list-theme-update-var(
      item-height,
      rmd-list-theme-var(item-extra-large-height)
    );
  }

  &--three-lines {
    @include rmd-list-theme-update-var(
      item-height,
      rmd-list-theme-var(item-three-line-height)
    );

    .rmd-list-item__text--secondary {
      @include rmd-typography-line-clamp;
      @include rmd-list-theme(max-height, item-secondary-three-line-height);

      line-height: $rmd-list-item-secondary-text-line-height;
      white-space: normal;
    }
  }

  &--dense {
    @include rmd-list-item-dense-theme;
  }

  &__text {
    @include rmd-typography-text-overflow-ellipsis;
    @include rmd-utils-rtl {
      margin-left: auto;
    }

    display: block;
    flex-grow: 1;

    z-index: 1;

    &--secondary {
      @include rmd-theme(color, text-secondary-on-background);
    }
  }

  &__addon {
    flex-shrink: 0;

    &--top {
      align-self: flex-start;
    }

    &--bottom {
      align-self: flex-end;
    }

    &--before {
      @include rmd-list-item-addon-spacing(rmd-icon-theme-var(size));
    }

    &--avatar-before {
      @include rmd-list-item-addon-spacing(rmd-avatar-theme-var(size));
    }

    &--media {
      @include rmd-icon-theme-update-var(
        text-spacing,
        rmd-list-theme-var(media-spacing)
      );
      @include rmd-list-theme(width, media-size);
    }

    &--media-large {
      @include rmd-list-theme-update-var(
        media-size,
        rmd-list-theme-var(media-large-size)
      );
    }
  }
}

@mixin rmd-list-subheader {
  @include rmd-typography(subtitle-2);
  @include rmd-theme(color, text-secondary-on-background);
  @include rmd-list-item-base;

  &--inset {
    @include rmd-list-theme(padding-left, text-keyline);
    @include rmd-utils-rtl {
      @include rmd-list-theme(padding-left, item-horizontal-padding);
      @include rmd-list-theme(padding-right, text-keyline);
    }
  }
}

@mixin react-md-list {
  @include rmd-theme-create-root-theme($rmd-list-theme-values, list);

  .rmd-list {
    @include rmd-list;
  }

  .rmd-list-unstyled {
    @include rmd-list-unstyled;
  }

  .rmd-list-item {
    @include rmd-list-item;
  }

  .rmd-list-subheader {
    @include rmd-list-subheader;
  }
}
$rmd-expansion-panel-spacing: 1rem !default;
$rmd-expansion-panel-header-padding: 1rem !default;
$rmd-expansion-panel-expander-icon-spacing: $rmd-icon-spacing-with-text !default;
$rmd-expansion-panel-theme-values: (
  spacing: $rmd-expansion-panel-spacing,
  padding: $rmd-expansion-panel-header-padding,
  icon-spacing: $rmd-expansion-panel-expander-icon-spacing,
) !default;

@function rmd-expansion-panel-theme($theme-style) {
  @return rmd-theme-get-var-value(
    $theme-style,
    $rmd-expansion-panel-theme-values,
    expansion-panel
  );
}

@function rmd-expansion-panel-theme-var($theme-style, $fallback: null) {
  @return rmd-theme-get-var(
    $theme-style,
    $rmd-expansion-panel-theme-values,
    expansion-panel,
    $fallback
  );
}

@mixin rmd-expansion-panel-theme(
  $property,
  $theme-style: $property,
  $fallback: null
) {
  @include rmd-theme-apply-rmd-var(
    $property,
    $theme-style,
    $rmd-expansion-panel-theme-values,
    expansion-panel
  );
}

@mixin rmd-expansion-panel-theme-update-var($theme-style, $value) {
  @include rmd-theme-update-rmd-var(
    $value,
    $theme-style,
    $rmd-expansion-panel-theme-values,
    expansion-panel
  );
}

@mixin rmd-expansion-panel {
  &--margin-top {
    @include rmd-expansion-panel-theme(margin-top, spacing);
  }

  &__header {
    @include rmd-typography(subtitle-1);
    @include rmd-expansion-panel-theme(padding, padding);

    align-items: center;
    color: inherit;
    width: 100%;
  }

  &__icon {
    @include rmd-expansion-panel-theme(padding-left, icon-spacing);
    @include rmd-utils-rtl {
      @include rmd-expansion-panel-theme(padding-right, icon-spacing);

      margin-left: 0;
      margin-right: auto;
      padding-left: 0;
    }

    align-items: center;
    display: inline-flex;
    justify-content: center;
    margin-left: auto;
  }
}

@mixin react-md-expansion-panel {
  @include rmd-theme-create-root-theme(
    $rmd-expansion-panel-theme-values,
    expansion-panel
  );

  .rmd-expansion-panel {
    @include rmd-expansion-panel;
  }
}
$rmd-dialog-elevation: 16 !default;
$rmd-dialog-light-background-color: rmd-theme-var(surface) !default;
$rmd-dialog-dark-elevation-background-color: map.get(
  $rmd-theme-dark-elevation-colors,
  $rmd-dialog-elevation
) !default;
$rmd-dialog-dark-background-color: if(
  $rmd-theme-dark-elevation and $rmd-dialog-dark-elevation-background-color,
  $rmd-dialog-dark-elevation-background-color,
  rmd-theme-var(surface)
) !default;
$rmd-dialog-background-color: if(
  $rmd-theme-light,
  $rmd-dialog-light-background-color,
  $rmd-dialog-dark-background-color
) !default;
$rmd-dialog-z-index: $rmd-utils-temporary-element-z-index !default;
$rmd-dialog-vertical-margin: 1.5rem !default;
$rmd-dialog-horizontal-margin: 2.5rem !default;
$rmd-dialog-header-padding: 1.5rem !default;
$rmd-dialog-header-padding-bottom: 1.25rem !default;
$rmd-dialog-content-padding: 1.5rem !default;
$rmd-dialog-footer-padding: 0.5rem !default;
$rmd-dialog-transition-distance: 1.875rem !default;
$rmd-dialog-enter-duration: 0.2s !default;
$rmd-dialog-leave-duration: 0.15s !default;
$rmd-dialog-min-width: 17.5rem !default;
$rmd-dialog-theme-values: (
  background-color: $rmd-dialog-background-color,
  horizontal-margin: $rmd-dialog-horizontal-margin,
  vertical-margin: $rmd-dialog-vertical-margin,
  min-width: $rmd-dialog-min-width,
  header-padding: $rmd-dialog-header-padding,
  header-padding-bottom: $rmd-dialog-header-padding-bottom,
  content-padding: $rmd-dialog-content-padding,
  footer-padding: $rmd-dialog-footer-padding,
  z-index: $rmd-dialog-z-index,
) !default;

@function rmd-dialog-theme($theme-style) {
  @return rmd-theme-get-var-value(
    $theme-style,
    $rmd-dialog-theme-values,
    dialog
  );
}

@function rmd-dialog-theme-var($theme-style, $fallback: null) {
  @return rmd-theme-get-var(
    $theme-style,
    $rmd-dialog-theme-values,
    dialog,
    $fallback
  );
}

@mixin rmd-dialog-theme($property, $theme-style: $property, $fallback: null) {
  @include rmd-theme-apply-rmd-var(
    $property,
    $theme-style,
    $rmd-dialog-theme-values,
    dialog
  );
}

@mixin rmd-dialog-theme-update-var($theme-style, $value) {
  @include rmd-theme-update-rmd-var(
    $value,
    $theme-style,
    $rmd-dialog-theme-values,
    dialog
  );
}

@mixin rmd-dialog {
  @include rmd-elevation($rmd-dialog-elevation);
  @include rmd-dialog-theme(background-color);
  @include rmd-theme-update-var(
    background,
    rmd-dialog-theme-var(background-color)
  );
  @include rmd-theme(color, text-primary-on-background);
  @include rmd-utils-hide-focus-outline;
  @if mixin-exists(rmd-app-bar-theme-update-var) {
    @include rmd-app-bar-theme-update-var(
      color,
      rmd-theme-var(text-primary-on-background)
    );
  }

  display: flex;
  flex-direction: column;
  max-height: 100%;
  max-width: 100%;

  &--centered {
    @include rmd-dialog-theme(min-width);

    pointer-events: auto;
  }

  &--full-page {
    @include rmd-utils-full-screen;
    @include rmd-utils-scroll;
    @include rmd-dialog-theme(z-index);
  }

  &--enter {
    transform: translateY($rmd-dialog-transition-distance);
  }

  &--enter-active {
    @include rmd-transition(deceleration);

    transform: translateY(0);
    transition: transform $rmd-dialog-enter-duration;
  }

  &--exit {
    @include rmd-transition(acceleration);

    opacity: 1;
    transform: translateY(0);
    transition: transform $rmd-dialog-leave-duration,
      opacity $rmd-dialog-leave-duration;
  }

  &--exit-active {
    opacity: 0;
    transform: translateY($rmd-dialog-transition-distance);
  }

  &--fixed {
    @include rmd-dialog-theme(z-index);
  }

  &--fixed-enter {
    transform: scale(0);
  }

  &--fixed-enter-active {
    @include rmd-transition(deceleration);

    transform: scale(1);
    transition: transform $rmd-dialog-enter-duration;
  }

  &--fixed-exit {
    @include rmd-transition(deceleration);

    opacity: 1;
    transform: scale(1);
    transition: transform $rmd-dialog-leave-duration,
      opacity $rmd-dialog-leave-duration;
  }

  &--fixed-exit-active {
    opacity: 0;
    transform: scale(0);
  }
}

@mixin rmd-dialog-header {
  @include rmd-dialog-theme(padding, header-padding);
  @include rmd-dialog-theme(padding-bottom, header-padding-bottom);

  align-items: center;
  display: flex;
  flex: 0 0 auto;
}

@mixin rmd-dialog-title {
  @include rmd-typography(headline-4);

  margin: 0;
}

@mixin rmd-dialog-content {
  @include rmd-utils-scroll;

  flex: 1 1 auto;

  &--padded {
    @include rmd-dialog-theme(padding, content-padding);
  }
}

@mixin rmd-dialog-footer {
  @include rmd-dialog-theme(padding, footer-padding);

  flex: 0 0 auto;

  &--flex {
    display: flex;
  }

  &--flex-v {
    flex-direction: column;
  }

  &--start {
    justify-content: flex-start;
  }

  &--between {
    justify-content: space-between;
  }

  &--end {
    justify-content: flex-end;
  }
}

@mixin rmd-dialog-container {
  @include rmd-utils-full-screen;
  @include rmd-dialog-theme(z-index);

  align-items: center;
  display: flex;
  justify-content: center;
  margin: rmd-dialog-theme-var(vertical-margin)
    rmd-dialog-theme-var(horizontal-margin);
  pointer-events: none;
}

@mixin rmd-dialog-overlay {
  @include rmd-dialog-theme(z-index);
}

@mixin react-md-dialog {
  @include rmd-theme-create-root-theme($rmd-dialog-theme-values, dialog);

  .rmd-dialog-container {
    @include rmd-dialog-container;
  }

  .rmd-dialog-overlay {
    @include rmd-dialog-overlay;
  }

  .rmd-dialog {
    @include rmd-dialog;

    &__header {
      @include rmd-dialog-header;
    }

    &__content {
      @include rmd-dialog-content;
    }

    &__footer {
      @include rmd-dialog-footer;
    }

    &__title {
      @include rmd-dialog-title;
    }
  }
}
$rmd-sheet-z-index: 5 !default;
$rmd-sheet-raised-z-index: $rmd-utils-temporary-element-z-index !default;
$rmd-sheet-overlay-z-index: $rmd-overlay-z-index !default;
$rmd-sheet-elevation: 2 !default;
$rmd-sheet-raised-elevation: 16 !default;
$rmd-sheet-light-background-color: rmd-dialog-theme-var(
  background-color
) !default;
$rmd-sheet-dark-elevation-background-color: map.get(
  $rmd-theme-dark-elevation-colors,
  $rmd-sheet-elevation
) !default;
$rmd-sheet-dark-background-color: if(
  $rmd-theme-dark-elevation,
  $rmd-sheet-dark-elevation-background-color,
  rmd-dialog-theme-var(background-color)
) !default;
$rmd-sheet-background-color: if(
  $rmd-theme-light,
  $rmd-sheet-light-background-color,
  $rmd-sheet-dark-background-color
) !default;
$rmd-sheet-raised-light-background-color: rmd-dialog-theme-var(
  background-color
) !default;
$rmd-sheet-raised-dark-elevation-background-color: map.get(
  $rmd-theme-dark-elevation-colors,
  $rmd-sheet-raised-elevation
) !default;
$rmd-sheet-raised-dark-background-color: if(
  $rmd-theme-dark-elevation,
  $rmd-sheet-raised-dark-elevation-background-color,
  rmd-dialog-theme-var(background-color)
) !default;
$rmd-sheet-raised-background-color: if(
  $rmd-theme-light,
  $rmd-sheet-raised-light-background-color,
  $rmd-sheet-raised-dark-background-color
) !default;
$rmd-sheet-enter-duration: $rmd-transition-enter-duration !default;
$rmd-sheet-leave-duration: $rmd-transition-leave-duration !default;
$rmd-sheet-touch-margin: 3.5rem !default;
$rmd-sheet-touch-width: calc(100vw - #{$rmd-sheet-touch-margin}) !default;
$rmd-sheet-static-width: 16rem !default;
$rmd-sheet-max-height: 100% !default;
$rmd-sheet-touchable-max-height: calc(
  100% - #{$rmd-sheet-touch-margin}
) !default;
$rmd-sheet-recommended-min-height: 3.5rem !default;
$rmd-sheet-recommended-max-height: 50% !default;
$rmd-sheet-positions: top right bottom left;
$rmd-sheet-enabled-positions: $rmd-sheet-positions !default;
$rmd-sheet-theme-values: (
  background-color: $rmd-sheet-background-color,
  raised-background-color: $rmd-sheet-raised-background-color,
  touch-width: $rmd-sheet-touch-width,
  static-width: $rmd-sheet-static-width,
  touchable-max-height: $rmd-sheet-touchable-max-height,
  max-height: null,
  height: null,
  width: null,
  transform-offscreen: null,
) !default;

@function rmd-sheet-theme($theme-style) {
  @return rmd-theme-get-var-value($theme-style, $rmd-sheet-theme-values, sheet);
}

@function rmd-sheet-theme-var($theme-style, $fallback: null) {
  @return rmd-theme-get-var(
    $theme-style,
    $rmd-sheet-theme-values,
    sheet,
    $fallback
  );
}

@mixin rmd-sheet-theme($property, $theme-style: $property, $fallback: null) {
  @include rmd-theme-apply-rmd-var(
    $property,
    $theme-style,
    $rmd-sheet-theme-values,
    sheet
  );
}

@mixin rmd-sheet-theme-update-var($theme-style, $value) {
  @include rmd-theme-update-rmd-var(
    $value,
    $theme-style,
    $rmd-sheet-theme-values,
    sheet
  );
}

@mixin rmd-sheet-positions {
  @if $rmd-sheet-enabled-positions {
    @each $position in $rmd-sheet-enabled-positions {
      $position: rmd-utils-validate(
        $rmd-sheet-positions,
        $position,
        'sheet position'
      );

      &--#{$position} {
        @if $position == left {
          @include rmd-sheet-theme-update-var(
            transform-offscreen,
            translate3d(-100%, 0, 0)
          );
          @include rmd-utils-rtl-auto(left, 0) {
            @include rmd-sheet-theme-update-var(
              transform-offscreen,
              translate3d(100%, 0, 0)
            );
          }
        } @else if $position == right {
          @include rmd-sheet-theme-update-var(
            transform-offscreen,
            translate3d(100%, 0, 0)
          );
          @include rmd-utils-rtl-auto(right, 0) {
            @include rmd-sheet-theme-update-var(
              transform-offscreen,
              translate3d(-100%, 0, 0)
            );
          }
        } @else if $position == top {
          @include rmd-sheet-theme-update-var(
            transform-offscreen,
            translate3d(0, -100%, 0)
          );

          top: 0;
        } @else if $position == bottom {
          @include rmd-sheet-theme-update-var(
            transform-offscreen,
            translate3d(0, 100%, 0)
          );

          bottom: 0;
        }
      }
    }
  }
}

@mixin rmd-sheet {
  @if $rmd-theme-dark-elevation {
    @include rmd-sheet-theme(background-color);
  }

  @include rmd-elevation($rmd-sheet-elevation);
  @include rmd-utils-scroll;
  @include rmd-sheet-positions;
  @include rmd-sheet-theme(max-height);
  @include rmd-sheet-theme(height);
  @include rmd-sheet-theme(width);

  position: fixed;
  z-index: $rmd-sheet-z-index;

  &--raised {
    @if $rmd-theme-dark-elevation {
      @include rmd-sheet-theme-update-var(
        background-color,
        rmd-sheet-theme-var(raised-background-color)
      );
    }
    @include rmd-elevation($rmd-sheet-raised-elevation);

    z-index: $rmd-sheet-raised-z-index;
  }

  &--horizontal {
    bottom: 0;
    top: 0;
  }

  &--touch-width {
    @include rmd-sheet-theme-update-var(
      width,
      rmd-sheet-theme-var(touch-width)
    );
  }

  &--static-width {
    @include rmd-sheet-theme-update-var(
      width,
      rmd-sheet-theme-var(static-width)
    );
  }

  &--media-width {
    @include rmd-sheet-theme-update-var(
      width,
      rmd-sheet-theme-var(touch-width)
    );
    @include rmd-utils-tablet-media {
      @include rmd-sheet-theme-update-var(
        width,
        rmd-sheet-theme-var(static-width)
      );
    }
  }

  &--vertical {
    left: 0;
    right: 0;
  }

  &--viewport-height {
    @include rmd-sheet-theme-update-var(max-height, $rmd-sheet-max-height);
  }

  &--touchable-height {
    @include rmd-sheet-theme-update-var(
      max-height,
      rmd-sheet-theme-var(touchable-max-height)
    );
  }

  &--recommended-height {
    max-height: $rmd-sheet-recommended-max-height;
    min-height: $rmd-sheet-recommended-min-height;
  }

  &--offscreen {
    @include rmd-sheet-theme(transform, transform-offscreen);
  }

  &--hidden {
    box-shadow: none;
  }

  &--visible {
    transform: translate3d(0, 0, 0);
  }

  &--enter {
    @include rmd-transition(deceleration);

    transition: transform $rmd-sheet-enter-duration;
  }

  &--exit {
    @include rmd-transition(acceleration);

    transition: transform $rmd-sheet-enter-duration;
  }
}

@mixin react-md-sheet {
  $exclude: if(
    $rmd-theme-dark-elevation,
    (),
    (background-color, raised-background-color)
  );

  @include rmd-theme-create-root-theme(
    $rmd-sheet-theme-values,
    sheet,
    $exclude
  );

  .rmd-sheet {
    @include rmd-sheet;
  }

  .rmd-sheet-overlay {
    z-index: $rmd-sheet-overlay-z-index;
  }
}
$rmd-menu-elevation: 8 !default;
$rmd-menu-light-background-color: rmd-theme-var(surface) !default;
$rmd-menu-dark-elevation-background-color: map.get(
  $rmd-theme-dark-elevation-colors,
  $rmd-menu-elevation
) !default;
$rmd-menu-dark-background-color: if(
  $rmd-theme-dark-elevation and $rmd-menu-dark-elevation-background-color,
  $rmd-menu-dark-elevation-background-color,
  rmd-theme-var(surface)
) !default;
$rmd-menu-background-color: if(
  $rmd-theme-light,
  $rmd-menu-light-background-color,
  $rmd-menu-dark-background-color
) !default;
$rmd-menu-color: rmd-theme-var(on-surface) !default;
$rmd-menu-z-index: $rmd-utils-temporary-element-z-index !default;
$rmd-menu-min-width: 7rem !default;
$rmd-menu-icon-spacing: 1rem !default;
$rmd-menu-theme-values: (
  background-color: $rmd-menu-background-color,
  color: $rmd-menu-color,
  min-width: $rmd-menu-min-width,
  icon-spacing: $rmd-menu-icon-spacing,
  z-index: $rmd-menu-z-index,
) !default;

@function rmd-menu-theme($theme-style) {
  @return rmd-theme-get-var-value($theme-style, $rmd-menu-theme-values, menu);
}

@function rmd-menu-theme-var($theme-style, $fallback: null) {
  @return rmd-theme-get-var(
    $theme-style,
    $rmd-menu-theme-values,
    menu,
    $fallback
  );
}

@mixin rmd-menu-theme($property, $theme-style: $property, $fallback: null) {
  @include rmd-theme-apply-rmd-var(
    $property,
    $theme-style,
    $rmd-menu-theme-values,
    menu
  );
}

@mixin rmd-menu-theme-update-var($theme-style, $value) {
  @include rmd-theme-update-rmd-var(
    $value,
    $theme-style,
    $rmd-menu-theme-values,
    menu
  );
}

@mixin rmd-menu {
  @include rmd-utils-hide-focus-outline;
  @include rmd-utils-scroll;

  &--elevated {
    @include rmd-elevation($rmd-menu-elevation);
    @include rmd-menu-theme(background-color);
    @include rmd-menu-theme(color);
    @include rmd-menu-theme(min-width);
    @include rmd-menu-theme(z-index);
  }

  &--horizontal {
    display: flex;
    flex-wrap: nowrap;
  }
}

@mixin react-md-menu {
  @include rmd-theme-create-root-theme($rmd-menu-theme-values, menu);

  .rmd-menu {
    @include rmd-menu;
  }

  .rmd-menu-item {
    @include rmd-icon-theme-update-var(
      text-spacing,
      #{rmd-menu-theme-var(icon-spacing)}
    );
  }
}
$rmd-progress-include-linear: true !default;
$rmd-progress-include-circular: true !default;
$rmd-progress-color: $rmd-theme-primary !default;
$rmd-progress-background-color: rmd-theme-get-swatch(
  $rmd-theme-primary,
  300,
  false,
  rgba($rmd-theme-primary, 0.4),
  rmd-progress-background-color
) !default;
$rmd-linear-progress-size: 0.25rem !default;
$rmd-linear-progress-transition-duration: 2.4s !default;
$rmd-linear-progress-short-animation-delay: 0.75s !default;
$rmd-linear-progress-styles: (
  0%: (
    left: -35%,
    right: 100%,
  ),
  60%: (
    left: 100%,
    right: -90%,
  ),
  100%: (
    left: 100%,
    right: -90%,
  ),
) !default;
$rmd-linear-progress-short-styles: (
  0%: (
    left: -200%,
    right: 100%,
  ),
  40%: (
    left: 107%,
    right: -8%,
  ),
  100%: (
    left: 107%,
    right: -8%,
  ),
) !default;
$rmd-linear-progress-reverse-styles: (
  0%: (
    left: 100%,
    right: -35%,
  ),
  60%: (
    left: -90%,
    right: 100%,
  ),
  100%: (
    left: -90%,
    right: 100%,
  ),
) !default;
$rmd-linear-progress-reverse-short-styles: (
  0%: (
    left: 100%,
    right: -200%,
  ),
  40%: (
    left: -8%,
    right: 107%,
  ),
  100%: (
    left: -8%,
    right: 107%,
  ),
) !default;
$rmd-linear-progress-vertical-styles: (
  0%: (
    bottom: -35%,
    top: 100%,
  ),
  60%: (
    bottom: 100%,
    top: -90%,
  ),
  100%: (
    bottom: 100%,
    top: -90%,
  ),
) !default;
$rmd-linear-progress-vertical-short-styles: (
  0%: (
    bottom: -200%,
    top: 100%,
  ),
  40%: (
    bottom: 107%,
    top: -8%,
  ),
  100%: (
    bottom: 107%,
    top: -8%,
  ),
) !default;
$rmd-linear-progress-vertical-reverse-styles: (
  0%: (
    bottom: 100%,
    top: -35%,
  ),
  60%: (
    bottom: -90%,
    top: 100%,
  ),
  100%: (
    bottom: -90%,
    top: 100%,
  ),
) !default;
$rmd-linear-progress-vertical-reverse-short-styles: (
  0%: (
    bottom: 100%,
    top: -200%,
  ),
  40%: (
    bottom: -8%,
    top: 107%,
  ),
  100%: (
    bottom: -8%,
    top: 107%,
  ),
) !default;
$rmd-circular-progress-size: 3rem !default;
$rmd-circular-progress-small-size: 1.5rem !default;
$rmd-circular-progress-stroke-width: 6 !default;
$rmd-circular-progress-dasharray: 187 !default;
$rmd-circular-progress-transition-duration: 2.4s !default;
$rmd-circular-progress-start-offset: $rmd-circular-progress-dasharray !default;
$rmd-circular-progress-end-offset: $rmd-circular-progress-dasharray * 0.25 !default;
$rmd-circular-progress-rotate-styles: (
  0%: (
    transform: rotate(0deg),
  ),
  50%: (
    transform: rotate(135deg),
  ),
  75%: (
    transform: rotate(450deg),
  ),
  100%: (
    transform: rotate(720deg),
  ),
) !default;
$rmd-circular-progress-dash-styles: (
  0%: (
    stroke-dashoffset: $rmd-circular-progress-start-offset,
  ),
  50%: (
    stroke-dashoffset: $rmd-circular-progress-end-offset,
  ),
  100%: (
    stroke-dashoffset: $rmd-circular-progress-start-offset,
  ),
) !default;
$rmd-progress-theme-values: (
  color: $rmd-progress-color,
  background-color: $rmd-progress-background-color,
  linear-size: $rmd-linear-progress-size,
  circular-size: $rmd-circular-progress-size,
  circular-width: $rmd-circular-progress-stroke-width,
) !default;

@function rmd-progress-theme($theme-style) {
  @return rmd-theme-get-var-value(
    $theme-style,
    $rmd-progress-theme-values,
    progress
  );
}

@function rmd-progress-theme-var($theme-style, $fallback: null) {
  @return rmd-theme-get-var(
    $theme-style,
    $rmd-progress-theme-values,
    progress,
    $fallback
  );
}

@mixin rmd-progress-theme($property, $theme-style: $property, $fallback: null) {
  @include rmd-theme-apply-rmd-var(
    $property,
    $theme-style,
    $rmd-progress-theme-values,
    progress
  );
}

@mixin rmd-progress-theme-update-var($theme-style, $value) {
  @include rmd-theme-update-rmd-var(
    $value,
    $theme-style,
    $rmd-progress-theme-values,
    progress
  );
}

@mixin rmd-progress-animation($styles) {
  @if $styles != null {
    @each $percentage, $style in $styles {
      #{$percentage} {
        @include rmd-utils-map-to-styles($style);
      }
    }
  }
}

@mixin rmd-linear-progress-bar-styles {
  @include rmd-progress-theme(background-color, color);
  @include rmd-progress-theme(height, linear-size);

  position: absolute;
  z-index: 0;
}

@mixin rmd-linear-progress-bar {
  &--horizontal {
    @include rmd-utils-rtl-auto(left, 0);
  }

  &--horizontal-reverse {
    @include rmd-utils-rtl-auto-group(
      (
        left: auto,
        right: 0,
      )
    );
  }

  &--vertical {
    bottom: 0;
    left: 0;
    right: 0;
  }

  &--vertical-reverse {
    bottom: auto;
    top: 0;
  }

  &--determinate {
    @include rmd-linear-progress-bar-styles;
  }

  &--animate {
    @include rmd-transition(sharp);

    transition: width $rmd-transition-standard-time,
      height $rmd-transition-standard-time;
  }

  &--indeterminate {
    &::before,
    &::after {
      @include rmd-linear-progress-bar-styles;
      @include rmd-transition(standard, true);
      @include rmd-utils-rtl-auto-group(
        (
          left: 0,
          right: 100%,
        )
      );

      animation-duration: $rmd-linear-progress-transition-duration;
      animation-iteration-count: infinite;
      content: '';
      will-change: left, right;
    }

    &::before {
      animation-name: rmd-progress-bar;
    }

    &::after {
      animation-delay: $rmd-linear-progress-short-animation-delay;
      animation-name: rmd-progress-bar-short;
    }
  }

  &--indeterminate-reverse {
    &::before {
      animation-name: rmd-progress-bar-reverse;
    }

    &::after {
      animation-name: rmd-progress-bar-reverse-short;
    }
  }

  &--indeterminate-vertical {
    &::before,
    &::after {
      @include rmd-progress-theme(width, linear-size);

      height: auto;
      left: 0;
      right: 0;
    }

    &::before {
      animation-name: rmd-progress-bar-vertical;
    }

    &::after {
      animation-name: rmd-progress-bar-vertical-short;
    }
  }

  &--indeterminate-vertical-reverse {
    &::before {
      animation-name: rmd-progress-bar-vertical-reverse;
    }

    &::after {
      animation-name: rmd-progress-bar-vertical-reverse-short;
    }
  }
}

@mixin rmd-linear-progress {
  .rmd-linear-progress {
    @include rmd-progress-theme(background-color);
    @include rmd-progress-theme(height, linear-size);

    display: block;
    overflow: hidden;
    position: relative;
    width: 100%;

    &--vertical {
      @include rmd-progress-theme(width, linear-size);

      display: inline-block;
      height: auto;
    }

    &__bar {
      @include rmd-linear-progress-bar;
    }
  }

  @keyframes rmd-progress-bar {
    @include rmd-progress-animation($rmd-linear-progress-styles);
  }

  @keyframes rmd-progress-bar-short {
    @include rmd-progress-animation($rmd-linear-progress-short-styles);
  }

  @keyframes rmd-progress-bar-reverse {
    @include rmd-progress-animation($rmd-linear-progress-reverse-styles);
  }

  @keyframes rmd-progress-bar-reverse-short {
    @include rmd-progress-animation($rmd-linear-progress-reverse-short-styles);
  }

  @keyframes rmd-progress-bar-vertical {
    @include rmd-progress-animation($rmd-linear-progress-vertical-styles);
  }

  @keyframes rmd-progress-bar-vertical-short {
    @include rmd-progress-animation($rmd-linear-progress-vertical-short-styles);
  }

  @keyframes rmd-progress-bar-vertical-reverse {
    @include rmd-progress-animation(
      $rmd-linear-progress-vertical-reverse-styles
    );
  }

  @keyframes rmd-progress-bar-vertical-reverse-short {
    @include rmd-progress-animation(
      $rmd-linear-progress-vertical-reverse-short-styles
    );
  }
}

@mixin rmd-circular-progress {
  .rmd-circular-progress {
    @include rmd-progress-theme(height, circular-size);
    @include rmd-progress-theme(width, circular-size);

    align-items: center;
    border-radius: 50%;
    display: inline-flex;
    justify-content: center;
    overflow: hidden;

    &--centered {
      display: flex;
      margin-left: auto;
      margin-right: auto;
    }

    @if $rmd-circular-progress-small-size != null {
      &--small {
        @include rmd-progress-theme-update-var(
          circular-size,
          $rmd-circular-progress-small-size
        );
      }
    }

    &__svg {
      height: inherit;
      width: inherit;

      &--animate {
        @include rmd-transition(standard);

        transition: transform 0.1s;
      }

      &--indeterminate {
        animation: rmd-progress-rotate
          $rmd-circular-progress-transition-duration linear infinite;
      }
    }

    &__circle {
      @include rmd-progress-theme(stroke, color);
      @include rmd-progress-theme(stroke-width, circular-width);

      fill: none;
      stroke-dasharray: $rmd-circular-progress-dasharray;
      stroke-linecap: round;

      &--animate {
        @include rmd-transition(standard);

        transition: stroke-dashoffset 0.1s;
      }

      &--indeterminate {
        animation: rmd-circular-progress-size
          $rmd-circular-progress-transition-duration ease-in-out infinite;
      }
    }
  }

  @keyframes rmd-progress-rotate {
    @include rmd-progress-animation($rmd-circular-progress-rotate-styles);
  }

  @keyframes rmd-circular-progress-size {
    @include rmd-progress-animation($rmd-circular-progress-dash-styles);
  }
}

@mixin react-md-progress {
  @include rmd-theme-create-root-theme($rmd-progress-theme-values, progress);

  @if $rmd-progress-include-linear {
    @include rmd-linear-progress;
  }

  @if $rmd-progress-include-circular {
    @include rmd-circular-progress;
  }
}
$rmd-tree-max-depth: 3 !default;
$rmd-tree-item-padding-incrementor: $rmd-list-item-horizontal-padding * 1.5 !default;
$rmd-tree-item-padding-base: $rmd-list-item-text-keyline !default;
$rmd-tree-item-focused-styles: () !default;
$rmd-tree-item-keyboard-focused-styles: (
  box-shadow: inset 0 0 0 2px $rmd-blue-500,
) !default;
$rmd-tree-theme-values: (
  incrementor: $rmd-tree-item-padding-incrementor,
  base-padding: $rmd-tree-item-padding-base,
) !default;

@function rmd-tree-theme($theme-style) {
  @return rmd-theme-get-var-value($theme-style, $rmd-tree-theme-values, tree);
}

@function rmd-tree-theme-var($theme-style, $fallback: null) {
  @return rmd-theme-get-var(
    $theme-style,
    $rmd-tree-theme-values,
    tree,
    $fallback
  );
}

@mixin rmd-tree-theme($property, $theme-style: $property, $fallback: null) {
  @include rmd-theme-apply-rmd-var(
    $property,
    $theme-style,
    $rmd-tree-theme-values,
    tree
  );
}

@mixin rmd-tree-theme-update-var($theme-style, $value) {
  @include rmd-theme-update-rmd-var(
    $value,
    $theme-style,
    $rmd-tree-theme-values,
    tree
  );
}

@mixin rmd-tree-depths(
  $selector-prefix: '',
  $min: 1,
  $max: $rmd-tree-max-depth,
  $incrementor: $rmd-tree-item-padding-incrementor,
  $base-padding: $rmd-tree-item-padding-base
) {
  @if $min < 1 {
    @error 'Invalid min value: \'#{$min}\'! The min must be a number greater than 0.';
  }

  @if $max < $min {
    @error 'Invalid max value: \'#{$max}\'! The max must be a number greater than the min value: \'#{$min}\'';
  }

  $index: $min;
  @while $index < $max {
    @include rmd-tree-item-at-depth(
      $index,
      $selector-prefix,
      $incrementor,
      $base-padding
    );

    $index: $index + 1;
  }
}

@mixin rmd-tree-item-at-depth(
  $depth,
  $selector-prefix: '',
  $incrementor: $rmd-tree-item-padding-incrementor,
  $base: $rmd-tree-item-padding-base
) {
  $selector: '#{$selector-prefix}[aria-level="#{$depth + 1}"].rmd-tree-item__content, #{$selector-prefix}[aria-level="#{$depth + 1}"] > .rmd-tree-item__content';
  $padding: (($depth - 1) * $incrementor) + $base;

  #{$selector} {
    @include rmd-utils-rtl-auto(
      padding-left,
      $padding,
      $rmd-list-item-horizontal-padding
    );
  }
}

@mixin rmd-tree {
  @include rmd-tree-depths;
  @include rmd-utils-hide-focus-outline;
  @include rmd-utils-scroll;

  height: 100%;
  width: 100%;
}

@mixin rmd-tree-item {
  @include rmd-utils-hide-focus-outline;

  list-style: none;

  &__content {
    @include rmd-list-item;
    @include rmd-states-surface-selected;

    &--focused {
      @include rmd-utils-map-to-styles($rmd-tree-item-focused-styles);
      @include rmd-utils-keyboard-only {
        @include rmd-utils-map-to-styles(
          $rmd-tree-item-keyboard-focused-styles
        );
      }
    }
  }
}

@mixin rmd-tree-group {
  background-color: inherit;
  color: inherit;
  font-size: inherit;
  line-height: inherit;

  padding-bottom: 0;
  padding-top: 0;
}

@mixin react-md-tree {
  @include rmd-theme-create-root-theme($rmd-tree-theme-values, tree);

  .rmd-tree {
    @include rmd-tree;
  }

  .rmd-tree-item {
    @include rmd-tree-item;
  }

  .rmd-tree-group {
    @include rmd-tree-group;
  }

  .rmd-tree-item__rotator-icon {
    @include rmd-icon-theme-update-var(rotate-to, rotate(90deg));
  }
}
$rmd-table-light-border-color: #e0e0e0 !default;
$rmd-table-dark-border-color: #2f2f2f !default;
$rmd-table-border-color: if(
  $rmd-theme-light,
  $rmd-table-light-border-color,
  $rmd-table-dark-border-color
) !default;
$rmd-table-cell-horizontal-padding: 1rem !default;
$rmd-table-cell-vertical-padding: 0.375rem !default;
$rmd-table-cell-sticky-position: 0 !default;
$rmd-table-cell-sticky-z-index: 2 !default;
$rmd-table-cell-height: 3.25rem !default;
$rmd-table-cell-dense-height: 2rem !default;
$rmd-table-cell-color: rmd-theme-var(text-primary-on-background) !default;
$rmd-table-cell-horizontal-alignments: (center right) !default;
$rmd-table-cell-vertical-alignments: (top bottom) !default;
$rmd-table-header-cell-height: 3.5rem !default;
$rmd-table-header-cell-dense-height: 2.125rem !default;
$rmd-table-header-cell-color: $rmd-table-cell-color !default;
$rmd-table-header-sticky-position: 0 !default;
$rmd-table-row-hover-color: rgba($rmd-black-base, 0.12) !default;
$rmd-table-row-selected-color: rmd-states-theme-var(selected-color) !default;
$rmd-table-footer-sticky-position: 0 !default;
$rmd-table-checkbox-padding: 0.5rem !default;
$rmd-table-theme-values: (
  border-color: $rmd-table-border-color,
  cell-color: $rmd-table-cell-color,
  cell-h-padding: $rmd-table-cell-horizontal-padding,
  cell-v-padding: $rmd-table-cell-vertical-padding,
  cell-height: $rmd-table-cell-height,
  cell-dense-height: $rmd-table-cell-dense-height,
  hover-color: $rmd-table-row-hover-color,
  selected-color: $rmd-table-row-selected-color,
  sticky-header: $rmd-table-header-sticky-position,
  sticky-cell: $rmd-table-cell-sticky-position,
  sticky-footer: $rmd-table-footer-sticky-position,
) !default;

@function rmd-table-theme($theme-style) {
  @return rmd-theme-get-var-value($theme-style, $rmd-table-theme-values, table);
}

@function rmd-table-theme-var($theme-style, $fallback: null) {
  @return rmd-theme-get-var(
    $theme-style,
    $rmd-table-theme-values,
    table,
    $fallback
  );
}

@mixin rmd-table-theme($property, $theme-style: $property, $fallback: null) {
  @include rmd-theme-apply-rmd-var(
    $property,
    $theme-style,
    $rmd-table-theme-values,
    table
  );
}

@mixin rmd-table-theme-update-var($theme-style, $value) {
  @include rmd-theme-update-rmd-var(
    $value,
    $theme-style,
    $rmd-table-theme-values,
    table
  );
}

@mixin rmd-table {
  border-collapse: collapse;
  max-width: 100%;

  &--dense {
    @include rmd-table-theme-update-var(
      cell-height,
      rmd-table-theme-var(cell-dense-height)
    );
  }

  &--full-width {
    width: 100%;
  }
}

@mixin rmd-thead {
  @if $rmd-table-cell-height != $rmd-table-header-cell-height {
    @include rmd-table-theme-update-var(
      cell-height,
      $rmd-table-header-cell-height
    );
  }

  @if $rmd-table-cell-dense-height != $rmd-table-header-cell-dense-height {
    .rmd-table--dense & {
      @include rmd-table-theme-update-var(
        cell-height,
        $rmd-table-header-cell-dense-height
      );
    }
  }
}

@mixin rmd-table-cell-horizontal-alignments {
  @each $alignment in $rmd-table-cell-horizontal-alignments {
    &--#{$alignment} {
      @include rmd-utils-rtl {
        @if $alignment == left {
          text-align: right;
        } @else if $alignment == right {
          text-align: left;
        }
      }

      text-align: $alignment;
    }
  }
}

@mixin rmd-table-cell-vertical-alignments {
  @if $rmd-table-cell-vertical-alignments {
    @each $alignment in $rmd-table-cell-vertical-alignments {
      &--#{$alignment} {
        vertical-align: $alignment;
      }
    }

    &--vertical {
      @include rmd-table-theme(padding-top, cell-v-padding);
      @include rmd-table-theme(padding-bottom, cell-v-padding);
    }
  }
}

@mixin rmd-table-cell {
  @include rmd-typography(body-2);
  @include rmd-table-theme(color, cell-color);
  @include rmd-table-theme(height, cell-height);
  @include rmd-table-theme(padding-left, cell-h-padding);
  @include rmd-table-theme(padding-right, cell-h-padding);
  @include rmd-table-cell-vertical-alignments;

  &--header {
    @if $rmd-table-cell-color != $rmd-table-header-cell-color {
      @include rmd-table-theme-update-var(
        cell-color,
        $rmd-table-header-cell-color
      );
    }
    @include rmd-typography-value(
      subtitle-2,
      font-weight,
      letter-spacing,
      line-height
    );
    @include rmd-utils-rtl {
      text-align: right;
    }

    text-align: left;
  }

  @include rmd-table-cell-horizontal-alignments;

  &--grow {
    width: 100%;
  }

  &--no-wrap {
    @include rmd-typography-text-overflow-ellipsis;
  }

  &--checkbox {
    @include rmd-table-theme-update-var(
      cell-h-padding,
      $rmd-table-checkbox-padding
    );
  }

  &--sticky {
    @include rmd-theme(background-color, background);
    @include rmd-utils-mouse-only {
      &::after {
        @include rmd-transition(standard);

        transition: background-color $rmd-transition-standard-time;
      }
    }

    border: inherit;
    position: sticky;
    will-change: transform;
    z-index: $rmd-table-cell-sticky-z-index;

    &::after {
      @include rmd-utils-full-screen(absolute);

      border: inherit;
      content: '';
      pointer-events: none;
    }
  }

  &--sticky-header {
    @include rmd-table-theme(top, sticky-header);
  }

  &--sticky-cell {
    @include rmd-utils-rtl {
      @include rmd-table-theme(right, sticky-cell);

      left: auto;
    }
    @include rmd-table-theme(left, sticky-cell);
  }

  &--sticky-above {
    z-index: $rmd-table-cell-sticky-z-index + 1;
  }

  &--sticky-footer {
    @include rmd-table-theme(bottom, sticky-footer);
  }

  &--padded {
    @include rmd-table-theme(padding-bottom, cell-v-padding);
    @include rmd-table-theme(padding-top, cell-v-padding);
  }

  &--no-padding {
    padding: 0;
  }

  &__child {
    @include rmd-table-theme(padding-left, cell-h-padding);
    @include rmd-table-theme(padding-right, cell-h-padding);

    align-items: center;
    color: inherit;
    font: inherit;
    height: 100%;
    width: 100%;

    @each $alignment in $rmd-table-cell-horizontal-alignments {
      &--#{$alignment} {
        @include rmd-utils-rtl {
          @if $alignment == left {
            justify-content: right;
          } @else if $alignment == right {
            justify-content: left;
          }
        }

        @if $alignment != left {
          justify-content: $alignment;
        }
      }
    }
  }
}

@mixin rmd-table-row {
  &--selected {
    @include rmd-table-theme(background-color, selected-color);

    .rmd-table-cell--sticky-cell::after {
      @include rmd-table-theme(background-color, selected-color);
    }
  }

  &--clickable:hover {
    cursor: pointer;
  }

  &--bordered {
    border-bottom: rmd-divider-theme-var(size) solid
      rmd-table-theme-var(border-color);

    &:last-child {
      border-bottom-width: 0;
    }
  }

  &--hoverable {
    @include rmd-utils-mouse-only {
      @include rmd-transition(standard);

      transition: background-color $rmd-transition-standard-time;

      &:hover {
        @include rmd-table-theme(background-color, hover-color);

        .rmd-table-cell--sticky-cell::after {
          @include rmd-table-theme(background-color, hover-color);
        }
      }
    }
  }
}

@mixin react-md-table {
  @include rmd-theme-create-root-theme($rmd-table-theme-values, table);

  .rmd-table-container {
    @include rmd-utils-scroll;
  }

  .rmd-table {
    @include rmd-table;
  }

  .rmd-thead {
    @include rmd-thead;
  }

  .rmd-table-cell {
    @include rmd-table-cell;
  }

  .rmd-tr {
    @include rmd-table-row;
  }

  .rmd-caption {
    @include rmd-typography(caption);
  }
}
$rmd-tab-height: 3rem !default;
$rmd-tab-stacked-height: 4.5rem !default;
$rmd-tab-horizontal-padding: 1rem !default;
$rmd-tab-vertical-padding: 0.75rem !default;
$rmd-tab-min-width: 5.625rem !default;
$rmd-tab-max-width: 20rem !default;
$rmd-tab-indicator-color: rmd-theme-var(primary) !default;
$rmd-tab-active-color: rmd-theme(text-primary-on-background) !default;
$rmd-tab-inactive-color: rmd-theme(text-secondary-on-background) !default;
$rmd-tab-disabled-color: rmd-theme(text-disabled-on-background) !default;
$rmd-tab-active-indicator-height: 0.125rem !default;
$rmd-tabs-positions: (left center right) !default;
$rmd-tabs-scrollable-padding: 3.25rem !default;
$rmd-tabs-theme-values: (
  active: $rmd-tab-active-color,
  inactive: $rmd-tab-inactive-color,
  disabled: $rmd-tab-disabled-color,
  indicator-color: $rmd-tab-indicator-color,
) !default;

@function rmd-tabs-theme($theme-style) {
  @return rmd-theme-get-var-value($theme-style, $rmd-tabs-theme-values, tabs);
}

@function rmd-tabs-theme-var($theme-style, $fallback: null) {
  @return rmd-theme-get-var(
    $theme-style,
    $rmd-tabs-theme-values,
    tabs,
    $fallback
  );
}

@mixin rmd-tabs-theme($property, $theme-style: $property, $fallback: null) {
  @include rmd-theme-apply-rmd-var(
    $property,
    $theme-style,
    $rmd-tabs-theme-values,
    tabs
  );
}

@mixin rmd-tabs-theme-update-var($theme-style, $value) {
  @include rmd-theme-update-rmd-var(
    $value,
    $theme-style,
    $rmd-tabs-theme-values,
    tabs
  );
}

@mixin rmd-tabs {
  @include rmd-utils-hide-focus-outline;
  @include rmd-utils-scroll(x);
  @include rmd-utils-hide-scrollbar;

  display: flex;
  flex-wrap: nowrap;
  position: relative;
  width: 100%;

  &::after {
    @include rmd-transition(deceleration);
    @include rmd-tabs-theme(background-color, indicator-color);

    bottom: 0;
    content: '';
    height: $rmd-tab-active-indicator-height;
    left: 0;
    max-width: var(--rmd-tab-width, $rmd-tab-min-width);
    pointer-events: none;
    position: absolute;
    transform: translateX(var(--rmd-tab-offset, 0));
    width: 100%;
    z-index: 1;
  }

  &--animate::after {
    transition: transform $rmd-transition-standard-time,
      max-width $rmd-transition-standard-time;
  }

  @each $position in $rmd-tabs-positions {
    &--#{$position} {
      $justify: if(
        $position == center,
        $position,
        if($position == left, flex-start, flex-end)
      );

      justify-content: $justify;
    }
  }

  &--padded {
    @include rmd-utils-rtl-auto(padding-left, $rmd-tabs-scrollable-padding);
  }
}

@mixin rmd-tab {
  @include rmd-states-surface;
  @include rmd-transition(standard);
  @include rmd-typography(button, (line-height));
  @include rmd-typography-text-overflow-ellipsis;
  @include rmd-utils-hide-focus-outline;
  @include rmd-tabs-theme(color, inactive);

  align-items: center;
  background-color: transparent;
  border-width: 0;
  display: inline-flex;
  flex-grow: 1;
  flex-shrink: 0;
  height: $rmd-tab-height;
  justify-content: center;
  max-width: $rmd-tab-max-width;
  min-width: $rmd-tab-min-width;
  padding: 0 $rmd-tab-horizontal-padding;
  position: relative;
  transition: color $rmd-transition-standard-time;

  &--stacked {
    flex-direction: column;
    height: $rmd-tab-stacked-height;
    padding-bottom: $rmd-tab-vertical-padding;
    padding-top: $rmd-tab-vertical-padding;
  }

  &--active {
    @include rmd-tabs-theme(color, active);
    @include rmd-icon-theme-update-var(color, rmd-tabs-theme-var(active));
  }

  &--disabled {
    @include rmd-tabs-theme(color, disabled);
    @include rmd-icon-theme-update-var(color, rmd-tabs-theme-var(disabled));
  }
}

@mixin rmd-tab-panels {
  @include rmd-utils-scroll(y);

  align-items: flex-start;
  display: flex;
  flex-flow: row nowrap;
  height: 100%;
  overflow-x: hidden;

  &--slide-left {
    #{--p1-start}: 0;
    #{--p2-start}: 0;
    #{--p1-end}: -100%;
    #{--p2-end}: -100%;
  }

  &--slide-right {
    #{--p1-start}: -100%;
    #{--p2-start}: -100%;
    #{--p1-end}: 0;
    #{--p2-end}: 0;
  }
}

@mixin rmd-tab-panel {
  flex-shrink: 0;
  height: 100%;
  width: 100%;
  will-change: transform;

  &--animate {
    @include rmd-transition(standard);

    transition: transform $rmd-transition-standard-time;
  }

  &--enter {
    transform: translate3d(var(--p1-start), 0, 0);
  }

  &--enter-active {
    transform: translate3d(var(--p1-end), 0, 0);
  }

  &--exit {
    transform: translate3d(var(--p2-start), 0, 0);
  }

  &--exit-active {
    transform: translate3d(var(--p2-end), 0, 0);
  }
}

@mixin react-md-tabs {
  @include rmd-theme-create-root-theme($rmd-tabs-theme-values, tabs);

  .rmd-tabs {
    @include rmd-tabs;
  }

  .rmd-tab {
    @include rmd-tab;
  }

  .rmd-tab-panels {
    @include rmd-tab-panels;
  }

  .rmd-tab-panel {
    @include rmd-tab-panel;
  }
}
$rmd-label-font-size: 1em !default;
$rmd-label-floating-font-size: 0.75em !default;
$rmd-label-floating-padding: 0.25rem !default;
$rmd-label-floating-top: 1rem !default;
$rmd-label-floating-dense-top: 0.9rem !default;
$rmd-label-padding: 0.25rem !default;
$rmd-text-field-active-color: $rmd-states-focus-shadow-color !default;
$rmd-text-field-light-border-color: rgba($rmd-black-base, 0.12) !default;
$rmd-text-field-dark-border-color: rgba($rmd-white-base, 0.5) !default;
$rmd-text-field-border-color: if(
  $rmd-theme-light,
  $rmd-text-field-light-border-color,
  $rmd-text-field-dark-border-color
) !default;
$rmd-text-field-light-border-hover-color: rgba($rmd-black-base, 0.87) !default;
$rmd-text-field-dark-border-hover-color: rgba($rmd-white-base, 0.87) !default;
$rmd-text-field-border-hover-color: if(
  $rmd-theme-light,
  $rmd-text-field-light-border-hover-color,
  $rmd-text-field-dark-border-hover-color
) !default;
$rmd-text-field-border-radius: 0.25rem !default;
$rmd-text-field-border-width: 1px !default;
$rmd-text-field-border-width-active: 2px !default;
$rmd-text-field-label-height: 3.5rem !default;
$rmd-text-field-label-dense-height: 3.25rem !default;
$rmd-text-field-height: 3rem !default;
$rmd-text-field-dense-height: 2.5rem !default;
$rmd-text-field-outline-padding: 1rem !default;
$rmd-text-field-underline-label-padding-top: 1rem !default;
$rmd-text-field-underline-label-left-offset: $rmd-icon-spacing-with-text !default;
$rmd-text-field-underline-dense-padding-top: 0.25rem !default;
$rmd-text-field-underline-padding: null !default;
$rmd-text-field-filled-padding: 0.75rem !default;
$rmd-text-field-filled-light-background-color: $rmd-grey-100 !default;
$rmd-text-field-filled-dark-background-color: $rmd-grey-700 !default;
$rmd-text-field-filled-background-color: if(
  $rmd-theme-light,
  $rmd-text-field-filled-light-background-color,
  $rmd-text-field-filled-dark-background-color
) !default;
$rmd-text-field-filled-border-radius: 0.25rem !default;
$rmd-text-field-addon-margin: $rmd-icon-spacing-with-text !default;
$rmd-textarea-vertical-padding: 0.5rem !default;
$rmd-textarea-addon-top: 1rem !default;
$rmd-form-message-min-height: 2rem !default;
$rmd-form-message-margin-top: 0.5rem !default;
$rmd-form-message-margin-bottom: 1rem !default;
$rmd-form-message-counter-spacing: $rmd-icon-spacing-with-text !default;
$rmd-form-message-font-size: 0.75rem !default;
$rmd-select-native-multiple-padding: 0.75rem !default;
$rmd-select-native-addon-top: 1rem !default;
$rmd-listbox-elevation: 8 !default;
$rmd-listbox-light-background-color: rmd-theme-var(surface) !default;
$rmd-listbox-dark-elevation-background-color: map.get(
  $rmd-theme-dark-elevation-colors,
  $rmd-listbox-elevation
) !default;
$rmd-listbox-dark-background-color: if(
  $rmd-theme-dark-elevation and $rmd-listbox-dark-elevation-background-color,
  $rmd-listbox-dark-elevation-background-color,
  rmd-theme-var(surface)
) !default;
$rmd-listbox-background-color: if(
  $rmd-theme-light,
  $rmd-listbox-light-background-color,
  $rmd-listbox-dark-background-color
) !default;
$rmd-listbox-z-index: $rmd-utils-temporary-element-z-index !default;
$rmd-option-focused-styles: (
  box-shadow: inset 0 0 0 2px $rmd-blue-500,
) !default;
$rmd-option-selected-styles: (
  background-color: $rmd-blue-900,
  color: $rmd-white-base,
) !default;
$rmd-option-selected-offset: 0.5rem !default;
$rmd-option-selected-content: '\2713' !default;
$rmd-option-horizontal-padding: 1.5rem !default;
$rmd-toggle-border-radius: 50% !default;
$rmd-toggle-inset: 0.3125rem !default;
$rmd-toggle-dense-inset: 0.25rem !default;
$rmd-toggle-inactive-color: rmd-theme-var(
  text-secondary-on-background
) !default;
$rmd-toggle-active-color: rmd-theme-var(secondary) !default;
$rmd-checkbox-indeterminate-height: 0.15rem !default;
$rmd-checkbox-indeterminate-dense-height: 0.125rem !default;
$rmd-switch-track-height: 1rem !default;
$rmd-switch-track-width: 2.25rem !default;
$rmd-switch-track-background-color: if(
  $rmd-theme-dark-elevation,
  map.get($rmd-theme-dark-elevation-colors, 24),
  rgba($rmd-black-base, 0.38)
) !default;
$rmd-switch-track-border-radius: 0.5rem !default;
$rmd-switch-ball-size: 1.25rem !default;
$rmd-switch-ball-border-radius: 50% !default;
$rmd-switch-ball-offset: 0.25rem !default;
$rmd-switch-container-vertical-padding: 0.5rem !default;
$rmd-switch-container-horizontal-padding: $rmd-switch-ball-size * 0.5 !default;
$rmd-switch-ball-disabled-color: rmd-theme-get-swatch(
  $rmd-theme-secondary,
  200,
  false,
  color.adjust($rmd-theme-secondary, $lightness: -5%),
  rmd-switch-ball-disabled-color
) !default;
$rmd-switch-progress-width: 12 !default;
$rmd-switch-progress-background-color: $rmd-white-base !default;
$rmd-switch-progress-padding: 0.125rem !default;
$rmd-slider-include-vertical: true !default;
$rmd-slider-size: 2rem !default;
$rmd-slider-vertical-size: 15rem !default;
$rmd-slider-active-track-size: 0.375rem !default;
$rmd-slider-active-track-color: rmd-theme-var(secondary) !default;
$rmd-slider-active-track-opacity: null !default;
$rmd-slider-inactive-track-size: 0.25rem !default;
$rmd-slider-inactive-track-color: $rmd-slider-active-track-color !default;
$rmd-slider-disabled-track-color: rmd-theme-var(
  text-disabled-on-background
) !default;
$rmd-slider-disabled-thumb-color: $rmd-slider-disabled-track-color !default;
$rmd-slider-inactive-track-opacity: 0.5 !default;
$rmd-slider-inactive-track-z-index: 1 !default;
$rmd-slider-active-track-z-index: $rmd-slider-inactive-track-z-index + 1 !default;
$rmd-slider-thumb-size: 1.25rem !default;
$rmd-slider-thumb-radius: 50% !default;
$rmd-slider-thumb-z-index: $rmd-slider-active-track-z-index !default;
$rmd-slider-thumb-bubble-opacity: 0.3 !default;
$rmd-slider-thumb-focus-scale: 2 !default;
$rmd-slider-thumb-active-scale: 2.5 !default;
$rmd-slider-thumb-disabled-scale: 0.5 !default;
$rmd-slider-thumb-disabled-mask-scale: 0.8 !default;
$rmd-slider-thumb-value-caret-size: 0.3rem !default;
$rmd-slider-thumb-value-offset: -($rmd-slider-thumb-size +
      $rmd-icon-spacing-with-text) !default;
$rmd-slider-container-padding: $rmd-slider-thumb-size !default;
$rmd-slider-container-addon-spacing: $rmd-slider-thumb-size !default;
$rmd-slider-is-same-track-color: $rmd-slider-active-track-color ==
  $rmd-slider-inactive-track-color;
$rmd-slider-theme-values: (
  size: $rmd-slider-size,
  vertical-size: $rmd-slider-vertical-size,
  active-size: $rmd-slider-active-track-size,
  inactive-size: $rmd-slider-inactive-track-size,
  color:
    if($rmd-slider-is-same-track-color, $rmd-slider-active-track-color, null),
  active-color:
    if($rmd-slider-is-same-track-color, null, $rmd-slider-active-track-color),
  inactive-color:
    if($rmd-slider-is-same-track-color, null, $rmd-slider-inactive-track-color),
  thumb-size: $rmd-slider-thumb-size,
) !default;
$rmd-form-error-color: $rmd-theme-error !default;
$rmd-form-error-hover-color: rmd-theme-get-swatch(
  $rmd-form-error-color,
  700,
  true,
  color.adjust($rmd-form-error-color, $lightness: -10%),
  rmd-form-error-color
) !default;
$rmd-form-active-color: rmd-theme-var(secondary) !default;
$rmd-form-disabled-color: rmd-theme-var(text-disabled-on-background) !default;
$rmd-form-placeholder-color: rmd-theme-var(
  text-secondary-on-background
) !default;
$rmd-form-theme-values: (
  error-color: $rmd-form-error-color,
  error-hover-color: $rmd-form-error-hover-color,
  active-color: $rmd-form-active-color,
  disabled-color: $rmd-form-disabled-color,
  toggle-inset: $rmd-toggle-inset,
  toggle-dense-inset: $rmd-toggle-dense-inset,
  indeterminate-height: $rmd-checkbox-indeterminate-height,
  indeterminate-dense-height: $rmd-checkbox-indeterminate-dense-height,
  track-background-color: $rmd-switch-track-background-color,
  floating-top: $rmd-label-floating-top,
  floating-dense-top: $rmd-label-floating-dense-top,
  addon-top: auto,
  addon-margin-top: 0px,
  label-left-offset: 0px,
  label-top-offset: 0px,
  label-active-padding: 0px,
  label-active-background-color: transparent,
  listbox-background-color: $rmd-listbox-background-color,
  text-padding-left: 0px,
  text-padding-right: 0px,
  text-padding-top: 0px,
  text-offset: 0px,
  text-active-color: $rmd-text-field-active-color,
  text-border-color: $rmd-text-field-border-color,
  text-border-hover-color: $rmd-text-field-border-hover-color,
  text-filled-color: $rmd-text-field-filled-background-color,
  text-height: $rmd-text-field-height,
  text-label-height: $rmd-text-field-label-height,
  text-label-dense-height: $rmd-text-field-label-dense-height,
  text-placeholder-height: $rmd-text-field-height,
  text-placeholder-dense-height: $rmd-text-field-dense-height,
  textarea-padding: $rmd-textarea-vertical-padding,
) !default;

@function rmd-form-theme($theme-style) {
  @return rmd-theme-get-var-value($theme-style, $rmd-form-theme-values, form);
}

@function rmd-form-theme-var($theme-style, $fallback: null) {
  @return rmd-theme-get-var(
    $theme-style,
    $rmd-form-theme-values,
    form,
    $fallback
  );
}

@mixin rmd-form-theme($property, $theme-style: $property, $fallback: null) {
  @include rmd-theme-apply-rmd-var(
    $property,
    $theme-style,
    $rmd-form-theme-values,
    form
  );
}

@mixin rmd-form-theme-update-var($theme-style, $value) {
  @include rmd-theme-update-rmd-var(
    $value,
    $theme-style,
    $rmd-form-theme-values,
    form
  );
}

@function rmd-slider-theme($theme-style) {
  @return rmd-theme-get-var-value(
    $theme-style,
    $rmd-slider-theme-values,
    slider
  );
}

@function rmd-slider-theme-var($theme-style, $fallback: null) {
  @return rmd-theme-get-var(
    $theme-style,
    $rmd-slider-theme-values,
    slider,
    $fallback
  );
}

@mixin react-md-file-input {
  .rmd-file-input {
    @include rmd-states-focus-shadow('&:focus + .rmd-file-input-label');
    @include rmd-utils-keyboard-only {
      &:focus + .rmd-file-input-label {
        @include rmd-states-theme-update-var(
          background-color,
          rmd-states-theme-var(focus-color)
        );
      }

      &:hover {
        @include rmd-states-theme-update-var(
          background-color,
          rmd-states-theme-var(hover-color)
        );
      }
    }

    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    width: 0.1px;
    z-index: -1;
  }
}

@mixin rmd-label {
  @include rmd-typography(body-1);
  @include rmd-transition(standard);

  display: inline-flex;
  font-size: $rmd-label-font-size;
  transition: color $rmd-transition-standard-time;

  &--active {
    @include rmd-form-theme(color, active-color);
  }

  &--error {
    @include rmd-form-theme(color, error-color);
  }

  &--disabled {
    @include rmd-form-theme(color, disabled-color);
  }
}

@mixin rmd-floating-label {
  $transitions: background-color, color, font-size, transform;

  @include rmd-form-theme-update-var(
    active-color,
    rmd-form-theme-var(text-active-color)
  );
  @include rmd-utils-rtl {
    left: auto;
    right: 0;
    transform: translate(
      rmd-utils-negate-var(rmd-form-theme-var(text-padding-left)),
      rmd-form-theme-var(floating-top)
    );
  }

  left: 0;
  position: absolute;
  top: 0;
  transform: translate(
    rmd-form-theme-var(text-padding-left),
    rmd-form-theme-var(floating-top)
  );
  transition-property: $transitions;
  will-change: $transitions;

  &--dense {
    @include rmd-form-theme-update-var(
      floating-top,
      rmd-form-theme-var(floating-dense-top)
    );
  }

  &--active {
    @include rmd-form-theme(background-color, label-active-background-color);
    @include rmd-form-theme(padding, label-active-padding);
    @include rmd-utils-rtl {
      transform: translate(
        rmd-utils-negate-var(rmd-form-theme-var(label-left-offset)),
        rmd-form-theme-var(label-top-offset)
      );
    }

    font-size: $rmd-label-floating-font-size;
    transform: translate(
      rmd-form-theme-var(label-left-offset),
      rmd-form-theme-var(label-top-offset)
    );
    z-index: 1;
  }

  &--inactive {
    @include rmd-theme(color, text-secondary-on-background);
  }
}

@mixin react-md-label {
  .rmd-label {
    @include rmd-label;
  }

  .rmd-floating-label {
    @include rmd-floating-label;
  }
}

@mixin rmd-toggle-container {
  align-items: center;
  display: flex;

  &--inline {
    display: inline-flex;
  }

  &--stacked {
    flex-direction: column;
  }
}

@mixin rmd-toggle {
  @include rmd-button-theme(height, icon-size);
  @include rmd-button-theme(width, icon-size);
  @include rmd-states-surface('&--focused');

  align-items: center;
  border-radius: $rmd-toggle-border-radius;
  display: inline-flex;
  flex-shrink: 0;
  justify-content: center;
  position: relative;

  &--disabled {
    @include rmd-states-theme-update-var(hover-color, transparent);
  }
}

@mixin rmd-input-hidden {
  @include rmd-utils-hide-focus-outline;

  bottom: 0;
  height: 100%;
  left: 0;
  margin: 0;
  opacity: 0;
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
  z-index: 1;

  &:hover {
    cursor: pointer;
  }

  &:disabled {
    &:hover {
      cursor: default;
    }
  }
}

@mixin rmd-toggle-hidden {
  @include rmd-input-hidden;

  @if $rmd-toggle-active-color != $rmd-toggle-inactive-color {
    &:checked + .rmd-toggle__icon {
      color: $rmd-toggle-active-color;
    }
  }

  &:checked + .rmd-toggle__icon::before {
    opacity: 0;
  }

  &:checked + .rmd-toggle__icon--indeterminate {
    &::before,
    &::after {
      opacity: 1;
    }
  }
}

@mixin rmd-toggle-icon {
  @include rmd-icon-theme(height, size);
  @include rmd-icon-theme(width, size);
  @include rmd-icon-theme-update-var(color, currentColor);

  align-items: center;
  color: $rmd-toggle-inactive-color;
  display: inline-flex;
  justify-content: center;
  pointer-events: none;
  position: absolute;

  &--overlay {
    &::before {
      @include rmd-transition(standard);
      @include rmd-form-theme(bottom, toggle-inset);
      @include rmd-form-theme(left, toggle-inset);
      @include rmd-form-theme(right, toggle-inset);
      @include rmd-form-theme(top, toggle-inset);
      @include rmd-theme(background-color, background);

      content: '';
      opacity: 1;
      position: absolute;
      transition: opacity $rmd-transition-standard-time;
      z-index: 1;
    }
  }

  &--indeterminate::after {
    @include rmd-transition(standard);
    @include rmd-form-theme(background-color, active-color);
    @include rmd-form-theme(left, toggle-inset);
    @include rmd-form-theme(right, toggle-inset);
    @include rmd-form-theme(height, indeterminate-height);

    content: '';
    opacity: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    transition: opacity $rmd-transition-standard-time;
    z-index: 2;
  }

  &--circle::before {
    border-radius: $rmd-toggle-border-radius;
  }

  &--disabled {
    @include rmd-theme(color, text-disabled-on-background);
  }

  &--dense {
    @include rmd-form-theme(bottom, toggle-dense-inset);
    @include rmd-form-theme(left, toggle-dense-inset);
    @include rmd-form-theme(right, toggle-dense-inset);
    @include rmd-form-theme(top, toggle-dense-inset);
    @include rmd-form-theme(height, indeterminate-dense-height);
  }

  &--checked {
    @if $rmd-toggle-active-color != $rmd-toggle-inactive-color {
      @include rmd-icon-theme-update-var(color, $rmd-toggle-active-color);
    }

    &::before {
      opacity: 0;
    }
  }

  &--indeterminate-checked {
    @if $rmd-toggle-active-color != $rmd-toggle-inactive-color {
      @include rmd-icon-theme-update-var(color, $rmd-toggle-active-color);
    }

    &::after {
      opacity: 1;
    }
  }
}

@mixin rmd-toggle-dense-theme {
  @include rmd-form-theme-update-var(
    toggle-inset,
    rmd-form-theme-var(toggle-dense-inset)
  );
  @include rmd-form-theme-update-var(
    indeterminate-height,
    rmd-form-theme-var(indeterminate-dense-height)
  );
}

@mixin rmd-switch {
  @include rmd-transition(standard);
  @include rmd-form-theme(background-color, track-background-color);

  border-radius: $rmd-switch-track-border-radius;
  height: $rmd-switch-track-height;
  position: relative;
  transition: background-color $rmd-transition-standard-time;
  width: $rmd-switch-track-width;

  &--disabled {
    @include rmd-form-theme-update-var(
      track-background-color,
      rmd-form-theme-var(disabled-color)
    );
  }

  &--async {
    @include rmd-progress-theme-update-var(
      circular-width,
      $rmd-switch-progress-width
    );

    @include rmd-progress-theme-update-var(
      circular-size,
      $rmd-switch-ball-size
    );
  }
}

@mixin rmd-switch-ball-disabled {
  @include rmd-states-theme-update-var(hover-color, transparent);

  cursor: auto;

  &::after {
    @include rmd-form-theme(background-color, disabled-color);
  }
}

@mixin rmd-switch-ball-checked {
  $offset: $rmd-switch-ball-size + $rmd-switch-ball-offset;

  @include rmd-utils-rtl {
    transform: translateX(-$offset);
  }

  transform: translateX($offset);

  &::after {
    @include rmd-form-theme(background-color, active-color);
  }
}

@mixin rmd-switch-input {
  @include rmd-input-hidden;
  @include rmd-states-focus-shadow('&:focus + .rmd-switch__ball');
  @include rmd-utils-keyboard-only {
    &:focus + .rmd-switch__ball {
      @include rmd-states-theme-update-var(
        background-color,
        rmd-states-theme-var(focus-color)
      );
    }

    &:focus:hover + .rmd-switch__ball {
      @include rmd-states-theme-update-var(
        background-color,
        rmd-states-theme-var(hover-color)
      );
    }
  }
  @include rmd-utils-touch-only {
    &:focus + .rmd-switch__ball,
    &:hover + .rmd-switch__ball {
      @include rmd-states-theme-update-var(background-color, transparent);
    }
  }

  &:disabled + .rmd-switch__ball {
    @include rmd-switch-ball-disabled;
  }

  &:checked + .rmd-switch__ball {
    @include rmd-switch-ball-checked;
  }

  &:checked:disabled + .rmd-switch__ball::after {
    background-color: $rmd-switch-ball-disabled-color;
  }
}

@mixin rmd-switch-ball {
  @include rmd-utils-hide-focus-outline;
  @include rmd-transition(standard);
  @include rmd-utils-rtl {
    left: auto;
    right: calc(-50% + #{$rmd-switch-ball-offset});
  }

  align-items: center;
  border-radius: $rmd-switch-ball-border-radius;
  display: flex;
  height: $rmd-switch-ball-size * 2;
  justify-content: center;
  left: calc(-50% + #{$rmd-switch-ball-offset});
  position: absolute;
  top: calc(-50% - #{$rmd-switch-ball-size - $rmd-switch-track-height});
  transition-duration: $rmd-transition-standard-time;
  transition-property: background-color, transform;
  width: $rmd-switch-ball-size * 2;
  z-index: 1;

  &::before {
    @include rmd-states-surface-base;
  }

  &:hover {
    @include rmd-states-theme-update-var(
      background-color,
      rmd-states-theme-var(hover-color)
    );

    cursor: pointer;
  }

  &::after {
    @include rmd-elevation(1);

    background-color: color.adjust($rmd-white-base, $lightness: -5%);
    border-radius: inherit;
    content: '';
    height: $rmd-switch-ball-size;
    left: 25%;
    pointer-events: none;
    position: absolute;
    top: 25%;
    width: $rmd-switch-ball-size;
    z-index: 1;
  }

  &--checked {
    @include rmd-switch-ball-checked;
  }
}

@mixin rmd-switch-container {
  padding: $rmd-switch-container-vertical-padding
    $rmd-switch-container-horizontal-padding;
}

@mixin react-md-toggle {
  .rmd-toggle-container {
    @include rmd-toggle-container;
  }

  .rmd-toggle {
    @include rmd-toggle;

    &__input {
      @include rmd-toggle-hidden;
    }

    &__icon {
      @include rmd-toggle-icon;
    }
  }

  .rmd-input-toggle-menu-item {
    @include rmd-button-theme-update-var(icon-size, rmd-icon-theme-var(size));

    &--switch {
      @include rmd-icon-theme-update-var(size, $rmd-switch-track-width);
    }

    &__toggle {
      @include rmd-menu-theme(background-color);
    }

    .rmd-switch__ball,
    .rmd-switch__ball:hover {
      @include rmd-states-theme-update-var(background-color, transparent);
    }
  }

  .rmd-switch-container {
    @include rmd-switch-container;
  }

  .rmd-switch {
    @include rmd-switch;

    &__input {
      @include rmd-switch-input;
    }

    &__ball {
      @include rmd-switch-ball;
    }

    &__progress {
      background-color: $rmd-switch-progress-background-color;
      border-radius: inherit;
      padding: $rmd-switch-progress-padding;
      z-index: 2;
    }
  }
}

@mixin rmd-slider-theme($property, $theme-style: $property, $fallback: null) {
  @include rmd-theme-apply-rmd-var(
    $property,
    $theme-style,
    $rmd-slider-theme-values,
    slider
  );
}

@mixin rmd-slider-theme-update-var($theme-style, $value) {
  @include rmd-theme-update-rmd-var(
    $value,
    $theme-style,
    $rmd-slider-theme-values,
    slider
  );
}

@function rmd-slider-offset($thumb-index) {
  @return var(--offset#{$thumb-index}, 0);
}

@mixin rmd-slider-container {
  $directions: (right, left);

  @if $rmd-slider-container-addon-spacing != $rmd-icon-spacing-with-text {
    @include rmd-icon-theme-update-var(
      text-spacing,
      $rmd-slider-container-addon-spacing
    );
  }

  align-items: center;

  &--h {
    display: flex;
  }

  @if $rmd-slider-include-vertical {
    $directions: (top, right, bottom, left);

    &--v {
      display: inline-flex;
      flex-direction: column-reverse;
    }
  }

  @each $dir in directions {
    &--pad-#{$dir} {
      $property: padding-#{$dir};

      #{$property}: $rmd-slider-container-padding;
    }
  }
}

@mixin rmd-slider-track {
  @include rmd-slider-track-horizontal;
  @if $rmd-slider-include-vertical {
    @include rmd-slider-track-vertical;
  }

  position: relative;

  &::before,
  &::after {
    @if $rmd-slider-is-same-track-color {
      @include rmd-slider-theme(background-color, color);
    }

    content: '';
    pointer-events: none;
    position: absolute;
  }

  &::before {
    @if not $rmd-slider-is-same-track-color {
      @include rmd-slider-theme(background-color, inactive-color);
    }

    opacity: $rmd-slider-inactive-track-opacity;
    z-index: $rmd-slider-inactive-track-z-index;
  }

  &::after {
    @if not $rmd-slider-is-same-track-color {
      @include rmd-slider-theme(background-color, active-color);
    }

    opacity: $rmd-slider-active-track-opacity;
    z-index: $rmd-slider-active-track-z-index;
  }

  &--hoverable:hover {
    cursor: pointer;
  }

  &--animate::after {
    @include rmd-transition(standard);

    transition-duration: $rmd-transition-standard-time;
  }

  &--disabled {
    @if $rmd-slider-is-same-track-color {
      @include rmd-slider-theme-update-var(
        color,
        $rmd-slider-disabled-track-color
      );

      &::after {
        @include rmd-slider-theme-update-var(active-size, 0px);
      }

      @if $rmd-slider-inactive-track-opacity != null {
        &::before {
          opacity: 1;
        }
      }

      @if $rmd-slider-active-track-opacity != null {
        &::after {
          opacity: 1;
        }
      }
    }
  }
}

@mixin rmd-slider-track-horizontal {
  &--h {
    @include rmd-slider-theme(height, size);

    align-items: center;
    display: flex;
    width: 100%;

    &::before {
      @include rmd-slider-theme(height, inactive-size);

      width: 100%;
    }

    &::after {
      @include rmd-slider-theme(height, active-size);
    }
  }

  &--h1::after {
    @include rmd-utils-rtl-auto(left, 0);

    max-width: rmd-slider-offset(1);
    transition-property: max-width;
    width: 100%;
  }

  &--h2::after {
    @include rmd-utils-rtl {
      left: calc(100% - #{rmd-slider-offset(2)});
      right: rmd-slider-offset(1);
    }

    left: rmd-slider-offset(1);
    right: calc(100% - #{rmd-slider-offset(2)});
    transition-property: left, right;
    will-change: left, right;
  }
}

@mixin rmd-slider-track-vertical {
  &--v {
    @include rmd-slider-theme(height, vertical-size);
    @include rmd-slider-theme(width, size);

    display: inline-flex;
    justify-content: center;

    &::before {
      @include rmd-slider-theme(width, inactive-size);

      height: 100%;
    }

    &::after {
      @include rmd-slider-theme(width, active-size);

      bottom: 0;
    }
  }

  &--v1::after {
    height: 100%;
    max-height: rmd-slider-offset(1);
    transition-property: max-height;
  }

  &--v2::after {
    bottom: rmd-slider-offset(1);
    top: calc(100% - #{rmd-slider-offset(2)});
    transition-property: bottom, top;
    will-change: bottom, top;
  }
}

@mixin rmd-slider-thumb {
  @include rmd-utils-hide-focus-outline;
  @include rmd-slider-theme(
    background-color,
    if($rmd-slider-is-same-track-color, color, active-color)
  );
  @include rmd-slider-theme(height, thumb-size);
  @include rmd-slider-theme(width, thumb-size);
  @include rmd-slider-thumb-horizontal;
  @include rmd-utils-mouse-only {
    &:hover::after {
      transform: scale($rmd-slider-thumb-focus-scale);
    }

    &--active::after,
    &--active:hover::after {
      transform: scale($rmd-slider-thumb-active-scale);
    }
  }
  @include rmd-utils-keyboard-only {
    &:focus::after {
      transform: scale($rmd-slider-thumb-focus-scale);
    }

    &--active::after {
      transform: scale($rmd-slider-thumb-active-scale);
    }
  }

  @if $rmd-slider-include-vertical {
    @include rmd-slider-thumb-vertical;
  }

  border-radius: $rmd-slider-thumb-radius;
  position: absolute;
  z-index: $rmd-slider-thumb-z-index;

  &::after {
    @include rmd-transition(standard);
    @include rmd-utils-pseudo-element(null);

    background-color: inherit;
    opacity: $rmd-slider-thumb-bubble-opacity;
    transition: transform $rmd-transition-standard-time;
  }

  &--animate {
    @include rmd-transition(standard);

    transition-duration: $rmd-transition-standard-time;
  }

  &--disabled {
    background-color: $rmd-slider-disabled-thumb-color;

    pointer-events: none;
  }

  &--mask {
    @include rmd-theme(background-color, background);

    border-radius: 0;
  }
}

@mixin rmd-slider-thumb-horizontal {
  &--h {
    @include rmd-utils-rtl {
      transform: translateX(50%);
      transition-property: right;
    }

    transform: translateX(-50%);
    transition-property: left;
  }

  &--h1 {
    @include rmd-utils-rtl-auto(left, rmd-slider-offset(1));
  }

  &--h2 {
    @include rmd-utils-rtl-auto(left, rmd-slider-offset(2));
  }

  &--disabled-h {
    @include rmd-utils-rtl {
      transform: translateX(50%) scale($rmd-slider-thumb-disabled-scale);
    }

    transform: translateX(-50%) scale($rmd-slider-thumb-disabled-scale);
  }

  &--mask-h {
    @include rmd-utils-rtl {
      transform: translateX(50%) scale($rmd-slider-thumb-disabled-mask-scale);
    }

    transform: translateX(-50%) scale($rmd-slider-thumb-disabled-mask-scale);
  }
}

@mixin rmd-slider-thumb-vertical {
  &--v {
    transform: translateY(50%);
    transition-property: bottom;
  }

  &--v1 {
    bottom: rmd-slider-offset(1);
  }

  &--v2 {
    bottom: rmd-slider-offset(2);
  }

  &--disabled-v {
    transform: translateY(50%) scale($rmd-slider-thumb-disabled-scale);
  }

  &--mask-v {
    transform: translateY(50%) scale($rmd-slider-thumb-disabled-mask-scale);
  }
}

@mixin rmd-slider-value {
  opacity: 1;
  position: absolute;

  &::after {
    border: $rmd-slider-thumb-value-caret-size solid transparent;
    content: '';
    position: absolute;
  }

  &--animate {
    transition: transform $rmd-transition-standard-time;
  }

  &--h {
    @include rmd-utils-rtl {
      transform: translateX(50%) scale(1);
    }

    top: $rmd-slider-thumb-value-offset;
    transform: translateX(-50%) scale(1);

    &::after {
      @include rmd-utils-rtl {
        transform: translateX(50%);
      }

      border-top-color: rmd-tooltip-theme-var(background-color);
      left: 50%;
      top: 100%;
      transform: translateX(-50%);
    }
  }

  &--h-off {
    transform: translateX(-50%) scale(0);
  }

  &--h-on {
    transform: translateX(-50%) scale(1);
  }

  @if $rmd-slider-include-vertical {
    &--v {
      left: $rmd-slider-thumb-value-offset;
      transform: translateY(50%) scale(1);

      &::after {
        border-left-color: rmd-tooltip-theme-var(background-color);
        left: 100%;
        top: 50%;
        transform: translateY(-50%);
      }
    }

    &--v-off {
      transform: translateY(50%) scale(0);
    }

    &--v-on {
      transform: translateY(50%) scale(1);
    }
  }
}

@mixin react-md-slider {
  @include rmd-theme-create-root-theme($rmd-slider-theme-values, slider);

  .rmd-slider-container {
    @include rmd-slider-container;
  }

  .rmd-slider-track {
    @include rmd-slider-track;
  }

  .rmd-slider-thumb {
    @include rmd-slider-thumb;
  }

  .rmd-slider-value {
    @include rmd-slider-value;
  }
}

@mixin rmd-text-field-container {
  @include rmd-transition(standard);
  @include rmd-form-theme(height, text-height);

  align-items: center;
  display: flex;
  position: relative;
  transition: border-color $rmd-transition-standard-time;

  &--hoverable:hover {
    @include rmd-form-theme(border-color, text-border-hover-color);
  }

  &--inline {
    display: inline-flex;
  }

  &--stretch {
    flex: 1 1 auto;
  }

  &--label {
    @include rmd-form-theme-update-var(
      text-height,
      rmd-form-theme-var(text-label-height)
    );
  }

  &--error {
    @include rmd-icon-theme-update-var(color, rmd-form-theme-var(error-color));
    @include rmd-form-theme-update-var(
      text-active-color,
      rmd-form-theme-var(error-color)
    );
    @include rmd-form-theme-update-var(
      text-border-color,
      rmd-form-theme-var(error-color)
    );
    @include rmd-form-theme-update-var(
      text-border-hover-color,
      rmd-form-theme-var(error-hover-color)
    );
  }

  &--disabled {
    @include rmd-icon-theme-update-var(
      color,
      rmd-form-theme-var(disabled-color)
    );
  }

  &--underline {
    @if $rmd-text-field-underline-padding {
      @include rmd-form-theme-update-var(
        text-padding-left,
        $rmd-text-field-underline-padding
      );
      @include rmd-form-theme-update-var(
        text-padding-right,
        $rmd-text-field-underline-padding
      );
    }
    @include rmd-form-theme(border-color, text-border-color);

    border-bottom-style: solid;
    border-bottom-width: $rmd-text-field-border-width;

    &::after {
      @include rmd-transition(standard);
      @include rmd-form-theme(background-color, text-active-color);

      bottom: -$rmd-text-field-border-width;
      content: '';
      height: $rmd-text-field-border-width-active;
      left: 0;
      position: absolute;
      right: 0;
      transform: scale(0);
      transition: transform $rmd-transition-standard-time;
      z-index: 1;
    }
  }

  &--underline-labelled {
    @include rmd-form-theme-update-var(
      text-padding-top,
      $rmd-text-field-underline-label-padding-top
    );
    @include rmd-form-theme-update-var(
      addon-margin-top,
      $rmd-text-field-addon-margin
    );
  }

  &--filled {
    @include rmd-form-theme-update-var(
      text-padding-left,
      $rmd-text-field-filled-padding
    );
    @include rmd-form-theme-update-var(
      text-padding-right,
      $rmd-text-field-filled-padding
    );
    @include rmd-form-theme-update-var(
      label-left-offset,
      $rmd-text-field-filled-padding
    );
    @include rmd-form-theme(background-color, text-filled-color);
    @include rmd-states-surface($clickable: false);

    border-top-left-radius: $rmd-text-field-filled-border-radius;
    border-top-right-radius: $rmd-text-field-filled-border-radius;
  }

  &--underline-left::after {
    transform-origin: left;
  }

  &--underline-center::after {
    transform-origin: center;
  }

  &--underline-right::after {
    transform-origin: right;
  }

  &--underline-active::after {
    transform: scale(1);
  }

  &--underline-left-addon {
    $calc-string: '#{rmd-icon-theme-var(size)} + #{$rmd-text-field-underline-label-left-offset * 2}';
    @if $rmd-text-field-underline-padding {
      $calc-string: '#{$calc-string} + #{$rmd-text-field-underline-padding}';
    }

    @include rmd-form-theme-update-var(
      text-padding-left,
      calc(#{$calc-string})
    );
    @include rmd-form-theme-update-var(
      label-left-offset,
      $rmd-text-field-underline-label-left-offset
    );
  }

  &--underline-right-addon {
    $calc-string: '#{rmd-icon-theme-var(size)} + #{$rmd-text-field-underline-label-left-offset * 2}';
    @if $rmd-text-field-underline-padding {
      $calc-string: '#{$calc-string} + #{$rmd-text-field-underline-padding}';
    }

    @include rmd-form-theme-update-var(
      text-padding-right,
      calc(#{$calc-string})
    );
  }

  &--outline {
    @include rmd-form-theme-update-var(
      text-padding-left,
      $rmd-text-field-outline-padding
    );
    @include rmd-form-theme-update-var(
      text-padding-right,
      $rmd-text-field-outline-padding
    );
    @include rmd-form-theme-update-var(
      label-left-offset,
      $rmd-text-field-outline-padding - $rmd-label-floating-padding
    );
    @include rmd-form-theme-update-var(label-top-offset, -50%);
    @include rmd-form-theme-update-var(
      label-active-padding,
      0 $rmd-label-floating-padding
    );
    @include rmd-form-theme-update-var(
      label-active-background-color,
      rmd-theme-var(background)
    );
    @include rmd-form-theme(border-color, text-border-color);

    border-radius: $rmd-text-field-border-radius;
    border-style: solid;
    border-width: $rmd-text-field-border-width;

    &::after {
      @include rmd-transition(standard);
      @include rmd-utils-pseudo-element;

      box-shadow: 0 0 0 $rmd-text-field-border-width-active
        rmd-form-theme-var(text-active-color);
      opacity: 0;
      transition: opacity $rmd-transition-standard-time;
    }
  }

  &--outline-active::after {
    opacity: 1;
  }

  &--outline-left {
    $outline-offset: calc(
      #{rmd-icon-theme-var(size)} + #{$rmd-text-field-outline-padding + $rmd-text-field-addon-margin}
    );

    @include rmd-form-theme-update-var(text-padding-left, $outline-offset);
  }

  &--outline-right {
    $outline-offset: calc(
      #{rmd-icon-theme-var(size)} + #{$rmd-text-field-addon-margin * 2}
    );

    @include rmd-form-theme-update-var(text-padding-right, $outline-offset);
  }

  &--dense {
    @include rmd-form-theme-update-var(
      text-height,
      rmd-form-theme-var(text-placeholder-dense-height)
    );
  }

  &--dense-label {
    @include rmd-form-theme-update-var(
      text-height,
      rmd-form-theme-var(text-label-dense-height)
    );
  }

  &--dense-placeholder {
    @include rmd-form-theme-update-var(
      text-padding-top,
      $rmd-text-field-underline-dense-padding-top
    );
  }
}

@mixin rmd-text-field-placeholder {
  &::-webkit-input-placeholder {
    @content;
  }

  &:-ms-input-placeholder {
    @content;
  }

  &::-moz-placeholder {
    @content;
  }

  &:-moz-placeholder {
    @content;
  }

  &:placeholder {
    @content;
  }
}

@mixin rmd-text-field-base {
  @include rmd-typography(body-1, font-size);
  @include rmd-utils-hide-focus-outline;
  @include rmd-text-field-placeholder {
    @include rmd-transition(standard);
    @include rmd-theme(color, text-secondary-on-background);

    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
  }

  background-color: transparent;
  border-width: 0;
  color: inherit;
  font-size: 1em;
  width: 100%;

  &[disabled] {
    @include rmd-theme(color, text-disabled-on-background);

    @include rmd-text-field-placeholder {
      @include rmd-theme(color, text-disabled-on-background);
    }
  }

  &--floating {
    @include rmd-text-field-placeholder {
      color: transparent;
      transition: color $rmd-transition-standard-time;
    }

    &[disabled] {
      @include rmd-text-field-placeholder {
        color: transparent;
      }
    }

    &:focus {
      @include rmd-text-field-placeholder {
        @include rmd-theme(color, text-secondary-on-background);
      }
    }
  }
}

@mixin rmd-text-field {
  @include rmd-form-theme(padding-left, text-padding-left);
  @include rmd-form-theme(padding-right, text-padding-right);
  @include rmd-form-theme(padding-top, text-padding-top);
  @include rmd-text-field-base;
  @include rmd-utils-rtl {
    @include rmd-form-theme(padding-left, text-padding-right);
    @include rmd-form-theme(padding-right, text-padding-left);
  }

  flex: 1 1 auto;
  height: 100%;
}

@mixin rmd-text-field-addon {
  @include rmd-icon-theme(height, size);
  @include rmd-icon-theme(width, size);
  @include rmd-form-theme(top, addon-top);
  @include rmd-form-theme(margin-top, addon-margin-top);

  position: absolute;

  &:first-child {
    @include rmd-utils-rtl-auto(left, rmd-form-theme-var(label-left-offset));
  }

  &:last-child {
    @include rmd-utils-rtl-auto(right, $rmd-text-field-addon-margin);
  }

  &--presentational {
    pointer-events: none;
  }
}

@mixin rmd-textarea-container {
  @include rmd-form-theme-update-var(addon-top, $rmd-textarea-addon-top);

  height: auto;
  max-width: 100%;
  padding-top: calc(
    #{rmd-form-theme-var(text-padding-top)} + #{rmd-form-theme-var(
        textarea-padding
      )}
  );

  &--animate {
    @include rmd-transition(standard);

    transition: height $rmd-transition-standard-time;
  }

  &--cursor:hover {
    cursor: text;
  }

  &__inner {
    height: 100%;
    width: 100%;

    &--animate {
      @include rmd-transition(standard);

      transition: height $rmd-transition-standard-time;
    }
  }
}

@mixin rmd-textarea {
  @include rmd-transition(standard);
  @include rmd-form-theme(padding-left, text-padding-left);
  @include rmd-form-theme(padding-right, text-padding-right);
  @include rmd-form-theme(min-height, text-height);
  @include rmd-text-field-base;
  @include rmd-utils-rtl {
    @include rmd-form-theme(padding-left, text-padding-right);
    @include rmd-form-theme(padding-right, text-padding-left);
  }

  flex: 1 1 auto;
  height: 100%;

  &--rh {
    resize: horizontal;
  }

  &--rv {
    resize: vertical;
  }

  &--rn {
    overflow: hidden;
    resize: none;
  }

  &--scrollable {
    overflow: auto;
  }

  &--mask {
    height: auto;
    left: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    position: absolute;
    right: 0;
    z-index: -1;
  }
}

@mixin rmd-password {
  &--offset {
    @include rmd-form-theme-update-var(text-padding-right, 0);
  }

  &__input {
    &--offset {
      @include rmd-utils-rtl-auto(
        margin-right,
        rmd-button-theme-var(icon-size)
      );
    }
  }

  &__toggle {
    @include rmd-utils-rtl-auto(right, 0);

    position: absolute;
  }
}

@mixin react-md-text-field {
  .rmd-text-field-container {
    @include rmd-text-field-container;
  }

  .rmd-text-field {
    @include rmd-text-field;
  }

  .rmd-text-field-addon {
    @include rmd-text-field-addon;
  }

  .rmd-password {
    @include rmd-password;
  }

  .rmd-textarea-container {
    @include rmd-textarea-container;
  }

  .rmd-textarea {
    @include rmd-textarea;
  }
}

@mixin rmd-native-select-container {
  &--multi {
    @include rmd-form-theme(min-height, text-height);
    @include rmd-form-theme-update-var(addon-top, $rmd-select-native-addon-top);

    height: auto;
  }

  &--padded {
    padding-top: calc(
      #{$rmd-select-native-multiple-padding} + #{rmd-form-theme-var(
          text-padding-top
        )}
    );
  }
}

@mixin rmd-native-select {
  @include rmd-text-field;

  @if $rmd-utils-fix-moz-focus {
    &:-moz-focusring {
      color: transparent;
      text-shadow: 0 0 rmd-theme-var(text-primary-on-background);
    }
  }

  &--icon {
    @include rmd-icon-theme(padding-right, size);

    appearance: none;
  }

  &--multi {
    padding-top: 0;
  }

  &__icon {
    @include rmd-utils-rtl-auto(right, 0);

    display: inline-flex;
    pointer-events: none;
    position: absolute;
  }

  &__label {
    pointer-events: none;
  }
}

@mixin rmd-select {
  @include rmd-utils-hide-focus-outline;

  &--disabled {
    @include rmd-theme(color, text-disabled-on-background);

    cursor: default;
  }

  &__value {
    @include rmd-form-theme(padding-left, text-padding-left);
    @include rmd-form-theme(padding-right, text-padding-right);
    @include rmd-form-theme(padding-top, text-padding-top);
    @include rmd-typography(body-1, font-size);
    @include rmd-typography-text-overflow-ellipsis;
    @include rmd-utils-rtl {
      @include rmd-form-theme(padding-left, text-padding-right);
      @include rmd-form-theme(padding-right, text-padding-left);
    }

    &--placeholder {
      @include rmd-transition(standard);
      @include rmd-theme(color, text-secondary-on-background);

      color: transparent;
      transition: color $rmd-transition-standard-time;
    }

    &--placeholder-active {
      @include rmd-theme(color, text-secondary-on-background);
    }
  }
}

@mixin rmd-listbox {
  @include rmd-utils-hide-focus-outline;
  @include rmd-utils-scroll;

  &--temporary {
    @include rmd-elevation($rmd-listbox-elevation);
    @include rmd-form-theme(background-color, listbox-background-color);
    @include rmd-theme(color, on-surface);

    z-index: $rmd-listbox-z-index;
  }
}

@mixin rmd-option {
  @include rmd-utils-keyboard-only {
    &--focused {
      @include rmd-utils-map-to-styles($rmd-option-focused-styles);
    }
  }

  @if $rmd-option-selected-content {
    @include rmd-list-theme-update-var(item-horizontal-padding, 1.5rem);
  }

  &--selected {
    @include rmd-utils-map-to-styles($rmd-option-selected-styles);

    @if $rmd-option-selected-content {
      &::after {
        @include rmd-utils-rtl-auto(left, $rmd-option-selected-offset);

        content: $rmd-option-selected-content;
        position: absolute;
      }
    }
  }
}

@mixin react-md-select {
  .rmd-native-select-container {
    @include rmd-native-select-container;
  }

  .rmd-native-select {
    @include rmd-native-select;
  }

  .rmd-listbox {
    @include rmd-listbox;
  }

  .rmd-option {
    @include rmd-option;
  }

  .rmd-select {
    @include rmd-select;
  }
}

@mixin rmd-form-message-container {
  display: flex;
  flex-direction: column;
}

@mixin rmd-form-message {
  @include rmd-typography(body-2, (font-size));
  @include rmd-theme(color, text-secondary-on-background);

  display: flex;
  font-size: $rmd-form-message-font-size;
  margin-bottom: $rmd-form-message-margin-bottom;
  margin-top: $rmd-form-message-margin-top;
  min-height: $rmd-form-message-min-height;

  &--underline {
    padding-left: $rmd-text-field-underline-padding;
    padding-right: $rmd-text-field-underline-padding;
  }

  &--filled {
    padding-left: $rmd-text-field-filled-padding;
    padding-right: $rmd-text-field-filled-padding;
  }

  &--outline {
    padding-left: $rmd-text-field-outline-padding;
    padding-right: $rmd-text-field-outline-padding;
  }

  &--error {
    @include rmd-form-theme(color, error-color);
  }

  &__message {
    margin: 0;
  }

  &__counter {
    @include rmd-utils-rtl-auto(margin-left, auto);
    @include rmd-utils-rtl-auto(
      padding-left,
      $rmd-form-message-counter-spacing
    );

    flex-shrink: 0;
    white-space: nowrap;
  }
}

@mixin rmd-fieldset {
  &--unstyled {
    border: 0;
    margin: 0;
    min-width: 0; // just so it can shrink correctly in flex or grid
    padding: 0;
  }

  &__legend {
    @include rmd-typography(body-1);

    &--sr-only {
      @include rmd-utils-sr-only;
    }
  }
}

@mixin react-md-form {
  $omit: (
    addon-top label-left-offset label-top-offset label-active-background-color
      label-active-padding text-offset text-padding-left text-padding-right
      text-padding-top
  );
  @include rmd-theme-create-root-theme($rmd-form-theme-values, form, $omit);

  @include react-md-file-input;
  @include react-md-label;
  @include react-md-slider;
  @include react-md-toggle;
  @include react-md-text-field;

  @include react-md-select;

  .rmd-fieldset {
    @include rmd-fieldset;
  }

  .rmd-form-message-container {
    @include rmd-form-message-container;
  }

  .rmd-form-message {
    @include rmd-form-message;
  }
}
$rmd-layout-enter-duration: $rmd-sheet-enter-duration !default;
$rmd-layout-leave-duration: $rmd-sheet-leave-duration !default;
$rmd-layout-main-focus-shadow: $rmd-states-focus-shadow !default;
$rmd-layout-main-focus-z-index: 999 !default;
$rmd-layout-navigation-z-index: $rmd-dialog-z-index !default;
$rmd-layout-navigation-mini-z-index: $rmd-app-bar-z-index - 1 !default;
$rmd-layout-navigation-width: $rmd-sheet-static-width !default;
$rmd-layout-mini-navigation-width: 3.5rem !default;
$rmd-layout-theme-values: (
  nav-width: $rmd-layout-navigation-width,
  mini-nav-width: $rmd-layout-mini-navigation-width,
  main-offset: var(--rmd-layout-nav-width, $rmd-layout-navigation-width),
) !default;

@function rmd-layout-theme($theme-style) {
  @return rmd-theme-get-var-value(
    $theme-style,
    $rmd-layout-theme-values,
    layout
  );
}

@function rmd-layout-theme-var($theme-style, $fallback: null) {
  @return rmd-theme-get-var(
    $theme-style,
    $rmd-layout-theme-values,
    layout,
    $fallback
  );
}

@mixin rmd-layout-theme($property, $theme-style: $property, $fallback: null) {
  @include rmd-theme-apply-rmd-var(
    $property,
    $theme-style,
    $rmd-layout-theme-values,
    layout
  );
}

@mixin rmd-layout-theme-update-var($theme-style, $value) {
  @include rmd-theme-update-rmd-var(
    $value,
    $theme-style,
    $rmd-layout-theme-values,
    layout
  );
}

@mixin react-md-layout {
  @include rmd-theme-create-root-theme($rmd-layout-theme-values, layout);

  .rmd-layout-transition {
    &--enter {
      @include rmd-transition(deceleration);

      transition: margin $rmd-layout-enter-duration;
    }

    &--exit {
      @include rmd-transition(acceleration);

      transition: margin $rmd-layout-leave-duration;
    }
  }

  .rmd-layout-navigation {
    z-index: $rmd-layout-navigation-z-index;

    &--floating {
      background-color: transparent;
      box-shadow: none;

      @if $rmd-theme-dark-class !=
        'prefers-color-scheme' and
        $rmd-theme-dark-class
      {
        #{$rmd-theme-dark-class} & {
          background-color: transparent;
        }
      }
    }

    &--header-offset {
      @include rmd-app-bar-offset(top);
    }

    &--mini {
      @include rmd-sheet-theme-update-var(
        width,
        rmd-layout-theme-var(mini-nav-width)
      );
      @include rmd-app-bar-theme(top, height);

      z-index: $rmd-layout-navigation-mini-z-index;
    }

    &--sticky {
      overflow: visible;
      position: initial;
    }
  }

  .rmd-layout-nav {
    @include rmd-utils-scroll;

    &--grow {
      flex: 1 1 auto;
      height: 100%;
    }

    &--sticky {
      position: sticky;
      top: 0;
      will-change: transform;
    }

    &__mini-item {
      justify-content: center;
    }
  }

  .rmd-layout-tree {
    height: auto;
    overflow: visible;
  }

  .rmd-layout-title {
    &--offset {
      $margin: calc(
        #{rmd-sheet-theme-var(static-width)} + #{$rmd-app-bar-keyline}
      );

      @include rmd-utils-rtl-auto(margin-left, $margin);
    }
  }

  .rmd-layout-nav-toggle {
    &--offset {
      $title-margin: $rmd-app-bar-title-nav-margin -
        ($rmd-app-bar-lr-margin * 2);
      $nav-size: rmd-layout-theme-var(nav-width);
      $icon-size: rmd-button-theme-var(icon-size);
      $distance: calc(#{$title-margin} + #{$nav-size} - #{$icon-size});

      @include rmd-utils-rtl-auto(
        margin-right,
        $distance,
        $rmd-app-bar-lr-margin
      );
    }
  }

  .rmd-layout-nav-header {
    &--bordered {
      @include rmd-divider-border(bottom);
    }
  }

  .rmd-layout-mini-wrapper {
    display: grid;
    grid-template-columns: rmd-layout-theme-var(mini-nav-width) 1fr;
  }

  .rmd-layout-main {
    @include rmd-utils-hide-focus-outline;

    @include rmd-utils-keyboard-only {
      @include rmd-transition-shadow-transition(
        none,
        $rmd-layout-main-focus-shadow,
        '&:focus'
      );

      &::before {
        margin: inherit;
        position: fixed;
        z-index: $rmd-layout-main-focus-z-index;
      }
    }

    display: block;
    height: 100%;

    &--header-offset {
      @include rmd-app-bar-offset;

      @include rmd-utils-keyboard-only {
        &::before {
          @include rmd-app-bar-offset(top);
        }
      }
    }

    &--nav-offset {
      @include rmd-utils-rtl-auto(
        margin-left,
        rmd-layout-theme-var(main-offset)
      );
    }

    &--mini {
      @include rmd-layout-theme-update-var(
        main-offset,
        rmd-layout-theme-var(mini-nav-width)
      );
    }

    &--mini-offset {
      $distance: '#{rmd-layout-theme-var(nav-width)} - #{rmd-layout-theme-var(mini-nav-width)}';

      @include rmd-layout-theme-update-var(main-offset, calc(#{$distance}));
    }
  }
}