.badge {
  display: inline-flex;
  align-items: center;
  @include Typography.Interface(S);
  padding: scale.$sm-4 scale.$sm-2;
  color: rgb(var(--badge-text));
  background: rgb(var(--badge));
  border-radius: 2px;

  &--version {
    @include Typography.Interface(M);
    font-family: var(--monospace);
    border-radius: scale.$base;
  }

  &--success {
    color: rgb(var(--success-text));
    background: rgb(var(--success));
  }

  &--error {
    color: rgb(var(--error-text));
    background: rgb(var(--error));
  }

  &--warning {
    color: rgb(var(--warning-text));
    background: rgb(var(--warning));
  }

  &--info {
    @media (prefers-color-scheme: light) {
      color: color.$ui-cool-gray-700;
      background: color.$ui-cool-gray-100;
    }
  }

  .icon {
    width: scale.$base;
    height: scale.$base;
    margin-left: -(scale.$sm-4);
    margin-right: scale.$sm-4;

    &:only-child {
      margin-right: -(scale.$sm-4);
    }
  }
}
