/* Button — theo các component Button / Gray · Filled · Tinted · Plain · Borderless
   trong Figma. Mỗi component có 4 thuộc tính, ánh xạ sang class như sau:
     Size     Medium (mặc định) · Small → .btn--small   (Large, Mini: app chưa dùng)
     Role     Normal (mặc định) · Destructive → .btn--destructive
     Content  Text (mặc định) · Icon Only → .btn--icon
     State    Default · Pressed (:active) · Disabled (:disabled)
   Ví dụ: Button / Plain, Size=Small → <button class="btn btn--small btn--plain">

   Nút không tự quyết bề ngang: .button-bar và .dialog__buttons cho nút giãn
   đều; các chỗ khác nút co theo nội dung. */

/* Size=Medium, Content=Text — cao 44, bo 12, đệm 16, Other/Button Small 600/15 */
.btn{
  font:var(--text-button-small); letter-spacing:var(--tracking-button-small);
  flex:0 0 auto; min-width:0; min-height:var(--size-control-button-medium); padding:0 var(--spacing-16);
  border-radius:var(--radius-12);
  text-align:center; color:var(--color-text-primary);
  transition:filter .12s ease;
}
.btn[hidden]{display:none}
.btn img, .btn .icon{display:block}
@media (hover:hover){.btn:not(:disabled):hover{filter:brightness(.96)}}
.btn:not(:disabled):active{filter:brightness(.9)}

/* Size=Small — cao 32, bo 10, đệm 12, Body/Compact Emphasis 600/13.
   Vùng chạm nới 6px trên dưới cho đủ 44. */
.btn--small{
  font:var(--text-compact-emphasis); letter-spacing:var(--tracking-compact-emphasis);
  position:relative; display:flex; align-items:center; gap:var(--spacing-6);
  min-height:0; height:var(--size-control-button-small); padding:0 var(--spacing-12); border-radius:var(--radius-10);
}
.btn--small::after{content:""; position:absolute; inset:-6px 0}

/* Content=Icon Only — vuông theo cỡ, bo tròn hẳn */
.btn--icon{
  display:flex; align-items:center; justify-content:center;
  width:var(--size-control-button-medium); height:var(--size-control-button-medium); min-height:0; padding:0;
  border-radius:var(--radius-pill);
}
.btn--icon.btn--small{width:var(--size-control-button-small); height:var(--size-control-button-small)}
.btn--icon.btn--small::after{inset:-6px}

/* ---- màu ---- */
.btn--gray{background:var(--color-fill-quaternary); color:var(--color-text-primary)}
.btn--filled{background:var(--color-accent-primary); color:var(--color-on-accent)}
.btn--filled.btn--destructive{background:var(--color-status-error); color:var(--color-on-accent)}
.btn--tinted{background:var(--color-accent-muted); color:var(--color-accent-primary)}
.btn--tinted.btn--destructive{background:var(--color-status-error-surface); color:var(--color-status-error)}

/* Plain — nền background/primary, viền border/subtle, chữ accent.
   Pressed: nền accent/muted, viền accent. Disabled: viền và chữ text/disabled. */
.btn--plain{background:var(--color-background-primary); color:var(--color-accent-primary); border:1px solid var(--color-border-subtle)}
.btn--plain:not(:disabled):active{filter:none; background:var(--color-accent-muted); border-color:var(--color-accent-primary)}
.btn--plain:disabled{background:var(--color-background-primary); border-color:var(--neutral-400); color:var(--neutral-400)}

/* Borderless — không nền; hover nền fill/quaternary, Pressed fill/tertiary */
.btn--borderless{background:none; transition:background .12s ease}
@media (hover:hover){.btn--borderless:not(:disabled):hover{filter:none; background:var(--color-fill-quaternary)}}
.btn--borderless:not(:disabled):active{filter:none; background:var(--color-fill-tertiary)}