// Badge component styles
.retro-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  min-height: 18px;
  padding: 2px 10px;
  font-size: var(--retro-font-size-sm);
  font-family: var(--retro-font-heading);
  // Badges are labels, not headlines. They were bold AND uppercase AND
  // letter-spaced — three kinds of emphasis stacked on the smallest text on
  // the page, and there are dozens of them per screen, so nothing they sat
  // beside could stand out. Sentence case at normal weight reads as a label.
  font-weight: var(--retro-font-weight-normal);
  color: var(--retro-badge-text);
  background: var(--retro-badge-bg);
  border: 1px solid var(--retro-border-dark);
  border-radius: var(--retro-border-radius);
  box-shadow:
    0 0 0 2px rgba(var(--retro-sheen-rgb), 0.1),
    inset 0 0 6px rgba(var(--retro-shadow-rgb), 0.8);
  text-shadow: none;
  margin-block: 0.2em 0.2em;
  margin-inline: 0 0.4em;
  transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease, filter 0.15s ease;
  position: relative;
  overflow: hidden;
  
  &::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 40%;
    background: linear-gradient(
      to bottom,
      rgba(var(--retro-sheen-rgb), 0.15),
      rgba(var(--retro-sheen-rgb), 0)
    );
    pointer-events: none;
  }

  &:hover, &:focus-visible {
    transform: translateY(-1px) scale(1.05);
    box-shadow:
      0 0 0 2px rgba(var(--retro-sheen-rgb), 0.2),
      inset 0 0 10px rgba(var(--retro-shadow-rgb), 0.8),
      0 0 5px rgba(var(--retro-sheen-rgb), 0.1);
    filter: brightness(1.1);
  }

  &:active {
    transform: translateY(1px) scale(0.98);
    box-shadow:
      0 0 0 2px rgba(var(--retro-sheen-rgb), 0.1),
      inset 0 0 8px rgba(var(--retro-shadow-rgb), 0.9);
    filter: brightness(0.9);
  }
}

// Color Variants.
// Previously six hand-written blocks of literal hexes (~90 declarations) that
// ignored [data-theme] entirely. Now generated from the palette: the fill, its
// -fg (on-fill text) and its -hover/-active states all follow the theme.
$retro-badge-variants: "primary", "success", "danger", "warning", "info", "secondary";

