@layer components {
  .flag-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5ch;
  }

  .flag-badge {
    padding: var(--badge-padding, 0.35em 1em);
    border: var(--badge-border, var(--border));
    background: var(--badge-background, var(--color-canvas));
    color: var(--badge-color, inherit);
    font-size: var(--badge-font-size, 0.65em);
    display: inline-flex;
    white-space: nowrap;
    flex: 0 0 max-content;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    border-radius: var(--radius);
    text-transform: uppercase;
  }

  .flag-badge--pin-club-exclusive {
    --badge-background: linear-gradient(180deg, #e3773a, #dd5636);
  }

  .flag-badge--kickstarter-exclusive {
    --badge-background: linear-gradient(180deg, #05ce78, #61975a);
  }

  .shiny-metal,
  .flag-badge--kickstarter-exclusive,
  .flag-badge--pin-club-exclusive {
    border: 1px solid var(--color-primary);

    @media (prefers-reduced-motion: no-preference) {
      --animation-duration: 3s;

      &::after {
        content: "";
        display: block;
        position: absolute;
        inset: 0;
        background-image: url("/assets/animations/shiny_metal-f01edd37.svg");
        background-repeat: no-repeat;
        animation: shiny-metal linear infinite;
        animation-duration: var(--animation-duration, 3s);
      }

      &.shiny-metal--slow::after {
        animation-name: shiny-metal, delay-animation;
        animation-duration:
        var(--animation-duration, 3s), calc(var(--animation-duration) * 2);
      }
    }
  }
}