@import './Core/_platformCommon.scss';
$focus-max-color: var(--focus-pulse-max-color);
$focus-min-color: var(--focus-pulse-min-color);
$focus-border-color: var(--focus-border-color);
$focus-pulse-duration: 4s;
$focus-spread: 3px;
$focus-border-width: 1px;

@mixin focus-shadow-animation {
    @keyframes ms-focus-shadow-pulse {
        0% {
            box-shadow: 0 0 0 $focus-spread $focus-max-color;
        }
        50% {
            box-shadow: 0 0 0 $focus-spread $focus-min-color;
        }
        100% {
            box-shadow: 0 0 0 $focus-spread $focus-max-color;
        }
    }

    @keyframes focus-shadow-pulse-inset {
        0% {
            box-shadow: inset 0 0 0 $focus-spread $focus-max-color, inset 0 0 0 $focus-border-width $focus-border-color;
        }
        50% {
            box-shadow: inset 0 0 0 $focus-spread $focus-min-color, inset 0 0 0 $focus-border-width $focus-border-color;
        }
        100% {
            box-shadow: inset 0 0 0 $focus-spread $focus-max-color, inset 0 0 0 $focus-border-width $focus-border-color;
        }
    }

    @keyframes ms-focus-shadow-with-border-pulse {
        0% {
            box-shadow: 0 0 0 $focus-spread $focus-max-color, 0 0 0 $focus-border-width $focus-border-color;
        }
        50% {
            box-shadow: 0 0 0 $focus-spread $focus-min-color, 0 0 0 $focus-border-width $focus-border-color;
        }
        100% {
            box-shadow: 0 0 0 $focus-spread $focus-max-color, 0 0 0 $focus-border-width $focus-border-color;
        }
    }
}

@mixin ms-high-contrast-override {
    @media (forced-colors: active) {
        @content;
    }
}

@mixin box-shadow-focus-rect($inset: false, $border: false) {
    @if ($inset) {
        animation: focus-shadow-pulse-inset $focus-pulse-duration ease-in-out infinite;
    } @else if ($border) {
        animation: ms-focus-shadow-with-border-pulse $focus-pulse-duration ease-in-out infinite;
    } @else {
        animation: ms-focus-shadow-pulse $focus-pulse-duration ease-in-out infinite;
    }

    @include ms-high-contrast-override {
        animation: none;
    }

    @if ($inset) {
        box-shadow: inset 0 0 0 $focus-spread $focus-max-color, inset 0 0 0 $focus-border-width $focus-border-color;
    } @else if ($border) {
        box-shadow: 0 0 0 $focus-spread $focus-max-color, 0 0 0 $focus-border-width $focus-border-color;
    } @else {
        box-shadow: 0 0 0 $focus-spread $focus-max-color;
    }
}

@mixin focus-space($usePadding: false) {
    @if ($usePadding) {
        padding: $focus-spread;
    } @else {
        margin: $focus-spread;
    }
}

@mixin ms-high-contrast-highlight($outlineWidth: 1px, $outlineStyle: solid) {
    @include ms-high-contrast-override {
        forced-color-adjust: none;
        border-color: highlight;
    }

    @media screen and (forced-colors: active) and (prefers-color-scheme: light) {
        outline: $outlineWidth $outlineStyle highlight;
        outline-offset: 1px;
    }
}

$condensed-vertical-spacing: $spacing-8;
$condensed-horizontal-spacing: $spacing-16;

$default-vertical-spacing: $spacing-16;
$default-horizontal-spacing: $spacing-20;

$relaxed-vertical-spacing: 24px;
$relaxed-horizontal-spacing: $spacing-32;

// Browser-specific mixins
@mixin ie-only {
    @media screen and (min-width: 0\0) {
        @content;
    }
}