/* ==========================================================================
   ATOMS / button / button.css
   --------------------------------------------------------------------------
   VARIANTS:  primary, secondary, ghost, danger, success, link
   SIZES:     xs, sm, md (default), lg, xl
   STATES:    default, hover, active, focus, disabled, loading
   MODIFIERS: icon-only, full-width, pill

   HTML PATTERN:
     <button class="btn btn-primary">Label</button>
     <button class="btn btn-primary btn-sm">Small</button>
     <button class="btn btn-primary btn-icon-only" aria-label="Close">
       <svg>...</svg>
     </button>
     <button class="btn btn-primary" data-loading="true">
       <span class="btn-spinner"></span>
       Saving…
     </button>
   ========================================================================== */


/* --------------------------------------------------------------------------
   BASE — shared across all variants
   -------------------------------------------------------------------------- */
.btn {
  /* Layout */
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--size-200);   /* 8px — icon-to-label gap */
  white-space:     nowrap;

  /* Sizing default (md) */
  height:          40px;
  padding-inline:  var(--size-500);   /* 20px */
  font-size:       var(--text-label-size);     /* 14px */
  font-weight:     var(--font-weight-medium);
  line-height:     var(--leading-none);
  letter-spacing:  var(--tracking-wide);

  /* Shape */
  border:          1px solid transparent;
  border-radius:   var(--radius-md);

  /* Behaviour */
  cursor:          pointer;
  user-select:     none;
  text-decoration: none;   /* saat btn dipakai di <a> */
  vertical-align:  middle;

  /* Transition */
  transition: var(--transition-interactive);

  /* Font inherit (sudah di reset, tapi redundansi aman) */
  font-family: inherit;
}

/* Ikon di dalam button — pastikan tidak shrink */
.btn > svg,
.btn > .btn-icon {
  flex-shrink: 0;
  width:  var(--size-icon-md);   /* 20px */
  height: var(--size-icon-md);
  pointer-events: none;
}

/* Focus visible — override browser default */
.btn:focus-visible {
  outline:        2px solid var(--color-border-focus);
  outline-offset: 2px;
  box-shadow:     var(--shadow-focus-ring);
}

/* Disabled — semua variant */
.btn:disabled,
.btn[aria-disabled="true"],
.btn[data-loading="true"] {
  cursor:         not-allowed;
  pointer-events: none;
  opacity:        0.55;
}


/* --------------------------------------------------------------------------
   VARIANT — Primary
   -------------------------------------------------------------------------- */
.btn-primary {
  background-color: var(--color-brand);
  border-color:     var(--color-brand);
  color:            var(--color-text-inverse);
}
.btn-primary:hover {
  background-color: var(--color-brand-hover);
  border-color:     var(--color-brand-hover);
}
.btn-primary:active {
  background-color: var(--color-brand-active);
  border-color:     var(--color-brand-active);
  transform:        translateY(1px);
}


/* --------------------------------------------------------------------------
   VARIANT — Secondary (outlined)
   -------------------------------------------------------------------------- */
.btn-secondary {
  background-color: transparent;
  border-color:     var(--color-border-strong);
  color:            var(--color-text-primary);
}
.btn-secondary:hover {
  background-color: var(--color-bg-sunken);
  border-color:     var(--color-text-secondary);
}
.btn-secondary:active {
  background-color: var(--color-bg-sunken);
  transform:        translateY(1px);
}


/* --------------------------------------------------------------------------
   VARIANT — Ghost (no border, no background)
   -------------------------------------------------------------------------- */
.btn-ghost {
  background-color: transparent;
  border-color:     transparent;
  color:            var(--color-text-secondary);
}
.btn-ghost:hover {
  background-color: var(--color-bg-sunken);
  color:            var(--color-text-primary);
}
.btn-ghost:active {
  background-color: var(--color-border-default);
  transform:        translateY(1px);
}


/* --------------------------------------------------------------------------
   VARIANT — Danger
   -------------------------------------------------------------------------- */
.btn-danger {
  background-color: var(--color-error);
  border-color:     var(--color-error);
  color:            var(--color-text-inverse);
}
.btn-danger:hover {
  background-color: var(--color-error-hover);
  border-color:     var(--color-error-hover);
}
.btn-danger:active {
  transform: translateY(1px);
}

/* Danger outlined */
.btn-danger-outline {
  background-color: transparent;
  border-color:     var(--color-error);
  color:            var(--color-error-text);
}
.btn-danger-outline:hover {
  background-color: var(--color-error-subtle);
}


