.header-search-nav {
    @include media-breakpoint-down(md) {
        position: unset;
    }

    i {
        font-size: 1rem;

        [theme-mode='dark'] & {
            color: $white;
        }
    }
}

.autoComplete_wrapper {
    position: relative;
    width: 100%;

    @include media-breakpoint-down(sm) {
        min-width: 100%;
    }

    >input {
        border-radius: 4px;
        outline: none;
    }

    >ul {
        position: absolute;
        max-height: 226px;
        overflow-y: scroll;
        top: 100%;
        left: 0;
        right: 0;
        padding: 0;
        margin: 0.5rem 0 0 0;
        border-radius: 4px;
        z-index: 1000;
        outline: none;
        background:var(--#{$prefix}white);

        [theme-mode='dark'] & {
            background: var(--#{$prefix}secondary-dark);
            color:var(--#{$prefix}white);
        }

        >li {
            padding: 10px 20px;
            list-style: none;
            text-align: left;
            font-size: 16px;
            transition: all 0.1s ease-in-out;
            border-radius: 3px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            transition: all 0.2s ease;

            &:hover {
                cursor: pointer;
                background-color: rgba(123, 123, 123, 0.1);
            }

            mark {
                padding: 0;
                background-color: transparent;
                color: var(--#{$prefix}primary)
            }
        }

        >li[aria-selected="true"] {
            background-color: rgba(var(--#{$prefix}primary-rgb), 0.1);
        }
    }
}
