frutjam/dist/components/rating.css

A utility-first CSS UI Library for Tailwind CSS

/*! frutjam v2.2.1 (c) 2026 Nezanuha | Released under the MIT License | https://frutjam.com */
/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */.rate{--color-rate:var(--color-warning);--color-rate-empty:var(--color-base-soft);--rate--size:1.5rem;--rate--fill:var(--color-rate-empty);-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;cursor:pointer;width:var(--rate--width,var(--rate--size));height:var(--rate--size);display:inline-block;flex-shrink:0;background-color:var(--rate--fill);-webkit-mask-size:var(--rate--mask-size,contain);mask-size:var(--rate--mask-size,contain);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:var(--rate--mask-position,center);mask-position:var(--rate--mask-position,center);transition:background-color .15s ease-in-out;&:checked,&[aria-checked=true]{--rate--fill:var(--color-rate)}&:has(~.rate:is(:checked,[aria-checked=true])){--rate--fill:var(--color-rate)}&:hover{--rate--fill:var(--color-rate)}&:focus-visible{outline-width:2px;outline-style:solid;outline-color:light-dark(var(--color-base-950),var(--color-base-50));outline-offset:3px;border-radius:2px}}.rating{display:inline-flex;gap:.125rem;align-items:center;&:hover .rate{--rate--fill:var(--color-rate)}&:hover .rate:hover~.rate{--rate--fill:var(--color-rate-empty)}}.rating-half{gap:0;--rate--width:calc(var(--rate--size)/2);--rate--mask-size:200%;--rate--mask-position:left;:where(&) :where(.rate:nth-child(2n)){--rate--mask-position:right}}.rate-accent{--color-rate:var(--color-accent)}.rate-error{--color-rate:var(--color-error)}.rate-info{--color-rate:var(--color-info)}.rate-neutral{--color-rate:var(--color-neutral)}.rate-primary{--color-rate:var(--color-primary)}.rate-secondary{--color-rate:var(--color-secondary)}.rate-success{--color-rate:var(--color-success)}.rate-warning{--color-rate:var(--color-warning)}.rating-lg{--rate--size:2rem}.rating-md{--rate--size:1.5rem}.rating-sm{--rate--size:1.25rem}.rating-xl{--rate--size:2.5rem}.rating-xs{--rate--size:1rem}