/** * Select2 custom theme – matches .kt-select from KTUI * Supports light and dark modes via .dark class on */ /* ===================================================== HIDE THE ORIGINAL ; we target the adjacent .select2-container. Mirrors the kt-input[aria-invalid="true"] pattern from KTUI. ===================================================== */ /* Border rojo — single */ select[aria-invalid="true"] + .select2-container--default .select2-selection--single, select[aria-invalid="true"] + .select2-container--default .select2-selection--multiple { border-color: var(--destructive, oklch(57.7% 0.245 27.325)); } @supports (color: color-mix(in lab, red, red)) { select[aria-invalid="true"] + .select2-container--default .select2-selection--single, select[aria-invalid="true"] + .select2-container--default .select2-selection--multiple { border-color: color-mix(in oklab, var(--destructive, oklch(57.7% 0.245 27.325)) 60%, transparent); } } /* Ring rojo al abrir / enfocar cuando es inválido */ select[aria-invalid="true"] + .select2-container--default.select2-container--open .select2-selection--single, select[aria-invalid="true"] + .select2-container--default.select2-container--focus .select2-selection--single, select[aria-invalid="true"] + .select2-container--default.select2-container--open .select2-selection--multiple, select[aria-invalid="true"] + .select2-container--default.select2-container--focus .select2-selection--multiple { border-color: var(--destructive, oklch(57.7% 0.245 27.325)); box-shadow: 0 0 0 3px color-mix(in oklab, var(--destructive, oklch(57.7% 0.245 27.325)) 20%, transparent), 0 1px 2px 0 rgba(0, 0, 0, 0.05); } /* ── Dark mode ── */ .dark select[aria-invalid="true"] + .select2-container--default .select2-selection--single, .dark select[aria-invalid="true"] + .select2-container--default .select2-selection--multiple { border-color: var(--destructive, oklch(57.7% 0.245 27.325)); } .dark select[aria-invalid="true"] + .select2-container--default.select2-container--open .select2-selection--single, .dark select[aria-invalid="true"] + .select2-container--default.select2-container--focus .select2-selection--single, .dark select[aria-invalid="true"] + .select2-container--default.select2-container--open .select2-selection--multiple, .dark select[aria-invalid="true"] + .select2-container--default.select2-container--focus .select2-selection--multiple { border-color: var(--destructive, oklch(57.7% 0.245 27.325)); box-shadow: 0 0 0 3px color-mix(in oklab, var(--destructive, oklch(57.7% 0.245 27.325)) 20%, transparent), 0 1px 2px 0 rgba(0, 0, 0, 0.3); }