// Buttons - classic
.btn {
  font-family: $secondary-font;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 12px;
  color: $default-color;
  border-radius: 2px;
  border: 0;
  padding: 9px 20px;
  transition: all .1s linear;
}

.btn-dark {
  background: $dark-color;

  &:hover {
    color: $default-color;
    background: darken($dark-color, 10%);
  }
}

.btn-default {
  color: $dark-color;
  border: 2px solid $light-color;
  padding: 7px 18px;
  background: transparent;
  transition: all 0.1s linear;

  &:hover {
    color: $lighter-color;
    background: $dark-color;
    border: 2px solid $dark-color;
    padding: 7px 18px;
  }
}

.btn-darker {
  @extend %background-secondary-color;

  &:hover {
    color: $default-color;
    background: darken($secondary-color, 10%);
  }
}

// Buttons - transition
.btn-primary--transition,
.btn-dark--transition,
.btn-warning--transition,
.btn-info--transition,
.btn-danger--transition,
.btn-darker--transition {
  transition: $buttons-transition;

  &:hover {
    background: transparent;
    padding: 7px 18px;
  }
}

.btn-primary--transition {
  @extend %background-primary-color;

  &:hover {
    @extend %color-primary-color;
    border: 2px solid $primary-color;
  }
}

.btn-dark--transition {
  background: $dark-color;

  &:hover {
    color: $dark-color;
    border: 2px solid $dark-color;
  }
}

.btn-warning--transition {
  @extend %background-tertiary-color;

  &:hover {
    @extend %color-tertiary-color;
    border: 2px solid $tertiary-color;
  }
}

.btn-info--transition {
  background: $info-color;

  &:hover {
    color: $info-color;
    border: 2px solid $info-color;
  }
}

.btn-danger--transition {
  background: $danger-color;

  &:hover {
    color: $danger-color;
    border: 2px solid $danger-color;
  }
}

.btn-darker--transition {
  @extend %background-secondary-color;

    &:hover {
    @extend %color-secondary-color;
    border: 2px solid $secondary-color;
  }
}

.btn-default--transition {
  color: $dark-color;
  border: 2px solid $light-color;
  padding: 7px 18px;
  background: transparent;
  transition: border 0.1s linear;

  &:hover {
    background: transparent;
    color: $dark-color;
    border: 2px solid $secondary-color;
    padding: 7px 18px;
  }
}

// Buttons - reverse transition
.btn-primary--reverse-transition,
.btn-dark--reverse-transition,
.btn-warning--reverse-transition,
.btn-info--reverse-transition,
.btn-danger--reverse-transition,
.btn-darker--reverse-transition {
  transition: $buttons-transition;
  background: transparent;
  padding: 7px 18px;

  &:hover {
    color: $lighter-color;
  }
}

.btn-primary--reverse-transition {
  // @extend %color-primary-color;
  border: 2px solid $primary-color;
  color: $primary-color;

  &:hover {
    @extend %background-primary-color;
  }
}

.btn-dark--reverse-transition {
  color: $dark-color;
  border: 2px solid $dark-color;

  &:hover {
    background: $dark-color;
  }
}

.btn-warning--reverse-transition {
  // @extend %color-tertiary-color;
  border: 2px solid $tertiary-color;
  color: $tertiary-color;

  &:hover {
    @extend %background-tertiary-color;
  }
}

.btn-info--reverse-transition {
  color: $info-color;
  border: 2px solid $info-color;

  &:hover {
    background: $info-color;
  }
}

.btn-danger--reverse-transition {
  color: $danger-color;
  border: 2px solid $danger-color;

  &:hover {
    background: $danger-color;
  }
}

.btn-darker--reverse-transition {
  // @extend %color-secondary-color;
  border: 2px solid $secondary-color;
  color: $secondary-color;

  &:hover {
    @extend %background-secondary-color;
  }
}

.btn-default--reverse-transition {
  background: $lighter-color;
  color: $dark-color;
  border: 2px solid $secondary-color;
  padding: 7px 18px;
  transition: border 0.1s linear;

  &:hover {
  color: $dark-color;
  border: 2px solid $light-color;
  background: $lighter-color;
  }
}

// Custom buttons
.btn-jumbotron {
  background: transparent;
  color: $light-color;
  border: 2px solid $light-color;
  padding: 7px 18px;
  transition: all 0.1s linear;

  &:hover {
    @extend %color-secondary-color;
    background: $light-color;
    border: 2px solid $light-color;
  }
}

.btn-shop {
  color: $dark-color;
  background-color: $lighter-color;
  border: 1px solid $light-color;
  box-shadow: 0 1px 2px $light-color;
  padding: 10px;

  &:hover {
    @extend %color-primary-color;
    border: 1px solid $light-color;
    background-color: $default-color;
  }
}