/* ============================================================
   Button + IconButton
   ============================================================ */

.ws-btn {
  --_bg: var(--primary-normal);
  --_fg: var(--static-white);
  --_bg-hover: var(--primary-strong);
  --_bg-active: var(--primary-heavy);
  --_border: transparent;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  border: 1px solid var(--_border);
  background: var(--_bg);
  color: var(--_fg);
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: background var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard),
              filter var(--duration-fast) var(--ease-standard);
}
.ws-btn__label { display: inline-block; }
.ws-btn:hover { background: var(--_bg-hover); }
.ws-btn:active { background: var(--_bg-active); transform: scale(0.98); }
.ws-btn:focus-visible { outline: 2px solid var(--primary-normal); outline-offset: 2px; }
.ws-btn--block { display: flex; width: 100%; }

/* ---- Sizes (height / radius / padding / type) ---- */
.ws-btn--xsmall { height: 24px; border-radius: var(--radius-6);  padding: 0 8px;  font-size: 12px; line-height: 1; gap: 2px; }
.ws-btn--small  { height: 32px; border-radius: var(--radius-8);  padding: 0 12px; font-size: 13px; line-height: 1; }
.ws-btn--medium { height: 40px; border-radius: var(--radius-10); padding: 0 16px; font-size: 15px; line-height: 1; }
.ws-btn--large  { height: 48px; border-radius: var(--radius-12); padding: 0 20px; font-size: 16px; line-height: 1; }
.ws-btn--xlarge { height: 56px; border-radius: var(--radius-14); padding: 0 24px; font-size: 17px; line-height: 1; }

/* ---- Variants ---- */
.ws-btn--solid {
  --_bg: var(--primary-normal); --_fg: var(--static-white);
  --_bg-hover: var(--primary-strong); --_bg-active: var(--primary-heavy);
}
.ws-btn--assistive {
  --_bg: var(--primary-assistive); --_fg: var(--primary-normal);
  --_bg-hover: var(--blue-90); --_bg-active: var(--blue-80);
}
.ws-btn--secondary {
  --_bg: var(--fill-normal); --_fg: var(--label-normal);
  --_bg-hover: var(--fill-strong); --_bg-active: var(--fill-strong);
}
.ws-btn--outlined {
  --_bg: transparent; --_fg: var(--label-normal); --_border: var(--line-strong);
  --_bg-hover: var(--fill-alternative); --_bg-active: var(--fill-normal);
}
.ws-btn--text {
  --_bg: transparent; --_fg: var(--label-normal);
  --_bg-hover: var(--fill-alternative); --_bg-active: var(--fill-normal);
}

/* ---- Disabled ---- */
.ws-btn:disabled {
  cursor: not-allowed;
  background: var(--fill-normal);
  color: var(--label-disable);
  border-color: transparent;
  transform: none;
  filter: none;
}
.ws-btn--outlined:disabled, .ws-btn--text:disabled { background: transparent; }
.ws-btn--outlined:disabled { border-color: var(--line-neutral); }

/* ============================================================
   IconButton — square, icon-only
   ============================================================ */
.ws-iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid transparent;
  background: transparent;
  color: var(--label-normal);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard);
}
.ws-iconbtn:hover { background: var(--fill-normal); }
.ws-iconbtn:active { background: var(--fill-strong); transform: scale(0.94); }
.ws-iconbtn:focus-visible { outline: 2px solid var(--primary-normal); outline-offset: 2px; }
.ws-iconbtn--xsmall { width: 28px; height: 28px; border-radius: var(--radius-8); }
.ws-iconbtn--small  { width: 32px; height: 32px; border-radius: var(--radius-8); }
.ws-iconbtn--medium { width: 40px; height: 40px; border-radius: var(--radius-10); }
.ws-iconbtn--large  { width: 48px; height: 48px; border-radius: var(--radius-12); }
.ws-iconbtn--filled { background: var(--fill-normal); }
.ws-iconbtn--primary { color: var(--primary-normal); }
.ws-iconbtn:disabled { color: var(--label-disable); cursor: not-allowed; background: transparent; transform: none; }