<commit_before>@import '../../../css/settings/index.scss';

$rating-color: #2b6692;
$empty-star: '\2606';
$filled-star: '\2605';

@mixin star-icon($url) {
  &::after {
    content: '';
    background-image: svg-load('#{$url}');
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

@mixin star-fallback($star, $trim: false) {
  $width: auto;
  $translatex: -50%;
  $left: 50%;
  @if $trim {
    $width: calc(1em * #{$trim});
    $translatex: calc(-50% - (0.5em * (1 - #{$trim})));
  }

  &::before {
    content: $star;
    display: block;
    position: absolute;
    left: $left;
    top: 50%;
    transform: translate($translatex, -50%);
    font-size: 0.5em;
    color: #BD7B2D;
    width: $width;
    overflow: hidden;
  }
}

@mixin cdr-rating-small() {
  & .cdr-rating__icon {
    width: $cdr-icon-size-sm;
    height: $cdr-icon-size-sm;
    font-size: $cdr-icon-size-sm;
  }

  & .cdr-rating__count {
    @include cdr-text-utility-sans-100;

    margin-left: $cdr-space-quarter-x;
  }
}

@mixin cdr-rating-medium($parent-selector: '& ') {
  #{$parent-selector}.cdr-rating__icon {
    width: $cdr-icon-size;
    height: $cdr-icon-size;
    font-size: $cdr-icon-size;
  }

  #{$parent-selector}.cdr-rating__count {
    @include cdr-text-utility-sans-200;

    margin-left: $cdr-space-half-x;
  }
}

@mixin cdr-rating-large() {
  & .cdr-rating__icon {
    width: $cdr-icon-size-lg;
    height: $cdr-icon-size-lg;
    font-size: $cdr-icon-size-lg;
  }

  & .cdr-rating__count {
    @include cdr-text-utility-sans-300;
  }
}

@include cdr-rating-medium('');

.cdr-rating {
  display: flex;
  align-items: center;
  position: relative;
  line-height: 1;

  color: $cdr-color-text-rating-default;

  /* Elements
    ========================================================================== */

  &__number {
    font-weight: 600;
  }

  &__ratings {
    display: flex;
  }

  &__icon {
    position: relative;
    z-index: 1;
  }

  &__caption-sr {
    @include cdr-display-sr-only-mixin;
  }

  /* Placeholder
    ========== */

  &__placeholder {
    @include star-icon('static/star-0.svg');
    @include star-fallback($empty-star);

    &--no-reviews {
      @include star-icon('static/star-null.svg');
      @include star-fallback($empty-star);
    }
  }

  /* Stars
    ========== */

  &__100 {
    @include star-icon('static/star-100.svg');
    @include star-fallback($filled-star);
  }

  &__75 {
    @include star-icon('static/star-75.svg');
    @include star-fallback($filled-star, .75);
  }

  &__50 {
    @include star-icon('static/star-50.svg');
    @include star-fallback($filled-star, .5);
  }

  &__25 {
    @include star-icon('static/star-25.svg');
    @include star-fallback($filled-star, .33);
  }


  /* Modifiers
    ========================================================================== */

  /* Linked
    ========== */

  &--linked {
    display: inline-flex;
    text-decoration: none;

    & .cdr-rating__count {
      &:hover,
      &:active,
      &:focus {
        color: $cdr-color-text-rating-hover;
        text-decoration: underline;
      }

      & > .cdr-rating__number {
        border-right: 1px solid $cdr-color-text-rating-separator;
        padding: 0 $cdr-space-quarter-x;
        margin-right: $cdr-space-quarter-x;
      }
    }
  }

  /* Large
    ========== */

  &--large {
    @include cdr-rating-large;
  }

  /* Medium
    ========== */

  &--medium {
    @include cdr-rating-medium();
  }

  /* Small
    ========== */

  &--small {
    @include cdr-rating-small;<commit_msg>fix(rating): set spacing between separator to 0.6rem<commit_after>@import '../../../css/settings/index.scss';

$rating-color: #2b6692;
$empty-star: '\2606';
$filled-star: '\2605';

@mixin star-icon($url) {
  &::after {
    content: '';
    background-image: svg-load('#{$url}');
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

@mixin star-fallback($star, $trim: false) {
  $width: auto;
  $translatex: -50%;
  $left: 50%;
  @if $trim {
    $width: calc(1em * #{$trim});
    $translatex: calc(-50% - (0.5em * (1 - #{$trim})));
  }

  &::before {
    content: $star;
    display: block;
    position: absolute;
    left: $left;
    top: 50%;
    transform: translate($translatex, -50%);
    font-size: 0.5em;
    color: #BD7B2D;
    width: $width;
    overflow: hidden;
  }
}

@mixin cdr-rating-small() {
  & .cdr-rating__icon {
    width: $cdr-icon-size-sm;
    height: $cdr-icon-size-sm;
    font-size: $cdr-icon-size-sm;
  }

  & .cdr-rating__count {
    @include cdr-text-utility-sans-100;

    margin-left: $cdr-space-quarter-x;
  }
}

@mixin cdr-rating-medium($parent-selector: '& ') {
  #{$parent-selector}.cdr-rating__icon {
    width: $cdr-icon-size;
    height: $cdr-icon-size;
    font-size: $cdr-icon-size;
  }

  #{$parent-selector}.cdr-rating__count {
    @include cdr-text-utility-sans-200;

    margin-left: $cdr-space-half-x;
  }
}

@mixin cdr-rating-large() {
  & .cdr-rating__icon {
    width: $cdr-icon-size-lg;
    height: $cdr-icon-size-lg;
    font-size: $cdr-icon-size-lg;
  }

  & .cdr-rating__count {
    @include cdr-text-utility-sans-300;
  }
}

@include cdr-rating-medium('');

.cdr-rating {
  display: flex;
  align-items: center;
  position: relative;
  line-height: 1;

  color: $cdr-color-text-rating-default;

  /* Elements
    ========================================================================== */

  &__number {
    font-weight: 600;
  }

  &__ratings {
    display: flex;
  }

  &__icon {
    position: relative;
    z-index: 1;
  }

  &__caption-sr {
    @include cdr-display-sr-only-mixin;
  }

  /* Placeholder
    ========== */

  &__placeholder {
    @include star-icon('static/star-0.svg');
    @include star-fallback($empty-star);

    &--no-reviews {
      @include star-icon('static/star-null.svg');
      @include star-fallback($empty-star);
    }
  }

  /* Stars
    ========== */

  &__100 {
    @include star-icon('static/star-100.svg');
    @include star-fallback($filled-star);
  }

  &__75 {
    @include star-icon('static/star-75.svg');
    @include star-fallback($filled-star, .75);
  }

  &__50 {
    @include star-icon('static/star-50.svg');
    @include star-fallback($filled-star, .5);
  }

  &__25 {
    @include star-icon('static/star-25.svg');
    @include star-fallback($filled-star, .33);
  }


  /* Modifiers
    ========================================================================== */

  /* Linked
    ========== */

  &--linked {
    display: inline-flex;
    text-decoration: none;

    & .cdr-rating__count {
      &:hover,
      &:active,
      &:focus {
        color: $cdr-color-text-rating-hover;
        text-decoration: underline;
      }

      & > .cdr-rating__number {
        border-right: 1px solid $cdr-color-text-rating-separator;
        padding: 0 0.6rem;
        margin-right: 0.6rem;
      }
    }
  }

  /* Large
    ========== */

  &--large {
    @include cdr-rating-large;
  }

  /* Medium
    ========== */

  &--medium {
    @include cdr-rating-medium();
  }

  /* Small
    ========== */

  &--small {
    @include cdr-rating-small;
{'fraction_non_alphanumeric': 0.23346735061694163, 'fraction_numerical': 0.022736725356994315, 'mean_word_length': 2.5019417475728156, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 5, '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': '3390062', 'n_tokens_mistral': 2892, 'n_tokens_neox': 2667, 'n_words': 421}