.button--icon-text {
  @include font-style;
  @include text-ellipsis;
  color: returnColorCSSVar('brand-primary');
  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 {
    color: currentColor;
    position: relative;
    transform: scale(0.667);
  }

  // ! deprecate
  .bg-brand--blue & {
    color: $color-brand--white;
  }

  .bg-brand--dark-blue & {
    color: $color-brand--four;
  }

  .bg-brand--off-white &,
  .bg-brand--turquoise &,
  .bg-brand--yellow & {
    color: $color-brand--two;
  }

  .bg-brand--red & {
    color: $color--two-180;
  }
  // ! //

  @include bg-variants {
    color: variant-property('ghostTextIdle');
  }
}

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

// viewport l
@include viewport--l {
  .button--icon-text {
    .bg-brand--yellow &,
    .bg-brand--white &,
    .bg-brand--off-white & {
      color: $color-brand--four;
    }

    .text--dark-from-l & {
      color: returnColorCSSVar('brand-secondary');

      .icon:hover {
        color: returnColorCSSVar('brand-secondary');
      }
    }

    .text--light-from-l & {
      color: returnColorCSSVar('white');

      .icon:hover {
        color: returnColorCSSVar('white');
      }
    }

    &: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;
      }
    }
  }
}