/* Meridian · Button
   Variants: .dm-button--primary (default) | --secondary | --outline | --ghost | --danger
   Sizes:    .dm-button--sm | (default md) | --lg
   States:   :hover, :active (1px press), :disabled, .dm-button--loading */

.dm-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--dm-space-sm);
  height: var(--dm-control-height);
  padding: 0 20px;
  font: var(--dm-type-label-md);
  letter-spacing: var(--dm-tracking-label);
  color: var(--dm-color-on-primary);
  background: var(--dm-color-primary);
  border: 1px solid transparent;
  border-radius: var(--dm-rounded-md);
  cursor: pointer;
  user-select: none;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden; /* clips the ripple */
  transition: background-color var(--dm-duration-fast) var(--dm-ease-standard),
    border-color var(--dm-duration-fast) var(--dm-ease-standard),
    color var(--dm-duration-fast) var(--dm-ease-standard),
    box-shadow var(--dm-duration-fast) var(--dm-ease-standard),
    transform var(--dm-duration-fast) var(--dm-ease-standard);
}

.dm-button:hover {
  background: var(--dm-color-primary-hover);
  color: var(--dm-color-on-primary);
}

.dm-button:active {
  transform: translateY(1px);
}

.dm-button:disabled,
.dm-button[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

/* ---- Variants ---------------------------------------------------------- */

.dm-button--secondary {
  background: var(--dm-color-primary-subtle);
  color: var(--dm-color-on-primary-subtle);
}

.dm-button--secondary:hover {
  background: var(--dm-color-primary-subtle);
  color: var(--dm-color-on-primary-subtle);
  filter: brightness(0.96);
}

[data-theme="dark"] .dm-button--secondary:hover {
  filter: brightness(1.15);
}

.dm-button--outline {
  background: transparent;
  color: var(--dm-color-on-surface);
  border-color: var(--dm-color-outline);
}

.dm-button--outline:hover {
  background: var(--dm-color-surface-variant);
  color: var(--dm-color-on-surface);
  border-color: var(--dm-color-outline);
}

.dm-button--ghost {
  background: transparent;
  color: var(--dm-color-primary);
}

.dm-button--ghost:hover {
  background: var(--dm-color-primary-subtle);
  color: var(--dm-color-on-primary-subtle);
}

.dm-button--danger {
  background: var(--dm-color-error);
  color: var(--dm-color-on-error);
}

.dm-button--danger:hover {
  background: var(--dm-color-error);
  color: var(--dm-color-on-error);
  filter: brightness(0.9);
}

[data-theme="dark"] .dm-button--danger:hover {
  filter: brightness(1.1);
}

/* ---- Sizes -------------------------------------------------------------- */

.dm-button--sm {
  height: 34px;
  padding: 0 14px;
  font: var(--dm-type-label-sm);
  letter-spacing: var(--dm-tracking-label);
  border-radius: var(--dm-rounded-sm);
}

.dm-button--lg {
  height: 52px;
  padding: 0 28px;
  font-size: 1rem;
  border-radius: var(--dm-rounded-md);
}

/* ---- Icon-only ----------------------------------------------------------- */

.dm-button--icon {
  width: var(--dm-control-height);
  padding: 0;
}

.dm-button--icon.dm-button--sm {
  width: 34px;
}

/* ---- Loading -------------------------------------------------------------- */

.dm-button--loading {
  pointer-events: none;
  color: transparent !important;
}

.dm-button--loading::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  border: 2px solid currentColor;
  border-color: var(--dm-color-on-primary) transparent var(--dm-color-on-primary)
    var(--dm-color-on-primary);
  border-radius: var(--dm-rounded-full);
  animation: dm-button-spin 0.7s linear infinite;
}

.dm-button--loading.dm-button--secondary::after,
.dm-button--loading.dm-button--outline::after,
.dm-button--loading.dm-button--ghost::after {
  border-color: var(--dm-color-primary) transparent var(--dm-color-primary)
    var(--dm-color-primary);
}

@keyframes dm-button-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ---- Ripple (injected by button.js on elements with [data-dm-ripple]) ---- */

.dm-ripple {
  position: absolute;
  border-radius: var(--dm-rounded-full);
  background: currentColor;
  opacity: 0.25;
  transform: scale(0);
  animation: dm-ripple var(--dm-duration-slower) var(--dm-ease-standard) forwards;
  pointer-events: none;
}

@keyframes dm-ripple {
  to {
    transform: scale(2.5);
    opacity: 0;
  }
}