/*------------------------------------*\
    AUTOCOMPLETE
\*------------------------------------*/

@use "../../base/helpers";
@use "../../base/settings";

$suggestions__border-colour: settings.$ds_colour__grey !default;

.ds_autocomplete {
    position: relative;

    &__suggestions {
        @include helpers.ds_box-shadow;

        border: 0.125rem solid $suggestions__border-colour;
        display: none;
        left: 0;
        position: absolute;
        right: 0;
        top: 100%;
        z-index: 10;
    }

    &__suggestions-list {
        list-style-type: none;
        margin: 0;
    }

    /*
      [1] 0.625rem (10px) = 12px (associated site search input) minus 2px (suggestions border), 0.6875rem (11px) = 12px vertical padding minus 2px (suggestions border) split evenly between top and bottom padding
    */
    &__suggestion {
        background-color: settings.$ds_colour__background--primary;
        color: settings.$ds_colour__text--secondary;
        cursor: pointer;
        font-style: italic;
        margin-bottom: 0;
        padding: 0.6875rem 0.625rem; /* [1] */
        transition: background-color 0.2s;

        &:hover {
            background-color: settings.$ds_colour__link--hover__background;
        }

        &:not(:last-child) {
            border-bottom: 0.125rem solid $suggestions__border-colour;
        }

        &__text {
            font-style: normal;
            color: settings.$ds_colour__text;
        }

        &__category {
            color: settings.$ds_colour__brand;
        }

        &.active {
            @include helpers.ds_focus;
            @include helpers.ds_media-query-high-contrast {
                outline-offset: -0.125rem !important;
                outline-width: 0.25rem !important;
            }
        }

        &.active {
            @include helpers.ds_focus--inset;
        }

        &.active &__text {
            color: settings.$ds_colour__focus;
        }
    }
}

.js-autocomplete-input.js-has-suggestions ~ .ds_autocomplete__suggestions {
    display: block;
}

@include helpers.media-query(medium) {
    .ds_autocomplete__suggestions {
        font-size: helpers.px-to-rem(settings.$root-font-size);
        line-height: helpers.line-height-on-grid(settings.$root-font-size);
    }
}