<commit_before>/// 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 {
  $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-typographyFontSize(-1, 1);
    @include k-typographyFont('source-sans-semi-bold');

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

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

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

  // Modifiers.

  .k-ButtonImageWithText__text--withoutPaddingRight {
    padding-right: 0;
  }
}<commit_msg>Show firstname when we are on S responsive version (#203)<commit_after>/// 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 {
  $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-typographyFontSize(-1, 1);
    @include k-typographyFont('source-sans-semi-bold');

    .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;
  }
}
{'fraction_non_alphanumeric': 0.18520900321543407, 'fraction_numerical': 0.007395498392282958, 'mean_word_length': 2.190769230769231, 'pattern_counts': {'":': 0, '<': 19, '<?xml version=': 0, '>': 19, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7489187', 'n_tokens_mistral': 1115, 'n_tokens_neox': 1074, 'n_words': 193}