.button {
  display: flex;

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

  @include button-padding;

  border: none;

  font-size: 16px;

  &:hover {
    cursor: pointer;
  }

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

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

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

  &--reddit {
    color: $white !important;
    background-color: $reddit-orange;

    &:hover {
      background-color: lighten($reddit-orange, 5%);
    }
  }

  &--twitter {
    color: $white !important;
    background-color: $twitter-blue;

    &:hover {
      background-color: lighten($twitter-blue, 5%);
    }
  }

  &--disabled {
    color: var(--font-color) !important;
    background-color: $gray !important;
  }
}
