@use "sass:color";

@use "graph-colors.module" as graph-colors;

@use "@material/button/_index" as button;
@use "@material/card/_index" as card;
@use "@material/checkbox/_index" as checkbox;
@use "@material/chips/_index" as chips;
@use "@material/dialog/_index" as dialog;
@use "@material/drawer/_index" as drawer;
@use "@material/fab/_index" as fab;
@use "@material/icon-button/_index" as icon-button;
@use "@material/linear-progress/_index" as linear-progress;
@use "@material/list/_index" as list;
@use "@material/radio/_index" as radio;
@use "@material/ripple/_index" as ripple;
@use "@material/select/_index" as select;
@use "@material/slider/_index" as slider;
@use "@material/snackbar/_index" as snackbar;
@use "@material/switch/_index" as switch;
@use "@material/tab-indicator/_index" as tab-indicator;
@use "@material/tab/_index" as tab;
@use "@material/textfield/_index" as text-field;
@use "@material/textfield/helper-text/_index" as text-field-helper-text;
@use "@material/textfield/icon/_index" as text-field-icon;
@use "@material/theme/color-palette" as palette;
@use "@material/top-app-bar/_index" as top-app-bar;
@use "@material/feature-targeting/_index" as feature-targeting;
@use "@material/elevation/_index" as elevation;

@use "@material/notched-outline/mixins" as notched-outline-mixins;

// 1 - card, switch
// 2 - contained button
// 3 - refresh indicator
// 4 - app bar
// 6 - FAB, snackbar
// 8 - menu, side sheet
// 16 - nav drawer, modal side sheet
// 24 - dialog
$overlay-values: (
  0: 0%,
  1: 5%,
  2: 7%,
  3: 8%,
  4: 9%,
  6: 11%,
  8: 12%,
  12: 14%,
  16: 15%,
  24: 16%,
);

@function overlay-elevation($color, $elevation: 0) {
  @return lighten($color, map-get($overlay-values, $elevation));
}

