.auto-complete {
    position: fixed;
    z-index: 10;
    width: 100%;
    display: table;
    height: 100%;
}
.auto-complete-search {
    @include display-flex;
    box-sizing: border-box;
    background-color: $backgroundColorPrimary;
    color: $textColorPimary;
    min-height: $mobileToolbarHeight;
    padding: 0 rem(8);

    @include breakpoint($breakpoint-m) {
        min-height: $tabletToolbarHeight;
        padding: 0 rem(16);
    }
}

.auto-complete-results {
    @include box-shadow-multiple(0, rem(1), rem(6), rgba(0, 0, 0, 0.12), 0, rem(1), rem(4), rgba(0, 0, 0, 0.24));
    background-color: $fullWhite;
    max-width: 100vw;
    max-height: 100vh;
    overflow-x: auto;

    @include breakpoint($breakpoint-m) {
        padding: 0 rem(16);
    }
}

.auto-complete-input {
    @include flex(1, 1, auto);
    box-sizing: border-box;
    min-height: $mobileToolbarHeight;
    padding: 0 $mobileGutter;
    @include breakpoint($breakpoint-m) {
        min-height: $tabletToolbarHeight;
        padding: 0 $tabletGutter;
    }
    > input {
        width: 100%;
        outline: none;
        color: $textColorPimary;
        background-color: $backgroundColorPrimary;
        font-size: rem(24);
        font-weight: $fontWeightNormal;
        line-height: $mobileToolbarHeight;
        border: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        border-radius: 0;
        @include breakpoint($breakpoint-m) {
            line-height: $tabletToolbarHeight;
        }
    }
    > input:focus {
        border: none;
        box-shadow: none;
    }
}

.auto-complete-icon-left, .auto-complete-icon-right {
    align-self: center;
    .font-icon {
        color: $textColorPimary;
    }
}