@use "bulma/sass/utilities/css-variables" as cv;
@use "bulma/sass/utilities/initial-variables" as iv;
@use "bulma/sass/utilities/controls" as controls;


$dropdown-content-max-height: 200px !default;

.#{iv.$class-prefix}autocomplete {
    @include cv.register-vars(
        (
            "dropdown-content-max-height": #{$dropdown-content-max-height}
        )
    );
}

.#{iv.$class-prefix}autocomplete {
    position: relative;
    .dropdown-menu {
        display: block;
        width: 100%;
        &.is-opened-top {
            top: auto;
            bottom: 100%;
        }
    }
    .dropdown-content {
        overflow: auto;
        max-height: cv.getVar("dropdown-content-max-height");
    }
    .dropdown-item {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        &.is-hovered {
            --bulma-dropdown-item-background-l-delta: var(--bulma-dropdown-item-hover-background-l-delta);
            --bulma-dropdown-item-border-l-delta: var(--bulma-dropdown-item-hover-border-l-delta);
        }
        &.is-disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
    }
    &.is-small {
        @include controls.control-small;
    }
    &.is-medium{
        @include controls.control-medium;
    }
    &.is-large {
        @include controls.control-large;
    }
}