.bbr-dropdown {
    min-width: 7.5rem;

    &:not(.bbr-dropdown--compact) {
        display: block;
    }

    &:not(.bbr-dropdown--compact) {
        & .dropdown-menu {
            min-width: 100%;
        }
    }

    & .dropdown-menu {
        & .dropdown-content {
            overflow: auto;
        }
    }

    #{&}__label {
        cursor: pointer;
        user-select: none;
        display: flex;
        justify-content: flex-start;

        span {
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow-x: hidden;
            max-width: 15rem;
        }

        &--default span {
            color: gray;
            font-style: italic;
        }

        .bbr-icon:not(.bbr-dropdown-item__icon) {
            &:hover {
                color: #0d6efd;
            }

            &.bi-arrow-down {
                margin-left: auto;
                &::before {
                    transition: 0.25s ease-in-out transform;
                }
            }

            &.bi-plus-lg::before {
                transform: rotate(45deg);
            }
        }

        &.is-success--md {
            border-color: #48c78e;
        }
        &.is-danger--md {
            border-color: #f14668;
        }
    }

    &-item {
        cursor: pointer;
        user-select: none;
        white-space: normal;

        transition: 0.25s 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;
        }

        &.is-active {
            background-color: #485fc7;
            color: #fff;
        }

        &__icon {
            padding-left: 0.05rem;
        }
    }

    &.is-active {
        .bbr-dropdown__label .bbr-icon.bi-arrow-down::before {
            transform: rotate(180deg);
        }
    }

    &.is-up {
        .dropdown-menu {
            top: auto;
            bottom: 100%;
        }

        &.is-active {
            .bbr-dropdown__label .bbr-icon.bi-arrow-down::before {
                transform: rotate(360deg);
            }
        }
    }

    &--height-default {
        .dropdown-menu .dropdown-content {
            max-height: 15vw;
        }
    }

    &--compact {
        width: fit-content;

        & .dropdown-menu {
            min-width: 11.75rem;
        }
    }

    &--disabled {
        .bbr-dropdown__label {
            background-color: hsl(0deg, 0%, 96%);
            border-color: hsl(0deg, 0%, 96%);
            box-shadow: none;
            color: hsl(0deg, 0%, 48%);

            cursor: not-allowed;

            .bbr-icon {
                pointer-events: none;
            }

            &:hover {
                border-color: hsl(0deg, 0%, 96%);
                color: hsl(0deg, 0%, 48%);
            }
        }
    }
}