/*!
 * Copyright 2026 Google LLC
 * SPDX-License-Identifier: Apache-2.0
 */

// go/keep-sorted start by_regex='(.+) prefix_order=sass:
@use 'switch-tokens';
// go/keep-sorted end

@layer md.sys, md.comp.ripple, md.comp.focus-ring;
@layer md.comp.switch {
  .switch {
    & {
      @include switch-tokens.root;
    }
    &:is(:hover, .hover) {
      @include switch-tokens.hovered;
    }
    &:is(:checked, .checked, [aria-checked='true']) {
      @include switch-tokens.selected;
      &:where(:hover, .hover) {
        @include switch-tokens.selected-hovered;
      }
    }
    &:is(:active, .active):where(:not(:disabled, .disabled)) {
      @include switch-tokens.pressed;
    }
    &:is(:disabled, .disabled) {
      @include switch-tokens.disabled;
      &:where(:checked, .checked, [aria-checked='true']) {
        @include switch-tokens.disabled-selected;
      }
    }

    & {
      display: inline-grid;
      grid-template: '. handle .' 1fr / 0fr min-content 1fr;
      place-items: center;
      appearance: none;
      background: var(--track-color);
      border: var(--track-outline-width) solid var(--track-outline-color);
      border-radius: calc(var(--track-height) / 2);
      width: var(--track-width);
      height: var(--track-height);
      margin: 0;
      padding: 0;
      transition: grid-template-columns 75ms cubic-bezier(0.4, 0, 0.2, 1);
      isolation: isolate;
      position: relative;
      color: var(--icon-color);
      --md-icon-size: var(--icon-size);
      --icon: '';

      &:is(:checked, .checked, [aria-checked='true']) {
        grid-template-columns: 1fr min-content 0fr;
      }

      &::before {
        --_handle-size: if(
          style(--icon: ''): var(--handle-size);
          else: max(var(--handle-size), var(--with-icon-handle-size));
        );
        content: var(--icon);
        font: var(--md-icon-size) var(--md-icon-font);
        display: grid;
        place-items: center;
        z-index: -1;
        grid-area: handle;
        aspect-ratio: 1;
        height: 100%;
        clip-path: circle(calc(var(--_handle-size) / 2));
        transition: clip-path 75ms cubic-bezier(0.4, 0, 0.2, 1);
        border-radius: 50%;
        background: var(--handle-color);
      }

      &::after {
        content: '';
        z-index: -1;
        position: absolute;
        grid-area: handle;
        background-image: var(--ripple);
        aspect-ratio: 1;
        width: var(--state-layer-size);
        border-radius: 50%;
        color: var(--state-layer-color);
        transition: var(--ripple-transition);
        animation: var(--ripple-animation);
      }
    }

    &:has(.switch-icon-off:not(slot), .switch-icon-off.has-slotted) {
      --icon: ' '; // Use space to clear CSS icon and update the handle size.
    }

    .switch-icon-off,
    .switch-icon-on {
      &:not(slot),
      &::slotted(*) {
        grid-area: handle;
      }
    }

    &:is(:checked, .checked, [aria-checked='true']) .switch-icon-off,
    &:not(:checked, .checked, [aria-checked='true']) .switch-icon-on {
      display: none;
    }
  }
}