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

.teaser-info-wrapper {
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-grow: 1;
  align-items: flex-end;
  flex-shrink: 0;

  @include tablet-up {
    margin-top: 12px;
  }
}

// hide empty teaser infos to not introduce additional gaps in the teaser
.teaser-info-wrapper--empty {
  display: none;
}

.teaser-info-innerwrapper {
  line-height: 1;
  margin-bottom: -3px; //aligns baseline of text to image on s-teaser
}

.teaser-info {
  position: relative;
  margin-right: 18px;
  font-family: $font-regular;
  @include fontSize(12);
  line-height: 1.17;
  @include breakLongWords;

  /* theme */
  @include customPropWithFallback('color', '--teaser-color-text', $color-text-default);

  &::after {
    content: '';
    position: absolute;
    top: calc(50% - 1px);
    right: -11px;
    width: 2px;
    height: 2px;
    border-radius: 100%;
    background-color: #b9b7ac;
  }

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

    &::after {
      display: none;
    }
  }
}

.teaser-info--search {
  color: $color-image-dummy;

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

.teaser-info--with-icon {
  padding-left: 20px;
  display: inline-flex;

  &::before {
    content: '';
    position: absolute;
    left: 0;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
    height: 14px;
    width: 14px;
  }
}



.teaser-info--media-caption,
.teaser-info--live-pre {
  font-family: $font-regular;

  /* theme */
  @include customPropWithFallback('color', '--teaser-color-text-emphasis', $color-text-light);
}

.teaser-info__duration,
.teaser-info__source {
  strong {
    font-family: $font-medium;

    /* theme */
    @include customPropWithFallback('color', '--teaser-color-text', $color-text-default);
  }
}

.teaser-info__duration {
  display: none;
}

.teaser--size-s {
  .teaser-info__duration {
    display: inline;
  }
}

.teaser--size-s-on-mobile {
  @include smartphone {
    .teaser-info__duration {
      display: inline;
    }
  }
}



.teaser-info--live-live,
.teaser-info--live-live strong,
.teaser-info--new,
.teaser-info--new strong {
  /* theme */
  @include customPropWithFallback('color', '--teaser-color-info-new', $color-srf-light);
}

.teaser-info--visited-and-updated,
.teaser-info--mediaicon-video,
.teaser-info--mediaicon-audio,
.teaser-info--mediaicon-image {
    /* theme */
    @include customPropWithFallback('color', '--teaser-color-info-updated', $color-text-light);
}



/* Theme note: Themes should be declared via custom properties, but this does not work here (propably 'cause of gulp or something) therefore these assets are declared just below these lines */

.teaser-info--visited {
  /* theme */
  @include customPropWithFallback('color', '--teaser-color-info-visited', $color-button-success);

  &::before {
    background-image: url(../img/seen_blue.svg);
  }
}

/* theme (see theme note) */
.teaser--theme-dark,
.teaser--theme-breaking {
  .teaser-info--visited::before {
    background-image: url(../img/small_tick-white.svg);
  }
}



.teaser-info--visited-and-recently-updated {
  /* theme */
  @include customPropWithFallback('color', '--teaser-color-info-new', $color-srf-light);

  &::before {
    background-image: url(../img/retry_red.svg);
    animation: rotateSparselyAnimation 10s 5s infinite;
  }
}

/* theme (see theme note) */
.teaser--theme-dark,
.teaser--theme-breaking {
  .teaser-info--visited-and-recently-updated::before {
    background-image: url(../img/retry_white.svg);
  }
}



.teaser-info--visited-and-updated {
  &::before {
    background-image: url(../img/retry_grey.svg);
    animation: rotateSparselyAnimation 10s 5s infinite;
  }
}

/* theme (see theme note) */
.teaser--theme-dark,
.teaser--theme-breaking {
  .teaser-info--visited-and-updated::before {
    background-image: url(../img/retry_white.svg);
  }
}



.teaser-info--mediaicon-video {
  &::before {
    background-image: url(../img/icon/play-video-circle-grey-tiny.svg);
  }
}

/* theme (see theme note) */
.teaser--theme-dark,
.teaser--theme-breaking {
  .teaser-info--mediaicon-video::before {
    background-image: url(../img/icon/play-video-circle-white-tiny.svg);
  }
}



.teaser-info--mediaicon-audio {
  &::before {
    background-image: url(../img/icon/play-audio-grey-tiny.svg);
  }
}

/* theme (see theme note) */
.teaser--theme-dark,
.teaser--theme-breaking {
  .teaser-info--mediaicon-audio::before {
    background-image: url(../img/icon/play-audio-white-tiny.svg);
  }
}



.teaser-info--mediaicon-image {
  &::before {
    background-image: url(../img/icon/image-gallery-grey-tiny.svg);
  }
}

/* theme (see theme note) */
.teaser--theme-dark,
.teaser--theme-breaking {
  .teaser-info--mediaicon-image::before {
    background-image: url(../img/icon/image-gallery-white-tiny.svg);
  }
}



// larger teaser sizes (L/XL) have larger gaps between previous content and teaser info
.teaser-info--size-large {
  margin: 16px 0 0;

  @include desktop-up {
    margin-top: 20px;
  }
}
<commit_msg>Updates old color variable to new one<commit_after>@import '../../variables';
@import '../../mixins';
@import '../../breakpoints';

.teaser-info-wrapper {
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-grow: 1;
  align-items: flex-end;
  flex-shrink: 0;

  @include tablet-up {
    margin-top: 12px;
  }
}

// hide empty teaser infos to not introduce additional gaps in the teaser
.teaser-info-wrapper--empty {
  display: none;
}

.teaser-info-innerwrapper {
  line-height: 1;
  margin-bottom: -3px; //aligns baseline of text to image on s-teaser
}

.teaser-info {
  position: relative;
  margin-right: 18px;
  font-family: $font-regular;
  @include fontSize(12);
  line-height: 1.17;
  @include breakLongWords;

  /* theme */
  @include customPropWithFallback('color', '--teaser-color-text', $color-text-default);

  &::after {
    content: '';
    position: absolute;
    top: calc(50% - 1px);
    right: -11px;
    width: 2px;
    height: 2px;
    border-radius: 100%;
    background-color: #b9b7ac;
  }

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

    &::after {
      display: none;
    }
  }
}

