@mixin button {
  display: inline-block;
  font-size: $text-base;
  font-family: inherit;
  line-height: $leading-normal;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  @include text-ellipsis;
  border: $border-1 solid transparent;
  border-radius: $rounded;
  padding: $spacing-2 $spacing-4;
  margin: $spacing-0;
  max-width: 100%;
  appearance: none;
  cursor: pointer;
  user-select: none;

  &:disabled {
    opacity: $opacity-50;
    cursor: not-allowed;
  }
}

@mixin button--color($color: $color-gray-600, $bg-color: $color-gray-200) {
  color: $color;
  background-color: $bg-color;
}

@mixin button--block {
  display: block;
  width: 100%;
}

@mixin button--outline(
  $color: $color-gray-600,
  $border-color: $color-gray-400
) {
  color: $color;
  background-color: transparent;
  border: $border-1 solid $border-color;
}

@mixin button--link($color: $color-gray-600) {
  color: $color;
  background-color: transparent;
}

.c-button {
  @include button;
  @include button--color;

  &--info {
    @include button--color($color: $color-white, $bg-color: $color-blue-500);
  }

  &--warning {
    @include button--color($color: $color-white, $bg-color: $color-orange-500);
  }

  &--error {
    @include button--color($color: $color-white, $bg-color: $color-red-500);
  }

  &--success {
    @include button--color($color: $color-white, $bg-color: $color-green-500);
  }

  &--block {
    @include button--block;
  }

  &--outline {
    @include button--outline;
  }

  &--outline-info {
    @include button--outline(
      $color: $color-blue-500,
      $border-color: $color-blue-300
    );
  }

  &--outline-warning {
    @include button--outline(
      $color: $color-orange-500,
      $border-color: $color-orange-300
    );
  }

  &--outline-error {
    @include button--outline(
      $color: $color-red-500,
      $border-color: $color-red-300
    );
  }

  &--outline-success {
    @include button--outline(
      $color: $color-green-500,
      $border-color: $color-green-300
    );
  }

  &--link {
    @include button--link;
  }

  &--link-info {
    @include button--link($color: $color-blue-500);
  }

  &--link-warning {
    @include button--link($color: $color-orange-500);
  }

  &--link-error {
    @include button--link($color: $color-red-500);
  }

  &--link-success {
    @include button--link($color: $color-green-500);
  }
}