@mixin root-container() { ... }@mixin root-container() { 
  display: inline-flex;
 }

@mixin rating-heading() { ... }@mixin rating-heading() { 
  @include typography.style-as('section-2');

  margin-bottom: spacing.get('s2');
 }

@mixin rating-control() { ... }@mixin rating-control() { 
  padding: 0 spacing.get('s1');
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  user-select: none;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  -webkit-tap-highlight-color: transparent;

  &:first-child {
    padding-left: 0;
  }

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

@mixin rating-icon() { ... }@mixin rating-icon() { 
  pointer-events: none;
  display: block;
  height: settings.$icon-size;
  width: settings.$icon-size;
  stroke-width: 1.5px;
  transform-origin: 50%;
  transition: transform 0.2s ease-out;
  @media (prefers-reduced-motion: reduce) {
    transition: none;
  }
 }

@mixin button-focus() { ... }@mixin button-focus() { 
  outline: 0;
 }

@mixin icon-focus-indicator-visible() { ... }@mixin icon-focus-indicator-visible() { 
  opacity: 1;
 }

@mixin icon-focus-indicator() { ... }@mixin icon-focus-indicator() { 
  fill: transparent;
  stroke: color.get('ui-bg', '06');
  opacity: 0;
 }

@mixin icon-colors-transition() { ... }@mixin icon-colors-transition() { 
  transition: fill 0.2s, stroke 0.2s, opacity 0.2s;

  @media (prefers-reduced-motion: reduce) {
    transition: none;
  }
 }

@mixin active-colors() { ... }@mixin active-colors() { 
  fill: color.get('ui-elements', 'rating', 'primary');
  stroke: color.get('ui-elements', 'rating', '02');
  opacity: 1;
 }

@mixin inactive-colors() { ... }@mixin inactive-colors() { 
  fill: color.get('ui-bg', '02');
  stroke: color.get('ui-bg', '06');
  opacity: 0.7;
 }

@mixin active-scale() { ... }@mixin active-scale() { 
  @media (hover: hover) {
    transform: scale(settings.$scaled-icon);
  }

  transition-timing-function: cubic-bezier(0.26, 0.62, 0.21, 1.5);

  @if $duration {
    transition-duration: $duration;
  }
 }

@mixin inactive-scale() { ... }@mixin inactive-scale() { 
  transform: scale(1);
  transition-timing-function: ease-out;

  @if $duration {
    transition-duration: $duration;
  }
  @if $active-state {
    @media (hover: none) {
      transform: scale(0.8);
    }
  }
 }

$icon-size: unit.rem(48px);

$scaled-icon: math.div(unit.rem(56px), $icon-size);