/* Источник: проект Claude Design «SiteCreator Cabinet Design System», parts/buttons.css.
   Срез 14 августа 2026. Файл держится побайтово равным источнику: расхождение
   репозитория с проектом считается дефектом, а не локальной правкой. */

/* Кнопка. На экране одно главное действие. Русская подпись переносится, а не
   обрезается: обрезанное действие человек считает поломкой. */
.sc-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sc-space-8);
  min-block-size:var(--sc-control-h-md);min-inline-size:var(--sc-tap-min);
  padding-inline:var(--sc-space-24);padding-block:var(--sc-btn-pad-block);
  border:var(--sc-rule-w-hair) solid transparent;border-radius:var(--sc-radius-btn);
  font-size:var(--sc-btn-text);font-weight:var(--sc-fw-medium);line-height:1.25;
  text-align:center;text-decoration:none;cursor:pointer;white-space:normal;
  max-inline-size:100%;transition:background var(--sc-dur-fast) var(--sc-ease),color var(--sc-dur-fast) var(--sc-ease)}
.sc-btn--ink{background:var(--sc-primary);color:var(--sc-primary-on);border-color:var(--sc-primary)}
.sc-btn--ink:hover{background:var(--sc-primary-hover);border-color:var(--sc-primary-hover)}
.sc-btn--ink:active{background:var(--sc-primary-active);border-color:var(--sc-primary-active)}
.sc-btn--accent{background:var(--sc-accent);color:var(--sc-accent-on);border-color:var(--sc-accent)}
.sc-btn--accent:hover{background:var(--sc-accent-hover);border-color:var(--sc-accent-hover)}
.sc-btn--accent:active{background:var(--sc-accent-active);border-color:var(--sc-accent-active)}
.sc-btn--outline{background:var(--sc-surface);color:var(--sc-text);border-color:var(--sc-border-strong)}
.sc-btn--outline:hover{background:var(--sc-quiet-hover)}
.sc-btn--outline:active{background:var(--sc-quiet-active)}
/* Отказ имеет собственный цвет текста, а не унаследованный: иначе на чужой
   плоскости он исчезает совсем. */
.sc-btn--quiet{background:transparent;color:var(--sc-ink-700)}
.sc-btn--quiet:hover{background:var(--sc-quiet-hover);color:var(--sc-text)}
/* Опасное действие не заливается по умолчанию: контур и цвет текста. Заливка
   появляется при наведении, когда человек уже выбрал. */
.sc-btn--danger{background:var(--sc-surface);color:var(--sc-danger);border-color:var(--sc-danger)}
.sc-btn--danger:hover{background:var(--sc-danger);color:var(--sc-danger-on)}

.sc-btn--sm{min-block-size:var(--sc-control-h-sm);padding-inline:var(--sc-space-16);
  padding-block:min(var(--sc-space-8),var(--sc-btn-pad-block));font-size:var(--sc-text-caption)}
.sc-btn--lg{min-block-size:var(--sc-control-h-lg);padding-inline:var(--sc-space-32);font-size:var(--sc-text-lead)}
.sc-btn--block{display:flex;inline-size:100%}

/* Недоступность несут ТРИ признака: другая заливка, снятая граница и снятый
   указатель. Одного приглушения недостаточно - приглушение это тот же цвет. */
.sc-btn[disabled],.sc-btn[aria-disabled="true"]{background:var(--sc-disabled-bg);color:var(--sc-disabled-text);
  border-color:var(--sc-disabled-border);cursor:not-allowed;box-shadow:none}

/* На залитой кнопке системное кольцо сливается с заливкой: снаружи чернильное
   кольцо, внутри светлая обводка. Фокус НЕ совпадает с выбранным состоянием. */
.sc-btn:focus-visible{outline:var(--sc-focus-ring-w) solid var(--sc-focus-ring);
  outline-offset:var(--sc-focus-ring-offset)}
.sc-btn--ink:focus-visible,.sc-btn--accent:focus-visible{box-shadow:inset 0 0 0 var(--sc-rule-w-strong) var(--sc-focus-ring-inner)}

/* Кнопка-значок. Сама 44x44 при значке 20: цель нажатия не уменьшается вместе
   с рисунком. */
.sc-iconbtn{display:inline-flex;align-items:center;justify-content:center;
  inline-size:var(--sc-tap-min);block-size:var(--sc-tap-min);padding:0;
  border:var(--sc-rule-w-hair) solid transparent;border-radius:var(--sc-radius-pill);
  background:transparent;color:var(--sc-ink-700);cursor:pointer;
  transition:background var(--sc-dur-fast) var(--sc-ease)}
.sc-iconbtn:hover{background:var(--sc-quiet-hover);color:var(--sc-text)}
.sc-iconbtn:active{background:var(--sc-quiet-active)}
.sc-iconbtn--outline{border-color:var(--sc-border-strong);background:var(--sc-surface)}
.sc-iconbtn--selected{background:var(--sc-selected-surface);color:var(--sc-selected-on);border-color:var(--sc-selected-border)}
.sc-iconbtn[disabled],.sc-iconbtn[aria-disabled="true"]{background:var(--sc-disabled-bg);color:var(--sc-disabled-text);border-color:var(--sc-disabled-border);cursor:not-allowed}

/* Индикатор работы внутри кнопки. Признак работы не опирается на скругление и не
   заменяется приглушением: подпись меняется, значок вращается. */
.sc-spinner{inline-size:16px;block-size:16px;flex:none;border-radius:var(--sc-radius-pill);
  border:var(--sc-rule-w) solid currentColor;border-block-start-color:transparent;
  animation:sc-spin 700ms linear infinite}
@keyframes sc-spin{to{transform:rotate(360deg)}}