.hwlistbox__opts {
    z-index: 2;
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hwlistbox__btn {
    width: 100%;
    height: 3.5rem;
    padding: 0;
    border: solid 1px var(--gray-040);
    border-radius: var(--rounded-md);
    background: transparent;
    background-image: url('data:image/svg+xml,%3Csvg width=\'12\' height=\'8\' fill=\'none\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cpath d=\'M6.735 7.205a1 1 0 01-1.47 0L.622 2.179C.031 1.539.485.5 1.357.5h9.286c.872 0 1.326 1.038.735 1.679L6.735 7.205z\' fill=\'%23809DB0\'/%3E%3C/svg%3E');
    background-position: right 1rem bottom 47%;
    background-size: 12px 8px;
    background-repeat: no-repeat;
}

.hwlistbox__btn:focus, .hwlistbox__opts:focus-within {
    outline: solid 2px var(--blue-110);
    outline-offset: -2px;
}

.hwlistbox {
    position: relative;
}

.hwlistbox__opts-container {
    z-index: 21;
    position: absolute;
    top: 100%;
    top: calc(100% - 1px);
    width: 100%;
    min-width: 100%;
    border: 1px solid #dce3e6;
    border-radius: 0.25rem;
    background: white;
}

.hwlistbox__inner-label {
    height: 3.5rem;
    margin: 0;
    padding: 1rem;
    font-weight: bold;
}

.hwlistbox__opt {
    border-top: solid 1px #f2f4f7;
    cursor: pointer;
}

.hwlistbox__opt:last-child {
    border-radius: 0 0 4px 4px;
}

.hwlistbox__opt[aria-selected='true'] {
    position: relative;
    margin: 0 -1px -1px;
    border: solid 1px #039de0;
    background: #e1f6ff;
}

.hwlistbox__opt[aria-selected='true'] .listbox__icon-option__label {
    color: #153e5c;
}

/* listbox option with icon */

.listbox__icon-option {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
}

.listbox__icon-option__icon, .listbox__icon-option__icon svg {
    display: block;
    width: 2rem;
    height: 2rem;
}

.listbox__icon-option__label {
    max-width: 75%;
    padding-left: 0.25rem;
    overflow: hidden;
    color: #3e4c56;
    font-size: 0.875rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.hwlistbox__opts-container .listbox__icon-option__label {
    max-width: 100%;
}

.hwlistbox__btn .listbox__icon-option {
    border: none;
}

.hwlistbox__btn .listbox__icon-option__label {
    color: #153e5c;
    font-size: 1rem;
}

.hwlistbox__opt[aria-selected='true'] .listbox__icon-option__icon [fill='#F2F4F7'],
.hwlistbox__btn .listbox__icon-option__icon [fill='#F2F4F7'] {
    fill: #e1f6ff;
}

.hwlistbox__opt[aria-selected='true'] .listbox__icon-option__icon [stroke='#F2F4F7'],
.hwlistbox__btn .listbox__icon-option__icon [stroke='#F2F4F7'] {
    stroke: #e1f6ff;
}

.hwlistbox__opt[aria-selected='true'] .listbox__icon-option__icon [fill='#809DB0'],
.hwlistbox__btn .listbox__icon-option__icon [fill='#809DB0'] {
    fill: #039de0;
}

.hwlistbox__opt[aria-selected='true'] .listbox__icon-option__icon [stroke='#809DB0'],
.hwlistbox__btn .listbox__icon-option__icon [stroke='#809DB0'] {
    stroke: #039de0;
}

.hwlistbox__backdrop {
    z-index: 1;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
}

@media (max-width: 375px) {
    .listbox__icon-option__label {
        max-width: 164px;
    }
}