<commit_before>@import "../../variables";
@import "../../breakpoints";
@import "../../mixins";

.icon-button {
  display: flex;
  padding: 16px;
  align-items: center;
  transition: opacity .2s ease-in-out;
  -webkit-transform: translate3d(0,0,0); // prevents flickering on :hover in WebKit-based Browsers like Safari or Chrome (WebKit/Blink)

  /* fallback */
  color: $color-srf-warmgrey-900;

  /* theme */
  @supports (--foo: bar) {
    color: var(--theme-color-nav, $color-srf-warmgrey-900);
  }

  &:hover {
    background-color: $color-srf-warmgrey-10;
  }

  &:active {
    background-color: $color-srf-warmgrey-25;
  }
}

.icon-button__text {
  margin-left: 8px;
  font-family: $font-regular;
  @include fontSize(14);
  line-height: 1.14;
}

// prevent empty spaces to change the span's size
.icon-button__icon {
  font-size: 0;

  /* fallback */
  filter: none;

  /* theme */
  @supports (--foo: bar) {
    filter: var(--theme-icon-filter, none);
  }
}

// no padding on the right on deksop+
.icon-button--spaceless-right-tablet {
  @include desktop-up {
    padding-right: 0;
  }
}

// no padding on the right on tablet+
.icon-button--spaceless-right-mobile {
  @include tablet-up {
    padding-right: 0;
  }
}

// Text of the button is only visible on desktop+
.icon-button--collapsing-text-tablet {
  @include desktop-down {
    .icon-button__text {
      display: none;
    }
  }
}

// Text of the button is only visible on tablet+
.icon-button--collapsing-text-mobile {
  @include smartphone {
    .icon-button__text {
      display: none;
    }
  }
}<commit_msg>Added smaller size for icon button SRFCMSAL-2501<commit_after>@import "../../variables";
@import "../../breakpoints";
@import "../../mixins";

.icon-button {
  display: flex;
  padding: 16px;
  align-items: center;
  transition: opacity .2s ease-in-out;
  -webkit-transform: translate3d(0,0,0); // prevents flickering on :hover in WebKit-based Browsers like Safari or Chrome (WebKit/Blink)

  /* fallback */
  color: $color-srf-warmgrey-900;

  /* theme */
  @supports (--foo: bar) {
    color: var(--theme-color-nav, $color-srf-warmgrey-900);
  }

  &:hover {
    background-color: $color-srf-warmgrey-10;
  }

  &:active {
    background-color: $color-srf-warmgrey-25;
  }
}

.icon-button__text {
  margin-left: 8px;
  font-family: $font-regular;
  @include fontSize(14);
  line-height: 1.14;
}

// prevent empty spaces to change the span's size
.icon-button__icon {
  font-size: 0;

  /* fallback */
  filter: none;

  /* theme */
  @supports (--foo: bar) {
    filter: var(--theme-icon-filter, none);
  }
}

// no padding on the right on deksop+
.icon-button--spaceless-right-tablet {
  @include desktop-up {
    padding-right: 0;
  }
}

// no padding on the right on tablet+
.icon-button--spaceless-right-mobile {
  @include tablet-up {
    padding-right: 0;
  }
}

// Text of the button is only visible on desktop+
.icon-button--collapsing-text-tablet {
  @include desktop-down {
    .icon-button__text {
      display: none;
    }
  }
}

// Text of the button is only visible on tablet+
.icon-button--collapsing-text-mobile {
  @include smartphone {
    .icon-button__text {
      display: none;
    }
  }
}

.icon-button--small {
  padding: 12px;
}
{'fraction_non_alphanumeric': 0.16043276661514683, 'fraction_numerical': 0.01792890262751159, 'mean_word_length': 2.728110599078341, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, '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': '3101781', 'n_tokens_mistral': 1235, 'n_tokens_neox': 1167, 'n_words': 271}