@import "../../../styles/mixins";

.gov-suggestions {
    position: absolute;
    top: 0;
    left: 0;
    min-height: 100%;
    z-index: 100;
    padding-top: calc((var(--spacing-s-nudge) * 2) + var(--height-component-m));
    background-color: var(--background-block-primary);
    border: 1px solid var(--border-subtlest);
    border-radius: var(--corner-radius-s);
    @include shadow("m");

    > * {
        height: auto;
    }

    div > strong {
        display: inline-block;
    }

    .gov-link a > span {
        text-decoration: none;
        &:hover {
            text-decoration: underline;
        }
    }

    &__search {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 2;
        padding: var(--spacing-s-nudge) var(--spacing-m);
        background-color: var(--background-block-primary);
    }

    &__results {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-m);
        width: 100vw;
        padding: var(--spacing-s-nudge) var(--spacing-m);
        ul {
            margin-top: 0;
        }
    }

    &__empty {
        padding: var(--spacing-s-nudge);
        background-color: var(--background-neutral-subtlest);
        color: var(--text-secondary);
        border-radius: var(--corner-radius-s);
    }
    &__empty-searched {
        color: var(--text-primary);
    }

    &__all-results {
        margin-top: var(--spacing-s);
    }

    @include mq($from: md) {
        top: calc(var(--height-component-l) + var(--spacing-s));
        padding-top: var(--spacing-s-nudge);
        min-width: rem-calc(416);
        &__results {
            width: rem-calc(416);
        }
    }
}