.searchable-select {
    position: relative;
    width: 100%;
    min-width: 0;
}

.searchable-select.is-open {
    z-index: 1080;
}

.searchable-select__trigger {
    display: grid;
    grid-template-columns: 2.125rem minmax(0, 1fr) 2.125rem;
    align-items: center;
    width: 100%;
    height: 2.25rem;
    min-width: 0;
    padding: 0;
    color: var(--default-text-color);
    border: 1px solid var(--default-border);
    border-radius: .375rem;
    background: var(--custom-white, #fff);
    font-size: .8125rem;
    line-height: 1.25;
    text-align: left;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.searchable-select__trigger:hover:not(:disabled) {
    border-color: rgba(var(--primary-rgb), .55);
}

.searchable-select__trigger:focus-visible,
.searchable-select.is-open .searchable-select__trigger {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 .2rem rgba(var(--primary-rgb), .14);
    outline: 0;
}

.searchable-select__trigger:disabled {
    color: var(--text-muted, #8c9097);
    background: rgba(var(--light-rgb, 248, 249, 250), .7);
    cursor: not-allowed;
    opacity: .7;
}

.searchable-select__trigger-icon,
.searchable-select__trigger-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
}

.searchable-select__trigger-icon {
    color: var(--primary-color);
    border-right: 1px solid var(--default-border);
    border-radius: .32rem 0 0 .32rem;
    background: rgba(var(--primary-rgb), .08);
    font-size: .9375rem;
}

.searchable-select__trigger-value {
    overflow: hidden;
    padding: 0 .625rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.searchable-select__trigger-value.is-placeholder {
    color: var(--text-muted, #8c9097);
}

.searchable-select__trigger-toggle {
    color: var(--text-muted, #8c9097);
    border-left: 1px solid var(--default-border);
    font-size: 1rem;
}

.searchable-select__trigger-toggle i {
    transition: transform .15s ease;
}

.searchable-select.is-open .searchable-select__trigger-toggle {
    color: var(--primary-color);
    background: rgba(var(--primary-rgb), .06);
}

.searchable-select.is-open .searchable-select__trigger-toggle i {
    transform: rotate(180deg);
}

.searchable-select__menu {
    position: absolute;
    top: calc(100% + .25rem);
    right: 0;
    z-index: 1081;
    width: max(100%, 22rem);
    max-width: calc(100vw - 2rem);
    overflow: hidden;
    color: var(--default-text-color);
    border: 1px solid var(--default-border);
    border-radius: .375rem;
    background: var(--custom-white, #fff);
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
}

.searchable-select__search {
    padding: .5rem;
    border-bottom: 1px solid var(--default-border);
    background: rgba(var(--light-rgb, 248, 249, 250), .65);
}

.searchable-select__options {
    max-height: 17rem;
    overflow: auto;
    overscroll-behavior: contain;
}

.searchable-select__option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    width: 100%;
    padding: .5rem .75rem;
    color: var(--default-text-color);
    border-bottom: 1px solid var(--default-border);
    background: var(--custom-white, #fff);
    text-align: left;
    cursor: pointer;
}

.searchable-select__option:last-child {
    border-bottom: 0;
}

.searchable-select__option:hover,
.searchable-select__option.is-active {
    color: var(--primary-color);
    background: rgba(var(--primary-rgb), .08);
    outline: 0;
}

.searchable-select__option.is-selected {
    box-shadow: inset 3px 0 0 var(--primary-color);
}

.searchable-select__option-content {
    min-width: 0;
}

.searchable-select__check {
    flex: 0 0 auto;
    color: var(--primary-color);
    font-size: 1rem;
}

.searchable-select__empty,
.searchable-select__summary {
    padding: .65rem .75rem;
    color: var(--text-muted, #8c9097);
    font-size: .75rem;
}

.searchable-select__empty {
    text-align: center;
}

.searchable-select__summary,
.searchable-select__footer {
    border-top: 1px solid var(--default-border);
    background: rgba(var(--light-rgb, 248, 249, 250), .35);
}

.searchable-select__footer {
    padding: .25rem .5rem;
    text-align: right;
}

.searchable-select__footer .btn-link {
    text-decoration: none;
}

.searchable-select__operation {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.searchable-select__command {
    display: block;
    margin-bottom: .1rem;
    color: var(--text-muted, #8c9097);
    font-size: .6875rem;
}

@media (max-width: 575.98px) {
    .searchable-select__menu {
        width: 100%;
    }
}