// Buttons
// -----------------------------------------------
// -----------------------------------------------
.button {
  border: none;
  display: inline-block;
  font-family: $base-font-family;
  font-size: $base-font-size;
  font-weight: $font-semibold;
  text-decoration: none;
  text-transform: uppercase;
  background: $brand-tertiary;
  color: $white;
  border-radius: ($base-point-grid * 8);
  text-align: center;
  transition: background $base-duration $base-timing;
  outline: none;
  z-index: 1;

  &.link-like {
    background: transparent;
    color: rgba($white, 0.9);
    font-weight: $font-regular;
    padding: ($base-point-grid / 2) ($base-point-grid * 2);
    text-transform: none;

    &:hover {
      color: $white;
      text-decoration: none;
      background: darken($brand-primary, 5%);
    }
  }

  &:visited {
    color: $white;
  }

  &:hover {
    color: $white;
    background: darken($brand-tertiary, 5%);
    text-decoration: none;
    cursor: pointer;
  }

  &:active {
    background: darken($brand-tertiary, 7%);
  }

  &.button-large {
    padding: ($base-point-grid * 1.6) ($base-point-grid * 6);
    font-size: 0.9rem;
  }

  &.button-small {
    padding: ($base-point-grid * 0.7) ($base-point-grid * 2.2);
    font-size: 0.7857rem;
  }
}
