:root {
--app-field-height: 44px;
--app-field-radius: 11px;
--app-field-border: var(--app-line);
--app-field-bg: var(--app-service);
--app-field-text: var(--app-text);
--app-field-muted: var(--app-muted);
--app-field-focus: var(--app-accent);
--app-field-focus-ring: color-mix(in srgb, var(--app-field-focus) 18%, transparent);
--app-field-disabled: color-mix(in srgb, var(--app-service) 72%, var(--app-bg));
}
[data-app-theme="dark"] {
--app-field-border: var(--app-line);
--app-field-bg: var(--app-service);
--app-field-text: var(--app-text);
--app-field-muted: var(--app-muted);
--app-field-focus: var(--app-accent);
--app-field-focus-ring: color-mix(in srgb, var(--app-field-focus) 22%, transparent);
--app-field-disabled: color-mix(in srgb, var(--app-service) 72%, var(--app-bg));
}
body:not([data-app-theme="dark"]) .select2-container--app.select2-container .select2-selection {
border-color: var(--app-field-border);
background-color: var(--app-field-bg);
color: var(--app-field-text);
}
body[data-app-theme="dark"] .select2-container--app.select2-container .select2-selection {
border-color: var(--app-field-border);
background-color: var(--app-field-bg);
color: var(--app-field-text);
}
.select2-container--app {
display: block;
width: 100%;
box-sizing: border-box;
font-family: inherit;
}
.select2-container--app *,
.select2-container--app *::before,
.select2-container--app *::after { box-sizing: border-box; }
.select2-container--app .select2-selection {
min-height: var(--app-field-height);
border: 1px solid var(--app-field-border);
border-radius: var(--app-field-radius);
background: var(--app-field-bg);
color: var(--app-field-text);
font: inherit;
cursor: pointer;
transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}
.select2-container--app.select2-container--focus .select2-selection,
.select2-container--app.select2-container--open .select2-selection {
border-color: var(--app-field-focus);
box-shadow: 0 0 0 3px var(--app-field-focus-ring);
outline: 0;
}
.select2-container--app.select2-container--open.select2-container--below .select2-selection {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.select2-container--app.select2-container--open.select2-container--above .select2-selection {
border-top-right-radius: 0;
border-top-left-radius: 0;
}
.select2-container--app .select2-selection--single {
height: var(--app-field-height);
padding: 0 42px 0 12px;
}
.select2-container--app .select2-selection--single .select2-selection__rendered {
height: 100%;
padding: 0;
overflow: hidden;
color: var(--app-field-text);
line-height: calc(var(--app-field-height) - 2px);
text-overflow: ellipsis;
white-space: nowrap;
}
.select2-container--app .select2-selection__placeholder { color: var(--app-field-muted); }
.select2-container--app .select2-selection--single .select2-selection__arrow {
position: absolute;
top: 50%;
right: 13px;
width: 14px;
height: 14px;
transform: translateY(-50%);
}
.select2-container--app .select2-selection--single .select2-selection__arrow b {
position: absolute;
inset: 2px 2px 5px 2px;
width: 8px;
height: 8px;
margin: 0;
border: 0;
border-right: 1.5px solid var(--app-field-muted);
border-bottom: 1.5px solid var(--app-field-muted);
transform: rotate(45deg);
}
.select2-container--app.select2-container--open .select2-selection__arrow b {
inset: 5px 2px 2px 2px;
transform: rotate(225deg);
}
.select2-container--app .select2-selection__clear {
position: absolute;
z-index: 1;
top: 50%;
right: 34px;
margin: 0;
border: 0;
background: transparent;
color: var(--app-field-muted);
font-size: 18px;
line-height: 1;
cursor: pointer;
transform: translateY(-52%);
}
.select2-container--app .select2-selection--multiple {
min-height: var(--app-field-height);
padding: 5px 38px 5px 6px;
}
.select2-container--app .select2-selection--multiple .select2-selection__rendered {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 5px;
margin: 0;
padding: 0;
list-style: none;
}
.select2-container--app .select2-selection--multiple .select2-selection__choice {
display: inline-flex;
align-items: center;
min-height: 30px;
margin: 0;
padding: 4px 9px 4px 7px;
border: 1px solid color-mix(in srgb, var(--app-field-focus) 24%, var(--app-field-border));
border-radius: 8px;
background: color-mix(in srgb, var(--app-field-focus) 8%, var(--app-field-bg));
color: var(--app-field-text);
font-size: .88rem;
}
.select2-container--app .select2-selection--multiple .select2-selection__choice__remove {
order: -1;
margin: 0 6px 0 0;
padding: 0;
border: 0;
background: transparent;
color: var(--app-field-muted);
font-size: 17px;
line-height: 1;
cursor: pointer;
}
.select2-container--app .select2-search--inline .select2-search__field {
height: 30px;
margin: 0;
color: var(--app-field-text);
font: inherit;
line-height: 30px;
}
.select2-container--app .select2-dropdown {
z-index: 9999;
overflow: hidden;
border: 1px solid var(--app-field-focus);
border-radius: var(--app-field-radius);
background: var(--app-field-bg);
color: var(--app-field-text);
box-shadow: 0 14px 34px rgba(24, 18, 31, .16);
}
.select2-container--app .select2-dropdown--below { border-top-left-radius: 0; border-top-right-radius: 0; }
.select2-container--app .select2-dropdown--above { border-bottom-right-radius: 0; border-bottom-left-radius: 0; }
.select2-container--app .select2-search--dropdown { padding: 8px; }
.select2-container--app .select2-search--dropdown .select2-search__field {
width: 100%;
min-height: 40px;
padding: 8px 10px;
border: 1px solid var(--app-field-border);
border-radius: 9px;
background: var(--bg-select-imput, var(--app-field-bg));
color: var(--app-field-text);
font: inherit;
outline: 0;
}
.select2-container--app .select2-search--dropdown .select2-search__field:focus {
border-color: var(--app-field-focus);
box-shadow: 0 0 0 3px var(--app-field-focus-ring);
}
.select2-container--app .select2-results__options:not(.select2-results__options--nested) {
max-height: 260px;
padding: 5px;
overflow-y: auto;
}
.select2-container--app .select2-results__option {
margin: 1px 0;
padding: 9px 10px;
border-radius: 8px;
font-size: .92rem;
line-height: 1.35;
cursor: pointer;
}
.select2-container--app .select2-results__option[aria-disabled="true"] { cursor: default; }
.select2-container--app .select2-results__option--highlighted[aria-selected],
.select2-container--app .select2-results__option--selected {
background: color-mix(in srgb, var(--app-field-focus) 12%, var(--app-field-bg));
color: var(--app-field-text);
}
.select2-container--app .select2-results__option--highlighted[aria-selected] {
background: var(--app-service-hover);
color: var(--app-heading);
}
.select2-container--app .select2-results__message,
.select2-container--app .select2-results__option[aria-disabled="true"] { color: var(--app-field-muted); }
.select2-container--app.select2-container--disabled .select2-selection {
border-color: var(--app-field-border);
background: var(--app-field-disabled);
color: var(--app-field-muted);
box-shadow: none;
cursor: not-allowed;
opacity: .72;
}
.is-valid + .select2-container--app .select2-selection { border-color: #198754; }
.is-invalid + .select2-container--app .select2-selection { border-color: #dc3545; }
.is-valid + .select2-container--app.select2-container--focus .select2-selection { box-shadow: 0 0 0 3px rgba(25, 135, 84, .14); }
.is-invalid + .select2-container--app.select2-container--focus .select2-selection { box-shadow: 0 0 0 3px rgba(220, 53, 69, .14); }
@media (prefers-reduced-motion: reduce) {
.select2-container--app .select2-selection { transition: none; }
}