/*
 * Button modifiers — additive on top of existing .neon-btn-{color} system.
 * Merge target: после Block 2 sweep — объединить с buttons.css в один файл.
 * Scope: только новые модификаторы, существующие классы не трогаем.
 */

/* Size modifiers — base .neon-btn-* is md (36px). */
.neon-btn--sm {
    height: 28px;
    padding: 0.2rem 0.65rem;
    font-size: 0.78rem;
    gap: 0.35rem;
}

.neon-btn--sm svg {
    width: 14px;
    height: 14px;
}

.neon-btn--lg {
    height: 44px;
    padding: 0.55rem 1.2rem;
    font-size: 0.95rem;
    gap: 0.55rem;
}

.neon-btn--lg svg {
    width: 22px;
    height: 22px;
}

/* Icon-only — square, no text */
.neon-btn--icon-only {
    width: 36px;
    padding: 0;
    justify-content: center;
}

.neon-btn--icon-only svg {
    width: 18px;
    height: 18px;
}

.neon-btn--icon-only.neon-btn--sm {
    width: 28px;
}

.neon-btn--icon-only.neon-btn--lg {
    width: 44px;
}

/* Input-height — matches --input-height from forms.css (54px) so buttons align with inputs */
.neon-btn--input-height {
    height: var(--input-height);
    padding: 0.55rem 1.1rem;
}

.neon-btn--input-height.neon-btn--icon-only {
    width: var(--input-height);
}

/* Circle — fully round, icon-only square base */
.neon-btn--circle {
    width: 36px;
    padding: 0;
    justify-content: center;
    border-radius: 50%;
}

.neon-btn--circle.neon-btn--sm {
    width: 28px;
}

.neon-btn--circle.neon-btn--lg {
    width: 44px;
}

/* Muted tone — приглушённый base, на hover проявляется цвет роли.
   Применяется поверх любой .neon-btn-{color}. */
.neon-btn--muted {
    color: var(--color-text-secondary);
    border-color: color-mix(in srgb, var(--color-border) 92%, transparent);
    background: color-mix(in srgb, var(--color-bg-card-hover) 42%, transparent);
    box-shadow: none;
}

.neon-btn--muted svg {
    filter: none;
}

.neon-btn-purple.neon-btn--muted:hover {
    color: var(--color-brand-primary);
    border-color: var(--color-brand-primary);
    background: var(--color-brand-primary-15);
    box-shadow: 0 0 12px var(--color-brand-primary-40);
}
.neon-btn-purple.neon-btn--muted:hover svg {
    filter: drop-shadow(0 0 6px var(--color-brand-primary-60));
}

.neon-btn-teal.neon-btn--muted:hover {
    color: var(--color-brand-secondary);
    border-color: var(--color-brand-secondary);
    background: var(--color-brand-secondary-15);
    box-shadow: 0 0 12px var(--color-brand-secondary-40);
}
.neon-btn-teal.neon-btn--muted:hover svg {
    filter: drop-shadow(0 0 6px var(--color-brand-secondary-60));
}

.neon-btn-red.neon-btn--muted:hover {
    color: var(--color-error);
    border-color: var(--color-error);
    background: var(--color-error-15);
    box-shadow: 0 0 12px var(--color-error-40);
}
.neon-btn-red.neon-btn--muted:hover svg {
    filter: drop-shadow(0 0 6px var(--color-error-50));
}

.neon-btn-green.neon-btn--muted:hover {
    color: var(--color-success);
    border-color: var(--color-success);
    background: var(--color-success-15);
    box-shadow: 0 0 12px var(--color-success-40);
}
.neon-btn-green.neon-btn--muted:hover svg {
    filter: drop-shadow(0 0 6px var(--color-success-50));
}

.neon-btn-blue.neon-btn--muted:hover {
    color: var(--color-info);
    border-color: var(--color-info);
    background: var(--color-info-15);
    box-shadow: 0 0 12px var(--color-info-40);
}
.neon-btn-blue.neon-btn--muted:hover svg {
    filter: drop-shadow(0 0 6px var(--color-info-50));
}

.neon-btn-yellow.neon-btn--muted:hover {
    color: var(--color-warning);
    border-color: var(--color-warning);
    background: var(--color-warning-15);
    box-shadow: 0 0 12px var(--color-warning-40);
}
.neon-btn-yellow.neon-btn--muted:hover svg {
    filter: drop-shadow(0 0 6px var(--color-warning-50));
}