:root,
[data-bs-theme=light] {
    --bs-form-invalid-color: var(--tblr-form-invalid-color);
    --bs-form-valid-color: var(--tblr-form-valid-color);
    --bs-border-width: var(--tblr-border-width);
    --bs-border-radius: var(--tblr-border-radius);
    --bs-border-radius-sm: var(--tblr-border-radius-sm);
    --bs-border-radius-lg: var(--tblr-border-radius-lg);
}

.ts-control {
    align-items: center;
    border-radius: 8px;
    min-block-size: 2.70em;
    display: inline-flex;
    line-height: inherit;
    padding: 0.375em 1em;
    box-shadow: rgba(31, 41, 55, 0.06) 0 2px 2px 0;

    > input {
        color: inherit;
        font-size: inherit;
    }
}

.ts-dropdown {
    --bs-body-bg: var(--tblr-body-bg);
}

.focus .ts-control {
    border-color: rgb(134, 182.5, 254);
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
    border-radius: 6px;
}

.simple-header {
    .header {
        border-bottom: 1px solid #ddd;
        background: var(--tblr-bg-surface-tertiary);
        font-size: .75rem;
        font-weight: var(--tblr-font-weight-bold);
        letter-spacing: .04em;
        line-height: 1rem;
        color: var(--tblr-secondary);
        white-space: nowrap;

    }
}

.ts-wrapper.form-control, .ts-wrapper.form-select {
    height: auto;
    box-shadow: none;
    display: flex;
}

.ts-control {
    border: 0;
}

.ts-wrapper:focus-within {
    appearance: none;
    border-radius: var(--tblr-border-radius);
}
