// ghost buttons
.button,
a.button {
  @include font-style;
  @include text-ellipsis;
  background: transparent;
  border-radius: $border-radius;
  border: 2px solid currentColor;
  color: $color-brand--one;
  cursor: pointer;
  font-family: $font-family-theme;
  height: $baseline * 6;
  line-height: ($baseline * 6) - 4;
  min-width: 120px;
  padding: 0 30px;
  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--white;
    text-decoration: none;
    transition: background-color $transition-duration--fast,
      border-color $transition-duration--fast, color $transition-duration--fast; //overwrite default text-decoration transition
  }

  // 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--white;
      outline: none;
    }
  }

  // sizes
  &--s {
    font-size: 16px;
    height: $baseline * 4;
    line-height: ($baseline * 4) - 4;
    min-width: 50px;
    padding: 0 $baseline;
  }

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

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

  &:hover {
    .icon svg {
      fill: $color-brand--white;
    }
  }

  @include viewport--l {
    height: $baseline * 8;
    line-height: ($baseline * 8) - 4;
    min-width: 140px;

    // sizes
    &--m {
      height: $baseline * 6;
      line-height: ($baseline * 6) - 4;
      min-width: 120px;
    }

    &--s {
      height: $baseline * 4;
      line-height: ($baseline * 4) - 4;
      min-width: 80px;

      .icon--inline {
        margin-right: $baseline / 2;
      }
    }

    &:not(.button--full-width) {
      max-width: $button-max-size;
    }
  }
}

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

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

// background / color default mappings
.bg-brand {
  &--gradient-orange,
  &--orange,
  &--gradient-blue,
  &--blue,
  &--dark-grey,
  &--gradient-purple {
    .button,
    a.button {
      @extend %button--white;
    }
    .modal .button,
    a.modal .button {
      @extend %button--white;
    }
  }
}