/* ========================================
   КОМПОНЕНТ: tab-btn
   Описание: Кнопки табов с 5 цветовыми вариантами
   ======================================== */

/* Базовая кнопка таба */
.tab-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 0 12px;
    height: 40px;
    

    font-weight: 500;
    font-size: 14px;
    /*line-height: 1.71;*/
    text-align: center;
    color: #FFFFFF;
    
    border: 1px solid;
    border-radius: 12px;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s ease, border-color 0.2s ease;
    position: relative;
    
    /* Default color (серый) */
    background: linear-gradient(180deg, rgba(79, 64, 67, 1) 0%, rgba(90, 73, 76, 1) 100%);
    border-color: rgba(212, 199, 196, 0.32);
}

/* Убираем стандартные стили для button */
.tab-btn:is(button) {
    /*border: 1px solid;*/
    /*background-clip: padding-box;*/
}

/* ========================================
   STATES - Базовые состояния (для дефолтного цвета)
   ======================================== */

/* Hover */
.tab-btn:hover {
    background: linear-gradient(180deg, rgba(67, 55, 57, 1) 0%, rgba(79, 64, 67, 1) 100%);
    border-color: rgba(212, 199, 196, 0.6);
}

/* Active (нажатие) */
.tab-btn:active {
    background: linear-gradient(180deg, rgba(50, 41, 43, 1) 0%, rgba(67, 55, 57, 1) 100%);
    border-color: rgba(212, 199, 196, 0.8);
}

/* Focus */
.tab-btn:focus-visible {
    outline: 2px solid rgba(212, 199, 196, 0.6);
    outline-offset: 2px;
}

/* Disabled */
.tab-btn:disabled,
.tab-btn.is-disabled {
    background: linear-gradient(180deg, rgba(44, 36, 37, 1) 0%, rgba(56, 46, 48, 1) 100%);
    border-color: rgba(212, 199, 196, 0.2);
    color: rgba(255, 255, 255, 0.4);
    cursor: not-allowed;
    pointer-events: none;
}

/* ========================================
   COLOR VARIANTS - Цветовые варианты кнопок
   ======================================== */

/* Color 1: Exclusive (фиолетовый) */
.tab-btn--exclusive {
    background: 
        radial-gradient(circle at 50% 100%, rgba(167, 32, 193, 1) 0%, rgba(167, 32, 193, 0) 100%),
        linear-gradient(180deg, rgba(106, 20, 123, 1) 0%, rgba(121, 23, 140, 1) 100%);
    border-color: rgba(212, 199, 196, 0.48);
}

.tab-btn--exclusive:hover {
    background: 
        radial-gradient(circle at 50% 100%, rgba(121, 23, 140, 1) 0%, rgba(167, 32, 193, 0) 100%),
        linear-gradient(180deg, rgba(93, 39, 104, 1) 0%, rgba(106, 20, 123, 1) 100%);
    border-color: rgba(212, 199, 196, 0.4);
}

.tab-btn--exclusive:active {
    background: linear-gradient(180deg, rgba(50, 41, 43, 1) 0%, rgba(67, 55, 57, 1) 100%);
    border-color: rgba(212, 199, 196, 0.8);
}

/* Color 2: Favorites (красный) */
.tab-btn--favorites {
    background: 
        radial-gradient(circle at 50% 100%, rgba(193, 31, 59, 1) 0%, rgba(193, 31, 59, 0) 100%),
        linear-gradient(180deg, rgba(123, 20, 37, 1) 0%, rgba(140, 23, 43, 1) 100%);
    border-color: rgba(212, 199, 196, 0.48);
}

.tab-btn--favorites:hover {
    background: 
        radial-gradient(circle at 50% 100%, rgba(193, 31, 59, 1) 0%, rgba(193, 31, 59, 0) 100%),
        linear-gradient(180deg, rgba(105, 17, 32, 1) 0%, rgba(123, 20, 37, 1) 100%);
    border-color: rgba(212, 199, 196, 0.4);
}

.tab-btn--favorites:active {
    background: linear-gradient(180deg, rgba(50, 41, 43, 1) 0%, rgba(67, 55, 57, 1) 100%);
    border-color: rgba(212, 199, 196, 0.8);
}

/* Color 3: Popular (синий) */
.tab-btn--popular {
    background: 
        radial-gradient(circle at 50% 100%, rgba(12, 95, 213, 1) 0%, rgba(12, 95, 213, 0) 100%),
        linear-gradient(180deg, rgba(7, 61, 135, 1) 0%, rgba(9, 69, 155, 1) 100%);
    border-color: rgba(212, 199, 196, 0.48);
}