@each $name in $retro-badge-variants {
  // `secondary` has no palette entry of its own; it rides the neutral gray.
  $token: $name;
  @if $name == "secondary" { $token: "gray"; }

  .retro-badge-#{$name} {
    background: var(--retro-#{$token});
    color: var(--retro-#{$token}-fg);
    border: 2px solid var(--retro-#{$token}-active);
    box-shadow:
      inset 1px 1px 0 var(--retro-border-light),
      inset -1px -1px 0 var(--retro-#{$token}-active),
      1px 1px 0 var(--retro-#{$token}-hover);
    text-shadow: none;

    &:hover, &:focus-visible {
      background: var(--retro-#{$token}-hover);
      box-shadow:
        inset 2px 2px 0 var(--retro-border-light),
        inset -2px -2px 0 var(--retro-#{$token}-active),
        2px 2px 0 var(--retro-#{$token}-hover);
      filter: brightness(1.08);
    }

    &:active {
      background: var(--retro-#{$token}-active);
      box-shadow:
        inset 1px 1px 0 var(--retro-#{$token}-active),
        inset -1px -1px 0 var(--retro-border-light);
      filter: brightness(0.95);
    }
  }
}

// Badge sizes
.retro-badge.retro-badge-xs {
  font-size: var(--retro-font-size-xs) !important;
  min-width: 16px !important;
  min-height: 12px !important;
  padding: 1px 4px !important;
  border-width: 1px !important;
}

.retro-badge.retro-badge-sm {
  font-size: var(--retro-font-size-xs) !important;
  min-width: 20px !important;
  min-height: 14px !important;
  padding: 1px 6px !important;
  border-width: 1px !important;
}

.retro-badge.retro-badge-md {
  font-size: var(--retro-font-size-sm) !important;
  min-width: 26px !important;
  min-height: 18px !important;
  padding: 2px 10px !important;
  border-width: 1px !important;
}

.retro-badge.retro-badge-lg {
  font-size: var(--retro-font-size) !important;
  min-width: 36px !important;
  min-height: 22px !important;
  padding: 3px 14px !important;
  border-width: 1px !important;
}

.retro-badge.retro-badge-xl {
  font-size: var(--retro-font-size-lg) !important;
  min-width: 46px !important;
  min-height: 28px !important;
  padding: 4px 18px !important;
  border-width: 2px !important;
}

.retro-badge.retro-badge-xxl {
  font-size: var(--retro-font-size-xl) !important;
  min-width: 60px !important;
  min-height: 36px !important;
  padding: 6px 24px !important;
  border-width: 2px !important;
}

// Special theme variants.
// The neon badge is a deliberate fixed-palette effect -- the saturated hexes
// below ARE the effect and are intentionally not tokenized. It renders on its
// own black ground in both themes.
.retro-badge-neon {
  background: #000;
  box-shadow: 
    0 0 0 1px #fff,
    0 0 0 2px #000,
    0 0 5px 2px rgba(255, 255, 255, 0.6),
    0 0 15px rgba(255, 255, 255, 0.5),
    0 0 25px rgba(255, 255, 255, 0.3),
    inset 0 0 10px rgba(255, 255, 255, 0.2);
  text-shadow: 
    0 0 3px #fff,
    0 0 7px #fff;
  border: none;
  
  &.retro-badge-primary {
    color: #00ffff;
    text-shadow: 
      0 0 1px #fff,
      0 0 3px #00ffff, 
      0 0 7px #00ffff;
    box-shadow: 
      0 0 0 1px #00ffff,
      0 0 0 2px #000,
      0 0 5px 2px rgba(0, 255, 255, 0.6),
      0 0 15px rgba(0, 255, 255, 0.5),
      0 0 25px rgba(0, 255, 255, 0.3),
      inset 0 0 10px rgba(0, 255, 255, 0.2);
  }
  
  &.retro-badge-success {
    color: #00ff00;
    text-shadow: 
      0 0 1px #fff,
      0 0 3px #00ff00, 
      0 0 7px #00ff00;
    box-shadow: 
      0 0 0 1px #00ff00,
      0 0 0 2px #000,
      0 0 5px 2px rgba(0, 255, 0, 0.6),
      0 0 15px rgba(0, 255, 0, 0.5),
      0 0 25px rgba(0, 255, 0, 0.3),
      inset 0 0 10px rgba(0, 255, 0, 0.2);
  }
  
  &.retro-badge-danger {
    color: #ff0000;
    text-shadow: 
      0 0 1px #fff,
      0 0 3px #ff0000, 
      0 0 7px #ff0000;
    box-shadow: 
      0 0 0 1px #ff0000,
      0 0 0 2px #000,
      0 0 5px 2px rgba(255, 0, 0, 0.6),
      0 0 15px rgba(255, 0, 0, 0.5),
      0 0 25px rgba(255, 0, 0, 0.3),
      inset 0 0 10px rgba(255, 0, 0, 0.2);
  }
}

.retro-badge-pixel {
  font-family: var(--retro-font-heading);
  font-weight: var(--retro-font-weight-medium);
  image-rendering: pixelated;
  border: 2px solid var(--retro-border-dark);
  // Squareness is the point of this variant -- pixelated rendering and a hard
  // offset shadow. It does not follow --retro-border-radius on purpose. A
  // literal 0 needs no allowlist entry; check-radius.mjs passes any zero value.
  border-radius: 0;
  box-shadow: 4px 4px 0 var(--retro-border-dark);
  transform-origin: center;
  
  &:hover, &:focus-visible {
    transform: translateY(-2px) translateX(-2px);
    box-shadow: 6px 6px 0 var(--retro-border-dark);
  }
  
  &:active {
    transform: translateY(0) translateX(0);
    box-shadow: 0 0 0 var(--retro-border-dark);
  }
}