@import '../core/mixins.scss';

.fx-btn {
  font-family: 'Nunito Sans', 'Open Sans', sans-serif;
  color: #fff;
  display: inline-block;
  border: 1px solid transparent;
  text-align: center;
  min-width: 125px;
  margin: 0 auto;
  font-size: 16px;
  min-height: 42px;
  border-radius: 30px;
  line-height: 1;
  @include transition(0.2s all);
  cursor: pointer;
  padding: 0.75em 1.5em;
  .fa {
    margin-right: 3px;
  }
  &.xs {
    min-width: 100px;
    height: auto;
    width: auto;
    font-size: 14px;
    padding: 0.5em 1em;
  }
  &.sm {
    min-width: 100px;
    height: auto;
    width: auto;
    line-height: 24px;
    font-size: 14px;
    padding: 0.75em 0.75em;
  }
  &.md {
    min-width: 100px;
    height: auto;
    width: auto;
    padding: 0.75em 1.5em;
    line-height: 1.5em;
  }
  &.lg {
    height: auto;
    width: auto;
    font-size: 20px;
    padding: 0.75em 2em;
  }
  &.full-width {
    width: 100%;
  }
  &.primary {
    background-color: $secondary-color;
    &:hover {
      color: #fff;
      background-color: $secondary-color-hover;
    }
    &[disabled] {
      background-color: lighten($secondary-color, 30%);
    }
  }
  &.secondary {
    background-color: $gray-20;
    color: $gray-50;
    &:hover {
      background-color: darken($gray-20, 5%);
    }
    &[disabled] {
      background-color: lighten($gray-20, 30%);
    }
  }
  &.default {
    background-color: transparent;
    color: $gray-50;
    &:hover {
      background-color: $gray-05;
    }
  }
  &.inverted {
    background-color: #fff;
    color: $auction-blue;
    @include transition(0.3s);

    &:hover {
      color: #fff;
      background-color: $auction-blue;
    }
    &[disabled] {
      background-color: darken(#fff, 5%);
    }
  }
  &.outlined {
    background-color: #fff;
    color: $secondary-color;
    @include transition(0.3s);
    border: 1px solid $secondary-color;

    &:hover {
      color: #fff;
      background-color: $secondary-color;
    }
    &[disabled] {
      background-color: darken(#fff, 5%);
    }
  }
  &.outlined-gray {
    background-color: #fff;
    color: $gray-50;
    @include transition(0.3s);
    border: 1px solid $gray-50;

    &:hover {
      color: #fff;
      background-color: $gray-50;
    }
    &[disabled] {
      background-color: darken(#fff, 5%);
    }
  }
  &.header-default {
    background-color: rgb(74, 77, 86);
    color: #fff;
    &:hover {
      background-color: darken(rgb(74, 77, 86), 5%);
    }
    .fa {
      color: #fff;
    }
  }
  &.fake-disabled {
    background-color: lighten($orange, 20%);
    &:hover {
      background-color: lighten($orange, 20%);
      color: #fff;
    }
  }
  &.success {
    background-color: $success;
    &:hover {
      background-color: $success-hover;
      color: #fff;
    }
  }
  &.success-inverted {
    background-color: $success-hover;
    &:hover {
      background-color: green;
      color: #fff;

    }
  }
  &.outlined-red {
    background-color: #fff;
    color: $danger;
    @include transition(0.3s);
    border: 1px solid $danger;

    &:hover {
      color: #fff;
      background-color: $danger-hover;
    }
    &[disabled] {
      background-color: darken(#fff, 5%);
    }
  }
  &.cancel {
    background-color: $gray-20;
    color: $gray-50;
    &:hover {
      background-color: $danger;
      color: #fff;
    }
  }
  &.warning {
    background-color: $warning;
    color: #fff;
    &:hover {
      background-color: $warning-hover;
      color: #fff;
    }
  }
  &.auction {
    background-color: $auction-blue;
    color: #fff;
    &:hover {
      background-color: darken($auction-blue, 5%);
      color: #fff;
    }
  }
  &.auction-success {
    background-color: $auction-green;
    color: #fff;
    &:hover {
      background-color: darken($auction-green, 5%);
      color: #fff;
    }
  }
  &:focus {
      outline: 0;
  }
}

.btn-group {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
   > * {
     margin-left: 8px;
     &:first-child {
       margin-left: 0;
     }
   }
}