@use '@material/theme/theme-color' as mdc-theme-color;
@use '@material/theme/theme' as mdc-theme;
@use '@material/list/evolution-mixins' as mdc-list-mixins;
@use '@material/typography' as mdc-typography;
@use '@material/ripple' as mdc-ripple;

@use '../theming/theming';
@use '../typography/typography';
@use '../mdc-helpers/mdc-helpers';

@mixin color($config-or-theme) {
  $config: theming.get-color-config($config-or-theme);

  @include mdc-helpers.using-mdc-theme($config) {
    .mat-mdc-option {
      // Since this will usually be rendered in an overlay,
      // we have explicitly set the default color.
      @include mdc-theme.prop(color, text-primary-on-background);

      &:hover:not(.mdc-list-item--disabled),
      &:focus:not(.mdc-list-item--disabled),
      &.mat-mdc-option-active,

      // In multiple mode there is a checkbox to show that the option is selected.
      &.mdc-list-item--selected:not(.mat-mdc-option-multiple):not(.mdc-list-item--disabled) {
        $color: mdc-theme-color.$on-surface;
        background: rgba($color, mdc-ripple.states-opacity($color, hover));
      }
    }

    .mat-primary {
      .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled) {
        @include mdc-list-mixins.list-primary-text-ink-color(primary,
          $query: mdc-helpers.$mdc-theme-styles-query);
      }
    }

    .mat-accent {
      .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled) {
        @include mdc-list-mixins.list-primary-text-ink-color(secondary,
          $query: mdc-helpers.$mdc-theme-styles-query);
      }
    }

    .mat-warn {
      .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled) {
        @include mdc-list-mixins.list-primary-text-ink-color(error,
          $query: mdc-helpers.$mdc-theme-styles-query);
      }
    }
  }
}

@mixin typography($config-or-theme) {
  $config: typography.private-typography-to-2018-config(
      theming.get-typography-config($config-or-theme));

  @include mdc-helpers.using-mdc-typography($config) {
    // MDC uses the `subtitle1` level for list items, but
    // the spec shows `body1` as the correct level.
    .mat-mdc-option {
      @include mdc-typography.typography(body1,
        $query: mdc-helpers.$mdc-typography-styles-query,
        // Exclude these properties, because they cause some build
        // issues internally and they aren't used for anything.
        $exclude-props: (text-decoration, text-transform)
      );
    }
  }
}

@mixin density($config-or-theme) {
  $density-scale: theming.get-density-config($config-or-theme);
}

@mixin theme($theme-or-color-config) {
  $theme: theming.private-legacy-get-theme($theme-or-color-config);
  @include theming.private-check-duplicate-theme-styles($theme, 'mat-option') {
    $color: theming.get-color-config($theme);
    $density: theming.get-density-config($theme);
    $typography: theming.get-typography-config($theme);

    @if $color != null {
      @include color($color);
    }
    @if $density != null {
      @include density($density);
    }
    @if $typography != null {
      @include typography($typography);
    }
  }
}