@use '@angular/material' as mat;
@use '../../flex' as flex;

$mat-menu-overlay-min-width: 112px !default; // 56 * 2
$mat-menu-overlay-max-width: 280px !default; // 56 * 5

.adf {
    &-search-result-autocomplete {
        @include mat.overridable-elevation(2);

        min-width: $mat-menu-overlay-min-width;
        max-width: $mat-menu-overlay-max-width;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        transform-origin: top left;
        transform: translateX(-40px);
        position: absolute;
        max-height: 400px;
        margin-left: 45px;
        margin-top: -22px;
        font-size: var(--theme-subheading-1-font-size);
        z-index: 5;
        color: var(--adf-theme-foreground-text-color);
        background-color: var(--adf-theme-background-card-color);
        border-radius: 2px;

        @include flex.layout-bp(lt-md) {
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }
    }

    &-search-autocomplete-item {
        &:hover {
            background-color: var(--adf-theme-background-hover-color);
            opacity: 1;
        }
    }
}