.ga-badge {
  @apply inline-block rounded-full align-baseline;

  &.ga-badge--text {
    @apply min-w-6 p-1 text-center text-sm leading-4 font-medium whitespace-nowrap;

    &.ga-badge--default {
      @apply bg-(--ga-color-surface-action) text-(--ga-color-text-on-action);
    }

    &.ga-badge--default-inverted {
      @apply bg-(--ga-color-icon-on-action) text-(--ga-color-text-information);
    }

    &.ga-badge--muted {
      @apply bg-(--ga-color-icon-on-primary) text-(--ga-color-text-action);
    }

    &.ga-badge--information {
      @apply bg-(--ga-color-utility-blue-accent) text-(--ga-color-text-information) ring-1 ring-(--ga-color-border-information) ring-inset;
    }

    &.ga-badge--error {
      @apply bg-(--ga-color-utility-red-accent) text-(--ga-color-text-error) ring-1 ring-(--ga-color-border-error) ring-inset;
    }

    &.ga-badge--warning {
      @apply bg-(--ga-color-utility-orange-accent) text-(--ga-color-text-warning) ring-1 ring-(--ga-color-border-warning) ring-inset;
    }

    &.ga-badge--success {
      @apply bg-(--ga-color-utility-green-accent) text-(--ga-color-text-success) ring-1 ring-(--ga-color-border-success) ring-inset;
    }

    &.ga-badge--disabled {
      @apply bg-(--ga-color-surface-disabled) text-(--ga-color-text-disable-selected);
    }

    &.ga-badge--disabled-inverted {
      @apply bg-(--ga-color-icon-on-primary) text-(--ga-color-text-disabled);
    }
  }

  &.ga-badge--dot {
    @apply h-2 w-2;

    &.ga-badge--default {
      @apply bg-(--ga-color-surface-action);
    }

    &.ga-badge--default-inverted {
      @apply bg-(--ga-color-icon-on-action);
    }

    &.ga-badge--muted {
      @apply bg-(--ga-color-icon-on-primary) ring-1 ring-(--ga-color-text-disabled) ring-inset;
    }

    &.ga-badge--information {
      @apply bg-(--ga-color-icon-information);
    }

    &.ga-badge--error {
      @apply bg-(--ga-color-icon-error);
    }

    &.ga-badge--warning {
      @apply bg-(--ga-color-icon-warning);
    }

    &.ga-badge--success {
      @apply bg-(--ga-color-icon-success);
    }

    &.ga-badge--disabled {
      @apply bg-(--ga-color-icon-on-disabled);
    }

    &.ga-badge--disabled-inverted {
      @apply bg-(--ga-color-icon-on-primary);
    }
  }
}