@use 'sass:map';
@import '../variables.scss';
@import './media-queries.scss';

.light,
:global(.light) {
    @include create-token(
        light-box-shadow-focus,
        var(--surface-toggle-on-disabled)
    );
    @include create-token(
        light-box-shadow-focus-border,
        var(--surface-toggle-on-disabled)
    );
}

.dark,
:global(.dark) {
    @include create-token(
        dark-box-shadow-focus,
        var(--surface-toggle-on-disabled)
    );
    @include create-token(
        dark-box-shadow-focus-border,
        var(--surface-toggle-on-disabled)
    );
}

@mixin box-shadow-focus-style(
    $is-inset: true,
    $color-scheme: 'dark',
    $border-width: 1px,
    $shadow-width-inset: 3px,
    $shadow-width: 4px
) {
    @if $is-inset {
        box-shadow:
            0
                0
                0
                $border-width
                inset
                get-token(#{$color-scheme}-box-shadow-focus-border),
            0
                0
                0
                $shadow-width-inset
                get-token(#{$color-scheme}-box-shadow-focus) !important;
    } @else {
        box-shadow:
            0
                0
                0
                $border-width
                get-token(#{$color-scheme}-box-shadow-focus-border),
            0
                0
                0
                $shadow-width
                get-token(#{$color-scheme}-box-shadow-focus) !important;
    }
}

@mixin box-shadow-focus($paramMap: ()) {
    $defaults: (
        'color-scheme': 'dark',
        'is-inset': true,
        'border-width': 1px,
        'shadow-width-inset': 3px,
        'shadow-width': 4px,
        'additional-selector': null,
        'suppress-on-hover': false,
    );
    $opts: map-merge($defaults, $paramMap);
    $color-scheme: map.get($opts, 'color-scheme');
    $is-inset: map.get($opts, 'is-inset');
    $border-width: map.get($opts, 'border-width');
    $shadow-width-inset: map.get($opts, 'shadow-width-inset');
    $shadow-width: map.get($opts, 'shadow-width');
    $additional-selector: map.get($opts, 'additional-selector');
    $suppress-on-hover: map.get($opts, 'suppress-on-hover');
    $hover-guard: if($suppress-on-hover, ':not(:hover)', '');

    &,
    &:focus {
        transition: box-shadow 0.3s;
        outline: transparent;
    }

    &[data-focus-visible-added]#{$hover-guard},
    #{$additional-selector} {
        @include box-shadow-focus-style(
            $is-inset,
            $color-scheme,
            $border-width,
            $shadow-width-inset,
            $shadow-width
        );

        @include forced-colors {
            outline: 2px solid Highlight;
            outline-offset: 2px;
        }
    }
}