/* --------------------------------------------------------------------------
   VARIANT — Success
   -------------------------------------------------------------------------- */
.btn-success {
  background-color: var(--color-success);
  border-color:     var(--color-success);
  color:            var(--color-text-inverse);
}
.btn-success:hover {
  background-color: var(--color-success-hover);
  border-color:     var(--color-success-hover);
}
.btn-success:active {
  transform: translateY(1px);
}


/* --------------------------------------------------------------------------
   VARIANT — Link (looks like a text link, behaves like a button)
   -------------------------------------------------------------------------- */
.btn-link {
  background-color: transparent;
  border-color:     transparent;
  color:            var(--color-text-link);
  padding-inline:   var(--size-100);
  height:           auto;
  text-decoration:  underline;
  text-underline-offset: 3px;
}
.btn-link:hover {
  color: var(--color-text-link-hover);
}


/* --------------------------------------------------------------------------
   SIZES
   -------------------------------------------------------------------------- */

/* XS */
.btn-xs {
  height:         28px;
  padding-inline: var(--size-300);   /* 12px */
  font-size:      var(--text-label-sm-size);  /* 12px */
  gap:            var(--size-150);
  border-radius:  var(--radius-sm);
}
.btn-xs > svg,
.btn-xs > .btn-icon {
  width:  var(--size-icon-sm);   /* 16px */
  height: var(--size-icon-sm);
}

/* SM */
.btn-sm {
  height:         34px;
  padding-inline: var(--size-400);   /* 16px */
  font-size:      var(--text-label-sm-size);  /* 12px */
  gap:            var(--size-150);
}

/* MD — default, no extra class needed */

/* LG */
.btn-lg {
  height:         48px;
  padding-inline: var(--size-600);   /* 24px */
  font-size:      var(--text-body-size);  /* 16px */
  gap:            var(--size-300);
}
.btn-lg > svg,
.btn-lg > .btn-icon {
  width:  var(--size-icon-lg);   /* 24px */
  height: var(--size-icon-lg);
}

/* XL */
.btn-xl {
  height:         56px;
  padding-inline: var(--size-800);   /* 32px */
  font-size:      var(--font-size-350);  /* 18px */
  gap:            var(--size-300);
  border-radius:  var(--radius-lg);
}
.btn-xl > svg,
.btn-xl > .btn-icon {
  width:  var(--size-icon-lg);
  height: var(--size-icon-lg);
}


/* --------------------------------------------------------------------------
   MODIFIERS
   -------------------------------------------------------------------------- */

/* Icon only — square aspect ratio */
.btn-icon-only {
  padding-inline: 0;
  width:  40px;   /* sama dengan height default */
  flex-shrink: 0;
}
.btn-icon-only.btn-xs { width: 28px; }
.btn-icon-only.btn-sm { width: 34px; }
.btn-icon-only.btn-lg { width: 48px; }
.btn-icon-only.btn-xl { width: 56px; }

/* Full width */
.btn-full { width: 100%; }

/* Pill — border-radius maksimum */
.btn-pill { border-radius: var(--radius-full); }


/* --------------------------------------------------------------------------
   LOADING STATE
   -------------------------------------------------------------------------- */
.btn-spinner {
  display:        inline-block;
  width:          var(--size-icon-md);
  height:         var(--size-icon-md);
  border:         2px solid currentColor;
  border-top-color: transparent;
  border-radius:  var(--radius-full);
  animation:      ds-spin 0.7s linear infinite;
  flex-shrink:    0;
}

.btn-xs .btn-spinner,
.btn-sm .btn-spinner {
  width:  var(--size-icon-sm);
  height: var(--size-icon-sm);
}

.btn-lg .btn-spinner,
.btn-xl .btn-spinner {
  width:  var(--size-icon-lg);
  height: var(--size-icon-lg);
}


/* --------------------------------------------------------------------------
   BUTTON GROUP — beberapa button bersebelahan tanpa gap
   -------------------------------------------------------------------------- */
.btn-group {
  display:  inline-flex;
  gap:      0;
}

.btn-group .btn {
  border-radius: 0;
}

.btn-group .btn:first-child {
  border-top-left-radius:    var(--radius-md);
  border-bottom-left-radius: var(--radius-md);
}

.btn-group .btn:last-child {
  border-top-right-radius:    var(--radius-md);
  border-bottom-right-radius: var(--radius-md);
}

/* Hilangkan double border di antara button */
.btn-group .btn + .btn {
  margin-left: -1px;
}

.btn-group .btn:hover,
.btn-group .btn:focus-visible {
  position: relative;
  z-index:  var(--z-raised);
}