.tab-btn--popular:hover {
    background: 
        radial-gradient(circle at 50% 100%, rgba(12, 95, 213, 1) 0%, rgba(12, 95, 213, 0) 100%),
        linear-gradient(180deg, rgba(6, 52, 116, 1) 0%, rgba(7, 61, 135, 1) 100%);
    border-color: rgba(212, 199, 196, 0.4);
}

.tab-btn--popular:active {
    background: linear-gradient(180deg, rgba(50, 41, 43, 1) 0%, rgba(67, 55, 57, 1) 100%);
    border-color: rgba(212, 199, 196, 0.8);
}

/* Color 4: New (зеленый) */
.tab-btn--new {
    background: 
        radial-gradient(circle at 50% 100%, rgba(46, 179, 99, 1) 0%, rgba(46, 179, 99, 0) 100%),
        linear-gradient(180deg, rgba(25, 98, 54, 1) 0%, rgba(33, 130, 73, 1) 100%);
    border-color: rgba(212, 199, 196, 0.48);
}

.tab-btn--new:hover {
    background: 
        radial-gradient(circle at 50% 100%, rgba(46, 179, 99, 1) 0%, rgba(46, 179, 99, 0) 100%),
        linear-gradient(180deg, rgba(37, 86, 59, 1) 0%, rgba(43, 100, 69, 1) 100%);
    border-color: rgba(212, 199, 196, 0.4);
}

.tab-btn--new:active {
    background: linear-gradient(180deg, rgba(50, 41, 43, 1) 0%, rgba(67, 55, 57, 1) 100%);
    border-color: rgba(212, 199, 196, 0.8);
}

/* Color 5: Other (оранжевый) */
.tab-btn--other {
    background: 
        radial-gradient(circle at 50% 100%, rgba(217, 116, 8, 1) 0%, rgba(217, 116, 8, 0) 100%),
        linear-gradient(180deg, rgba(138, 74, 5, 1) 0%, rgba(157, 84, 6, 1) 100%);
    border-color: rgba(212, 199, 196, 0.48);
}

.tab-btn--other:hover {
    background: 
        radial-gradient(circle at 50% 100%, rgba(217, 116, 8, 1) 0%, rgba(217, 116, 8, 0) 100%),
        linear-gradient(180deg, rgba(118, 63, 4, 1) 0%, rgba(138, 74, 5, 1) 100%);
    border-color: rgba(212, 199, 196, 0.4);
}

.tab-btn--other:active {
    background: linear-gradient(180deg, rgba(50, 41, 43, 1) 0%, rgba(67, 55, 57, 1) 100%);
    border-color: rgba(212, 199, 196, 0.8);
}

/* ========================================
   ICON SUPPORT - Поддержка иконок
   ======================================== */

.tab-btn__icon {
    display: inline-flex;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.tab-btn__icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ========================================
   MEDIA QUERIES - Адаптивность (Desktop-first)
   ======================================== */

/* ≤1599 */
@media (max-width: 1599px) {
}

/* ≤1439 */
@media (max-width: 1439px) {
}

/* ≤1279 */
@media (max-width: 1279px) {
}

/* ≤959 */
@media (max-width: 959px) {
    .tab-btn {
        /*font-size: 13px;*/
        /*padding: 0 10px;*/
        /*height: 36px;*/
    }
}

/* ≤599 */
@media (max-width: 599px) {
    .tab-btn {
        /*font-size: 12px;*/
        /*padding: 0 8px;*/
        /*height: 32px;*/
    }
}

/*
HTML разметка:

Базовое использование (дефолтный серый цвет):
<button class="tab-btn">Button</button>

Цветовые варианты:
<button class="tab-btn tab-btn--exclusive">Exclusive</button>
<button class="tab-btn tab-btn--favorites">Favorites</button>
<button class="tab-btn tab-btn--popular">Popular</button>
<button class="tab-btn tab-btn--new">New</button>
<button class="tab-btn tab-btn--other">Tournament</button>

С иконкой:
<button class="tab-btn tab-btn--favorites">
  <span class="tab-btn__icon">
    <svg>...</svg>
  </span>
  <span>Favorites</span>
</button>

Активная вкладка:
<button class="tab-btn tab-btn--exclusive is-open">Exclusive</button>

Disabled:
<button class="tab-btn tab-btn--new" disabled>New</button>
*/