/* Кнопки: только два вида — заполненная (.btn--fill) и обводка (.btn--outline). Всегда пилюля.
   Высота / шрифт на широком экране: sm 28/13 · md 32/13 · lg 36/14 (по умолчанию) · xl 40/14 — как в кабинете ElevenLabs.
   На телефоне каждая на 2px выше (30 · 34 · 38 · 42), чтобы попадать пальцем. Вес 500. */
.btn {
  --h: 38px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  flex: none;
  height: var(--h); padding: 0 14px;
  border-radius: var(--r-pill);
  font-size: 14px; font-weight: 500; line-height: 1; white-space: nowrap;
  cursor: pointer;
}
.btn--sm { --h: 30px; padding: 0 10px; font-size: 13px; }
.btn--md { --h: 34px; padding: 0 12px; font-size: 13px; }
.btn--xl { --h: 42px; padding: 0 18px; font-size: 14px; gap: 8px; }
@media (min-width: 768px) {
  .btn { --h: 36px; }
  .btn--sm { --h: 28px; }
  .btn--md { --h: 32px; }
  .btn--xl { --h: 40px; }
}

/* на сенсорных экранах зона нажатия шире видимой кнопки на 3px с каждой стороны: кнопка 30px ловит палец как 36px */
.btn, .chip { position: relative; }
@media (pointer: coarse) {
  .btn::before, .chip::before { content: ""; position: absolute; inset: -3px; border-radius: inherit; }
}

.btn--fill { background: var(--brand); color: var(--on-brand); }
.btn--outline { background: var(--card); color: var(--text); box-shadow: var(--ring); }

.btn--icon { width: var(--h); padding: 0; }
.btn--block { width: 100%; }
.btn--grow { flex: 1 1 auto; }

.btn:disabled, .btn[aria-disabled="true"] { opacity: .4; pointer-events: none; }

.btn.is-loading { color: transparent; pointer-events: none; position: relative; }
.btn.is-loading::after {
  content: ""; position: absolute; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--on-brand); border-right-color: transparent;
  animation: spin .7s linear infinite;
}
.btn--outline.is-loading::after { border-color: var(--text); border-right-color: transparent; }

@media (hover: hover) {
  .btn--fill:hover { background: var(--brand-hover); }
  .btn--outline:hover { background: var(--surface); }
}

/* Эффект клика. Класс .is-pressed вешает press.js (работает и на телефонах). */
.btn, .chip, .seg__tab, .press, .star-input__star {
  transition: transform .14s var(--ease), background-color .15s var(--ease),
              box-shadow .15s var(--ease), color .15s var(--ease), opacity .15s var(--ease);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.btn, .chip, .seg__tab { user-select: none; -webkit-user-select: none; }
.is-pressed { transform: scale(var(--press, .96)); }
.btn--fill.is-pressed { background: var(--brand-press); }
.btn--outline.is-pressed { background: var(--surface-2); }