/*--------------------------------------------------------------
# Paski przewijania
--------------------------------------------------------------*/

/*
   KOLEJNOŚĆ TYCH DWÓCH BLOKÓW NIE JEST PRZYPADKOWA.

   Blink (Chrome/Edge 121+) i WebKit (Safari 26.2+) ignorują CAŁY blok
   ::-webkit-scrollbar*, jeżeli na tym samym elemencie ustawiono
   scrollbar-width albo scrollbar-color w wartości innej niż początkowa.
   Taka jest rezolucja CSSWG i tak to działa w praktyce.

   Wcześniej standardowe właściwości siedziały na selektorze uniwersalnym,
   więc reguły webkitowe poniżej były martwe we wszystkich współczesnych
   silnikach, a każdy pasek — łącznie z panelem ustawień — rysował się jako
   `thin`. Stąd @supports: silnik, który zna ::-webkit-scrollbar, pomija
   blok standardowy i dostaje 6 px; Firefox pomija reguły webkitowe
   i bierze standard.

   Nie łącz tych dwóch bloków i nie przenoś standardowych właściwości
   poza @supports — wróci dokładnie ten sam błąd.
*/

/* WebKit / Blink */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.28);
    border-radius: 3px;
    cursor: pointer;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.45);
}

/*
   Firefox. `scrollbar-width` NIE jest dziedziczone (w odróżnieniu od
   `scrollbar-color`), więc lista musi wymieniać każdy kontener, który
   faktycznie się przewija. Dodajesz nowy — dopisz go tutaj, inaczej
   dostanie domyślny, gruby pasek systemowy.

   `thin` to w tym silniku dno (~10-12 px); węziej natywnie się nie da.
   Panel ustawień jest za to na tyle skrócony, że w typowym oknie
   nie powinien się w ogóle przewijać.
*/
@supports not selector(::-webkit-scrollbar) {
    html,
    body,
    #settings,
    .swal2-container,
    .swal2-popup,
    .swal2-html-container {
        scrollbar-width: thin;
        scrollbar-color: rgba(255, 255, 255, 0.28) transparent;
    }
}

/*--------------------------------------------------------------
# Stan nagrywania
--------------------------------------------------------------*/

.red {
    background: #ff4d4d !important;
    color: white !important;
}

.red:hover {
    background: #e60000 !important;
}