.button--icon-text {
  @include font-style;
  @include text-ellipsis;
  color: $color-brand--one;
  cursor: pointer;
  font-family: $font-family-theme;
  padding: 0;
  position: relative;

  &:focus {
    outline: auto;
  }

  &,
  &:hover {
    align-items: center;
    background: none;
    border: 0;
    display: inline-flex;
    height: $baseline * 4;
    margin-left: -10px; // compensate for initial scale on icon
    line-height: normal;
    outline: none;
    overflow: visible;
  }

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

  .icon {
    position: relative;
    transform: scale(
      0.667
    ); // load bigger icon initially for smoother animation
    // selector chained to add specificity over defaults
    &.icon,
    &.icon:hover {
      color: currentColor;
    }
  }

  .bg-brand--gradient-orange &,
  .bg-brand--orange &,
  .bg-brand--gradient-blue &,
  .bg-grand--blue &,
  .bg-brand--dark-grey & {
    color: $color-brand--white;
  }
}

.content-block .button--icon-text {
  margin-top: $spacing--m;
  vertical-align: middle;
}

// viewport l
@include viewport--l {
  .button--icon-text.button--icon-text {
    //chained to add specificity
    color: $color-brand--white;

    .text--dark-from-l & {
      color: $color-brand--two;
    }

    .preview & {
      color: $color-brand--one;
    }

    &:hover .icon {
      @include animation-pulse('pulse', 0.667, 0.72);
      animation: pulse 1s infinite ease-out;
    }
    // disable animation for touch devices
    @include hover-touch {
      .icon {
        animation: none;
      }
    }
  }
}