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

.root {
    --uui-burger_btn_caption: var(--uui-text-contrast);
    --uui-burger_btn_caption-hover: var(--uui-primary-50);
    --uui-burger_btn_caption-active: var(--uui-primary-50);
    --uui-burger_btn-border: var(--uui-disabled);
    --uui-burger_btn-font: var(--font-regular);
    padding: 0 24px;
    background: none;
    border: 0;
    outline: none;
    font-family: var(--uui-burger_btn-font);
    font-weight: var(--uui-burger_btn-font-weight, normal);
    line-height: 48px;
    flex-shrink: 0;

    &:global(.uui-enabled) {
        color: var(--uui-burger_btn_caption);
        fill: var(--uui-burger_btn_caption);

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

            &:focus-visible {
                @include focus-visible-effect(-2px, null);
            }
        }
    }

    &:global(.uui-active) {
        color: var(--uui-burger_btn_caption-active);
        fill: var(--uui-burger_btn_caption-active);
    }

    :global(.uui-icon) {
        padding: 0 12px 0 24px;
    }

    &.button-primary {
        font-size: 18px;
    }

    &.button-secondary {
        font-size: 14px;
        padding-left: 18px;
        margin-left: 48px;
        border-left: 1px var(--uui-burger_btn-border) solid;
    }

    &.hasIcon,
    &.dropdown {
        padding-left: 0;
    }

    &.hasIcon {
        @include icon-layout(24px);

        :global(.uui-icon) {
            padding: 0 12px 0 20px;
        }
    }
}
