/*
 * Penyesuaian Select2 milik aplikasi.
 *
 * Tema bootstrap4 bawaan Select2 hanya mengenal satu ukuran kotak, yaitu
 * setinggi .form-control biasa. Baris penyaring di halaman index memakai
 * input-group-sm, jadi kotak Select2 di sana harus dikecilkan lewat pembungkus
 * .filter-kelas.
 *
 * Catatan penting: tema menulis tingginya dengan !important
 * (.select2-selection--single{height:calc(1.5em + .75rem + 2px) !important}),
 * sehingga penimpaan tanpa !important tidak pernah berlaku - kotaknya tetap
 * tinggi sementara bagian di dalamnya ikut mengecil dan melar keluar kotak.
 * Karena itu tinggi di sini juga memakai !important.
 *
 * Panah dan tombol silang sengaja tidak disentuh. Tema menempatkannya dengan
 * persentase terhadap kotak (.select2-selection__arrow{top:50%} dan b{top:60%}
 * di dalam kotak panah yang tingginya 0), jadi memberi keduanya tinggi tetap
 * justru mendorong panah jatuh ke bawah garis kotak dan membuat tombol silang
 * yang bulat berubah jadi lonjong.
 */
.filter-kelas .select2-container--bootstrap4 .select2-selection--single {
    height: calc(1.5em + .5rem + 2px) !important;
    font-size: .875rem;
}

.filter-kelas .select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered,
.filter-kelas .select2-container--bootstrap4 .select2-selection--single .select2-selection__placeholder {
    line-height: calc(1.5em + .5rem);
}

/*
 * Peringatan di bawah nama pada daftar hasil (lihat templateResult di
 * public/js/app-select2.js), mis. guru badal yang bentrok jam di form Izin.
 * Pada baris yang sedang disorot warnanya ikut putih supaya tetap terbaca.
 */
.select2-peringatan {
    color: #9a3412;
    font-size: .8rem;
    line-height: 1.3;
}

.select2-results__option--highlighted .select2-peringatan {
    color: inherit;
}