/**
 * @file
 * Button — primary (filled accent), secondary (outline), quiet (text action).
 *
 * Variants, grounds and states only set the private --_* properties; the one
 * rule at the end of the file applies them.
 *
 * Restyle with: --otb-button-radius, --otb-button-height, --otb-button-padding,
 * --otb-button-border-width, --otb-button-font-family, --otb-button-font-size,
 * --otb-button-font-weight, --otb-button-accent, --otb-button-accent-hover,
 * --otb-button-on-accent, --otb-button-secondary-color,
 * --otb-button-underline-offset; small size: --otb-button-padding-sm,
 * --otb-button-font-size-sm; dark grounds: --otb-button-accent-on-dark,
 * --otb-button-accent-on-dark-hover, --otb-button-on-accent-on-dark,
 * --otb-button-secondary-color-on-dark.
 */

.otb-button {
  --_accent: var(--otb-button-accent, var(--color-primary-btn, #c2185b));
  --_accent-hover: var(--otb-button-accent-hover, var(--color-primary-btn-hover, #a51248));
  --_on-accent: var(--otb-button-on-accent, var(--color-white, #ffffff));
  --_outline: var(--otb-button-secondary-color, var(--_accent));
  --_ring: var(--color-focus-ring, var(--_accent));
  --_padding: var(--otb-button-padding, 0.625rem 1.125rem);
  --_font-size: var(--otb-button-font-size, 0.875rem);

  /* primary */
  --_bg: var(--_accent);
  --_fg: var(--_on-accent);
  --_border: var(--_accent);
  --_bg-hover: var(--_accent-hover);
  --_fg-hover: var(--_on-accent);
  --_border-hover: var(--_accent-hover);
}

.otb-button--secondary {
  --_bg: transparent;
  --_fg: var(--_outline);
  --_border: var(--_outline);
  --_bg-hover: var(--_outline);
  --_fg-hover: var(--_on-outline, var(--_on-accent));
  --_border-hover: var(--_outline);
}

.otb-button--quiet {
  --_padding: 0;
  --_min-height: 0;
  --_bg: transparent;
  --_fg: var(--_accent);
  --_border: transparent;
  --_bg-hover: transparent;
  --_fg-hover: var(--_accent-hover);
  --_border-hover: transparent;
  --_decoration: underline;
}

.otb-button--sm {
  --_padding: var(--otb-button-padding-sm, 0.375rem 0.75rem);
  --_font-size: var(--otb-button-font-size-sm, 0.8125rem);
}

.otb-button--sm.otb-button--quiet {
  --_padding: 0;
}

/* Dark grounds: the prop, the theme's dark mode, the always-dark scope. Dark
   text on the lighter accent; the outline turns white. */
.otb-button--on-dark,
[data-theme="dark"] .otb-button,
.otb-on-dark .otb-button {
  --_accent: var(--otb-button-accent-on-dark, var(--color-primary-on-dark, #e84484));
  --_accent-hover: var(--otb-button-accent-on-dark-hover, var(--color-primary-on-dark-hover, #ed6d9f));
  --_on-accent: var(--otb-button-on-accent-on-dark, var(--color-dark, #1c1c1c));
  --_outline: var(--otb-button-secondary-color-on-dark, var(--color-white, #ffffff));
  --_on-outline: var(--color-dark, #1c1c1c);
  --_ring: var(--color-white, #ffffff);
}

.otb-button:disabled,
.otb-button[aria-disabled="true"] {
  --_opacity: 0.5;
  --_cursor: not-allowed;
}

.otb-button:hover:not(:disabled, [aria-disabled="true"]) {
  --_bg: var(--_bg-hover);
  --_fg: var(--_fg-hover);
  --_border: var(--_border-hover);
}

/* :not(#_) matches every button and lends the rule an id's weight, so it
   outranks the element rules both themes aim at bare links and submit
   buttons — up to (0,4,1) in otbtv_theme's dark-mode.css — without
   !important. */
.otb-button:not(#_) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: var(--_min-height, var(--otb-button-height, 0));
  margin: 0;
  padding: var(--_padding);
  border: var(--otb-button-border-width, 1.5px) solid var(--_border);
  border-radius: var(--otb-button-radius, var(--border-radius-md, 8px));
  background: var(--_bg);
  color: var(--_fg);
  font-family: var(--otb-button-font-family, var(--font-family-base, inherit));
  font-size: var(--_font-size);
  font-weight: var(--otb-button-font-weight, var(--font-weight-medium, 500));
  line-height: 1.3;
  text-align: center;
  text-decoration: var(--_decoration, none);
  text-underline-offset: var(--otb-button-underline-offset, 3px);
  opacity: var(--_opacity, 1);
  cursor: var(--_cursor, pointer);
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

/* Ordinary weight on purpose: the admin theme draws its own focus ring and
   this must not add a second one there. */
.otb-button:focus-visible {
  outline: var(--focus-ring-width, 3px) solid var(--_ring);
  outline-offset: var(--focus-ring-offset, 2px);
}