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

@mixin styles() {
    // The icon CSS class overrides styles defined in the .material-icons CSS
    // class, which is loaded separately so the order of CSS definitions is not
    // guaranteed. Therefore, increase specifity to ensure overrides apply.
    & [data-component='icon'] {
        display: inline-flex;
        position: relative;
        writing-mode: horizontal-tb;
        fill: currentColor;
        flex-shrink: 0;
        color: var(--_icon-color);
        font-size: var(--_icon-size);
        inline-size: var(--_icon-size);
        block-size: var(--_icon-size);
    }
    &:hover [data-component='icon'] {
        color: var(--_hover-icon-color);
    }

    &:focus-within [data-component='icon'] {
        color: var(--_focus-icon-color);
    }

    &:active [data-component='icon'] {
        color: var(--_pressed-icon-color);
    }

    /* Selected */

    &.togglable.selected [data-component='icon'] {
        color: var(--_toggle-selected-icon-color);
    }
    &:hover [data-component='icon'] {
        color: var(--_toggle-selected-hover-icon-color);
    }

    &.togglable.selected:focus-within [data-component='icon'] {
        color: var(--_toggle-selected-focus-icon-color);
    }

    &.togglable.selected:active [data-component='icon'] {
        color: var(--_toggle-selected-pressed-icon-color);
    }

    /* Unselected */

    &.togglable.unselected [data-component='icon'] {
        color: var(--_toggle-unselected-icon-color);
    }
    &.togglable.unselected:hover [data-component='icon'] {
        color: var(--_toggle-unselected-hover-icon-color);
    }

    &.togglable.unselected:focus-within [data-component='icon'] {
        color: var(--_toggle-unselected-focus-icon-color);
    }

    &.togglable.unselected:active [data-component='icon'] {
        color: var(--_toggle-unselected-pressed-icon-color);
    }

    &.extra-small [data-component='icon'] {
        @include themes.md-comp-icon-theme(
            (
                size: var(--_extra-small-icon-size),
            )
        );
    }
    &.small [data-component='icon'] {
        @include themes.md-comp-icon-theme(
            (
                size: var(--_small-icon-size),
            )
        );
    }
    &.medium [data-component='icon'] {
        @include themes.md-comp-icon-theme(
            (
                size: var(--_medium-icon-size),
            )
        );
    }
    &.large [data-component='icon'] {
        @include themes.md-comp-icon-theme(
            (
                size: var(--_large-icon-size),
            )
        );
    }
    &.extra-large [data-component='icon'] {
        @include themes.md-comp-icon-theme(
            (
                size: var(--_extra-large-icon-size),
            )
        );
    }

    &[disabled] [data-component='icon'] {
        color: var(--_disabled-icon-color);
        opacity: var(--_disabled-icon-opacity);
    }
}