.cobalt- {
  &Tag {
    @apply c-bg-neutralAlt c-text-base 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-errorAlt c-bg-errorAlt;
  }

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

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

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

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

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

  &Tag--accentPrimary {
    @apply c-text-onAccent c-bg-accent;
  }

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

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