/**
 * WMD Solutions Base Theme - Button styles.
 * Component: css/components/button.css
 * All button variables defined in base.css.
 */

/* ======================================================
   SHARED BUTTON BASE
   ====================================================== */

.btn {
  border-radius: var(--btn-border-radius);
  padding: var(--btn-padding);
  font-family: var(--font-body);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  letter-spacing: var(--btn-letter-spacing);
  text-transform: uppercase;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* ======================================================
   PRIMARY BUTTON
   ====================================================== */

.btn-primary {
  --bs-btn-color: #ffffff;
  --bs-btn-bg: var(--btn-primary-bg);
  --bs-btn-border-color: var(--btn-primary-border);
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: var(--btn-primary-hover-bg);
  --bs-btn-hover-border-color: var(--btn-primary-hover-bg);
  --bs-btn-active-color: #ffffff;
  --bs-btn-active-bg: var(--btn-primary-hover-bg);
  --bs-btn-active-border-color: var(--btn-primary-hover-bg);
  --bs-btn-disabled-color: #ffffff;
  --bs-btn-disabled-bg: var(--btn-primary-bg);
  --bs-btn-disabled-border-color: var(--btn-primary-border);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: var(--btn-primary-hover-bg);
  border-color: var(--btn-primary-hover-bg);
  color: #ffffff;
}

.btn-primary:visited {
  color: #ffffff;
}

/* ======================================================
   OUTLINE PRIMARY
   ====================================================== */

.btn-outline-primary {
  color: var(--btn-outline-color);
  border-color: var(--btn-outline-color);
  background: transparent;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
  background-color: var(--btn-outline-hover-bg);
  border-color: var(--btn-outline-hover-bg);
  color: var(--btn-outline-hover-color);
}

/* ======================================================
   OUTLINE LIGHT (hero CTAs on dark backgrounds)
   ====================================================== */

.btn-outline-light {
  color: var(--color-text-light);
  border-color: var(--color-text-light);
  background: transparent;
}

.btn-outline-light:hover,
.btn-outline-light:focus,
.btn-outline-light:active {
  background-color: var(--color-text-light);
  border-color: var(--color-text-light);
  color: var(--color-text);
}