@mixin theme($theme, $dark: false) {
  $text-colors: (
    text-high: rgba(map-get($theme, on-surface), 0.87),
    text-medium: rgba(map-get($theme, on-surface), 0.6),
    text-disabled: rgba(map-get($theme, on-surface), 0.38),
  );
  $dynamic-colors: (
    meta:
      if(
        $dark,
        darken(overlay-elevation(map-get($theme, surface), 4), 10%),
        darken(map-get($theme, primary), 10%)
      ),
    divider: rgba(map-get($theme, on-surface), 0.12),
    lighter-divider: rgba(map-get($theme, on-surface), 0.06),
    grey-1: mix(map-get($theme, on-surface), map-get($theme, surface), 12%),
    grey-2: mix(map-get($theme, on-surface), map-get($theme, surface), 6%),
  );
  $variables: map-merge($theme, map-merge($text-colors, $dynamic-colors));
  @each $variable, $value in $variables {
    --theme-#{$variable}: #{$value};
  }
  body {
    background-color: map-get($variables, background);
  }
  ::selection {
    background: rgba(map-get($variables, secondary), 0.45);
    color: inherit;
  }
  a {
    color: map-get($variables, primary);
  }

  .autocomplete-mobile {
    background-color: map-get($variables, background);
  }

  .banner-text {
    color: map-get($variables, text-medium);
  }

  .empty-container,
  .login-container,
  .message-container {
    .title {
      color: map-get($variables, text-high);
    }
    .subtitle {
      color: map-get($variables, text-medium);
    }
  }

  .footer {
    color: map-get($variables, text-medium);
    .bold {
      color: map-get($variables, text-high);
    }
  }

  .full-screen-dialog {
    background-color: if(
      $dark,
      overlay-elevation(map-get($variables, surface), 16),
      map-get($variables, surface)
    );
    &__app-bar.mdc-top-app-bar {
      background-color: if(
        $dark,
        darken(overlay-elevation(map-get($variables, surface), 24), 10%),
        map-get($variables, primary)
      );
    }
    &-scrim {
      background-color: rgba(map-get($variables, on-surface), 0.32);
    }
    .mdc-menu-surface {
      background-color: if(
        $dark,
        overlay-elevation(map-get($variables, surface), 24),
        map-get($variables, surface)
      );
    }
    .mdc-card {
      background-color: if(
        $dark,
        overlay-elevation(map-get($variables, surface), 16),
        map-get($variables, surface)
      );
      @if ($dark) {
        transition-property: box-shadow, background-color;
      }
      &.dragged {
        background-color: if(
          $dark,
          overlay-elevation(map-get($variables, surface), 24),
          map-get($variables, surface)
        );
      }
    }
    .mdc-chip {
      @include chips.fill-color(
        mix(
          map-get($variables, on-surface),
          if(
            $dark,
            overlay-elevation(map-get($variables, surface), 24),
            map-get($variables, surface)
          ),
          12%
        )
      );
    }
    .mdc-typography--overline,
    .mdc-typography--caption {
      color: map-get($variables, text-medium);
    }
    .mdc-typography--headline4,
    .mdc-typography--headline5,
    .preview,
    .mdc-typography--body2,
    .mdc-form-field {
      color: map-get($variables, text-high);
    }
  }
  .image-upload {
    &-title {
      color: map-get($variables, text-medium);
    }
    .image-display {
      color: map-get($variables, text-medium);
      &.over {
        border-color: map-get($variables, primary);
      }
      .caption {
        color: map-get($variables, text-medium);
      }
    }
  }

  .sales-container {
    .sales-image-icon {
      color: map-get($variables, text-medium);
    }
  }

  .list .content-grid {
    background-color: if(
      $dark,
      overlay-elevation(map-get($variables, surface), 1),
      map-get($variables, surface)
    );
  }

  .subheader,
  .drag-handle {
    color: map-get($variables, text-medium);
  }

  .main.extended-app-bar .outer-container:first-child .subheader {
    color: if(
      $dark,
      map-get($variables, text-medium),
      rgba(map-get($variables, on-primary), 0.6)
    );
  }

  .drawer-open .main.extended-app-bar,
  .drawer-open.main.extended-app-bar {
    .outer-container:first-child .subheader {
      color: map-get($variables, text-medium);
    }
  }

  .main::before {
    background-color: if(
      $dark,
      overlay-elevation(map-get($variables, surface), 4),
      map-get($variables, primary)
    );
  }

  .legal,
  .guide {
    color: map-get($variables, text-high);
    .mdc-typography--button {
      color: map-get($variables, primary);
      &.delete {
        color: map-get($variables, error);
      }
    }
    .secondary {
      color: map-get($variables, text-medium);
      .bold {
        color: map-get($variables, text-high);
      }
    }
    &-container::before {
      background-color: if(
        $dark,
        overlay-elevation(map-get($variables, surface), 4),
        map-get($variables, primary)
      );
    }
  }

  .user {
    .mdc-card__action--icon.disabled {
      color: map-get($variables, text-disabled);
    }
  }

  .log,
  .changelog {
    .mdc-icon-button {
      color: map-get($variables, text-medium);
      @include ripple.states(map-get($variables, on-surface));
    }
    .before,
    .after {
      color: map-get($variables, text-disabled);
      a {
        color: rgba(map-get($variables, primary), 0.38);
      }
      .highlight {
        color: map-get($variables, text-high);
        a {
          color: map-get($variables, primary);
        }
      }
    }
  }

  .set-changelog {
    .mdc-card__media-content {
      color: if(
        $dark,
        overlay-elevation(map-get($variables, surface), 1),
        map-get($variables, surface)
      );
    }
  }

  .update-entry {
    color: map-get($variables, text-high);
    .linked-indicator {
      color: map-get($variables, text-medium);
    }
    &.pinned {
      a,
      .pin-indicator,
      .linked-indicator {
        color: map-get($variables, secondary);
      }
    }
    &.linked {
      @if ($dark) {
        background-color: overlay-elevation(map-get($variables, surface), 3);
      }
    }
  }

  .entries {
    &-drawer.mdc-drawer {
      @include drawer.surface-fill-color(transparent);
      .mdc-chip {
        @include chips.fill-color(
          mix(
            map-get($variables, on-surface),
            map-get($variables, background),
            12%
          )
        );
        @include chips.selected-ink-color(map-get($variables, primary));
      }
    }
    &-list {
      &-container {
        background-color: if(
          $dark,
          overlay-elevation(map-get($variables, surface), 1),
          map-get($variables, surface)
        );
        .mdc-chip {
          @include chips.fill-color(
            mix(
              map-get($variables, on-surface),
              if(
                $dark,
                overlay-elevation(map-get($variables, surface), 1),
                map-get($variables, surface)
              ),
              12%
            )
          );
          @include chips.selected-ink-color(map-get($variables, primary));
        }
      }
      .mdc-list {
        &-group {
          &__subheader {
            color: map-get($variables, text-medium);
          }
        }
      }
    }
  }

  .sponsors {
    .cannonkeys {
      fill: if($dark, white, #060d44);
    }
    .prototypist {
      fill: if($dark, white, #3f6b6b);
    }
    .latamkeys-text {
      fill: map-get($variables, on-surface);
    }
    .deskhero {
      color: map-get($variables, on-surface);
    }
  }

  .segmented-button {
    &.segmented-button--toggle .segmented-button__segment {
      @include button.ink-color(map-get($variables, text-medium));
      @include ripple.states(
        map-get($variables, on-surface),
        false,
        feature-targeting.all(),
        ".mdc-button__ripple"
      );
      @include ripple.states-selected(
        map-get($variables, primary),
        false,
        feature-targeting.all(),
        ".mdc-button__ripple"
      );
      @include ripple.states-selected(
        map-get($variables, text-disabled),
        false,
        feature-targeting.all(),
        "&:disabled .mdc-button__ripple"
      );
      &--selected {
        @include button.ink-color(map-get($variables, primary));
        @include button.outline-color(map-get($variables, primary));
      }
      &:disabled,
      &--selected:disabled {
        @include button.ink-color(map-get($variables, text-disabled));
        @include button.outline-color(map-get($variables, text-disabled));
      }
    }
  }

  @if ($dark != true) {
    &:not([dir="rtl"])
      .mdc-top-app-bar
      .segmented-button
      .mdc-button:first-child:not(.segmented-button__segment--selected) {
      border-left-color: rgba(map-get($variables, on-primary), 0.38);
    }
    &:not([dir="rtl"])
      .mdc-top-app-bar
      .segmented-button
      .mdc-button:last-child:not(.segmented-button__segment--selected) {
      border-right-color: rgba(map-get($variables, on-primary), 0.38);
    }
  }

  @media (max-width: 599px) {
    .settings-container {
      background-color: if(
        $dark,
        overlay-elevation(map-get($variables, surface), 1),
        map-get($variables, surface)
      );
    }
  }

  // external

  .markdown {
    .mdc-typography {
      &--headline5,
      &--headline6,
      &--subtitle1,
      &--subtitle2,
      &--body2 {
        color: map-get($variables, text-high);
      }
      &--overline,
      &--caption {
        color: map-get($variables, text-medium);
      }
    }
  }

  .react-mde.markdown-editor {
    .markdown-editor {
      &__toolbar {
        .mdc-icon-button {
          color: map-get($variables, text-medium);
          @include ripple.states(map-get($variables, on-surface));
        }
      }
      &__textarea {
        color: map-get($variables, text-high);
        caret-color: map-get($variables, primary);
        border-color: rgba(map-get($variables, on-surface), 0.38);
        &--hovered {
          border-color: rgba(map-get($variables, on-surface), 0.87);
        }
        &--focused {
          border-color: map-get($variables, primary);
        }
        &--invalid:not(.markdown-editor__textarea--focused) {
          border-color: map-get($variables, error);
        }
      }
    }
  }

  // chartist

  .ct-chart {
    .ct-label,
    .ct-axis-title {
      fill: map-get($variables, text-medium);
      color: map-get($variables, text-medium);
    }
  }

  $letters: (
    a,
    b,
    c,
    d,
    e,
    f,
    g,
    h,
    i,
    j,
    k,
    l,
    m,
    n,
    o,
    p,
    q,
    r,
    s,
    t,
    u,
    v,
    w,
    x,
    y,
    z
  );
  @each $letter in $letters {
    $color: if(
      $dark,
      nth(graph-colors.$graph-colors-dark, index($letters, $letter)),
      nth(graph-colors.$graph-colors, index($letters, $letter))
    );
    .ct-series-#{$letter} {
      .ct-point,
      .ct-line,
      .ct-bar,
      .ct-slice-donut {
        stroke: $color;
      }
      .ct-slice-pie,
      .ct-donut-solid,
      .ct-area,
      .ct-stroked-point {
        fill: $color;
      }
    }
  }

  .focus-chips .mdc-chip.focus-chip {
    &.mdc-chip--selected {
      &,
      &:hover {
        color: map-get($variables, text-high);
      }
      font-weight: bold;
    }
  }

  @for $index from 0 to 40 {
    $color: if(
      $dark,
      nth(
        graph-colors.$graph-colors-dark,
        ($index % length(graph-colors.$graph-colors-dark) + 1)
      ),
      nth(
        graph-colors.$graph-colors,
        ($index % length(graph-colors.$graph-colors-dark) + 1)
      )
    );
    .ct-series-index-#{$index} {
      .ct-point,
      .ct-line,
      .ct-bar,
      .ct-slice-donut {
        stroke: $color;
      }
      .ct-slice-pie,
      .ct-donut-solid,
      .ct-area,
      .ct-stroked-point {
        fill: $color;
      }
    }
    .focus-chips .focus-chip-index-#{$index} {
      @include chips.leading-icon-color($color, 1);
      @include ripple.states($color);
      @include chips.selected-ink-color($color);
    }
    .focused {
      &:not(.series-index-#{$index}) {
        .ct-series-index-#{$index} {
          pointer-events: none;
          .ct-point,
          .ct-line,
          .ct-bar,
          .ct-slice-donut {
            stroke: rgba($color, 0.1);
          }
          .ct-slice-pie,
          .ct-donut-solid,
          .ct-area,
          .ct-stroked-point {
            fill: rgba($color, 0.1);
          }
          .ct-stroked-point {
            pointer-events: none !important;
          }
        }
      }
    }
  }

  .table-card {
    .ct-series-a {
      .ct-point,
      .ct-line,
      .ct-bar,
      .ct-slice-donut {
        stroke: map-get($variables, secondary);
      }
      .ct-slice-pie,
      .ct-donut-solid,
      .ct-area,
      .ct-stroked-point {
        fill: map-get($variables, secondary);
      }
    }
  }
  .pie-card {
    .pie-chart-container {
      &.status .ct-chart {
        .ct-series-a {
          .ct-point,
          .ct-line,
          .ct-bar,
          .ct-slice-donut {
            stroke: map-get($variables, grey-2);
          }
          .ct-slice-pie,
          .ct-donut-solid,
          .ct-area {
            fill: map-get($variables, grey-2);
          }
        }
        .ct-series-b {
          .ct-point,
          .ct-line,
          .ct-bar,
          .ct-slice-donut {
            stroke: map-get($variables, grey-1);
          }
          .ct-slice-pie,
          .ct-donut-solid,
          .ct-area {
            fill: map-get($variables, grey-1);
          }
        }
        .ct-series.ct-series-c {
          .ct-point,
          .ct-line,
          .ct-bar,
          .ct-slice-donut {
            stroke: map-get($variables, secondary);
          }
          .ct-slice-pie,
          .ct-donut-solid,
          .ct-area,
          .ct-stroked-point {
            fill: map-get($variables, secondary);
          }
        }
        .ct-series.ct-series-d {
          .ct-point,
          .ct-line,
          .ct-bar,
          .ct-slice-donut {
            stroke: map-get($variables, primary);
          }
          .ct-slice-pie,
          .ct-donut-solid,
          .ct-area,
          .ct-stroked-point {
            fill: map-get($variables, primary);
          }
        }
      }
    }
    .indicator {
      &.post-gb {
        background-color: map-get($variables, primary);
      }
      &.live-gb {
        background-color: map-get($variables, secondary);
      }
    }
  }
  .timeline-card {
    .timeline-chart-container {
      &.single.primary .ct-chart {
        .ct-series.ct-series-a {
          .ct-point,
          .ct-line,
          .ct-bar,
          .ct-slice-donut {
            stroke: map-get($variables, primary);
          }
          .ct-slice-pie,
          .ct-donut-solid,
          .ct-area,
          .ct-stroked-point {
            fill: map-get($variables, primary);
          }
        }
      }
      &.single.secondary .ct-chart {
        .ct-series.ct-series-a {
          .ct-point,
          .ct-line,
          .ct-bar,
          .ct-slice-donut {
            stroke: map-get($variables, secondary);
          }
          .ct-slice-pie,
          .ct-donut-solid,
          .ct-area,
          .ct-stroked-point {
            fill: map-get($variables, secondary);
          }
        }
      }
      &.shipped .ct-chart {
        .ct-series.ct-series-a {
          .ct-point,
          .ct-line,
          .ct-bar,
          .ct-slice-donut {
            stroke: map-get($variables, primary);
          }
          .ct-slice-pie,
          .ct-donut-solid,
          .ct-area,
          .ct-stroked-point {
            fill: map-get($variables, primary);
          }
        }
        .ct-series.ct-series-b {
          .ct-point,
          .ct-line,
          .ct-bar,
          .ct-slice-donut {
            stroke: map-get($variables, grey-1);
          }
          .ct-slice-pie,
          .ct-donut-solid,
          .ct-area,
          .ct-stroked-point {
            fill: map-get($variables, grey-1);
          }
        }
      }
    }
    .indicator {
      &.shipped {
        background-color: map-get($variables, primary);
      }
      &.unshipped,
      &.pre-gb {
        background-color: map-get($variables, grey-1);
      }
      &.ic {
        background-color: map-get($variables, grey-2);
      }
    }
  }

  .chartist-tooltip {
    background-color: map-get($variables, text-high);
    color: map-get($variables, surface);
  }

  // MUI

  .mdc-dialog {
    .MuiPickersToolbar-toolbar,
    .picker__bottom-bar::before {
      background-color: if(
        $dark,
        darken(overlay-elevation(map-get($variables, surface), 24), 10%),
        map-get($variables, primary)
      );
    }
  }

  .mdc-drawer {
    .mdc-menu-surface {
      .MuiPickersToolbar-toolbar {
        background-color: if(
          $dark,
          darken(overlay-elevation(map-get($variables, surface), 24), 10%),
          map-get($variables, primary)
        );
      }
    }
  }

  // MDC

  .mdc-button {
    @include button.ink-color(map-get($variables, primary));
    @include ripple.states(
      map-get($variables, primary),
      false,
      feature-targeting.all(),
      ".mdc-button__ripple"
    );
    &:disabled {
      color: map-get($variables, text-disabled);
    }
    &.mdc-button--raised,
    &.mdc-button--unelevated {
      @include button.container-fill-color(map-get($variables, primary));
      @include button.ink-color(map-get($variables, on-primary));
      @include ripple.states(
        map-get($variables, on-primary),
        false,
        feature-targeting.all(),
        ".mdc-button__ripple"
      );
    }
    &.secondary {
      @include button.ink-color(map-get($variables, secondary));
      @include ripple.states(
        map-get($variables, secondary),
        false,
        feature-targeting.all(),
        ".mdc-button__ripple"
      );
      &.mdc-button--raised,
      &.mdc-button--unelevated {
        @include button.container-fill-color(map-get($variables, secondary));
        @include button.ink-color(map-get($variables, on-secondary));
        @include ripple.states(
          map-get($variables, on-secondary),
          false,
          feature-targeting.all(),
          ".mdc-button__ripple"
        );
      }
    }
    &.delete {
      @include button.ink-color(map-get($variables, error));
      @include ripple.states(
        map-get($variables, error),
        false,
        feature-targeting.all(),
        ".mdc-button__ripple"
      );
    }
  }

  .mdc-card {
    background-color: if(
      $dark,
      overlay-elevation(map-get($variables, surface), 1),
      map-get($variables, surface)
    );
    color: map-get($variables, on-surface);
    &.mdc-card--selected {
      .mdc-typography--headline5 {
        color: map-get($variables, primary);
      }
      .live-indicator,
      .ship-indicator {
        color: map-get($variables, primary);
      }
      .mdc-typography--overline:not(.time-indicator),
      .mdc-typography--subtitle2 {
        color: map-get($variables, primary);
      }
    }
    &.deleted {
      .mdc-typography--headline5 {
        color: map-get($variables, error);
      }
      .deleted-indicator {
        color: map-get($variables, on-error);
        background-color: map-get($variables, error);
      }
      .mdc-typography--overline:not(.deleted-indicator),
      .mdc-typography--subtitle2 {
        color: map-get($variables, error);
      }
    }
    &__primary-action {
      @include ripple.states(map-get($variables, on-surface));
      @include ripple.states-selected(map-get($variables, primary));
      @include ripple.states-activated(map-get($variables, primary));
    }
    &__action--icon {
      &:not(:disabled) {
        color: map-get($variables, text-medium);
      }
      &:disabled {
        color: map-get($variables, text-disabled);
      }
    }
    .mdc-typography--headline5 {
      color: map-get($variables, text-high);
    }
    .live-indicator,
    .ship-indicator {
      color: map-get($variables, text-medium);
    }
    .mdc-typography--overline,
    .mdc-typography--subtitle2,
    .mdc-typography--caption {
      color: map-get($variables, text-medium);
    }
  }
  @if ($dark) {
    @media (min-width: 1240px) {
      transition-property: box-shadow, background-color;
      .card-container .mdc-card:hover {
        background-color: overlay-elevation(map-get($variables, surface), 4);
      }
    }
  }

  .mdc-checkbox {
    @include checkbox.container-colors(
      map-get($variables, text-medium),
      transparent,
      map-get($variables, secondary),
      rgba(map-get($variables, secondary), 0.3)
    );
    @include checkbox.disabled-container-colors(
      rgba(map-get($variables, on-surface), 0.26),
      transparent,
      rgba(map-get($variables, on-surface), 0.26),
      rgba(map-get($variables, on-surface), 0.078)
    );
    @include checkbox.ink-color(map-get($variables, on-surface));
    @include checkbox.disabled-ink-color(map-get($variables, on-surface));
    @include ripple.states(
      map-get($variables, on-surface),
      false,
      feature-targeting.all(),
      ".mdc-checkbox__ripple"
    );
    &.mdc-checkbox--selected {
      @include ripple.states(
        map-get($variables, secondary),
        false,
        feature-targeting.all(),
        ".mdc-checkbox__ripple"
      );
    }
  }

  .mdc-chip {
    @include chips.fill-color(
      mix(map-get($variables, on-surface), map-get($variables, surface), 12%)
    );
    @include chips.ink-color(map-get($variables, text-high));
    @include chips.leading-icon-color(map-get($variables, text-high));
    @include chips.trailing-icon-color(map-get($variables, text-high));
    @include chips.selected-ink-color(map-get($variables, primary));
    &[disabled] {
      @include chips.ink-color(map-get($variables, text-disabled));
    }
  }

  .mdc-data-table {
    color: map-get($variables, text-high);
    &__cell {
      color: map-get($variables, text-high);
    }
    &__header-cell {
      color: map-get($variables, text-high);
      &.sorted::before {
        color: map-get($variables, text-medium);
      }
      &.profile-title {
        @include ripple.states(map-get($variables, on-surface));
      }
    }
    &__row:hover:not(.mdc-data-table__row--selected):not(.mdc-data-table__row--activated) {
      background-color: rgba(map-get($variables, on-surface), 0.04);
    }
  }

  .mdc-dialog {
    @include dialog.container-fill-color(
      if(
        $dark,
        overlay-elevation(map-get($variables, surface), 24),
        map-get($variables, surface)
      )
    );
    @include dialog.scrim-color(map-get($variables, on-surface), 0.32);
    @include dialog.title-ink-color(map-get($variables, text-high));
    @include dialog.content-ink-color(map-get($variables, text-medium));
    color: map-get($variables, text-high);
    .mdc-chip {
      @include chips.fill-color(
        mix(
          map-get($variables, on-surface),
          if(
            $dark,
            overlay-elevation(map-get($variables, surface), 24),
            map-get($variables, surface)
          ),
          12%
        )
      );
    }
  }

  .mdc-drawer {
    @include drawer.surface-fill-color(
      if(
        $dark,
        overlay-elevation(map-get($variables, surface), 16),
        map-get($variables, surface)
      )
    );
    @include drawer.title-ink-color(map-get($variables, text-high));
    @include drawer.subtitle-ink-color(map-get($variables, text-medium));
    @include drawer.item-text-ink-color(map-get($variables, text-high));
    @include drawer.item-icon-ink-color(map-get($variables, text-medium));
    @include drawer.item-activated-icon-ink-color(map-get($variables, primary));
    @include drawer.item-activated-text-ink-color(map-get($variables, primary));
    @include drawer.scrim-fill-color(
      rgba(map-get($variables, on-surface), 0.32)
    );
    --mdc-slider-bg-color-behind-component: #{if(
        $dark,
        overlay-elevation(map-get($variables, surface), 16),
        map-get($variables, surface)
      )};
    &.mdc-drawer--dismissible {
      @include drawer.surface-fill-color(
        if(
          $dark,
          overlay-elevation(map-get($variables, surface), 1),
          map-get($variables, surface)
        )
      );
      --mdc-slider-bg-color-behind-component: #{if(
          $dark,
          overlay-elevation(map-get($variables, surface), 1),
          map-get($variables, surface)
        )};
      .mdc-chip {
        @include chips.fill-color(
          mix(
            map-get($variables, on-surface),
            if(
              $dark,
              overlay-elevation(map-get($variables, surface), 1),
              map-get($variables, surface)
            ),
            12%
          )
        );
        @include chips.selected-ink-color(map-get($variables, primary));
      }
      &.nav {
        .mdc-list-item.contains-activated {
          @include list.item-primary-text-ink-color(
            map-get($variables, primary)
          );
          @include list.item-graphic-ink-color(map-get($variables, primary));
          @include list.item-meta-ink-color(map-get($variables, primary));
          @include ripple.states(map-get($variables, primary));
          .mdc-typography--caption {
            color: map-get($variables, primary);
          }
        }
        &.mdc-drawer--open,
        &.mdc-drawer--opening {
          .mdc-list-item {
            color: map-get($variables, text-high);
            &.mdc-list-item--activated {
              color: map-get($variables, primary);
            }
          }
        }
      }
      &.rail.mdc-drawer--animate:not(.mdc-drawer--opening),
      &.rail.mdc-drawer--closing {
        .mdc-list-item,
        .mdc-list-item.mdc-list-item--activated {
          color: transparent;
        }
      }

      .mdc-card {
        background-color: if(
          $dark,
          overlay-elevation(map-get($variables, surface), 2),
          map-get($variables, surface)
        );
        &--outlined {
          background-color: if(
            $dark,
            overlay-elevation(map-get($variables, surface), 1),
            map-get($variables, surface)
          );
        }
        &.dragged {
          background-color: if(
            $dark,
            overlay-elevation(map-get($variables, surface), 8),
            map-get($variables, surface)
          );
        }
      }
    }
    .mdc-card {
      background-color: if(
        $dark,
        overlay-elevation(map-get($variables, surface), 24),
        map-get($variables, surface)
      );
      &--outlined {
        background-color: if(
          $dark,
          overlay-elevation(map-get($variables, surface), 16),
          map-get($variables, surface)
        );
      }
      &.dragged {
        background-color: if(
          $dark,
          overlay-elevation(map-get($variables, surface), 24),
          map-get($variables, surface)
        );
      }
      @if ($dark) {
        transition-property: box-shadow, background-color;
      }
    }
    @if ($dark) {
      &.drawer-right.entry-drawer .form .mdc-card {
        transition-property: box-shadow, background-color;
      }
    }
    .mdc-chip {
      @include chips.fill-color(
        mix(
          map-get($variables, on-surface),
          if(
            $dark,
            overlay-elevation(map-get($variables, surface), 16),
            map-get($variables, surface)
          ),
          12%
        )
      );
      @include chips.selected-ink-color(map-get($variables, primary));
      &[disabled] {
        @include chips.ink-color(map-get($variables, text-disabled));
      }
    }
    .mdc-icon-button {
      color: map-get($variables, text-medium);
      @include ripple.states(map-get($variables, on-surface));
    }

    .mdc-menu-surface {
      background-color: if(
        $dark,
        overlay-elevation(map-get($variables, surface), 24),
        map-get($variables, surface)
      );
    }

    &__content {
      .mdc-list-item {
        &__secondary-text {
          color: map-get($variables, text-medium);
        }
      }
      .mdc-typography--overline,
      .mdc-typography--caption {
        color: map-get($variables, text-medium);
      }
      .mdc-typography--headline4,
      .mdc-typography--headline5,
      .preview,
      .mdc-typography--body2,
      .mdc-form-field {
        color: map-get($variables, text-high);
      }
    }
    .mdc-linear-progress {
      @include linear-progress.buffer-color(
        mix(
          map-get($variables, on-surface),
          if(
            $dark,
            overlay-elevation(map-get($variables, surface), 16),
            map-get($variables, surface)
          ),
          10%
        )
      );
    }
  }

  .mdc-fab {
    @include fab.container-color(map-get($variables, secondary));
    @include fab.ink-color(map-get($variables, on-secondary));
    .mdc-fab__ripple {
      @include ripple.states(map-get($variables, on-secondary));
    }
  }

  .mdc-form-field {
    color: map-get($variables, text-high);
  }

  .mdc-icon-button {
    @include icon-button.ink-color(map-get($variables, text-medium));
    @include icon-button.disabled-ink-color(map-get($variables, text-disabled));
    &--on {
      &.primary-on,
      &.bought {
        @include icon-button.ink-color(map-get($variables, primary));
      }
      &.secondary-on,
      &.favorite {
        @include icon-button.ink-color(map-get($variables, secondary));
      }
      &.danger-on,
      &.hide {
        @include icon-button.ink-color(map-get($variables, error));
      }
    }
  }

  .mdc-image-list {
    .mdc-image-list__item {
      &.selected {
        @include ripple.states(map-get($variables, primary));
        .mdc-image-list__supporting {
          background-color: rgba(map-get($variables, on-primary), 0.75);
          color: map-get($variables, primary);
          .live-indicator,
          .shipped-indicator {
            fill: map-get($variables, primary);
          }
        }
      }
      .mdc-checkbox {
        @include checkbox.container-colors(
          rgba(white, 0.6),
          transparent,
          map-get($variables, secondary),
          rgba(map-get($variables, secondary), 0.3)
        );
        &.mdc-checkbox--selected {
          @include ripple.states(
            map-get($variables, secondary),
            false,
            feature-targeting.all(),
            ".mdc-checkbox__ripple"
          );
        }
      }
    }
  }
  :not(.mdc-list--non-interactive):not(.theme-list)
    > :not(.mdc-list-item--disabled).mdc-list-item:not(.mdc-list-item--selected):not(.mdc-list-item--activated):not(.contains-activated) {
    @include ripple.states(map-get($variables, on-surface));
  }
  .mdc-list .mdc-list-item,
  .mdc-list-item {
    @include list.item-primary-text-ink-color(map-get($variables, text-high));
    @include list.item-secondary-text-ink-color(
      map-get($variables, text-medium)
    );
    @include list.item-graphic-ink-color(map-get($variables, text-medium));
    @include list.item-meta-ink-color(map-get($variables, text-medium));
    @include ripple.states(map-get($variables, on-surface));
    @include ripple.states-activated(map-get($variables, primary));
    @include ripple.states-selected(map-get($variables, primary));
    &.mdc-list-item--activated,
    &.mdc-list-item--selected {
      @include list.item-primary-text-ink-color(map-get($variables, primary));
      @include list.item-secondary-text-ink-color(map-get($variables, primary));
      @include list.item-graphic-ink-color(map-get($variables, primary));
      @include list.item-meta-ink-color(map-get($variables, primary));
      .overline {
        color: map-get($variables, primary);
      }
      .mdc-icon-button {
        color: map-get($variables, primary);
        @include ripple.states(map-get($variables, primary));
      }
    }
    &.mdc-list-item--disabled {
      .mdc-list-item__text {
        opacity: 1;
      }
      .mdc-list-item__primary-text {
        @include list.item-primary-text-ink-color(
          map-get($variables, text-high)
        );
      }
      @include list.item-secondary-text-ink-color(
        map-get($variables, text-medium)
      );
    }
    .mdc-icon-button {
      color: map-get($variables, text-medium);
      @include ripple.states(map-get($variables, on-surface));
    }
    .time-indicator {
      background-color: mix(
        map-get($variables, on-surface),
        map-get($variables, surface),
        80%
      );
      color: map-get($variables, surface);
    }
    .overline,
    .caption {
      color: map-get($variables, text-medium);
    }
  }

  .mdc-menu-surface {
    background-color: if(
      $dark,
      overlay-elevation(map-get($variables, surface), 8),
      map-get($variables, surface)
    );
    color: map-get($variables, on-surface);
  }

  @media (max-width: 1240px) {
    .mdc-menu.mdc-select__menu.mdc-menu-surface.mdc-menu-surface--fixed {
      background-color: if(
        $dark,
        overlay-elevation(map-get($variables, surface), 24),
        map-get($variables, surface)
      );
    }
  }

  .mdc-radio {
    @include radio.unchecked-stroke-color(map-get($variables, text-medium));
    @include radio.checked-stroke-color(map-get($variables, secondary));
    @include radio.ink-color(map-get($variables, secondary));
    @include ripple.states(
      map-get($variables, secondary),
      false,
      feature-targeting.all(),
      ".mdc-radio__ripple"
    );
  }

  .mdc-select {
    @include select.ink-color(map-get($variables, text-high));
    @include select.label-color(map-get($variables, text-medium));
    @include select.focused-label-color(
      rgba(map-get($variables, primary), 0.87)
    );
    @include select.outline-color(rgba(map-get($variables, on-surface), 0.38));
    @include select.hover-outline-color(map-get($variables, text-high));
    @include select.focused-outline-color(map-get($variables, primary));
    &--with-leading-icon {
      &:not(.mdc-select--disabled) {
        .mdc-select__icon {
          color: map-get($variables, text-high);
        }
      }
    }
    &.mdc-select--disabled {
      .mdc-select__selected-text {
        color: map-get($variables, text-disabled);
      }
      .mdc-select__icon {
        color: map-get($variables, text-disabled);
      }
      .mdc-select__dropdown-icon {
        // requires commenting out line 196 of /node_modules/@material/select/_mixins.scss
        @include select.dd-arrow-svg-bg_(
          "#" + str_slice(ie_hex_str(map-get($variables, on-surface)), 4),
          0.38
        );
      }
      &.mdc-select--outlined {
        @include notched-outline-mixins.color(
          rgba(map-get($variables, on-surface), 0.16)
        );
      }
    }
    .mdc-select__dropdown-icon {
      // requires commenting out line 196 of /node_modules/@material/select/_mixins.scss
      @include select.dd-arrow-svg-bg_(
        "#" + str_slice(ie_hex_str(map-get($variables, on-surface)), 4),
        0.6
      );
    }
    &.mdc-select--focused .mdc-select__dropdown-icon {
      @include select.dd-arrow-svg-bg_(map-get($variables, primary), 1);
    }
  }

  .mdc-slider {
    @include slider.highlight-color(map-get($variables, secondary));
    @include slider.rail-color(map-get($variables, secondary));
    @include slider.rail-tick-mark-color(map-get($variables, on-surface));
    @include slider.thumb-color(map-get($variables, secondary));
    @include slider.focus-halo-color(map-get($variables, secondary));
    &:not(.mdc-slider--disabled) .mdc-slider__pin {
      background-color: map-get($variables, text-high);
      color: map-get($variables, surface);
      &::before {
        border-top-color: map-get($variables, text-high);
      }
    }
    &.mdc-slider--disabled {
      .mdc-slider__track {
        background-color: map-get($variables, text-disabled);
        &-container::after {
          background-color: map-get($variables, text-disabled);
        }
      }
      .mdc-slider__track-marker-container {
        background-color: map-get($variables, text-medium);
      }
      .mdc-slider__thumb {
        fill: map-get($variables, text-disabled);
      }
    }
  }

  .mdc-snackbar {
    @include snackbar.fill-color(
      mix(map-get($variables, on-surface), map-get($variables, surface), 80%)
    );
    @include snackbar.label-ink-color(map-get($variables, surface));
    &__action:not(:disabled) {
      color: if(
        $dark,
        darken(map-get($variables, primary), 25%),
        map-get($variables, primary)
      );
      @include ripple.states(
        if(
          $dark,
          darken(map-get($variables, primary), 25%),
          map-get($variables, primary)
        )
      );
    }
  }

  .mdc-switch {
    @include switch.toggled-off-track-color(map-get($variables, on-surface));
    @include switch.toggled-off-thumb-color(if($dark, #bdbdbd, #fafafa));
    @include switch.toggled-on-color(map-get($variables, secondary));
  }

  .mdc-text-field {
    &:not(.mdc-text-field--focused) {
      @include text-field-icon.leading-icon-color(
        map-get($variables, text-medium)
      );
      @include text-field-icon.trailing-icon-color(
        map-get($variables, text-medium)
      );
      @include text-field.ink-color(map-get($variables, text-high));
      @include text-field.label-color(map-get($variables, text-medium));
      @include text-field.caret-color(map-get($variables, text-high));
      @include text-field.outline-color(map-get($variables, text-disabled));
      @include text-field.hover-outline-color(map-get($variables, text-medium));
      @include text-field-helper-text.helper-text-color(
        map-get($variables, text-medium)
      );
      &.mdc-text-field--invalid {
        @include text-field-icon.leading-icon-color(
          map-get($variables, text-medium)
        );
        @include text-field-icon.trailing-icon-color(
          map-get($variables, text-medium)
        );
        @include text-field.ink-color(map-get($variables, text-high));
        @include text-field.label-color(map-get($variables, error));
        @include text-field.caret-color(map-get($variables, error));
        @include text-field.outline-color(map-get($variables, error));
        @include text-field.hover-outline-color(
          if(
            $dark,
            lighten(map-get($variables, error), 12%),
            darken(map-get($variables, error), 25%)
          )
        );
        @include text-field-helper-text.helper-text-color(
          map-get($variables, error)
        );
      }
    }
    &.mdc-text-field--focused {
      @include text-field-icon.leading-icon-color(
        map-get($variables, text-medium)
      );
      @include text-field-icon.trailing-icon-color(
        map-get($variables, text-medium)
      );
      @include text-field.ink-color(map-get($variables, text-high));
      @include text-field.label-color(map-get($variables, primary));
      @include text-field.caret-color(map-get($variables, primary));
      @include text-field.outline-color(map-get($variables, primary));
      @include text-field-helper-text.helper-text-color(
        map-get($variables, text-medium)
      );
      .mdc-text-field__input:required
        ~ .mdc-notched-outline
        .mdc-floating-label::after {
        color: map-get($variables, primary);
      }
    }
    &.mdc-text-field--disabled {
      .mdc-text-field__input,
      .mdc-floating-label {
        color: map-get($variables, text-disabled);
      }
      .mdc-notched-outline__leading,
      .mdc-notched-outline__notch,
      .mdc-notched-outline__trailing {
        border-color: rgba(map-get($variables, on-surface), 0.06);
      }
    }
  }
  .mdc-linear-progress {
    @include linear-progress.bar-color(map-get($variables, primary));
    @include linear-progress.buffer-color(
      mix(
        map-get($variables, on-surface),
        if(
          $dark,
          overlay-elevation(map-get($variables, surface), 1),
          map-get($variables, surface)
        ),
        10%
      )
    );
  }
  .mdc-tab-bar {
    .mdc-tab {
      @include tab.text-label-color(map-get($variables, text-medium));
      @include tab.icon-color(map-get($variables, text-medium));
      @include tab.states-color(map-get($variables, on-surface));
      @include tab.active-text-label-color(map-get($variables, primary));
      @include tab.active-icon-color(map-get($variables, primary));
      @include tab.active-states-color(map-get($variables, primary));
      .mdc-tab-indicator {
        @include tab-indicator.underline-color(map-get($variables, primary));
      }
    }
  }
  .mdc-top-app-bar {
    @include top-app-bar.fill-color(
      if(
        $dark,
        overlay-elevation(map-get($variables, surface), 4),
        map-get($variables, primary)
      )
    );
    @include top-app-bar.ink-color(
      if($dark, map-get($variables, text-high), map-get($variables, on-primary))
    );
    @include top-app-bar.icon-ink-color(
      if($dark, map-get($variables, text-high), map-get($variables, on-primary))
    );
    &.contextual {
      $background: if(
        $dark,
        overlay-elevation(
          color.scale(map-get($variables, surface), $lightness: -50%),
          4
        ),
        palette.$grey-900
      );
      @include top-app-bar.fill-color($background);
      @include top-app-bar.ink-color(rgba(white, 0.87));
      @include top-app-bar.icon-ink-color(rgba(white, 0.87));
    }
    @if ($dark != true) {
      .segmented-button.segmented-button--toggle {
        .segmented-button__segment {
          @include button.ink-color(rgba(map-get($variables, on-primary), 0.6));
          @include button.outline-color(
            rgba(map-get($variables, on-primary), 0.38)
          );
          @include ripple.states(
            map-get($variables, on-primary),
            false,
            feature-targeting.all(),
            ".mdc-button__ripple"
          );
          @include ripple.states-selected(
            map-get($variables, on-primary),
            false,
            feature-targeting.all(),
            ".mdc-button__ripple"
          );
          &--selected {
            @include button.ink-color(map-get($variables, on-primary));
            @include button.outline-color(map-get($variables, on-primary));
          }
          &:disabled {
            color: map-get($variables, text-disabled);
          }
        }
      }
      .mdc-tab-bar {
        .mdc-tab {
          @include tab.text-label-color(
            rgba(map-get($variables, on-primary), 0.6)
          );
          @include tab.icon-color(rgba(map-get($variables, on-primary), 0.6));
          @include tab.states-color(map-get($variables, on-primary));
          @include tab.active-text-label-color(map-get($variables, on-primary));
          @include tab.active-icon-color(map-get($variables, on-primary));
          @include tab.active-states-color(map-get($variables, on-primary));
          .mdc-tab-indicator {
            @include tab-indicator.underline-color(
              map-get($variables, on-primary)
            );
          }
        }
      }
    }
    .mdc-chip {
      @include chips.fill-color(
        mix(
          map-get($variables, on-surface),
          if(
            $dark,
            overlay-elevation(map-get($variables, surface), 4),
            map-get($variables, primary)
          ),
          12%
        )
      );
      $ink-color: if(
        $dark,
        map-get($variables, text-high),
        rgba(map-get($variables, on-primary), 0.87)
      );
      @include chips.ink-color($ink-color);
      @include chips.leading-icon-color($ink-color);
      @include chips.trailing-icon-color($ink-color);
    }
    .search-bar {
      &--persistent .search-bar__field.mdc-text-field {
        background-color: rgba(
          map-get($variables, if($dark, on-surface, on-primary)),
          0.15
        );
        .mdc-text-field__input {
          &::placeholder {
            color: if(
              $dark,
              map-get($variables, text-medium),
              rgba(map-get($variables, on-primary), 0.6)
            );
            opacity: 1;
          }
          &::-ms-input-placeholder {
            color: if(
              $dark,
              map-get($variables, text-medium),
              rgba(map-get($variables, on-primary), 0.6)
            ) !important;
          }
        }
        &:not(.mdc-text-field--focused) {
          @include text-field-icon.leading-icon-color(
            if(
              $dark,
              map-get($variables, text-medium),
              rgba(map-get($variables, on-primary), 0.6)
            )
          );
          @include text-field-icon.trailing-icon-color(
            if(
              $dark,
              map-get($variables, text-medium),
              rgba(map-get($variables, on-primary), 0.6)
            )
          );
          @include text-field.ink-color(
            if(
              $dark,
              map-get($variables, text-high),
              rgba(map-get($variables, on-primary), 0.87)
            )
          );
          @include text-field.caret-color(
            if(
              $dark,
              map-get($variables, on-surface),
              map-get($variables, on-primary)
            )
          );
          @include text-field.outline-color(
            if(
              $dark,
              map-get($variables, text-disabled),
              rgba(map-get($variables, on-primary), 0.38)
            )
          );
          @include text-field.hover-outline-color(
            if(
              $dark,
              map-get($variables, text-medium),
              rgba(map-get($variables, on-primary), 0.6)
            )
          );
        }
        &.mdc-text-field--focused {
          @include text-field-icon.leading-icon-color(
            if(
              $dark,
              map-get($variables, text-medium),
              rgba(map-get($variables, on-primary), 0.6)
            )
          );
          @include text-field-icon.trailing-icon-color(
            if(
              $dark,
              map-get($variables, text-medium),
              rgba(map-get($variables, on-primary), 0.6)
            )
          );
          @include text-field.ink-color(
            if(
              $dark,
              map-get($variables, text-high),
              rgba(map-get($variables, on-primary), 0.87)
            )
          );
          @include text-field.caret-color(
            if(
              $dark,
              map-get($variables, primary),
              map-get($variables, on-primary)
            )
          );
          @include text-field.outline-color(
            if(
              $dark,
              map-get($variables, primary),
              map-get($variables, on-primary)
            )
          );
        }
      }
      &--modal {
        background-color: if(
          $dark,
          overlay-elevation(map-get($variables, surface), 8),
          map-get($variables, surface)
        );
        .search-bar__field.mdc-text-field {
          .mdc-text-field__input {
            &::placeholder {
              color: map-get($variables, text-medium);
              opacity: 1;
            }
            &::-ms-input-placeholder {
              color: map-get($variables, text-medium) !important;
            }
          }
          &:not(.mdc-text-field--focused),
          &.mdc-text-field--focused {
            @include text-field-icon.leading-icon-color(
              map-get($variables, text-medium)
            );
            @include text-field-icon.trailing-icon-color(
              map-get($variables, text-medium)
            );
            @include text-field.ink-color(map-get($variables, text-high));
            @include text-field.caret-color(map-get($variables, on-surface));
          }
        }
      }
    }
    &.bottom-app-bar--indent {
      .mdc-top-app-bar__section:not(.indent) {
        background-color: if(
          $dark,
          overlay-elevation(map-get($variables, surface), 4),
          map-get($variables, primary)
        );
      }
      .indent {
        fill: if(
          $dark,
          overlay-elevation(map-get($variables, surface), 4),
          map-get($variables, primary)
        );
      }
    }

    .mdc-button {
      color: map-get($variables, if($dark, text-high, on-primary));
      @include ripple.states-selected(
        if($dark, on-surface, on-primary),
        false,
        feature-targeting.all(),
        ".mdc-button__ripple"
      );
      &[disabled] {
        color: rgba(
          map-get($variables, if($dark, text-high, on-primary)),
          0.38
        );
      }
    }

    .mdc-linear-progress {
      @include linear-progress.bar-color(
        map-get($variables, if($dark, primary, secondary))
      );
      @include linear-progress.buffer-color(
        mix(
          map-get($variables, if($dark, on-surface, on-primary)),
          if(
            $dark,
            overlay-elevation(map-get($variables, surface), 4),
            map-get($variables, primary)
          ),
          10%
        )
      );
    }

    .rmwc-circular-progress {
      color: if(
        $dark,
        map-get($variables, primary),
        map-get($variables, on-primary)
      );
    }
  }

  // RMWC

  .rmwc-avatar {
    color: map-get($variables, text-disabled);
  }

  .rmwc-badge {
    color: map-get($variables, on-error);
    background-color: map-get($variables, error);
    &.user-icon {
      color: map-get($variables, text-medium);
      background-color: mix(
        map-get($variables, on-surface),
        if(
          $dark,
          overlay-elevation(map-get($variables, surface), 24),
          map-get($variables, surface)
        ),
        12%
      );
    }
  }

  .rmwc-circular-progress {
    color: map-get($variables, primary);
  }

  .rmwc-tooltip {
    &-inner {
      background-color: map-get($variables, text-high);
      color: map-get($variables, surface);
    }
    &-placement-top .rmwc-tooltip-arrow,
    &-placement-topLeft .rmwc-tooltip-arrow,
    &-placement-topRight .rmwc-tooltip-arrow {
      border-top-color: map-get($variables, text-high);
      &-inner {
        border-top-color: map-get($variables, surface);
      }
    }
    &-placement-right .rmwc-tooltip-arrow,
    &-placement-rightTop .rmwc-tooltip-arrow,
    &-placement-rightBottom .rmwc-tooltip-arrow {
      border-right-color: map-get($variables, text-high);
      &-inner {
        border-right-color: map-get($variables, surface);
      }
    }
    &-placement-left .rmwc-tooltip-arrow,
    &-placement-leftTop .rmwc-tooltip-arrow,
    &-placement-leftBottom .rmwc-tooltip-arrow {
      border-left-color: map-get($variables, text-high);
      &-inner {
        border-left-color: map-get($variables, surface);
      }
    }
    &-placement-bottom .rmwc-tooltip-arrow-inner,
    &-placement-bottomLeft .rmwc-tooltip-arrow-inner,
    &-placement-bottomRight .rmwc-tooltip-arrow-inner {
      border-bottom-color: map-get($variables, text-high);
      &-inner {
        border-bottom-color: map-get($variables, surface);
      }
    }
  }
}
