@layer components{[data-ui=rating-bar]{--color-active-svg:#f6b51e;--color-active:var(--color-on-surface);--color-inactive:var(--color-surface-container-highest);border:1px solid var(--color-surface-container-highest);border-radius:var(--radius-rounded);align-items:center;width:fit-content;height:fit-content;display:flex}[data-ui=rating-bar][data-size=sm]{--item-size:var(--spacing-32);--item-padding:var(--spacing-6);--font-size:var(--font-body-sm)}[data-ui=rating-bar][data-size=md]{--item-size:42px;--item-padding:var(--spacing-8);--font-size:var(--font-body-md)}[data-ui=rating-bar][data-size=lg]{--item-size:54px;--item-padding:var(--spacing-12);--font-size:var(--font-body-lg)}[data-ui=rating-bar][data-styling][data-styling=heart]{--color-active-svg:#fb3748}[data-ui=rating-bar][data-styling] [data-ui=rating-bar-item] svg{fill:currentColor}[data-ui=rating-bar][data-styling]:has([data-ui=rating-bar-item][data-checked]) [data-ui=rating-bar-item] svg{color:var(--color-active-svg)}[data-ui=rating-bar][data-styling] [data-ui=rating-bar-item][data-checked]~[data-ui=rating-bar-item] svg{color:var(--color-inactive)}[data-ui=rating-bar]:not([data-styling]) [data-ui=rating-bar-item][data-checked]{background-color:var(--color-surface-container-high)}[data-ui=rating-bar] [data-ui=rating-bar-item]{width:var(--item-size);height:var(--item-size);padding:var(--item-padding);font:var(--font-size);border-radius:var(--radius-rounded);cursor:pointer;transition:background-color var(--transition-standard-fast-effects), box-shadow var(--transition-standard-fast-effects);outline:0;justify-content:center;align-items:center;display:flex}[data-ui=rating-bar] [data-ui=rating-bar-item] svg{width:100%;height:100%;transition:color var(--transition-standard-fast-effects), fill var(--transition-standard-fast-effects), scale var(--transition-standard-fast-effects)}[data-ui=rating-bar] [data-ui=rating-bar-item]:focus-visible{background-color:var(--color-surface-container-low)}@media (hover:hover) and (pointer:fine){[data-ui=rating-bar] [data-ui=rating-bar-item]:hover{background-color:var(--color-surface-container-low)}}[data-ui=rating-bar] [data-ui=rating-bar-item]:focus-visible{box-shadow:0 0 0 2px color-mix(in oklab, var(--color-surface-container-highest) 35%, transparent)}}