/* Formula 1 badge
   Tabler / Bootstrap 5 friendly.

   Example:
   <span class="f1-badge f1-badge-md f1-badge--mclaren">
     <span class="f1-badge__stripe" aria-hidden="true"></span>
     <span class="f1-badge__label">NOR</span>
   </span>
*/

.f1-badge {
  --f1-accent: #ff8700;
  --f1-ink: #fff;
  --f1-bg: #050505;

  display: inline-flex;
  align-items: stretch;
  overflow: hidden;

  margin: var(--f1-badge-margin, 0);
  color: var(--f1-ink);
  background-color: var(--f1-bg);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--tblr-border-radius, 0.375rem);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.16);

  font-family: "Oxanium", var(--tblr-font-sans-serif), sans-serif;
  line-height: 1;
  vertical-align: middle;
  width: 45xpx;
}

.f1-badge__stripe {
  flex: 0 0 var(--f1-stripe-width);
  width: var(--f1-stripe-width);
  background-color: var(--f1-accent);
}

.f1-badge__label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-transform: capitalize;
  padding: var(--f1-badge-padding-y) var(--f1-badge-padding-x);
  font-size: var(--f1-badge-font-size);
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

/* Small: 16 px type
   Best for standings tables, compact cards, and list rows. */
.f1-badge-sm {
  --f1-badge-font-size: 10px;
  --f1-badge-padding-y: 4px;
  --f1-badge-padding-x: 8px;
  --f1-stripe-width: 5px;
  --f1-badge-margin: 2px;
}

/* Medium: 20 px type
   Default choice for driver or constructor summary cards. */
.f1-badge-md {
  --f1-badge-font-size: 12px;
  --f1-badge-padding-y: 5px;
  --f1-badge-padding-x: 7px;
  --f1-stripe-width: 5px;
  --f1-badge-margin: 3px;
}

/* Large: 24 px type
   Best for driver headers, race-result highlights, and hero cards. */
.f1-badge-lg {
  --f1-badge-font-size: 14px;
  --f1-badge-padding-y: 6px;
  --f1-badge-padding-x: 8px;
  --f1-stripe-width: 6px;
  --f1-badge-margin: 4px;
}

/* === TEAM COLORS 2026 === */
.f1-badge--neutral {
  --f1-accent: #ffffff;
}

.f1-badge--mclaren {
  --f1-accent: #ff8000;
}

.f1-badge--mercedes {
  --f1-accent: #27f4d2;
}

.f1-badge--red-bull {
  --f1-accent: #1b3963;
}

.f1-badge--ferrari, .f1-badge--scuderia-ferrari{
  --f1-accent: #E10600;
}

.f1-badge--aston-martin {
  --f1-accent: #229971;
}

.f1-badge--alpine {
  --f1-accent: #00a1e8;
}

.f1-badge--williams {
  --f1-accent: #1868db;
}

.f1-badge--sauber {
  --f1-accent: #52e252;
}

.f1-badge--audi {
  --f1-accent: #ff2d00;
}

.f1-badge--cadillac {
  --f1-accent: #585858;
}

.f1-badge--haas {
  --f1-accent: #667175;
}

.f1-badge--racing-bulls {
  --f1-accent: #6692ff;
}

/* Optional: use when the badge is a link or button */
a.f1-badge,
button.f1-badge {
  cursor: pointer;
  text-decoration: none;
  transition:
    transform 120ms ease,
    border-color 120ms ease,
    box-shadow 120ms ease;
}

a.f1-badge:hover,
button.f1-badge:hover {
  border-color: var(--f1-accent);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22);
  transform: translateY(-1px);
}

a.f1-badge:focus-visible,
button.f1-badge:focus-visible {
  outline: 2px solid var(--f1-accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  a.f1-badge,
  button.f1-badge {
    transition: none;
  }
}