// NOTE: We disable `selector-class-pattern` above to allow using `mdc-` class
// selectors.
// stylelint-disable selector-class-pattern
// Ignore function name case warnings from states module
// stylelint-disable function-name-case

@use 'sass:map';
@use 'sass:selector';
@use 'sass:string';
@use '@material/checkbox/checkbox-custom-properties';
@use '@material/checkbox/checkbox-theme';
@use '@material/checkbox/variables' as checkbox-variables;
@use '@material/ripple/ripple-theme';
@use '@material/theme/color-custom-properties';
@use '@material/theme/css';
@use '@material/theme/keys';
@use '@material/theme/shadow-dom';
@use '@material/theme/theme';
@use '@material/theme/theme-color';
@use '@material/touch-target/touch-target';

@mixin theme($theme) {
  @include checkbox-theme.theme($theme);

  @if shadow-dom.$css-selector-fallback-declarations {
    @include theme-styles($theme);
  }
}

@mixin theme-styles($theme) {
  .mdc-checkbox {
    @include checkbox-theme.theme-styles($theme);
  }

  $theme: keys.create-theme-properties(
    $theme,
    $prefix: checkbox-theme.$custom-property-prefix
  );

  @include ripple-theme.theme(
    (
      hover-state-layer-color:
        map.get($theme, unselected-hover-state-layer-color),
      focus-state-layer-color:
        map.get($theme, unselected-focus-state-layer-color),
      pressed-state-layer-color:
        map.get($theme, unselected-pressed-state-layer-color),
      hover-state-layer-opacity:
        map.get($theme, unselected-hover-state-layer-opacity),
      focus-state-layer-opacity:
        map.get($theme, unselected-focus-state-layer-opacity),
      pressed-state-layer-opacity:
        map.get($theme, unselected-pressed-state-layer-opacity),
    )
  );

  @include checked-selector() {
    @include ripple-theme.theme(
      (
        hover-state-layer-color:
          map.get($theme, selected-hover-state-layer-color),
        focus-state-layer-color:
          map.get($theme, selected-focus-state-layer-color),
        pressed-state-layer-color:
          map.get($theme, selected-pressed-state-layer-color),
        hover-state-layer-opacity:
          map.get($theme, selected-hover-state-layer-opacity),
        focus-state-layer-opacity:
          map.get($theme, selected-focus-state-layer-opacity),
        pressed-state-layer-opacity:
          map.get($theme, selected-pressed-state-layer-opacity),
      )
    );
  }
}

@mixin checked-selector() {
  @include shadow-dom.host-aware(
    selector.append(&, '[checked]'),
    selector.append(&, '[indeterminate]')
  ) {
    @content;
  }
}