/* display 를 손으로 줌. button 은 브라우저 기본이 inline-block 이라 안 줘도 같지만, 화면 이동 항목은
   버튼이 아니라 이 클래스를 단 <a> 로도 뜸(docs/components/Button.md). a 의 기본은 inline 이라
   손으로 안 맞추면 안쪽 여백에서 둘의 상자 계산이 갈림 */
.btn {
  display: inline-block;
  font: inherit;
  font-size: var(--font-body);
  padding: var(--space-inset-sm);
  border: var(--border-width) solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface-raised);
  color: var(--text-default);
  cursor: pointer;
}

.btn:focus-visible { outline: 1px solid var(--focus-ring); }

.btn--primary { border-width: var(--border-width); background: var(--text-default); color: var(--text-inverse); }
.btn--danger { color: var(--text-danger); border-color: var(--text-danger); }
.btn--off { color: var(--text-muted); border-color: var(--border-muted); cursor: default; }

.btn[disabled] { color: var(--text-muted); border-color: var(--border-muted); cursor: default; }