/*
 * Button Component
 *
 * Button styles using CSS custom properties from _tokens.css.
 * Includes primary, secondary, outlined, and text variants.
 *
 * Usage:
 *   <a href="#" class="button">Primary</a>
 *   <a href="#" class="button secondary">Secondary/Outlined</a>
 *   <a href="#" class="button btn-text">Text link with arrow</a>
 *
 * Synced with Figma: oMpX9tPDpKvnEIkDDqiSQ9
 */

/* ============================================
   BUTTON CONTAINERS
   EDS wraps links in p.button-container or div.button-container
   ============================================ */

/* Inline layout for side-by-side CTAs */
.button-container {
  display: inline-flex;
}

/* Gap between adjacent buttons */
.button-container .button {
  margin-right: var(--space-l);
}

.button-container:last-of-type .button {
  margin-right: 0;
}

/* ============================================
   BASE BUTTON
   ============================================ */
a.button:any-link,
button,
a.btn:any-link {
  box-sizing: border-box;
  display: inline-block;
  max-width: 100%;
  flex: none;
  border: var(--btn-border-width) solid transparent;
  border-radius: var(--btn-border-radius);
  padding: var(--btn-padding-y) var(--btn-padding-x);
  font-family: var(--body-font-family);
  font-size: var(--btn-font-size);
  font-style: normal;
  font-weight: var(--btn-font-weight);
  line-height: var(--btn-line-height);
  text-align: center;
  text-decoration: none;
  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-fg);
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: background-color var(--duration-fast) ease, border-color var(--duration-fast) ease;
}

/* ============================================
   HOVER & FOCUS STATES
   ============================================ */
a.button:hover,
a.button:focus,
button:hover,
button:focus,
a.btn:hover,
a.btn:focus {
  background-color: var(--btn-primary-bg-hover, var(--link-hover-color));
  cursor: pointer;
}

a:any-link:focus-visible,
button:focus-visible {
  outline: var(--focus-outline-width) solid var(--focus-outline-color);
  outline-offset: var(--focus-outline-offset);
}

/* ============================================
   ACTIVE/PRESSED STATE
   ============================================ */
a.button:active,
button:active,
a.btn:active {
  background-color: var(--btn-primary-bg-active);
}

/* ============================================
   DISABLED STATE
   ============================================ */
button:disabled,
button:disabled:hover,
a.button[aria-disabled="true"],
a.btn[aria-disabled="true"] {
  background-color: var(--light-color);
  color: var(--dark-color);
  cursor: not-allowed;
  pointer-events: none;
  opacity: var(--state-disabled-opacity);
}

/* ============================================
   SECONDARY / OUTLINED VARIANT
   ============================================ */
a.button.secondary,
button.secondary,
a.btn.secondary {
  background-color: transparent;
  border: var(--btn-border-width) solid var(--digicert-blue);
  color: var(--digicert-blue);
}

a.button.secondary:hover,
button.secondary:hover,
a.btn.secondary:hover {
  background-color: var(--btn-transparent-hover);
}

a.button.secondary:active,
button.secondary:active,
a.btn.secondary:active {
  background-color: var(--btn-transparent-active);
}

/* ============================================
   TEXT VARIANT
   Link-style button with arrow
   ============================================ */
a.button.btn-text:any-link,
a.btn.btn-text:any-link,
button.btn-text {
  background-color: transparent;
  border-color: transparent;
  color: var(--btn-text-fg);
  padding: 0.5em 0;
}

a.button.btn-text:hover,
button.btn-text:hover,
a.btn.btn-text:hover {
  background-color: transparent;
  text-decoration: underline;
}

a.button.btn-text:active,
button.btn-text:active,
a.btn.btn-text:active {
  background-color: transparent;
}

/* Arrow for text buttons */
a.button.btn-text:any-link::after,
a.btn.btn-text:any-link::after,
button.btn-text::after {
  content: '';
  display: inline-block;
  width: 1.25em;
  height: 1.25em;
  margin-left: 0.5rem;
  vertical-align: middle;
  background-color: currentcolor;
  clip-path: polygon(17% 46%, 17% 54%, 67% 54%, 44% 77%, 50% 83%, 83% 50%, 50% 17%, 44% 23%, 67% 46%);
}

/* ============================================
   THEME VARIANTS
   For buttons on different background colors
   ============================================ */

/* Light button on dark background */
a.button.btn-light-on-dark,
button.btn-light-on-dark,
a.btn.btn-light-on-dark {
  --btn-current-bg: var(--btn-primary-bg-light);
  --btn-current-fg: var(--btn-primary-fg-light);
  --btn-current-border: var(--btn-outlined-border-light);

  color: var(--btn-current-fg);
  background-color: var(--btn-current-bg);
  border-color: transparent;
}

