.auto-complete-box {
    position: absolute;
    width: 100%;
    left: 0;
    margin: 5px 0 0;
    border-radius: 10px;
    background-color: rgb(var(--colors-gray-200));
    border: 1px solid rgb(var(--colors-gray-400));
    z-index: 10;

    .auto-complete-result {
        position: relative;
        padding: 8px 10px;
        color: rgb(var(--colors-gray-800));

        font-size: 1rem;
        font-weight: 300;
        text-align: left;

        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        cursor: pointer;

        &:first-child {
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
        }
        &:last-child {
            border-bottom-left-radius: 10px;
            border-bottom-right-radius: 10px;
        }
        &:hover {
            background-color: rgb(var(--colors-gray-100));
            color: rgb(var(--colors-primary-500));
        }
    }
    .auto-complete-loader {

        .typing_loader {
            margin: 20px auto;
        }
    }
    .auto-complete-no-results {
        position: relative;
        padding: 20px 0;
        text-align: center;
        font-size: .9rem;
        line-height: 1rem;
        font-weight: 300;
        font-style: italic;
        color: rgb(var(--colors-gray-400));
        background-color: rgb(var(--colors-gray-700));
    }
}