/*
  Pill badges. Base is the small size; --lg is the large size; colour modifiers
  set the --badge-bg / --badge-color slots.
*/

@layer components {
  .badge {
    --badge-padding: 0.125rem 0.625rem;
    --badge-bg: var(--color-gray-100);
    --badge-color: var(--color-gray-800);
    --badge-sheen: 22%;
    --badge-shadow: var(--bevel-sm);
    --raised-bg: var(--badge-bg);
    --raised-sheen-amount: var(--badge-sheen);

    display: inline-flex;
    align-items: center;
    padding: var(--badge-padding);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
    font-weight: var(--font-weight-medium);
    color: var(--badge-color);
    background-image: var(--raised-sheen);
    box-shadow: var(--badge-shadow);
  }

  .badge--lg {
    --badge-padding: 0.25rem 0.75rem;
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
  }

  .badge--gray { --badge-bg: var(--color-gray-100); --badge-color: var(--color-gray-800); }
  .badge--blue { --badge-bg: var(--color-blue-100); --badge-color: var(--color-blue-800); }
  .badge--green { --badge-bg: var(--color-green-100); --badge-color: var(--color-green-800); }
  .badge--yellow { --badge-bg: var(--color-yellow-100); --badge-color: var(--color-yellow-800); }
  .badge--red { --badge-bg: var(--color-red-100); --badge-color: var(--color-red-800); }
  .badge--orange { --badge-bg: var(--color-orange-100); --badge-color: var(--color-orange-800); }
  .badge--purple { --badge-bg: var(--color-purple-100); --badge-color: var(--color-purple-800); }

  .badge--beta {
    --badge-padding: 0.125rem 0.5rem;
    --badge-bg: var(--color-indigo-100);
    --badge-color: var(--color-indigo-700);

    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
  }

  .badge--beta-dark {
    --badge-bg: var(--color-white);
    --badge-sheen: 0%;
  }

  .badge--red-solid {
    --badge-bg: var(--color-red-800);
    --badge-color: var(--color-white);
    --badge-sheen: 8%;
  }
}