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

// go/keep-sorted start
@use 'sass:list';
@use 'sass:map';
// go/keep-sorted end
// go/keep-sorted start
@use '../../focus/focus-ring';
@use '../../internal/motion/animation';
@use '../../ripple/ripple';
@use '../../tokens';
// go/keep-sorted end

$_md-sys-motion: tokens.md-sys-motion-values();

@mixin theme($tokens) {
  $supported-tokens: tokens.$md-comp-radio-supported-tokens;

  @each $token, $value in $tokens {
    @if list.index($supported-tokens, $token) == null {
      @error 'Token `#{$token}` is not a supported token.';
    }

    @if $value {
      --md-radio-#{$token}: #{$value};
    }
  }
}

@mixin styles() {
  $tokens: tokens.md-comp-radio-values();

  @layer {
    :host {
      @each $token, $value in $tokens {
        --_#{$token}: var(--md-radio-#{$token}, #{$value});
      }

      @include ripple.theme(
        (
          hover-color: var(--_hover-state-layer-color),
          hover-opacity: var(--_hover-state-layer-opacity),
          pressed-color: var(--_pressed-state-layer-color),
          pressed-opacity: var(--_pressed-state-layer-opacity),
        )
      );

      display: inline-flex;
      height: var(--_icon-size);
      outline: none;
      position: relative;
      vertical-align: top; // Fix extra space when placed inside display: block
      width: var(--_icon-size);
      // Remove highlight color for mobile Safari
      -webkit-tap-highlight-color: transparent;
      cursor: pointer;
    }

    :host([disabled]) {
      cursor: default;
    }

    :host([touch-target='wrapper']) {
      margin: max(0px, ((48px - var(--_icon-size)) / 2));
    }

    .container {
      display: flex;
      height: 100%;
      place-content: center;
      place-items: center;
      width: 100%;
    }

    md-focus-ring {
      height: 44px;
      inset: unset;
      width: 44px;
    }

    .checked {
      @include ripple.theme(
        (
          hover-color: var(--_selected-hover-state-layer-color),
          hover-opacity: var(--_selected-hover-state-layer-opacity),
          pressed-color: var(--_selected-pressed-state-layer-color),
          pressed-opacity: var(--_selected-pressed-state-layer-opacity),
        )
      );
    }

    // <input> is also the touch target
    input {
      appearance: none;
      height: 48px;
      margin: 0;
      position: absolute;
      width: 48px;
      cursor: inherit;
    }

    :host([touch-target='none']) input {
      width: 100%;
      height: 100%;
    }

    md-ripple {
      border-radius: 50%;
      height: var(--_state-layer-size);
      inset: unset;
      width: var(--_state-layer-size);
    }

    .icon {
      fill: var(--_icon-color);
      inset: 0;
      position: absolute;
    }

    .outer.circle {
      // Outline color enter/exit transition
      transition: fill 50ms linear;
    }

    .inner.circle {
      opacity: 0;
      transform-origin: center;
      transition: opacity 50ms linear;
    }

    .checked .icon {
      fill: var(--_selected-icon-color);
    }

    .checked .inner.circle {
      animation: inner-circle-grow 300ms
        map.get($_md-sys-motion, easing-emphasized-decelerate);
      opacity: 1;
    }

    @keyframes inner-circle-grow {
      from {
        transform: scale(0);
      }
      to {
        transform: scale(1);
      }
    }

    // Don't animate when disabled
    :host([disabled]) .circle {
      animation-duration: 0s;
      transition-duration: 0s;
    }

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

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

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

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

    :host(:hover) .checked .icon {
      fill: var(--_selected-hover-icon-color);
    }

    :host(:focus-within) .checked .icon {
      fill: var(--_selected-focus-icon-color);
    }

    :host(:active) .checked .icon {
      fill: var(--_selected-pressed-icon-color);
    }

    :host([disabled]) .checked .icon {
      fill: var(--_disabled-selected-icon-color);
      opacity: var(--_disabled-selected-icon-opacity);
    }
  }

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

      :host([disabled]) .icon {
        fill: GrayText;
        opacity: 1;
      }
    }
  }
}