// ghost buttons
.button,
a.button,
.bg-brand--off-white a.button {
  @include font-style;
  @include text-ellipsis;
  background: transparent;
  border: 2px solid currentColor;
  border-radius: $border-radius;
  color: $color-brand--one;
  cursor: pointer;
  display: inline-block;
  font-family: $font-family-theme;
  height: $baseline * 6;
  line-height: $baseline * 5.5;
  padding: 0 30px;
  min-width: 120px;
  text-align: center;
  text-decoration: none;
  transition: background-color $transition-duration--fast, border-color $transition-duration--fast, color $transition-duration--fast;
  vertical-align: middle;

  &:hover {
    background: $color-brand--one;
    border-color: $color-brand--one;
    color: $color-brand--four;
    text-decoration: none;
    transition: background-color $transition-duration--fast, border-color $transition-duration--fast, color $transition-duration--fast; //overwrite default text-decoration transition

    .icon svg {
      fill: $color-brand--four;
    }
  }

  // on touch devices hover is similar to ':active' state.
  // outputs regular ':active' state & specific ':hover'
  // state for touch devices
  & {
    @include hover-touch {
      background: $color--one-130;
      border-color: $color--one-130;
      color: $color-brand--four;
      outline: none;
    }
  }

  .icon svg {
    fill: $color-brand--one;
  }

  &--s {
    height: $baseline * 5;
    line-height: $baseline * 4.6;
    padding: 0 20px;
  }

  // button with icon
   .icon--inline {
    margin-right: 10px;
    top: 2px;
  }
}

// viewport l
@include viewport--l {
  .button,
  a.button,
  .bg-brand--off-white a.button {
    height: $baseline * 8;
    line-height: $baseline * 7.5;
    min-width: 140px;

    &--m {
      height: $baseline * 6;
      line-height: $baseline * 5.6;
      min-width: 120px;
    }
    &--s {
      height: $baseline * 5;
      line-height: $baseline * 4.6;
    }
    // limit the button size
    &:not(.button--full-width) {
      max-width: $max-button-size;
    }
  }
}

// dark blue
.button.button--dark-blue { // chained to add specificity
  // using mixin to be able to extend in media queries
  @include button--dark;
}

// off-white
.button.button--off-white { // chained to add specificity
  // using mixin to be able to extend in media queries
  @include button--light;
}

// blue
.button.button--blue { // chained to add specificity
  // using mixin to be able to extend in media queries
  @include button--blue;
}

// background / color default mappings
.bg-brand {
  &--blue,
  &--dark-blue,
  &--turquoise,
  &--red {
    .button, a.button {
      @extend .button--off-white;
    }
    .modal .button, a.modal .button {
      @extend .button--blue;
    }
  }

  &--yellow {
    .button, a.button {
      @extend .button--dark-blue;
    }

    .modal .button, a.modal .button {
      @extend .button--blue;
    }
  }

  &--blue,
  &--dark-blue,
  &--turquoise,
  &--red,
  &--yellow {
    .popover.bg-brand--off-white .button {
      @extend .button--blue;
    }
  }
}
