//
// Copyright 2022 Google LLC
// SPDX-License-Identifier: Apache-2.0
//
// [Modified by Sandlada & Kai Orion]
//
// Copyright 2025 Sandlada & Kai Orion
// SPDX-License-Identifier: MIT
//

@use 'sass:map';
@use '../../../tokens/internal/animation';
@use '../../../themes';
@use '../../../tokens';

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

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

    @layer {
        & {
            display: inline-flex;
            height: map.get($tokens, 'icon-size');
            outline: none;
            position: relative;
            vertical-align: top; // Fix extra space when placed inside display: block
            width: map.get($tokens, 'icon-size');
            // Remove highlight color for mobile Safari
            -webkit-tap-highlight-color: transparent;
            cursor: pointer;
            place-content: center;
            place-items: center;
            position: relative;
            border: none;

            @include themes.md-comp-ripple-theme(
                (
                    hover-color: map.get($tokens, 'hover-state-layer-color'),
                    hover-opacity: map.get($tokens, 'hover-state-layer-opacity'),
                    pressed-color: map.get($tokens, 'pressed-state-layer-color'),
                    pressed-opacity: map.get($tokens, 'pressed-state-layer-opacity'),
                )
            );

            @include themes.md-comp-focus-ring-theme(());
        }

        &.disabled,
        &:disabled {
            cursor: default;
        }

        & [data-component='focus-ring'] {
            height: 44px;
            inset: unset !important;
            width: 44px;
        }

        &.checked {
            @include themes.md-comp-ripple-theme(
                (
                    hover-color: map.get($tokens, 'selected-hover-state-layer-color'),
                    hover-opacity: map.get($tokens, 'selected-hover-state-layer-opacity'),
                    pressed-color: map.get($tokens, 'selected-pressed-state-layer-color'),
                    pressed-opacity: map.get($tokens, 'selected-pressed-state-layer-opacity'),
                )
            );
        }

        .touch-target {
            height: 48px;
            position: absolute;
            width: 48px;
        }

        &[touch-target='wrapper'] {
            margin: max(0px, ((48px - map.get($tokens, 'icon-size')) / 2));
        }

        &[touch-target='none'] .touch-target {
            display: none;
        }

        & [data-component='ripple'] {
            border-radius: 50% !important;
            inset: unset !important;
            height: map.get($tokens, 'state-layer-size');
            width: map.get($tokens, 'state-layer-size');
        }

        & .icon {
            fill: map.get($tokens, '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: map.get($tokens, 'selected-icon-color');
        }

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

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

            to {
                transform: scale(1);
            }
        }

        // Don't animate when disabled
        &.disabled .circle,
        &:disabled .circle {
            animation-duration: 0s;
            transition-duration: 0s;
        }

        &:hover .icon {
            fill: map.get($tokens, 'hover-icon-color');
        }

        &:focus-within .icon {
            fill: map.get($tokens, 'focus-icon-color');
        }

        &:active .icon {
            fill: map.get($tokens, 'pressed-icon-color');
        }

        &.disabled .icon,
        &:disabled .icon {
            fill: map.get($tokens, 'disabled-unselected-icon-color');
            opacity: map.get($tokens, 'disabled-unselected-icon-opacity');
        }

        &:hover .checked .icon {
            fill: map.get($tokens, 'selected-hover-icon-color');
        }

        &:focus-within .checked .icon {
            fill: map.get($tokens, 'selected-focus-icon-color');
        }

        &:active .checked .icon {
            fill: map.get($tokens, 'selected-pressed-icon-color');
        }

        &.disabled .checked .icon,
        &:disabled .checked .icon {
            fill: map.get($tokens, 'disabled-selected-icon-color');
            opacity: map.get($tokens, 'disabled-selected-icon-opacity');
        }
    }

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

            &.disabled .icon,
            &:disabled .icon {
                fill: GrayText;
                opacity: 1;
            }
        }
    }
}