.bbr-autocomplete {
    position: relative;

    &__dropdown {
        position: absolute;
        top: calc(100% + 2px);
        left: 0;
        right: 0;
        z-index: 100;
        background: #fff;
        border: 1px solid #dbdbdb;
        border-radius: 4px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        max-height: 240px;
        overflow-y: auto;
    }

    &__item {
        padding: 0.45rem 0.75rem;
        cursor: pointer;
        transition: background-color 0.1s;

        &:hover,
        &.is-active {
            background-color: #f5f5f5;
            color: #363636;
        }
    }

    &__no-results {
        padding: 0.45rem 0.75rem;
        color: #aaa;
        font-style: italic;
    }

    &__input--invalid {
        border-color: #f14668;
        text-decoration: underline wavy #f14668;
    }

    &__clear {
        cursor: pointer;
        pointer-events: all !important;
        color: #000 !important;
        opacity: 0.25;
        transition: opacity 0.15s ease;

        &:hover {
            opacity: 1;
        }
    }

    .control.has-icons-right .input {
        padding-right: 2.5em;
    }
}