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

// This file contains common static styles that are shared across icon button
// variants.

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

@mixin styles() {
    & {
        display: inline-flex;
        outline: none;
        -webkit-tap-highlight-color: transparent;
        height: var(--_container-height);
        width: var(--_container-width);
        justify-content: center;
        place-items: center;
        background: none;
        border: none;
        box-sizing: border-box;
        cursor: pointer;
        place-content: center;
        outline: none;
        padding: 0;
        position: relative;
        text-decoration: none;
        user-select: none;
        z-index: 0;
        flex-grow: 0;
        flex-shrink: 0;
        border-start-start-radius: var(--_container-shape-start-start);
        border-start-end-radius: var(--_container-shape-start-end);
        border-end-start-radius: var(--_container-shape-end-start);
        border-end-end-radius: var(--_container-shape-end-end);
    }

    &[touch-target='wrapper'] {
        margin: max(0px, (48px - var(--_container-height)) / 2) max(0px, (48px - var(--_container-width)) / 2);
    }

    & [data-component='focus-ring'] {
        @include themes.md-comp-focus-ring-theme(
            (
                'shape-start-start': var(--_container-shape-start-start),
                'shape-start-end': var(--_container-shape-start-end),
                'shape-end-end': var(--_container-shape-end-end),
                'shape-end-start': var(--_container-shape-end-start),
            )
        );
    }

    &.disabled,
    &:disabled {
        pointer-events: none;
    }

    & .icon {
        & * {
            font-size: var(--_icon-size);
            height: var(--_icon-size);
            width: var(--_icon-size);
            font-weight: inherit;
        }
    }

    & [data-component='ripple'] {
        border-start-start-radius: var(--_container-shape-start-start);
        border-start-end-radius: var(--_container-shape-start-end);
        border-end-start-radius: var(--_container-shape-end-start);
        border-end-end-radius: var(--_container-shape-end-end);
    }

    & .flip-icon .icon {
        transform: scaleX(-1);
    }

    & .icon {
        display: inline-flex;
    }

    &.link {
        height: 100%;
        outline: none;
        position: absolute;
        width: 100%;
    }

    & .touch {
        position: absolute;
        height: max(48px, 100%);
        width: max(48px, 100%);
    }

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

    @media (forced-colors: active) {
        &.disabled,
        &:disabled {
            --_disabled-icon-opacity: 1;
        }
    }
}