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

.global-menu-btn {
    display: block;
    height: 60px;
    width: 60px;
    fill: var(--uui-main_menu-icon);
    flex-shrink: 0;
    cursor: pointer;
    background: transparent;
    border: 0 none;
    padding: 0;

    &:focus, &:hover {
        background-color: var(--uui-main_menu-hover);
        outline: none;
    }

    &:active {
        background-color: var(--uui-main_menu-active);
    }

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

.global-menu-icon {
    align-items: center;
}
