@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
    //
    fill: var(--uui-icon-btn);

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

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

        &:focus-visible {
            @include focus-visible-effect();
        }
    }

    &: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);
            }
        }
    }
}
