@use '../styles/common/tokens' as *;

@use './option-action-theme' as *;

.kbq-option-action {
    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;

    outline: none;

    border: var(--kbq-size-3xs) solid transparent;
    border-radius: var(--kbq-size-xs);

    width: var(--kbq-size-xl);
    height: var(--kbq-size-xl);

    &:not(.kbq-disabled) {
        &:hover,
        &:focus {
            & .kbq-icon {
                color: var(--kbq-icon-button-fade-contrast-states-hover);
            }
        }
    }

    &.kbq-disabled {
        cursor: default;
    }
}

@include kbq-option-action-theme();