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

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

    & {
        // Only use the logical properties.
        $tokens: map.remove($tokens, 'container-shape');

        @each $token, $value in $tokens {
            --_#{$token}: #{$value};
        }

        --_container-color: none;
        --_disabled-container-color: none;
        --_disabled-container-opacity: 0;
    }

    /* Outline */
    &.extra-small .outline {
        border-width: var(--_extra-small-outline-width);
    }
    &.small .outline {
        border-width: var(--_small-outline-width);
    }
    &.medium .outline {
        border-width: var(--_medium-outline-width);
    }
    &.large .outline {
        border-width: var(--_large-outline-width);
    }
    &.extra-large .outline {
        border-width: var(--_extra-large-outline-width);
    }
    & .outline {
        inset: 0;
        border-style: solid;
        position: absolute;
        box-sizing: border-box;
        border-color: var(--_outline-color);
        border-start-start-radius: inherit;
        border-start-end-radius: inherit;
        border-end-start-radius: inherit;
        border-end-end-radius: inherit;
    }

    &:active .outline {
        border-color: var(--_pressed-outline-color);
    }

    &[disabled] .outline {
        border-color: var(--_disabled-outline-color);
        opacity: var(--_disabled-outline-opacity);
    }

    @media (forced-colors: active) {
        &[disabled] .background {
            // Only outlined buttons change their border when disabled to distinmdish
            // them from other buttons that add a border for increased visibility in
            // HCM.
            border-color: GrayText;
        }

        &[disabled] .outline {
            opacity: 1;
        }
    }

    /* Ripple Size */

    &.extra-small [data-component='ripple'] {
        border-width: var(--_extra-small-outline-width);
        inline-size: calc(100% - 2 * var(--_extra-small-outline-width));
        block-size: calc(100% - 2 * var(--_extra-small-outline-width));
    }
    &.small [data-component='ripple'] {
        border-width: var(--_small-outline-width);
        inline-size: calc(100% - 2 * var(--_small-outline-width));
        block-size: calc(100% - 2 * var(--_small-outline-width));
    }
    &.medium [data-component='ripple'] {
        border-width: var(--_medium-outline-width);
        inline-size: calc(100% - 2 * var(--_medium-outline-width));
        block-size: calc(100% - 2 * var(--_medium-outline-width));
    }
    &.large [data-component='ripple'] {
        border-width: var(--_large-outline-width);
        inline-size: calc(100% - 2 * var(--_large-outline-width));
        block-size: calc(100% - 2 * var(--_large-outline-width));
    }
    &.extra-large [data-component='ripple'] {
        border-width: var(--_extra-large-outline-width);
        inline-size: calc(100% - 2 * var(--_extra-large-outline-width));
        block-size: calc(100% - 2 * var(--_extra-large-outline-width));
    }
    & [data-component='ripple'] {
        border-style: solid;
        border-color: transparent;
    }
}