/**
 *  BUTTON
 *
 *  Markup:
 *  -------
 *
 *  <button class="button">Default</button>
 *  <button class="button button--big">Button big</button>
 *  <button class="button button--secondary">Button secondary</button>
 *
 */


// reset default buttons
button {
  background-color: transparent;
  cursor: pointer;
}

.button {
  background-color: $bg-button;
  border: 0;
  border-radius: $bdr-button;
  color: $c-button;
  display: inline-block;
  font-family: $ff-button;
  font-size: $fz-button;
  font-weight: $fw-button;
  line-height: $lh-button;
  margin: $m-button;
  padding: $p-button;
  text-align: center;
  text-decoration: none;
  text-transform: $tt-button;
  transition: opacity .2s ease-in-out;
  white-space: nowrap;

  &:focus,
  &:hover,
  &:active {
    color: $c-button;
  }

  &:hover {
    background-color: rgba($c-primary, .8);
    color: $c-white;
    cursor: pointer;
    text-decoration: none;
  }

  &:active {
    opacity: 1;
  }

  &:first-child {
    margin-left: 0;
  }

  &:last-child {
    margin-right: 0;
  }

  // sizes
  &--big {
    font-size: $fz-button-big;
    padding: $p-button-big;
  }

  &--small {
    font-size: $fz-button-small;
    padding: $p-button-small;
  }

  &--mobileFull {
    @include media-breakpoint-down(md) {
      margin-left: 0;
      margin-right: 0;
      width: 100%;
    }
  }

  // colors
  &--secondary {
    background-color: $c-secondary;
    color: $c-white;

    &:hover {
      background-color: rgba($c-secondary, .8);
      color: $c-white;
    }
  }

  &--white {
    background-color: $c-white;
    color: $c-primary;

    &:hover {
      background-color: rgba($c-white, .8);
      color: rgba($c-primary, .8);
    }
  }

  &--green {
    background-color: $c-success;
    color: $c-white;

    &:hover {
      background-color: rgba($c-success, .8);
      color: $c-white;
    }
  }

  &--red {
    background-color: $c-error;
    color: $c-white;

    &:hover {
      background-color: rgba($c-error, .8);
      color: $c-white;
    }
  }

  &--transparent {
    background-color: transparent;
    color: $c-button-transparent;

    &:active,
    &:hover,
    &:focus {
      background-color: transparent;
      color: rgba($c-button-transparent, .8);
      opacity: .8;
    }
  }

  &--outlined {
    background-color: transparent;
    border: $bd-medium;
    color: $c-button-outlined;

    &:active,
    &:hover,
    &:focus {
      background-color: transparent;
      color: rgba($c-button-outlined, .8);
      opacity: .8;
    }
  }
}