/* ── marina-button — Light DOM styles ─────────────────────────── */
.marina-button {
  display: contents;
}

.marina-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm1);
  /* spec: padding-top/bottom --spacing-sm2 (12px), padding-left/right --spacing-xl1 (40px) */
  padding: var(--spacing-sm2) var(--spacing-xl1);
  font-family: var(--cds-typography-font-family-body-bold-base);
  font-size: var(--cds-typography-font-size-body-bold-base);
  font-weight: var(--cds-typography-font-weight-body-bold-base);
  line-height: var(--cds-typography-line-height-body-bold-base);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  box-sizing: border-box;
  transition: background-color var(--cds-motion-duration-fast) var(--cds-motion-easing-default), color var(--cds-motion-duration-fast) var(--cds-motion-easing-default), border-color var(--cds-motion-duration-fast) var(--cds-motion-easing-default);
}

/* ── Focus ring (shared) ─────────────────────────────────────── */
.marina-button:focus-visible {
  outline: var(--cds-border-sm) solid var(--cds-color-utility-wcag-focus-state);
  outline-offset: var(--cds-border-sm);
}

/* spec: primary focus — fill changes to hover color (one shade lighter) */
.marina-button--primary:focus-visible {
  background-color: var(--marina-button-hover, var(--cds-theme-accent-hover, var(--cds-color-neutral-500)));
}

/* ── Primary ─────────────────────────────────────────────────── */
.marina-button--primary {
  border: var(--cds-border-xs) solid transparent;
  background-color: var(--marina-button-accent, var(--cds-theme-accent, var(--cds-color-neutral-black)));
  /* spec: text is white on dark themes (Default/Blue/Purple); black on light fills (White/Teal/Green/Yellow) */
  color: var(--marina-button-text, var(--cds-theme-on-accent, var(--cds-color-neutral-white)));
}

.marina-button--primary:hover:not([disabled]):not(.marina-button--loading) {
  /* spec: hover = one shade lighter — resolved via --cds-theme-accent-hover set by data-accent selectors */
  background-color: var(--marina-button-hover, var(--cds-theme-accent-hover, var(--cds-color-neutral-500)));
  text-decoration: underline;
}

.marina-button--primary:active:not([disabled]):not(.marina-button--loading) {
  background-color: var(--marina-button-hover, var(--cds-theme-accent-hover, var(--cds-color-neutral-500)));
  outline: var(--cds-border-sm) solid var(--cds-color-utility-wcag-focus-state);
  outline-offset: var(--cds-border-sm);
  text-decoration: underline;
}

/* ── Secondary ───────────────────────────────────────────────── */
.marina-button--secondary {
  border: var(--cds-border-xs) solid var(--marina-button-accent, var(--cds-theme-accent, var(--cds-color-neutral-black)));
  background-color: transparent;
  color: var(--marina-button-accent, var(--cds-theme-accent, var(--cds-color-neutral-black)));
  box-sizing: border-box;
}

.marina-button--secondary:hover:not([disabled]):not(.marina-button--loading) {
  border-color: var(--marina-button-hover, var(--cds-theme-accent-hover, var(--cds-color-neutral-500)));
  color: var(--marina-button-hover, var(--cds-theme-accent-hover, var(--cds-color-neutral-500)));
  text-decoration: underline;
}

.marina-button--secondary:active:not([disabled]):not(.marina-button--loading) {
  border-color: var(--cds-color-utility-wcag-focus-state);
  color: var(--marina-button-hover, var(--cds-theme-accent-hover, var(--cds-color-neutral-500)));
  outline: var(--cds-border-sm) solid var(--cds-color-utility-wcag-focus-state);
  outline-offset: var(--cds-border-sm);
  text-decoration: underline;
}

/* ── Ghost ───────────────────────────────────────────────────── */
.marina-button--ghost {
  border: none;
  background-color: transparent;
  color: var(--marina-button-accent, var(--cds-theme-accent, var(--cds-color-neutral-black)));
  /* spec: all three button types share the same padding — --spacing-sm2 top/bottom, --spacing-xl1 left/right.
     Custom (reduced) padding is allowed for visual alignment only — override at the usage site, not here. */
  padding: var(--spacing-sm2) var(--spacing-xl1);
}

.marina-button--ghost:hover:not([disabled]) {
  color: var(--marina-button-hover, var(--cds-theme-accent-hover, var(--cds-color-neutral-500)));
  background-color: var(--cds-color-utility-hover-white);
  text-decoration: underline;
}

.marina-button--ghost:active:not([disabled]) {
  color: var(--marina-button-hover, var(--cds-theme-accent-hover, var(--cds-color-neutral-500)));
  background-color: var(--cds-color-utility-hover-white);
  outline: var(--cds-border-sm) solid var(--cds-color-utility-wcag-focus-state);
  outline-offset: var(--cds-border-sm);
  text-decoration: underline;
}

/* ── Disabled (all variants) ─────────────────────────────────── */
.marina-button[disabled],
.marina-button--disabled {
  background-color: var(--cds-color-neutral-200);
  color: var(--cds-color-neutral-300); /* spec: disabled text --cds-color-neutral-300 */
  border-color: var(--cds-color-neutral-200);
  cursor: not-allowed;
  pointer-events: none;
  text-decoration: none;
}

.marina-button--ghost[disabled],
.marina-button--ghost.marina-button--disabled {
  background-color: transparent;
  border: none;
}

/* ── Loading ─────────────────────────────────────────────────── */
.marina-button--loading {
  cursor: not-allowed;
  pointer-events: none;
  /* spec: spinner only — hide label text, maintain button width */
  position: relative;
}

.marina-button--loading .marina-button__label {
  visibility: hidden;
}

/* Center spinner over the hidden label */
.marina-button--loading .marina-inline-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Loading state restores variant appearance — the button is disabled for interaction
   but must not look disabled visually (spec: spinner replaces label, button keeps its style) */
.marina-button--primary.marina-button--loading,
.marina-button--primary.marina-button--loading[disabled] {
  background-color: var(--marina-button-accent, var(--cds-theme-accent, var(--cds-color-neutral-black)));
  color: var(--marina-button-text, var(--cds-theme-on-accent, var(--cds-color-neutral-white)));
  border-color: transparent;
}

.marina-button--secondary.marina-button--loading,
.marina-button--secondary.marina-button--loading[disabled] {
  background-color: transparent;
  color: var(--marina-button-accent, var(--cds-theme-accent, var(--cds-color-neutral-black)));
  border-color: var(--marina-button-accent, var(--cds-theme-accent, var(--cds-color-neutral-black)));
}

.marina-button__label {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm1);
}

/* ── Inline Spinner inside button — inherit button text color ── */
/* marina-inline-spinner sets color: --cds-theme-text; inside a button we need currentColor */
.marina-button .marina-inline-spinner {
  color: inherit;
}

/* ── Reduced motion ──────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .marina-button,
  .marina-button * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}