@import './pico-vars.css';

.navbar-header {
    height: 52px;
    border-bottom: 1px solid #e1e1e1;
    align-items: center;
    margin-bottom: 1rem;
}

.navbar-button {
    padding: 0.5rem;
}

.rounded-wrapper {
    border: solid 1px #e1e1e1;
    border-radius: 15px;
    overflow: hidden;
}

/* Глобальные утилиты */
.container-fluid {
    padding-right: 4rem;
    padding-left: 4rem;
}

/* Выравнивание по правому краю */
.right {
    display: flex;
    justify-content: flex-end;
}

/* Карточки */
article {
    border: 1px solid #eee;
}

/* Скролл */
::-webkit-scrollbar {
    /* Делаем его узким, чтобы он не занимал много места */
    width: 0.6rem;
    /* Делаем его полностью прозрачным, когда прокрутка не активна */
    background: transparent;
}

/* 3. Делаем ползунок (thumb) видимым только при прокрутке */
::-webkit-scrollbar-thumb {
    /* Ползунок в обычном состоянии полностью или частично прозрачен */
    background-color: rgba(128, 128, 128, 0.2);
    border-radius: 4px;
}

/* 4. При наведении на контейнер прокрутки, делаем ползунок видимым */
:hover::-webkit-scrollbar-thumb {
    background-color: rgba(128, 128, 128, 0.4); /* Полупрозрачный серый */
    border-radius: 4px;
}

/* 5. На случай, если пользователь активно скроллит */
::-webkit-scrollbar-thumb:active {
    background-color: rgba(128, 128, 128, 0.5);
}

::-webkit-scrollbar {
    height: 6px;
}

::-webkit-scrollbar-thumb {
    background: rgba(120,120,120,0.35);
    border-radius: 4px;
}

.material-symbols-outlined {
    font-size: 1.3rem;
    vertical-align: bottom;
}

.reset-btn {
    all: unset;
    display: inline-block;
    cursor: pointer;
    font: inherit;
}

.text-button {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.2rem;
    text-decoration: none;
    border: none;
}