/* Dark button on light background */
a.button.btn-dark-on-light,
button.btn-dark-on-light,
a.btn.btn-dark-on-light {
  --btn-current-bg: var(--btn-primary-bg-dark);
  --btn-current-fg: var(--btn-primary-fg-dark);
  --btn-current-border: var(--btn-outlined-border-dark);

  color: var(--btn-current-fg);
  background-color: var(--btn-current-bg);
  border-color: transparent;
}

/* Hover states for theme variants */
a.button.btn-dark-on-light:hover,
button.btn-dark-on-light:hover,
a.btn.btn-dark-on-light:hover {
  background-color: var(--btn-primary-bg-hover);
}

a.button.btn-dark-on-light:active,
button.btn-dark-on-light:active,
a.btn.btn-dark-on-light:active {
  background-color: var(--btn-primary-bg-active);
}

a.button.btn-light-on-dark:hover,
button.btn-light-on-dark:hover,
a.btn.btn-light-on-dark:hover {
  background-color: var(--btn-primary-bg-hover-light);
}

a.button.btn-light-on-dark:active,
button.btn-light-on-dark:active,
a.btn.btn-light-on-dark:active {
  background-color: var(--btn-primary-bg-active-light);
}

/* Outlined variants with explicit themes */
a.button.btn-light-on-dark.btn-outlined,
button.btn-light-on-dark.btn-outlined,
a.btn.btn-light-on-dark.btn-outlined,
a.button.btn-light-on-dark.secondary,
button.btn-light-on-dark.secondary,
a.btn.btn-light-on-dark.secondary {
  --btn-current-fg: var(--btn-outlined-fg-light);
  --btn-current-border: var(--btn-outlined-border-light);

  background-color: transparent;
  color: var(--btn-current-fg);
  border-color: var(--btn-current-border);
}

a.button.btn-dark-on-light.btn-outlined,
button.btn-dark-on-light.btn-outlined,
a.btn.btn-dark-on-light.btn-outlined,
a.button.btn-dark-on-light.secondary,
button.btn-dark-on-light.secondary,
a.btn.btn-dark-on-light.secondary {
  --btn-current-fg: var(--btn-outlined-fg-dark);
  --btn-current-border: var(--btn-outlined-border-dark);

  background-color: transparent;
  color: var(--btn-current-fg);
  border-color: var(--btn-current-border);
}

/* Text variants with explicit themes */
a.button.btn-light-on-dark.btn-text,
button.btn-light-on-dark.btn-text,
a.btn.btn-light-on-dark.btn-text {
  --btn-current-fg: var(--btn-text-fg-light);

  background-color: transparent;
  color: var(--btn-current-fg);
  border-color: transparent;
}

a.button.btn-dark-on-light.btn-text,
button.btn-dark-on-light.btn-text,
a.btn.btn-dark-on-light.btn-text {
  --btn-current-fg: var(--btn-text-fg-dark);

  background-color: transparent;
  color: var(--btn-current-fg);
  border-color: transparent;
}

/* Outline + Text combined variants (legacy support) */
a.button.text-or-outline-btn-light-on-dark,
button.text-or-outline-btn-light-on-dark,
a.btn.text-or-outline-btn-light-on-dark {
  --btn-current-fg: var(--btn-outlined-fg-light);
  --btn-current-border: var(--btn-outlined-border-light);

  background-color: transparent;
  color: var(--btn-current-fg);
  border-color: var(--btn-current-border);
}

a.button.text-or-outline-btn-dark-on-light,
button.text-or-outline-btn-dark-on-light,
a.btn.text-or-outline-btn-dark-on-light {
  --btn-current-fg: var(--btn-outlined-fg-dark);
  --btn-current-border: var(--btn-outlined-border-dark);

  background-color: transparent;
  color: var(--btn-current-fg);
  border-color: var(--btn-current-border);
}

/* ============================================
   SIZE VARIANTS
   Small (32px), Medium (44px default), Large (52px)
   ============================================ */
a.button.btn-sm,
button.btn-sm,
a.btn.btn-sm {
  min-height: var(--btn-height-sm);
  padding-top: var(--btn-padding-y-sm);
  padding-bottom: var(--btn-padding-y-sm);
  font-size: var(--btn-font-size-sm);
}

a.button.btn-md,
button.btn-md,
a.btn.btn-md {
  min-height: var(--btn-height-md);
  padding-top: var(--btn-padding-y-md);
  padding-bottom: var(--btn-padding-y-md);
}

a.button.btn-lg,
button.btn-lg,
a.btn.btn-lg {
  min-height: var(--btn-height-lg);
  padding-top: var(--btn-padding-y-lg);
  padding-bottom: var(--btn-padding-y-lg);
  font-size: var(--btn-font-size-lg);
}