/* ============================================================
   Buttons: hover + active (globaal)
   Tailwind purge verwijdert @layer components uit src/components/buttons.css.
   Dit bestand laadt na tailwind en zorgt dat alle .ds-btn* hover en
   :active (indruk-effect) overal werken. Tokens uit src/tokens/.
   ============================================================ */

/* Base: transition voor transform zodat :active soepel animates */
.ds-btn {
  transition:
    background-color 0.2s cubic-bezier(0.25, 0.8, 0.25, 1),
    border-color 0.2s,
    color 0.2s,
    opacity 0.2s,
    transform 0.12s ease;
}
/* Hover per variant (conform design system) */
.ds-btn-black:hover {
  background: var(--btn-primary-black-hover, #333333);
  border-color: var(--btn-primary-black-hover, #333333);
}
.ds-btn-primary:hover {
  background: var(--accent-papaya-hover, #E64812);
  border-color: var(--accent-papaya-hover, #E64812);
}
.ds-btn-outline:hover {
  border-color: var(--border-primary, var(--gray-900));
}
.ds-btn-ghost:hover {
  background: var(--gray-100, var(--gray-100));
}
.ds-btn-destructive:hover {
  background: var(--stoplicht-rood, #CB272F);
  border-color: var(--stoplicht-rood, #CB272F);
}

/* ── Async submit (billing-patroon): label weg, drie geanimeerde stippen, disabled
 * Markup: .btn-label + .btn-ellipsis[hidden] > 3× span (binnen .ds-btn, .settings-save-btn, .settings-btn-primary)
 * JS: DsButtonLoading.set(button, true|false) — app/support/ds_ui_helpers.php → fb_ds_btn_loading_dots() */
.ds-btn .btn-ellipsis[hidden],
.settings-save-btn .btn-ellipsis[hidden],
.settings-btn-primary .btn-ellipsis[hidden] {
  display: none !important;
}

.ds-btn .btn-ellipsis,
.settings-save-btn .btn-ellipsis,
.settings-btn-primary .btn-ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.ds-btn .btn-ellipsis span,
.settings-save-btn .btn-ellipsis span,
.settings-btn-primary .btn-ellipsis span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.85;
  animation: ds-btn-loading-dot 1s ease-in-out infinite;
}

.ds-btn .btn-ellipsis span:nth-child(2),
.settings-save-btn .btn-ellipsis span:nth-child(2),
.settings-btn-primary .btn-ellipsis span:nth-child(2) {
  animation-delay: 0.15s;
}

.ds-btn .btn-ellipsis span:nth-child(3),
.settings-save-btn .btn-ellipsis span:nth-child(3),
.settings-btn-primary .btn-ellipsis span:nth-child(3) {
  animation-delay: 0.3s;
}

.ds-btn.is-loading,
.settings-save-btn.is-loading,
.settings-btn-primary.is-loading {
  cursor: wait;
  position: relative;
}

.ds-btn.is-loading:disabled,
.settings-save-btn.is-loading:disabled,
.settings-btn-primary.is-loading:disabled {
  opacity: 0.92;
  pointer-events: none;
}

@keyframes ds-btn-loading-dot {
  0%,
  80%,
  100% {
    transform: translateY(0);
    opacity: 0.55;
  }
  40% {
    transform: translateY(-2px);
    opacity: 1;
  }
}