/// Button image with text
///
/// @group buttons
///
/// @example scss - usage
///
///   @include k-ButtonImageWithText;
///
/// @example html
///
///   <button class="k-ButtonImageWithText">
///     <span class="k-ButtonImage">
///       <img class="k-ButtonImage__img"
///            src="…"
///            width="…"
///            height="…"
///            alt="…" />
///     </span>
///
///     <p class="k-ButtonImageWithText__text">Firstname</p>
///   </button>

@mixin k-ButtonImageWithText {
  $text-font: 'regular';
  $text-size: -1; // 14px
  $text-line-height: 1;

  $color: map-get($k-colors, 'font-1');
  $color-hover: map-get($k-colors, 'primary-1');
  $color-active: map-get($k-colors, 'primary-3');

  .k-ButtonImageWithText {
    display: flex;
    align-items: center;
    align-self: flex-start;

    padding: 0;

    // Overrides default values of <button>
    border: none;
    background: none;

    cursor: pointer;
  }

  .k-ButtonImageWithText--vertical {
    flex-direction: column;
  }

  .k-ButtonImageWithText__text {
    padding: k-px-to-rem(10px);
    margin: 0;
    text-align: left;

    @include k-typographyFont($text-font);
    @include k-typographyFontSize($text-size, $text-line-height);

    .k-ButtonImageWithText:hover &,
    &:hover {
      color: $color-hover;
    }

    .k-ButtonImageWithText:active &,
    &:active {
      color: $color-active;
    }

    @include k-media-max('m') {
      display: none;
    }

    @include k-media-within('s') {
      display: block;
    }
  }

  // Modifiers.

  .k-ButtonImageWithText__text--withoutPaddingRight {
    padding-right: 0;
  }
}