/* ========================================
   ICON TOGGLE - Универсальные иконки-переключатели
   ========================================

   Компонент: иконки-чекбоксы для фильтров и форм

   Используется в:
   - Фильтрах (filter-bar-icons) - фильтрация контента
   - Модальных окнах (icon-toggle-group) - выбор флагов

   Примеры фильтров:
   - heart (is_liked) - понравившиеся
   - has_clips - есть связанные video clips
   - has_images - есть связанные images

   Режимы:
   - ✅ Unchecked (серая иконка)
   - ✅ Checked (фиолетовая с подсветкой)
   - ⏳ Inactive - добавить позже

   ======================================== */


/* ========================================
   ОСНОВНОЙ КОНТЕЙНЕР
   ======================================== */

.icon-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    background: var(--color-bg-card);
    cursor: pointer;
    transition: all var(--transition-normal);
    border: 2px solid var(--color-border);
    opacity: 1;
}

.icon-toggle:hover {
    background: var(--color-bg-card-hover);
    border-color: var(--color-brand-primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* Hidden checkbox */
.icon-toggle input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Icon */
.icon-toggle svg {
    width: 24px;
    height: 24px;
    color: var(--color-text-secondary);
    transition: color var(--transition-normal);
    z-index: 1;
    position: relative;
}


/* ========================================
   CHECKED STATE
   ======================================== */

.icon-toggle:has(input:checked),
.icon-toggle.checked {
    background: var(--color-bg-card-hover);
    border-color: var(--color-brand-primary);
    transform: translateY(-2px);
}

.icon-toggle input:checked ~ svg,
.icon-toggle.checked svg {
    color: var(--color-brand-primary);
}


/* ========================================
   CHECKMARK (индикатор)
   ======================================== */

.icon-toggle-mark {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: transparent;
    border-radius: var(--radius-md);
    transition: all var(--transition-normal);
    pointer-events: none;
}


/* ========================================
   ACTIVE STATE (alternative)
   ======================================== */

.icon-toggle.active {
    opacity: 1;
    background: var(--color-brand-primary);
    border-color: var(--color-brand-primary);
}


/* ========================================
   GROUP (группа иконок)
   ======================================== */

.icon-toggle-group {
    display: flex;
    gap: 0.5rem;
}


/* ========================================
   CONTEXT-SPECIFIC STYLES
   ======================================== */

/* Inside filter-bar - align to bottom */
.filter-bar-icons .icon-toggle {
    margin-bottom: 0;
}

/* Inside modal - align with dropdown */
.modal-form-row .icon-toggle-group {
    align-self: center;
    margin-bottom: 0;
}

/* Inside upload modal - remove borders from group */
#uploadMediaModal .icon-toggle-group {
    border-left: none;
    border-right: none;
    padding: 0;
    padding-bottom: 1px; /* Align with dropdown bottom edge */
}


/* ========================================
   INACTIVE STATE (TODO)
   ======================================== */

/*
.icon-toggle.inactive {
    opacity: 0.5;
    cursor: not-allowed;
    background: var(--color-bg-card);
    border-color: var(--color-border);
}

.icon-toggle.inactive:hover {
    transform: none;
    box-shadow: none;
}

.icon-toggle.inactive svg {
    color: var(--color-text-tertiary);
}
*/