// Buttons
//
// Buttons suitable for clicking
//
// .button              - Standard class -- creates generic button
// .button-primary      - primary style of button
// .button-secondary     - primary style of button
// .button-big           - larger button
//
// Markup:
// <button class='button {{modifier_class}}'>{{modifier_class}}</button>
//
// Styleguide components.buttons

button,
.button,
input[type='submit'] {
  @extend %button;
}

.button-primary {
  @extend %button;

  background-color: $primary-button-bg-color;
  color: $white;
  -webkit-font-smoothing: antialiased;
  padding-top: 0.7em;
  padding-bottom: 0.7em;
  padding-left: 1em;
  padding-right: 1em;

  &:hover,
  &:focus {
    background-color: $primary-hover-button-bg-color;
    color: $primary-hover-button-color;

    a {
      border-bottom: none;
      color: $primary-button-color;
    }
  }

  a {
    border-bottom: none;
    color: $primary-button-color;
  }
}

.button-secondary,
.button-tertiary {
  @extend %button;

  background-color: $secondary-button-bg-color;
  border: 1px solid $secondary-button-border-color;
  color: $secondary-button-color;
  padding-left: 0.7em;
  padding-right: 0.7em;

  &:hover,
  &:focus {
    background-color: $secondary-hover-button-bg-color;
    color: $secondary-hover-button-color;

    a {
      border-bottom: none;
      color: $secondary-button-color;
    }
  }

  a {
    border-bottom: none;
    color: $secondary-button-color;
  }
}

.button-tertiary {
  background-color: $tertiary-button-bg-color;
}

.button-disabled {
  background-color: $tertiary-button-bg-color;
  color: $gray-dark;
}

.button-big {
  font-size: $base-font-size;
  -webkit-font-smoothing: antialiased;
  height: 35px;
  width: 150px;
}
