// Button styling.
@use "sass:color";
@use './_variables';

// btn-primary
.btn-primary {
  @extend .btn-primary;
  background-color: variables.$daria-color;
  border: none;
  color: variables.$white;
  margin-bottom: 2px;
  font-size: variables.$font-size;
}

.btn-primary:hover {
  background-color: color.adjust(variables.$daria-color,$lightness: 15%);
}

.btn-primary:focus {
  background-color: color.adjust(variables.$daria-color,$lightness: 15%);
  color: variables.$white;
  text-decoration: none;
}

// btn-danger
.btn-danger {
  background-color: variables.$dark-red !important;
  border-color: variables.$dark-red !important;
}

// btn-warning
.btn-warning {
  color: variables.$black;
  border-color: variables.$daria-color;
  background-color: variables.$white;

  &:hover {
    background-color: variables.$daria-color-lt;
    border-color: variables.$daria-color;
  }
  &:active {
    background-color: variables.$soft-blue !important;
  }
  &:focus {
    background-color: variables.$daria-color;
    &:hover {
      background-color: variables.$daria-color-lt;
    }
  }
}

// btn-success
.btn-success {
  background-color: variables.$daria-color;
  border-color: variables.$daria-color;

  &:hover {
    background-color: variables.$daria-color-lt;
    border-color: variables.$daria-color;
  }
  &:active {
    background-color: variables.$soft-blue !important;
  }
  &:focus {
    background-color: variables.$daria-color;
    &:hover {
      background-color: variables.$daria-color-lt;
    }
  }
}

// btn sizes
.btn-lg {
  margin: .75em 0;
  padding: .75em 1.5em;
}

// Disabled button styling
@mixin disabled-button {
  color: variables.$white;
  background-color: gray;
  border-color: variables.$daria-color;
  &:hover {
    background-color: gray;
    border-color: variables.$daria-color;
  }
  &:focus {
    background-color: gray;
    border-color: variables.$daria-color;
    &:hover {
      background-color: gray;
      border-color: variables.$daria-color;
    }
  }
}

.btn-success[disabled] {
  @include disabled-button;
}

.btn-warning[disabled] {
  @include disabled-button;
}

// Styling for the cancel button on pledge modal
.btn[data-orientation='cancel'] {
  color: variables.$red;
}
