/* src/Style/common.css */

/* Контейнер для вкладок */
.tabs {
    display: flex;
    gap: 5px;
    /* Расстояние между вкладками */
    padding: 5px;
    background-color: #3d74c7;
    /* Цвет фона */
    border-bottom: 2px solid #195fc9;
    /* Линия под вкладками */
    overflow-x: auto;
    /* Прокрутка, если вкладок много */
    border-radius: 5px;
    /* Скругление углов */
    white-space: nowrap;
    /* Запрет переноса текста */
}

/* Стили для отдельной вкладки */
.tab {
    display: flex;
    align-items: center;
    background-color: #3d74c7;
    /* Цвет фона вкладки */
    color: white;
    /* Цвет текста */
    padding: 5px 15px;
    /* Отступы внутри вкладки */
    border-radius: 5px 5px 0 0;
    /* Скругление углов */
    cursor: pointer;
    /* Курсор при наведении */
    flex-shrink: 0;
    /* Запрет сжатия */
    transition: background-color 0.3s ease;
    /* Плавное изменение цвета */
}

/* Активная вкладка */
.tab.active {
    background-color: #195fc9;
    /* Цвет фона активной вкладки */
}

/* Кнопка закрытия вкладки */
.close-tab {
    background: none;
    border: none;
    color: white;
    /* Цвет крестика */
    cursor: pointer;
    font-size: 16px;
    margin-left: 10px;
    /* Отступ от текста */
    padding: 0;
    transition: color 0.3s ease;
    /* Плавное изменение цвета */
}

/* Эффект при наведении на кнопку закрытия */
.close-tab:hover {
    color: #ff6b6b;
    /* Цвет крестика при наведении */
}

/* Эффект при наведении на вкладку */
.tab:hover {
    background-color: #195fc9;
    /* Цвет фона при наведении */
}