/*
  Pill badges. Base is the small size; --lg is the large size; colour modifiers
  set a light background with matching darker text.
*/

@layer components {
  .badge {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.625rem;
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
    font-weight: var(--font-weight-medium);
  }

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

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

  .badge--beta {
    padding-inline: 0.5rem;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    background-color: var(--color-indigo-100);
    color: var(--color-indigo-700);
  }

  .badge--beta-dark {
    background-color: var(--color-white);
  }
}

@layer components {
  .badge--red-solid {
    background-color: var(--color-red-800);
    color: var(--color-white);
  }
}