@use '../../assets/styles/effects' as *;

.root {
    --uui-icon_btn: var(--uui-color-50);
    --uui-icon_btn-hover: var(--uui-color-60);
    --uui-icon_btn-active: var(--uui-color-70);
    --uui-icon_btn-disabled: var(--uui-icon-disabled); // from core or color class? Current - from core

    --uui-icon_btn-focus-radius: var(--uui-focus-radius);
    //
    fill: var(--uui-icon_btn);

    &:global(.uui-icon_button.uui-color-neutral) {
        --uui-icon_btn: var(--uui-icon);
        --uui-icon_btn-hover: var(--uui-icon-hover);
        --uui-icon_btn-active: var(--uui-icon-active);
    }

    &:global(.-clickable) {
        &:hover {
            fill: var(--uui-icon_btn-hover);
        }

        &:active {
            fill: var(--uui-icon_btn-active);
        }

        &:focus-visible {
            @include focus-visible-effect();
            border-radius: var(--uui-icon_btn-focus-radius);
        }
    }

    &:global(.uui-disabled) {
        fill: var(--uui-icon_btn-disabled);

        &:global(.-clickable) {
            &:hover, &:focus {
                fill: var(--uui-icon_btn-disabled);
            }

            &:active {
                fill: var(--uui-icon_btn-disabled);
            }
        }
    }
}
