/*
 * Perbaikan untuk Tabler 1.x.
 *
 * Dimuat setelah tabler.min.css sehingga aturan di sini yang menang.
 */

/*
 * Tombol ikon menciut sampai nyaris hilang.
 *
 * Tabler menolkan padding kiri-kanan .btn-icon, lalu memberi ikon di dalamnya
 * margin negatif sebesar padding tombol:
 *
 *   .btn-action, .btn-icon           { padding-left: 0; padding-right: 0 }
 *   .btn-action .icon, .btn-icon .icon { margin: calc(-1 * var(--tblr-btn-padding-x)) }
 *
 * Pada .btn biasa padding-x-nya 1rem dan ikonnya 1.25rem, jadi kotak margin
 * ikon menjadi 1.25rem - 2rem = -0.75rem. Lebar tombol runtuh ke nol dan
 * ikonnya meluber keluar, sehingga yang terlihat hanya sepotong tipis warna
 * tombol. Pada .btn-sm hasilnya sama-sama nol.
 *
 * Margin negatifnya dibatalkan, lalu padding kiri-kanan disamakan dengan
 * padding atas-bawah supaya tombolnya kembali berbentuk kotak. Memakai padding,
 * bukan lebar tetap, membuat .w-100 pada beberapa tombol tetap bekerja.
 */
.btn-action .icon,
.btn-icon .icon {
    margin: 0;
}

.btn-icon {
    padding-left: var(--tblr-btn-padding-y);
    padding-right: var(--tblr-btn-padding-y);
}

/*
 * Ikon status di sisi kanan kolom isian.
 *
 * Tabler hanya menyediakan .input-icon-addon yang menempel di kiri
 * (left: 0; right tidak diatur). Sebelumnya beberapa halaman memindahkannya ke
 * kanan lewat style sebaris berisi `right: 0` tanpa membatalkan `left: 0`,
 * sehingga kotaknya melar selebar kolom dan spinner-nya berhenti di tempat yang
 * tidak diharapkan. Kelas ini membatalkan sisi kirinya dengan benar.
 */
.input-icon-addon-end {
    right: 0;
    left: auto;
}

/*
 * Indikator pemuatan di dalam kotak pencarian.
 *
 * Sebelumnya spinner dibungkus .input-icon-addon milik Tabler, yang memusatkan
 * isinya dengan display: flex. Livewire menuliskan display secara sebaris
 * ketika elemen wire:loading ditampilkan, dan nilai bawaannya inline-block,
 * sehingga aturan flex tersebut kalah dan spinner berhenti di sudut kotak,
 * menempel pada garis tepi kolom isian. Ukurannya pun ikut ukuran spinner
 * Bootstrap yang terlalu besar untuk kolom .form-control-sm.
 *
 * Kelas di bawah ini tidak menetapkan display sama sekali; Livewire yang
 * mengisinya (none saat diam, flex saat memuat lewat wire:loading.flex),
 * sehingga pemusatannya tidak pernah tertimpa. Ukuran dan ketebalan garisnya
 * disamakan dengan spinner tombol agar seragam di seluruh aplikasi.
 */
.sisurat-search {
    position: relative;
}

.sisurat-search > .form-control {
    padding-right: 2rem;
}

.sisurat-search-spinner {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 2rem;
    align-items: center;
    justify-content: center;
    color: var(--tblr-secondary, #6c757d);
    pointer-events: none;
}

/*
 * Indikator pemuatan yang menumpang di dalam sebuah baris.
 *
 * Dipakai pada elemen yang bukan tombol -- baris .list-group-item dan kolom
 * isian -- sehingga tidak terjangkau spinner otomatis di button-loading.js.
 * Aturannya mengikuti pola yang sama dengan .sisurat-search-spinner: display
 * sengaja tidak diisi supaya wire:loading.flex yang menentukannya, karena
 * display sebaris dari Livewire selalu mengalahkan display dari kelas.
 *
 * Jarak dari tepi kanan dapat digeser lewat --sisurat-inline-spinner-inset,
 * misalnya agar tidak menimpa tanda panah bawaan sebuah <select>. Warnanya
 * sengaja diwariskan supaya ikut berubah putih di atas baris yang aktif.
 */
.sisurat-inline-spinner {
    position: absolute;
    top: 0;
    bottom: 0;
    right: var(--sisurat-inline-spinner-inset, 1rem);
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.sisurat-spinner-icon {
    width: 0.875rem;
    height: 0.875rem;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: sisurat-spinner 0.7s linear infinite;
}

@keyframes sisurat-spinner {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .sisurat-spinner-icon {
        animation-duration: 1.4s;
    }
}

/*
 * Tirai pemuatan di atas tabel yang berhalaman.
 *
 * Tombol halaman dikecualikan dari spinner otomatis di
 * public/js/button-loading.js, jadi indikatornya harus berada di tabelnya,
 * bukan di tombolnya. Tirai menutupi data lama selama permintaan berjalan
 * sehingga baris yang sudah usang tidak bisa diklik.
 *
 * Seperti .sisurat-search-spinner, display sengaja tidak diisi supaya
 * wire:loading.flex yang menentukannya; display sebaris dari Livewire selalu
 * mengalahkan display dari kelas.
 */
.sisurat-table-loading {
    position: absolute;
    inset: 0;
    z-index: 3;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.72);
    color: var(--tblr-secondary, #6c757d);
    font-size: 0.875rem;
    cursor: progress;
}

[data-bs-theme="dark"] .sisurat-table-loading {
    background-color: rgba(24, 36, 51, 0.72);
}