/*
   Düğmenin "işleniyor" hâli. Hem ana yerleşim hem giriş ekranları bunu kullanıyor;
   bu yüzden yerleşimin içinde değil, ortak dosyada duruyor.

   NEDEN Bootstrap'in .spinner-border'ı DEĞİL: o 1rem sabit yükseklikte bir kutu. Düğme
   metninden büyük olduğu için düğmenin satır kutusunu büyütüyor ve düğme işlem sırasında
   uzayıp kısalıyordu.

   Halka .9em: temanın düğme satır yüksekliği 1.2 ($btn-line-height), 1em'lik bir kutu
   taban çizgisinin altına kaydırılınca satır kutusunu büyütebiliyordu. .9em + ortalama
   hizalama satır kutusunun içinde kalıyor, düğmenin boyu değişmiyor.

   Renk currentColor: açık zeminli düğmelerde de görünüyor. (Eski kural color:white
   veriyordu; btn-phoenix-secondary gibi düğmelerde yazı neredeyse okunmaz oluyordu.)
*/
.loading,
.btn-loading {
    pointer-events: none;
    opacity: .85;
}

.btn-spinner {
    display: inline-block;
    width: .9em;
    height: .9em;
    /* Akış düğmesinde yazının optik ortasına denk gelir. */
    vertical-align: middle;
    /* Düğme flex ise: esneyip yayılmasın, dikeyde ortalansın. */
    flex: 0 0 auto;
    align-self: center;
    border: .12em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: btn-spin .6s linear infinite;
}

/*
   Metinden önce geldiğinde araya boşluk. Bunu CSS'e :not(:only-child) ile bırakmak
   ÇALIŞMIYOR: :only-child yalnız ÖĞE çocuklarını sayar, metin düğümlerini saymaz.
   "<span class=btn-spinner></span>Kaydet" içinde halka tek öğe olduğu için kural hiç
   uygulanmıyor ve halka yazıya yapışık duruyordu. Kararı BtnToggle veriyor.
*/
.btn-spinner-inline {
    margin-right: .4em;
}

/* Halka, düğmenin kendi ikonunun yerini alıyor; iki simge yan yana durmasın. */
.btn-spinner-ikon-gizli {
    display: none !important;
}

@keyframes btn-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .btn-spinner {
        animation-duration: 1.5s;
    }
}