.bbr-menu-button {
    position: relative;
    display: inline-flex;

    &.is-active &__toggle .bbr-icon {
        opacity: 0.75;
    }

    &__menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        min-width: 100%;
        z-index: 20;
        padding-top: 4px;
    }

    &.is-active &__menu {
        display: block;
    }

    &.is-up &__menu {
        top: auto;
        bottom: 100%;
        padding-top: 0;
        padding-bottom: 4px;
    }

    &__item {
        cursor: pointer;
        user-select: none;
        white-space: nowrap;
        display: flex;
        align-items: center;

        transition: 0.15s ease-in-out;
        transition-property: color, background-color;

        &:hover {
            background-color: rgba(0, 0, 0, 0.05);
            color: #0a0a0a;
        }

        &:active {
            background-color: rgba(0, 0, 0, 0.15);
            color: #0a0a0a;
        }

        &--disabled {
            opacity: 0.5;
            cursor: not-allowed;
            pointer-events: none;
        }
    }
}