/* @docs */
$autocomplete-item-color: #000000 !default;
$autocomplete-item-disabled-opacity: $base-disabled-opacity !default;
$autocomplete-item-font-size: $base-font-size !default;
$autocomplete-item-hover-background-color: #f5f5f5 !default;
$autocomplete-item-hover-color: #000000 !default;
$autocomplete-item-line-height: $base-line-height !default;
$autocomplete-item-padding: .375rem 1rem !default;
$autocomplete-menu-background: #ffffff !default;
$autocomplete-menu-border-radius: $base-border-radius !default;
$autocomplete-menu-box-shadow: 0 0.5em 1em -0.125em rgba(10,10,10,.1), 0 0 0 1px rgba(10,10,10,.02) !default;
$autocomplete-menu-margin: 0 !default;
$autocomplete-menu-max-height: 200px !default;
$autocomplete-menu-padding: .5rem 0 .5rem 0 !default;
$autocomplete-menu-zindex: 20 !default;
/* @docs */

.o-acp {
    position: relative;
    &__menu {
        display: block;
        width: 100%;
        position: absolute;
        left: 0;
        top: 100%;
        overflow: auto;
        @include avariable('z-index', 'autocomplete-menu-zindex', $autocomplete-menu-zindex);
        @include avariable('background-color', 'autocomplete-menu-background', $autocomplete-menu-background);
        @include avariable('border-radius', 'autocomplete-menu-border-radius', $autocomplete-menu-border-radius);
        @include avariable('box-shadow', 'autocomplete-menu-box-shadow', $autocomplete-menu-box-shadow);
        @include avariable('padding', 'autocomplete-menu-padding', $autocomplete-menu-padding);
        @include avariable('margin', 'autocomplete-menu-margin', $autocomplete-menu-margin);
        @include avariable('max-height', 'autocomplete-menu-max-height', $autocomplete-menu-max-height);
        &--top {
            top: auto;
            bottom: 100%;
        }
    }
    &__item {
        display: block;
        position: relative;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        cursor: pointer;
        @include avariable('color', 'autocomplete-item-color', $autocomplete-item-color);
        @include avariable('font-size', 'autocomplete-item-font-size', $autocomplete-item-font-size);
        @include avariable('line-height', 'autocomplete-item-line-height', $autocomplete-item-line-height);
        @include avariable('padding', 'autocomplete-item-padding', $autocomplete-item-padding);
        &-group-title, &--empty {
            pointer-events: none;
            @include avariable('opacity', 'autocomplete-item-disabled-opacity', $autocomplete-item-disabled-opacity);
        }
        &--hover, &:hover {
            @include avariable('background', 'autocomplete-item-hover-background-color', $autocomplete-item-hover-background-color);
            @include avariable('color', 'autocomplete-item-hover-color', $autocomplete-item-hover-color);
        }
    }
    &--expanded {
        width: 100%;
    }
}