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

        @include themes.md-comp-icon-theme(
            (
                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);
    }

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