/**
 * FlowX4 Theme Toggle
 * ===================
 */

.theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: var(--color-text-secondary);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

.theme-toggle:hover {
    color: var(--color-text-primary);
    background: var(--color-surface-hover);
}

.theme-toggle svg {
    width: 20px;
    height: 20px;
}

.theme-toggle-icon,
.theme-toggle__icon {
    display: none;
}

.theme-toggle-icon.active,
.theme-toggle__icon--active {
    display: block;
}