.elzar-btn-large {
  background: $action-color;
  border-left: $large-buttons-border;
  border-radius: 0;
  border-right: $large-buttons-border;
  float: right;
  height: 100%;
  margin-right: rem(-3);
  padding: $large-button-padding--mobile;

  @include media(min-width $breakpoint-b) {
    padding: $large-button-padding;
  }

  &:hover,
  &:focus {
    background-color: shade($action-color-darker, 5%);
  }
}

.elzar-btn_text {

  .elzar-btn-large & {
    display: none;

    @include media(min-width $breakpoint-b) {
      display: inline;
    }
  }
}


.elzar-btn-light {
  background: none;
  border: 1px solid $action-color;
  color: $action-color;

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

.elzar-btn-link {
  background: none;
  color: $hiperlink-color;
  padding: 0;
  text-decoration: underline;
  //this is to have the button align with the text. Otherwise will be in another line
  vertical-align: inherit;

  &:hover {
    background: none;
    color: $action-color-darker;
  }
}

.elzar-btn-secondary {
  background: $very-light-grey;

  &:hover {
    background: $nobel;
  }
}