// This is more for a <p> tag that needs to have a button type look, but is more like a long pill.
.magnet {
    @apply inline-block rounded-full bg-opacity-0 px-4 py-2 text-base text-[var(--magnet-color)] antialiased ring-1 ring-white ring-opacity-50;

    --magnet-color: var(--magnet-color-override, theme('colors.gray.300'));
    --magnet-hl-color: var(--magnet-hl-color-override, theme('colors.sky.600'));

    a:not(.btn, [class*='promo']) {
      @apply text-[var(--magnet-color)];
    }
  }
