<commit_before>$coverImageSize: 112px;

.show-info__info-wrap {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  position: relative;
  margin: 0 auto;
  padding: 0 24px 12px;
  max-width: $content-width;

  @include tablet-up {
    padding: 0 32px 12px;
  }

  @include desktop-wide {
    padding: 0 0 12px;
  }
}

.show-info__cover {
  width: $coverImageSize;
  height: $coverImageSize;
  margin: 0 12px 16px 0;

  @include tablet-up {
    position: absolute;
    left: 32px;
    margin-right: 24px;
  }

  @include desktop-wide {
    left: 0;
  }
}

.show-info__cover-image {
  width: $coverImageSize;
  height: $coverImageSize;
}

.show-info__header {
  flex-basis: calc(100% - (#{$coverImageSize} + 12px));

  @include tablet-up {
    flex-basis: calc(100% - (#{$coverImageSize} + 24px));
  }
}

.show-info__content {
  flex-basis: 100%;

  @include tablet-up {
    flex-basis: calc(100% - (#{$coverImageSize} + 24px));
  }
}

.show-info__link {
  margin-bottom: 12px;
  font-family: $font-regular;
  @include fontSize(14);
  line-height: $secondary-line-height-ratio;
  display: inline-block;

  @include tablet-up {
    @include fontSize(16);
  }

  &:hover {
    .svg-icon {
      filter: brightness(.6);
    }
  }

  .svg-icon {
    margin-bottom: -7px;

    @include smartphone {
      width: 20px;
    }
  }
}

.show-info__link--black {
  font-family: $font-medium;
  color: inherit;
  padding: 16px;
  margin: 0 0 0 -16px;

  @include tablet-up {
    display: inline-block;
  }

  @include desktop-wide {
    padding-left: 0;
    margin-left: 0;
  }

  &:hover {
    color: inherit;

    .svg-icon {
      filter: brightness(1);
    }
  }

  @include smartphone {
    @include fontSize(16);
    margin-left: 0;

    .svg-icon {
      width: 24px;
    }
  }
}

.show-info__title {
  font-family: $font-medium;
  @include fontSize(24);
  line-height: $emphasize-line-height-ratio;
  color: $color-srf-warmgrey-1100;
  margin-top: 0;
  margin-bottom: 8px;

  a {
    color: inherit;
  }

  @include desktop-up {
    @include fontSize(28);
  }
}

.show-info__title--compact {
  @include fontSize(18);

  @include tablet-up {
    @include fontSize(20);
  }
}

.show-info__body {
  font-family: $font-light;
  @include fontSize(16);
  line-height: $default-line-height-ratio;
  color: $color-srf-warmgrey-1100;
  margin-bottom: 24px;
  display: block;

  &:hover {
    color: inherit;
  }
}

.show-info__more {
  &::after {
    content: '';
    position: absolute;
    @include caret('dark', 'right', 'small');
  }
}

.show-info__title,
.show-info__body,
.show-info__categories {
  @include tablet-up {
    max-width: 578px;
  }

  @include desktop-wide {
    max-width: 756px;
  }
}

.show-info__actions {
  display: flex;
  flex-wrap: wrap;

  .pill-button {
    margin: 16px 16px 0 0;

    @include smartphone {
      width: 100%;
      margin-right: 0;
    }
  }

  .button--neutral {
    width: auto;
    position: relative;
    margin: 16px 16px 0 0;

    &:last-of-type {
      margin-right: 0;
    }

    &:before {
      content: '';
      height: 0;
      width: 0;
      position: absolute;
      bottom: -14px;
      left: calc(50% - 12px);
      border-style: solid;
      border-width: 12px;
      border-color: transparent transparent $color-srf-warmgrey-10 transparent;
      filter: drop-shadow(0px -1px 0 $color-srf-warmgrey-50);
      transform-origin: bottom center;
      transform: scale3d(0,0,0);
      transition: transform .4s ease-in;
    }
  }
}

.button--neutral.show-info__actions-button--active {
  position: relative;
  background-color: $color-srf-warmgrey-50;

  &:before {<commit_msg>Fixes Spacing between neutral-buttons<commit_after>$coverImageSize: 112px;

.show-info__info-wrap {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  position: relative;
  margin: 0 auto;
  padding: 0 24px 12px;
  max-width: $content-width;

  @include tablet-up {
    padding: 0 32px 12px;
  }

  @include desktop-wide {
    padding: 0 0 12px;
  }
}

.show-info__cover {
  width: $coverImageSize;
  height: $coverImageSize;
  margin: 0 12px 16px 0;

  @include tablet-up {
    position: absolute;
    left: 32px;
    margin-right: 24px;
  }

  @include desktop-wide {
    left: 0;
  }
}

.show-info__cover-image {
  width: $coverImageSize;
  height: $coverImageSize;
}

.show-info__header {
  flex-basis: calc(100% - (#{$coverImageSize} + 12px));

  @include tablet-up {
    flex-basis: calc(100% - (#{$coverImageSize} + 24px));
  }
}

.show-info__content {
  flex-basis: 100%;

  @include tablet-up {
    flex-basis: calc(100% - (#{$coverImageSize} + 24px));
  }
}

.show-info__link {
  margin-bottom: 12px;
  font-family: $font-regular;
  @include fontSize(14);
  line-height: $secondary-line-height-ratio;
  display: inline-block;

  @include tablet-up {
    @include fontSize(16);
  }

  &:hover {
    .svg-icon {
      filter: brightness(.6);
    }
  }

  .svg-icon {
    margin-bottom: -7px;

    @include smartphone {
      width: 20px;
    }
  }
}

.show-info__link--black {
  font-family: $font-medium;
  color: inherit;
  padding: 16px;
  margin: 0 0 0 -16px;

  @include tablet-up {
    display: inline-block;
  }

  @include desktop-wide {
    padding-left: 0;
    margin-left: 0;
  }

  &:hover {
    color: inherit;

    .svg-icon {
      filter: brightness(1);
    }
  }

  @include smartphone {
    @include fontSize(16);
    margin-left: 0;

    .svg-icon {
      width: 24px;
    }
  }
}

.show-info__title {
  font-family: $font-medium;
  @include fontSize(24);
  line-height: $emphasize-line-height-ratio;
  color: $color-srf-warmgrey-1100;
  margin-top: 0;
  margin-bottom: 8px;

  a {
    color: inherit;
  }

  @include desktop-up {
    @include fontSize(28);
  }
}

.show-info__title--compact {
  @include fontSize(18);

  @include tablet-up {
    @include fontSize(20);
  }
}

.show-info__body {
  font-family: $font-light;
  @include fontSize(16);
  line-height: $default-line-height-ratio;
  color: $color-srf-warmgrey-1100;
  margin-bottom: 24px;
  display: block;

  &:hover {
    color: inherit;
  }
}

.show-info__more {
  &::after {
    content: '';
    position: absolute;
    @include caret('dark', 'right', 'small');
  }
}

.show-info__title,
.show-info__body,
.show-info__categories {
  @include tablet-up {
    max-width: 578px;
  }

  @include desktop-wide {
    max-width: 756px;
  }
}

.show-info__actions {
  display: flex;
  flex-wrap: wrap;

  .pill-button {
    margin: 16px 16px 0 0;

    @include smartphone {
      width: 100%;
      margin-right: 0;
    }
  }

  .button--neutral {
    width: auto;
    position: relative;
    margin: 16px 16px 0 0;

    &:last-child {
      margin-right: 0;
    }

    &:before {
      content: '';
      height: 0;
      width: 0;
      position: absolute;
      bottom: -14px;
      left: calc(50% - 12px);
      border-style: solid;
      border-width: 12px;
      border-color: transparent transparent $color-srf-warmgrey-10 transparent;
      filter: drop-shadow(0px -1px 0 $color-srf-warmgrey-50);
      transform-origin: bottom center;
      transform: scale3d(0,0,0);
      transition: transform .4s ease-in;
    }
  }
}

.button--neutral.show-info__actions-button--active {
  position: relative;
  background-color: $color-srf-warmgrey-50;

  &:before {
{'fraction_non_alphanumeric': 0.14895947426067907, 'fraction_numerical': 0.038608981380065716, 'mean_word_length': 2.5634146341463415, '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': '2491695', 'n_tokens_mistral': 3052, 'n_tokens_neox': 2723, 'n_words': 557}