//
// Copyright 2021 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';

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

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

    $active-width: map.get($tokens, 'active-width');
    $color: map.get($tokens, 'color');
    $duration: map.get($tokens, 'duration');
    $width: map.get($tokens, 'width');
    $inward-offset: map.get($tokens, 'inward-offset');
    $outward-offset: map.get($tokens, 'outward-offset');
    $start-start: map.get($tokens, 'shape-start-start');
    $start-end: map.get($tokens, 'shape-start-end');
    $end-end: map.get($tokens, 'shape-end-end');
    $end-start: map.get($tokens, 'shape-end-start');

    & {
        animation-delay: 0s, calc($duration * 0.25);
        animation-duration: calc($duration * 0.25), calc($duration * 0.75);
        animation-timing-function: map.get($_md-sys-motion, 'easing-emphasized');
        box-sizing: border-box;
        color: $color;
        display: none;
        pointer-events: none;
        position: absolute;
    }

    &[visible] {
        display: flex;
    }

    &:not([inward]) {
        animation-name: outward-grow, outward-shrink;
        inset: calc(-1 * $outward-offset);
        outline: $width solid currentColor;
    }

    &[inward] {
        animation-name: inward-grow, inward-shrink;
        border: $width solid currentColor;
        inset: $inward-offset;
    }

    &[shape-inherit] {
        &:not([inward]) {
            border-end-end-radius: inherit;
            border-end-start-radius: inherit;
            border-start-end-radius: inherit;
            border-start-start-radius: inherit;
        }

        &[inward] {
            border-end-end-radius: inherit;
            border-end-start-radius: inherit;
            border-start-end-radius: inherit;
            border-start-start-radius: inherit;
        }
    }

    &:not([shape-inherit]) {
        &:not([inward]) {
            border-end-end-radius: calc($end-end + $outward-offset);
            border-end-start-radius: calc($end-start + $outward-offset);
            border-start-end-radius: calc($start-end + $outward-offset);
            border-start-start-radius: calc($start-start + $outward-offset);
        }

        &[inward] {
            border-end-end-radius: calc($end-end - $inward-offset);
            border-end-start-radius: calc($end-start - $inward-offset);
            border-start-end-radius: calc($start-end - $inward-offset);
            border-start-start-radius: calc($start-start - $inward-offset);
        }
    }

    @keyframes outward-grow {
        from {
            outline-width: 0;
        }

        to {
            outline-width: $active-width;
        }
    }

    @keyframes outward-shrink {
        from {
            outline-width: $active-width;
        }
    }

    @keyframes inward-grow {
        from {
            border-width: 0;
        }

        to {
            border-width: $active-width;
        }
    }

    @keyframes inward-shrink {
        from {
            border-width: $active-width;
        }
    }

    @media (prefers-reduced-motion) {
        & {
            animation: none;
        }
    }
}