//
// Copyright 2022 Google LLC
// SPDX-License-Identifier: Apache-2.0
//

// go/keep-sorted start
@use 'sass:map';
// go/keep-sorted end
// go/keep-sorted start
@use '../../tokens';
// go/keep-sorted end

$_md-sys-motion: tokens.md-sys-motion-values();
$_easing-standard: map.get($_md-sys-motion, 'easing-standard');

@mixin styles() {
  @layer styles {
    .icons {
      position: relative;
      height: 100%;
      width: 100%;
    }

    .icon {
      position: absolute;
      inset: 0;
      margin: auto;

      transition: fill 67ms linear, opacity 33ms linear,
        transform 167ms $_easing-standard;
      opacity: 0;
    }

    .disabled .icon {
      transition: none;
    }

    .selected .icon--on,
    .unselected .icon--off {
      opacity: 1;
    }

    // rotate selected icon into view when there is no unselected icon
    .unselected .handle:not(.with-icon) .icon--on {
      transform: rotate(-45deg);
    }

    .icon--off {
      width: var(--_icon-size);
      height: var(--_icon-size);
      fill: var(--_icon-color);
    }

    .unselected:hover .icon--off {
      fill: var(--_hover-icon-color);
    }

    .unselected:focus-within .icon--off {
      fill: var(--_focus-icon-color);
    }

    .unselected:active .icon--off {
      fill: var(--_pressed-icon-color);
    }

    .unselected.disabled .icon--off {
      fill: var(--_disabled-icon-color);
      opacity: var(--_disabled-icon-opacity);
    }

    .icon--on {
      width: var(--_selected-icon-size);
      height: var(--_selected-icon-size);
      fill: var(--_selected-icon-color);
    }

    .selected:hover .icon--on {
      fill: var(--_selected-hover-icon-color);
    }

    .selected:focus-within .icon--on {
      fill: var(--_selected-focus-icon-color);
    }

    .selected:active .icon--on {
      fill: var(--_selected-pressed-icon-color);
    }

    .selected.disabled .icon--on {
      fill: var(--_disabled-selected-icon-color);
      opacity: var(--_disabled-selected-icon-opacity);
    }
  }

  @layer hcm {
    @media (forced-colors: active) {
      .icon--off {
        fill: Canvas;
      }

      .icon--on {
        fill: ButtonText;
      }

      .disabled.unselected .icon--off,
      .disabled.selected .icon--on {
        opacity: 1;
      }

      .disabled .icon--on {
        fill: GrayText;
      }
    }
  }
}