.teaser-info--search {
  color: $color-srf-warmgrey-100;

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

.teaser-info--with-icon {
  padding-left: 20px;
  display: inline-flex;

  &::before {
    content: '';
    position: absolute;
    left: 0;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
    height: 14px;
    width: 14px;
  }
}



.teaser-info--media-caption,
.teaser-info--live-pre {
  font-family: $font-regular;

  /* theme */
  @include customPropWithFallback('color', '--teaser-color-text-emphasis', $color-text-light);
}

.teaser-info__duration,
.teaser-info__source {
  strong {
    font-family: $font-medium;

    /* theme */
    @include customPropWithFallback('color', '--teaser-color-text', $color-text-default);
  }
}

.teaser-info__duration {
  display: none;
}

.teaser--size-s {
  .teaser-info__duration {
    display: inline;
  }
}

.teaser--size-s-on-mobile {
  @include smartphone {
    .teaser-info__duration {
      display: inline;
    }
  }
}



.teaser-info--live-live,
.teaser-info--live-live strong,
.teaser-info--new,
.teaser-info--new strong {
  /* theme */
  @include customPropWithFallback('color', '--teaser-color-info-new', $color-srf-light);
}

.teaser-info--visited-and-updated,
.teaser-info--mediaicon-video,
.teaser-info--mediaicon-audio,
.teaser-info--mediaicon-image {
    /* theme */
    @include customPropWithFallback('color', '--teaser-color-info-updated', $color-text-light);
}



/* Theme note: Themes should be declared via custom properties, but this does not work here (propably 'cause of gulp or something) therefore these assets are declared just below these lines */

.teaser-info--visited {
  /* theme */
  @include customPropWithFallback('color', '--teaser-color-info-visited', $color-button-success);

  &::before {
    background-image: url(../img/seen_blue.svg);
  }
}

/* theme (see theme note) */
.teaser--theme-dark,
.teaser--theme-breaking {
  .teaser-info--visited::before {
    background-image: url(../img/small_tick-white.svg);
  }
}



.teaser-info--visited-and-recently-updated {
  /* theme */
  @include customPropWithFallback('color', '--teaser-color-info-new', $color-srf-light);

  &::before {
    background-image: url(../img/retry_red.svg);
    animation: rotateSparselyAnimation 10s 5s infinite;
  }
}

/* theme (see theme note) */
.teaser--theme-dark,
.teaser--theme-breaking {
  .teaser-info--visited-and-recently-updated::before {
    background-image: url(../img/retry_white.svg);
  }
}



.teaser-info--visited-and-updated {
  &::before {
    background-image: url(../img/retry_grey.svg);
    animation: rotateSparselyAnimation 10s 5s infinite;
  }
}

/* theme (see theme note) */
.teaser--theme-dark,
.teaser--theme-breaking {
  .teaser-info--visited-and-updated::before {
    background-image: url(../img/retry_white.svg);
  }
}



.teaser-info--mediaicon-video {
  &::before {
    background-image: url(../img/icon/play-video-circle-grey-tiny.svg);
  }
}

/* theme (see theme note) */
.teaser--theme-dark,
.teaser--theme-breaking {
  .teaser-info--mediaicon-video::before {
    background-image: url(../img/icon/play-video-circle-white-tiny.svg);
  }
}



.teaser-info--mediaicon-audio {
  &::before {
    background-image: url(../img/icon/play-audio-grey-tiny.svg);
  }
}

/* theme (see theme note) */
.teaser--theme-dark,
.teaser--theme-breaking {
  .teaser-info--mediaicon-audio::before {
    background-image: url(../img/icon/play-audio-white-tiny.svg);
  }
}



.teaser-info--mediaicon-image {
  &::before {
    background-image: url(../img/icon/image-gallery-grey-tiny.svg);
  }
}

/* theme (see theme note) */
.teaser--theme-dark,
.teaser--theme-breaking {
  .teaser-info--mediaicon-image::before {
    background-image: url(../img/icon/image-gallery-white-tiny.svg);
  }
}



// larger teaser sizes (L/XL) have larger gaps between previous content and teaser info
.teaser-info--size-large {
  margin: 16px 0 0;

  @include desktop-up {
    margin-top: 20px;
  }
}

{'fraction_non_alphanumeric': 0.1761825482322985, 'fraction_numerical': 0.01087062971305455, 'mean_word_length': 2.948955916473318, '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': '1554274', 'n_tokens_mistral': 3868, 'n_tokens_neox': 3695, 'n_words': 654}