/* Basic Template
<div class="design-sys__select-container">
    <select>
        <option selected disabled value="">Select a Time</option>
        <option value="foo">bar</option>
    </select>

    <div class="design-sys__select-message-error">
        <img src="https://cdn.breakthroughbroker.com/assets/bb/icons/OutlinedSVG/exclamation-circle.svg" class="design-sys__text-input-error-icon" alt="error icon">
        <p class="design-sys-typo__body-3">baz</p>
    </div>
</div>
*/

.design-sys__select-container {
    position: relative;
}

.design-sys__select-container select,
.design-sys__select-container-select {
    appearance: none;
    display: flex;
    position: relative;
    gap: 10px;
    flex-direction: row;
    padding: 7px 16px;
    width: 100%;
    height: 38px;
    align-items: center;
    background: var(--design-sys-sec-color__white);
    border-radius: 6px;
    border: 1px solid var(--design-sys-sec-color__grey--8);
    color: var(--design-sys-sec-color__grey--3);
    font-family: Inter;
    font-size: 16px;
    font-weight: 400;
    line-height: 21px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M12.6666 6L7.99998 10.6667L3.33331 6' stroke='%2349494B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 16px;
}

.design-sys__select-container select:-webkit-autofill,
.design-sys__select-container select:-webkit-autofill:hover,
.design-sys__select-container select:-webkit-autofill:focus,
.design-sys__select-container-select:-webkit-autofill,
.design-sys__select-container-select:-webkit-autofill:hover,
.design-sys__select-container-select:-webkit-autofill:focus {
    -webkit-box-shadow: none !important;
    -webkit-text-fill-color: var(--design-sys-sec-color__grey--3) !important;
}

.design-sys__select-container select::placeholder,
.design-sys__select-container-select::placeholder {
    color: var(--design-sys-sec-color__grey--6);
}

.design-sys__select-container select:hover,
.design-sys__select-container-select:hover {
    box-shadow: 0px 0px 0px 2px rgba(142, 143, 147, 0.25);
}

.design-sys__select-container select:focus,
.design-sys__select-container-select:focus {
    border-color: var(--design-sys-sec-color__blue--4);
    box-shadow: 0px 0px 0px 2px rgba(50, 127, 194, 0.25);
}

.design-sys__select-container select:disabled,
.design-sys__select-container-select--disabled {
    color: var(--design-sys-sec-color__grey--6);
    border: 1px solid var(--design-sys-sec-color__grey--8);
    box-shadow: none;
    pointer-events: none;
}

.design-sys__select-container--error select,
.design-sys__select-container--error .design-sys__select-container-select {
    border: 1px solid var(--design-sys-sec-color__red--1) !important;
    outline: 2px solid rgba(255, 84, 80, 0.25) !important;
}

.design-sys__select-message-error {
    display: none;
    align-items: center;
    gap: 4px;
    position: absolute;
    top: 43px;
}

.design-sys__select-container--error .design-sys__select-message-error {
    display: flex;
}

.design-sys__select-error-icon {
    filter: brightness(0) saturate(100%) invert(54%) sepia(18%) saturate(6994%) hue-rotate(325deg) brightness(99%)
        contrast(124%);
    width: 14px;
}