@use "../../../bulma/sass/utilities" as bulma-utilities;

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

// Map Local variables
$-css-vars-map: (
    "dropdown-content-max-height": $dropdown-content-max-height
);

// Register CSS Variables
@include bulma-utilities.exportCSSVars($-css-vars-map);
@include bulma-utilities.registerComponentCSSVars("autocomplete", $-css-vars-map);

.autocomplete {
    position: relative;

    .dropdown-menu {
        display: block;
        width: 100%;

        &.is-opened-top {
            top: auto;
            bottom: 100%;
        }
    }

    .dropdown-content {
        max-height: var(--dropdown-content-max-height);
        overflow: auto;
    }

    .dropdown-item {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;

        &.is-hovered {
            color: var(--dropdown-item-hover-color);
            background: var(--dropdown-item-hover-background-color);
        }

        &.is-disabled {
            cursor: not-allowed;
            opacity: 0.5;
        }
    }

    @include bulma-utilities.control-sizes;
}