@import '../../theming/theming';

@mixin mat-pseudo-checkbox-color($config-or-theme) {
  $config: mat-get-color-config($config-or-theme);
  $is-dark-theme: map-get($config, is-dark);
  $primary: map-get($config, primary);
  $accent: map-get($config, accent);
  $warn: map-get($config, warn);
  $background: map-get($config, background);

  // NOTE(traviskaufman): While the spec calls for translucent blacks/whites for disabled colors,
  // this does not work well with elements layered on top of one another. To get around this we
  // blend the colors together based on the base color and the theme background.
  $white-30pct-opacity-on-dark: #686868;
  $black-26pct-opacity-on-light: #b0b0b0;
  $disabled-color: if($is-dark-theme, $white-30pct-opacity-on-dark, $black-26pct-opacity-on-light);
  $colored-box-selector: '.mat-pseudo-checkbox-checked, .mat-pseudo-checkbox-indeterminate';

  .mat-pseudo-checkbox {
    color: mat-color(map-get($config, foreground), secondary-text);

    &::after {
      color: mat-color($background, background);
    }
  }

  .mat-pseudo-checkbox-disabled {
    color: $disabled-color;
  }

  .mat-primary .mat-pseudo-checkbox-checked,
  .mat-primary .mat-pseudo-checkbox-indeterminate {
    background: mat-color(map-get($config, primary));
  }

  // Default to the accent color. Note that the pseudo checkboxes are meant to inherit the
  // theme from their parent, rather than implementing their own theming, which is why we
  // don't attach to the `mat-*` classes. Also note that this needs to be below `.mat-primary`
  // in order to allow for the color to be overwritten if the checkbox is inside a parent that
  // has `mat-accent` and is placed inside another parent that has `mat-primary`.
  .mat-pseudo-checkbox-checked,
  .mat-pseudo-checkbox-indeterminate,
  .mat-accent .mat-pseudo-checkbox-checked,
  .mat-accent .mat-pseudo-checkbox-indeterminate {
    background: mat-color(map-get($config, accent));
  }

  .mat-warn .mat-pseudo-checkbox-checked,
  .mat-warn .mat-pseudo-checkbox-indeterminate {
    background: mat-color(map-get($config, warn));
  }

  .mat-pseudo-checkbox-checked,
  .mat-pseudo-checkbox-indeterminate {
    &.mat-pseudo-checkbox-disabled {
      background: $disabled-color;
    }
  }
}

@mixin mat-pseudo-checkbox-typography($config-or-theme) {}

@mixin _mat-pseudo-checkbox-density($config-or-theme) {}

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

    @if $color != null {
      @include mat-pseudo-checkbox-color($color);
    }
    @if $density != null {
      @include _mat-pseudo-checkbox-density($density);
    }
    @if $typography != null {
      @include mat-pseudo-checkbox-typography($typography);
    }
  }
}