/* theme vars… */
:root {
    --ss-bg: var(--input-bg);
    --ss-text: var(--input-text);
    --ss-border: var(--border-light);
    --ss-focus-border: var(--primary-color);
    --ss-shadow: rgba(var(--primary-rgb), .25);
}

.searchable-select {
    position: relative;

}

.ss-control {
    display: flex;
    align-items: center;
    cursor: text;
    background: var(--ss-bg);
    color: var(--ss-text);
    border: 1px solid var(--ss-border);
    border-radius: .25rem;
    transition: border-color .2s, box-shadow .2s;
    padding: 0 10px 0 0;
}

    .ss-control:focus-within {
        border-color: var(--ss-focus-border);
        box-shadow: 0 0 0 .2rem var(--ss-shadow);
       
    }

.ss-input {
    flex: 1;
    border: none;
    background: transparent;
    outline: none;
    color: inherit;
}

    .ss-input:focus {
        background: transparent;
        background-color: none;
        color: none;
        border-color: none;
        box-shadow: none;
        outline: none;
    }


    .ss-arrow {
        margin-left: .5rem;
        color: var(--ss-border);
        user-select: none;
    }

.ss-list {
    display: none;
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    max-height: 200px;
    overflow-y: auto;
    background: var(--ss-bg);
    border: 1px solid var(--ss-border);
    border-top: none;
    border-radius: 0 0 .25rem .25rem;
    box-shadow: 0 2px 6px rgba(0,0,0,.15);
    z-index: 1000;
}

.ss-control[aria-expanded="true"] + .ss-list {
    display: block;
}

.ss-item {
    padding: .5rem .75rem;
    cursor: pointer;
    transition: background .1s;
}

    .ss-item:hover,
    .ss-item.selected {
        background: var(--primary-color);
        color: #fff;
    }



.card:has(.searchable-select),
.card-elevated:has(.searchable-select) {
    overflow: visible !important;
    z-index: 10;
}


    .card:has(.searchable-select) .card-body {
        overflow: visible !important;
    }