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

@mixin _mat-pseudo-checkbox-inner-content-theme($theme, $pallete-name) {
  $pallete: map-get($theme, $pallete-name);
  $color: mat-color($pallete);

  .mat-pseudo-checkbox-checked.mat-#{$pallete-name},
  .mat-pseudo-checkbox-indeterminate.mat-#{$pallete-name},
  .mat-#{$pallete-name} .mat-pseudo-checkbox-checked,
  .mat-#{$pallete-name} .mat-pseudo-checkbox-indeterminate {
    background: $color;
  }
}

@mixin mat-pseudo-checkbox-theme($theme) {
  $is-dark-theme: map-get($theme, is-dark);
  $primary: map-get($theme, primary);
  $accent: map-get($theme, accent);
  $warn: map-get($theme, warn);
  $background: map-get($theme, 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($theme, foreground), secondary-text);

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

  @include _mat-pseudo-checkbox-inner-content-theme($theme, primary);
  @include _mat-pseudo-checkbox-inner-content-theme($theme, accent);
  @include _mat-pseudo-checkbox-inner-content-theme($theme, warn);

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