@mixin button {
  display: flex;

  align-items: center;
  justify-content: center;

  @include button-padding;

  border: none;
  border-radius: 0.25em;

  &:hover {
    cursor: pointer;
  }

  &--success,
  &--confirm {
    background-color: var(--confirm-color);
    color: $white !important;
  }

  &--error,
  &--cancel {
    color: $white !important;
    background-color: var(--danger-color);
  }

  &--primary {
    color: $white !important;
    background-color: var(--info-color);
  }

  &--disabled {
    color: var(--font-color) !important;
    background-color: var(--background-color-secondary) !important;

    &:hover {
      cursor: default;
    }
  }

}

.button {
  @include button;
}
