.cob-Button__small {
  @apply c-bg-surfaceContainer c-text-primary c-border-outlineVariant;
  @include cob-button-sizing(
    $height: 32px,
    $line-height: 20px,
    $font-size: 14px,
    $horizontal-padding: theme("spacing.xs")
  );

  &--primary,
  &--warning,
  &--secondary,
  &--tertiary,
  &--business,
  &--success,
  &--neutral {
    @apply c-border-transparent;

    &:hover,
    &:focus,
    &:active {
      @apply c-border-transparent;
    }
  }

  &--primary {
    @apply c-bg-primary c-text-onPrimary;

    &.cob-Button__small--destructive {
      @apply c-bg-error c-text-onError c-border-transparent;
    }
  }

  &--destructive:not(.cob-Button__small--primary) {
    @apply c-text-error;

    &:hover,
    &:focus,
    &:active {
      @apply c-border-error;
    }
  }

  &--warning {
    @apply c-bg-warning c-text-onWarning;
  }

  &--secondary {
    @apply c-bg-secondary c-text-onSecondary;
  }

  &--tertiary {
    @apply c-bg-tertiary c-text-onTertiary;
  }

  &--business {
    @apply c-bg-businessContainer c-text-onBusinessContainer;
  }

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

  &--neutral {
    @apply c-bg-neutral c-text-onNeutral;
  }
}