.app-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.25rem;
  border-radius: 0.375rem;
  white-space: nowrap;

  &-5xs {
    padding: 0.125rem 0.375rem;
    font-size: 0.625rem;
    line-height: 0.875rem;
    gap: 0.25rem;
  }

  &-4xs {
    padding: 0.15625rem 0.40625rem;
    font-size: 0.6875rem;
    line-height: 0.9375rem;
    gap: 0.28125rem;
  }

  &-3xs {
    padding: 0.1875rem 0.4375rem;
    font-size: 0.75rem;
    line-height: 1rem;
    gap: 0.3125rem;
  }

  &-2xs {
    padding: 0.203125rem 0.453125rem;
    font-size: 0.78125rem;
    line-height: 1.0625rem;
    gap: 0.328125rem;
  }

  &-xs {
    padding: 0.21875rem 0.46875rem;
    font-size: 0.8125rem;
    line-height: 1.125rem;
    gap: 0.34375rem;
  }

  &-s {
    padding: 0.234375rem 0.484375rem;
    font-size: 0.84375rem;
    line-height: 1.1875rem;
    gap: 0.359375rem;
  }

  &-m {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    gap: 0.375rem;
  }

  &-l {
    padding: 0.265625rem 0.515625rem;
    font-size: 0.90625rem;
    line-height: 1.3125rem;
    gap: 0.390625rem;
  }

  &-xl {
    padding: 0.28125rem 0.53125rem;
    font-size: 0.9375rem;
    line-height: 1.375rem;
    gap: 0.40625rem;
  }

  &-2xl {
    padding: 0.296875rem 0.546875rem;
    font-size: 0.96875rem;
    line-height: 1.4375rem;
    gap: 0.421875rem;
  }

  &-3xl {
    padding: 0.3125rem 0.5625rem;
    font-size: 1rem;
    line-height: 1.5rem;
    gap: 0.4375rem;
  }

  &-4xl {
    padding: 0.34375rem 0.59375rem;
    font-size: 1.0625rem;
    line-height: 1.5625rem;
    gap: 0.46875rem;
  }

  &-5xl {
    padding: 0.375rem 0.625rem;
    font-size: 1.125rem;
    line-height: 1.625rem;
    gap: 0.5rem;
  }

  &-rounded {
    border-radius: 0.5rem;
  }

  &-pill {
    border-radius: 9999px;
  }

  &-primary {
    background-color: color-mix(in srgb, var(--p-primary-500), transparent 84%);
    color: var(--p-primary-200);
  }

  $colors: (
    'secondary': 'slate',
    'success': 'green',
    'info': 'sky',
    'warning': 'orange',
    'danger': 'red',
    'blue': 'blue',
    'indigo': 'indigo',
    'purple': 'purple',
    'pink': 'pink',
    'red': 'red',
    'orange': 'orange',
    'yellow': 'yellow',
    'green': 'green',
    'teal': 'teal',
    'cyan': 'cyan',
    'gray': 'gray',
    'slate': 'slate',
    'zinc': 'zinc',
    'neutral': 'neutral',
    'stone': 'stone',
    'amber': 'amber',
    'lime': 'lime',
    'emerald': 'emerald',
    'sky': 'sky',
    'violet': 'violet',
    'fuchsia': 'fuchsia',
    'rose': 'rose'
  );

  @each $name, $color in $colors {
    &-#{$name} {
      background-color: color-mix(in srgb, var(--p-#{$color}-500), transparent 84%);
      color: var(--p-#{$color}-200);
    }
  }

  &-dark {
    background-color: color-mix(in srgb, var(--p-gray-800), transparent 84%);
    color: var(--p-gray-300);
  }

  &-light {
    background-color: color-mix(in srgb, var(--p-gray-300), transparent 84%);
    color: var(--p-gray-600);
  }

  &-variant-pill {
    border-radius: 9999px;
    padding: 0.125rem 0.375rem;

    &.app-tag-primary {
      background-color: var(--p-primary-600);
      color: var(--p-primary-100);
    }

    @each $name, $color in $colors {
      &.app-tag-#{$name} {
        background-color: var(--p-#{$color}-600);
        color: var(--p-#{$color}-100);
      }
    }

    &.app-tag-dark {
      background-color: var(--p-gray-800);
      color: var(--p-gray-100);
    }

    &.app-tag-light {
      background-color: var(--p-gray-300);
      color: var(--p-gray-800);
    }
  }
}
