@layer components {
  :root {
    --rating-icon-count: 5;
    --rating-icon-size: 24px;
    --rating-percentage: 0;
    --rating-icon-gap: 4px;
    --rating-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='2 2 20 20'%3E%3Cpath d='M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/%3E%3C/svg%3E");
  }

  .rating {
    position: relative;
    display: inline-block;
    width: calc(var(--rating-icon-count) * var(--rating-icon-size));
    height: var(--rating-icon-size);
  }

  .rating::before,
  .rating::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-mask-image: var(--rating-icon);
    mask-image: var(--rating-icon);
    -webkit-mask-repeat: repeat;
    mask-repeat: repeat;
    -webkit-mask-size: var(--rating-icon-size) var(--rating-icon-size);
    mask-size: var(--rating-icon-size) var(--rating-icon-size);
  }

  .rating::before {
    background-color: var(--color-background);
  }

  .rating::after {
    background-color: var(--color-foreground);
    width: calc(var(--rating-percentage) * 100%);
  }

  .rating-input {
    display: inline-flex;
    position: relative;
    background-color: transparent !important;
  }

  .rating-input.wrapper,
  .rating-input.wrapper * {
    background-color: transparent !important;
  }

  .rating-input input[type='radio'] {
    appearance: none;
    -webkit-appearance: none;
    width: var(--rating-icon-size);
    height: var(--rating-icon-size);
    margin: 0;
    padding: 0 calc(var(--rating-icon-gap) / 2);
    cursor: pointer;
    position: relative;
    z-index: 1;
    background-color: transparent;
  }

  .rating-input input[type='radio']:first-child {
    padding-left: 0;
  }

  .rating-input input[type='radio']:last-child {
    padding-right: 0;
  }
  .rating-input input[type='radio']::before {
    content: '';
    position: absolute;
    top: 0;
    left: calc(var(--rating-icon-gap) / 2);
    width: calc(100% - var(--rating-icon-gap));
    height: 100%;
    -webkit-mask-image: var(--rating-icon);
    mask-image: var(--rating-icon);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    background-color: var(--color-foreground);
  }

  .rating-input input[type='radio']:first-child::before {
    left: 0;
    width: calc(100% - var(--rating-icon-gap) / 2);
  }

  .rating-input input[type='radio']:last-child::before {
    width: calc(100% - var(--rating-icon-gap) / 2);
  }

  .rating-input input[type='radio']:hover ~ input[type='radio']::before {
    background-color: var(--color-background);
  }

  .rating-input input[type='radio']:hover::before,
  .rating-input input[type='radio']:has(~ input[type='radio']:hover)::before {
    background-color: color-mix(
      in oklch,
      var(--color-background) 50%,
      var(--color-foreground) 50%
    );
  }

  .rating-input input[type='radio']:checked ~ input[type='radio']::before {
    background-color: var(--color-background);
  }
  .rating-input
    input[type='radio']:checked
    ~ input[type='radio']:hover::before {
    background-color: color-mix(
      in oklch,
      var(--color-background) 50%,
      var(--color-foreground) 50%
    );
  }

  .rating-input
    input[type='radio']:checked
    ~ input[type='radio']:has(~ input[type='radio']:hover)::before {
    background-color: color-mix(
      in oklch,
      var(--color-background) 50%,
      var(--color-foreground) 50%
    );
  }

  .rating-input input[type='radio']:focus-visible {
    outline: 2px solid var(--color-foreground);
    outline-offset: 2px;
    border-radius: 2px;
  }

  .rating-input:not(:has(input[type='radio']:checked))
    input[type='radio']::before {
    background-color: var(--color-background);
  }

  .rating-input:not(:has(input[type='radio']:checked))
    input[type='radio']:hover::before,
  .rating-input:not(:has(input[type='radio']:checked))
    input[type='radio']:has(~ input[type='radio']:hover)::before {
    background-color: color-mix(
      in oklch,
      var(--color-background) 50%,
      var(--color-foreground) 50%
    );
  }

  .rating-input:not(:has(input[type='radio']:checked))
    input[type='radio']:hover
    ~ input[type='radio']::before {
    background-color: var(--color-background);
  }

  .rating-input.rating-selected
    input[type='radio']:checked
    ~ input[type='radio']::before {
    background-color: var(--color-background);
  }

  .rating-input.rating-not-selected input[type='radio']::before {
    background-color: var(--color-background);
  }
}