﻿.input-datalist-imitate {
    display:flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    /*INPUT-CUSTOM*/
    background-color: var(--white);
    color: var(--black);
    /*border*/
    border-radius: var(--border-radius-default);
    border: none;
    outline: 1px solid var(--border-light);
    outline-offset: -1px;
    /*typography*/
    font-size: var(--font-size-medium);
    line-height: var(--line-height-default);
    font-weight: var(--font-weight-light);
    /*layout*/
    padding: 4px 12px; /*different than input-custom*/
    min-height: 40px;
    width: 100%;
    transition: outline-color 0.5s ease;
}
.input-datalist-imitate:hover {
    outline: 1px solid var(--border-dark);
}
.input-datalist-imitate:focus-within {
    outline: 2px solid var(--black);
    outline-offset: -2px;
}

.input-datalist-imitate .dropdown{
    flex: 1 1 auto;
    /*flex: 1 1;*/
    /*display: flex;*/
}

.input-datalist {
    border: none;
    outline: none;
    padding: 0px;
    /*flex: 1 1;*/
    width: 100%;
    /*typography*/
    font-size: var(--font-size-medium);
    line-height: var(--line-height-default);
    font-weight: var(--font-weight-light);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.input-datalist-imitate .dropdown-menu {
    margin: 16px 0px !important;
}
