.cobalt- {
  &Tag {
    @apply c-bg-surfaceContainerVariant c-text-onSurface c-rounded;
    display: inline-flex;

    align-items: center;

    height: 20px;

    @apply c-py-[2px] c-px-2xs;

    font-family: font-family(base);

    font-size: 14px;

    font-weight: 600;

    line-height: 16px;

    letter-spacing: normal;
  }

  &Tag--muted {
    opacity: 0.5;
  }

  &Tag--important {
    @apply c-text-onErrorContainer c-bg-errorContainer;
  }

  &Tag--importantPrimary {
    @apply c-text-onError c-bg-error;
  }

  &Tag--success {
    @apply c-text-onSuccessContainer c-bg-successContainer;
  }

  &Tag--successPrimary {
    @apply c-text-onSuccess c-bg-success;
  }

  &Tag--info {
    @apply c-text-onTertiaryContainer c-bg-tertiaryContainer;
  }

  &Tag--accent {
    @apply c-text-onPrimaryContainer c-bg-primaryContainer;
  }

  &Tag--accentPrimary {
    @apply c-text-onPrimary c-bg-primary;
  }

  &Tag--connect {
    @apply c-text-connect c-bg-primaryContainer;
  }

  &Tag--connectPrimary {
    @apply c-text-onConnect c-bg-connect;
  }
}