@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* Tailwind делает всё остальное. Здесь только кастомный скроллбар */

/* Скроллбар для всего приложения */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: #09090b; /* Zinc 950 */
}

::-webkit-scrollbar-thumb {
    background: #27272a; /* Zinc 800 */
    border-radius: 5px;
    border: 2px solid #09090b; /* Отступ */
}

::-webkit-scrollbar-thumb:hover {
    background: #3f3f46; /* Zinc 700 */
}

/* Убираем стандартный outline у кнопок */
*:focus-visible {
    outline: 2px solid #ef4444; /* Red 500 */
    outline-offset: 2px;
}
/* ЛОГИКА ИНДИКАТОРОВ HTMX */

/* По умолчанию скрываем лоадер */
.htmx-indicator {
    display: none;
    opacity: 0;
    transition: opacity 0.2s ease-in;
}

/* Когда идет запрос (класс .htmx-request вешается на форму), показываем лоадер */
.htmx-request .htmx-indicator {
    display: flex;
    opacity: 1;
}

/* Скрываем контент кнопки, когда идет загрузка */
.htmx-request .btn-content {
    display: none;
}