/* Simple outline buttons.
   Usage:
     <a class="btn-k btn-k-light" href="#">On dark</a>
     <a class="btn-k btn-k-dark"  href="#">On light</a> */

.btn-k {
  display: inline-block;
  padding: 0.6em 1.4em;
  border: 1px solid currentColor;
  border-radius: 9px;
  background: transparent;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
  min-width: 100px;
}

/* Override Bootstrap button state colors/shadows so btn-k never falls back
   to .btn-primary blue on focus/active. */

.btn.btn-k {
  --bs-btn-focus-shadow-rgb: 0,0,0;
  --bs-btn-box-shadow: none;
  --bs-btn-focus-box-shadow: none;
  box-shadow: none !important;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

.btn.btn-k:focus, .btn.btn-k:focus-visible, .btn.btn-k:active, .btn.btn-k:active:focus, .btn.btn-k:active:focus-visible {
  box-shadow: none !important;
  outline: none;
}

/* On dark backgrounds: white outline + white text, fills white on hover. */

.btn-k-light {
  --bs-btn-color: #fff;
  --bs-btn-bg: transparent;
  --bs-btn-border-color: #fff;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #fff;
  --bs-btn-hover-border-color: #fff;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #fff;
  --bs-btn-active-border-color: #fff;
  color: #fff;
}

.btn-k-light:hover, .btn-k-light:focus-visible {
  background-color: #fff;
  color: #000;
}

/* On light backgrounds: dark outline + dark text, fills dark on hover. */

.btn-k-dark {
  --bs-btn-color: #000;
  --bs-btn-bg: transparent;
  --bs-btn-border-color: #000;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #000;
  --bs-btn-hover-border-color: #000;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #000;
  --bs-btn-active-border-color: #000;
  color: #000;
}

.btn-k-dark:hover, .btn-k-dark:focus-visible {
  background-color: #000;
  color: #fff;
}