button {
  @extend .button;
}
button,.button {
  &.small{
    padding: $global-padding*0.5 $global-padding*1.5;
  }
  &.tiny{
    padding: $global-padding*0.3 $global-padding*1.1;
  }
  &:not(.large,.small,.tiny){
  }
  &.primary {
    color: $white;
  }
  &.success {
    border-color: $success-color;
  }
  &.alert {
    border-color: $alert-color;
    color: $white;
    &:hover{
      color:$white;
    }
  }
  &.secondary {
    border-color: $secondary-color;
  }
  &.inactive {
    color: $light-gray;
    border-color: $light-gray;
    cursor: not-allowed ;
    &:hover {
      background-color: unset;
    }
  }
}
.hero {
  button,.button {
    min-width: 20vw;
    padding: $global-padding*0.3 $global-padding*2;
    color: $button-color-alt;
    font-size: $global-font-size*1.3;
    border-color: $button-color-alt;
    border-radius: $global-radius-archive*2;
    &:hover{
      color: $anchor-color;
      border-color: $anchor-color;
    }
  }
}
.search {
  .button {
    border-color: $primary-color;
  }
  button.appear{
    min-width: unset;
    background-color: $primary-color;
    color: $white;
    border-radius:$global-radius-archive;
    border: none;
  }
}
.end_of_page_button {
  @extend .button.small;
  display: flex;
  margin:  $global-margin auto;
  padding: $global-padding*0.5 $global-padding*5;
}