@trimble-oss/moduswebcomponents/collection/components/modus-wc-rating/modus-wc-rating.css

Modus Web Components is a modern, accessible UI library built with Stencil JS that provides reusable web components following Trimble's Modus design system. This updated version focuses on improved flexibility, enhanced theming options, comprehensive cust

/**
* This component uses Tailwind CSS and DaisyUI.
* Only add styles here that should not be applied by Tailwind, Daisy, or the theme.
*/
modus-wc-rating.modus-wc-rating-container {
  display: flex;
}
modus-wc-rating.modus-wc-rating-container .modus-wc-rating {
  --modus-wc-rating-item-color: ;
  margin-inline-end: var(--modus-wc-spacing-sm);
}
modus-wc-rating.modus-wc-rating-container .modus-wc-rating .modus-wc-rating-item {
  background-color: var(--modus-wc-rating-item-color, currentColor);
}
modus-wc-rating.modus-wc-rating-container .modus-wc-rating .modus-wc-rating-item:not(.modus-wc-mask-smiley):not(.modus-wc-mask-thumb):not(:disabled) {
  opacity: 0.2;
}
modus-wc-rating.modus-wc-rating-container .modus-wc-rating .modus-wc-rating-item:not(.modus-wc-mask-smiley):not(.modus-wc-mask-thumb):not(:disabled):checked, modus-wc-rating.modus-wc-rating-container .modus-wc-rating .modus-wc-rating-item:not(.modus-wc-mask-smiley):not(.modus-wc-mask-thumb):not(:disabled)[aria-checked=true], modus-wc-rating.modus-wc-rating-container .modus-wc-rating .modus-wc-rating-item:not(.modus-wc-mask-smiley):not(.modus-wc-mask-thumb):not(:disabled)[aria-current=true], modus-wc-rating.modus-wc-rating-container .modus-wc-rating .modus-wc-rating-item:not(.modus-wc-mask-smiley):not(.modus-wc-mask-thumb):not(:disabled):has(~ *:checked, ~ *[aria-checked=true], ~ *[aria-current=true]) {
  opacity: 1;
}
modus-wc-rating.modus-wc-rating-container .modus-wc-rating .modus-wc-rating-item:disabled:not(.modus-wc-mask-star-2):not(.modus-wc-mask-heart) {
  opacity: 0.3;
}
modus-wc-rating.modus-wc-rating-container .modus-wc-rating .modus-wc-rating-item:disabled:not(.modus-wc-mask-smiley):not(.modus-wc-mask-thumb) {
  opacity: 0.1;
}
modus-wc-rating.modus-wc-rating-container .modus-wc-rating .modus-wc-rating-item:disabled:not(.modus-wc-mask-smiley):not(.modus-wc-mask-thumb):checked, modus-wc-rating.modus-wc-rating-container .modus-wc-rating .modus-wc-rating-item:disabled:not(.modus-wc-mask-smiley):not(.modus-wc-mask-thumb)[aria-checked=true], modus-wc-rating.modus-wc-rating-container .modus-wc-rating .modus-wc-rating-item:disabled:not(.modus-wc-mask-smiley):not(.modus-wc-mask-thumb)[aria-current=true], modus-wc-rating.modus-wc-rating-container .modus-wc-rating .modus-wc-rating-item:disabled:not(.modus-wc-mask-smiley):not(.modus-wc-mask-thumb):has(~ *:checked,
~ *[aria-checked=true],
~ *[aria-current=true]) {
  opacity: 0.3;
}
modus-wc-rating.modus-wc-rating-container .modus-wc-rating .modus-wc-rating-hidden:not(.modus-wc-mask-half-1),
modus-wc-rating.modus-wc-rating-container .modus-wc-rating .modus-wc-rating-item:not(.modus-wc-mask-half-1) {
  margin-inline-end: var(--modus-wc-spacing-xs);
}

[data-theme=modus-classic-light] modus-wc-rating .modus-wc-rating-item.modus-wc-mask.modus-wc-mask-smiley, [data-theme=modus-classic-light] modus-wc-rating .modus-wc-rating-item.modus-wc-mask.modus-wc-mask-thumb {
  background-color: var(--modus-wc-rating-item-color, var(--modus-wc-color-trimble-gray));
}
[data-theme=modus-classic-light] modus-wc-rating .modus-wc-rating-item.modus-wc-mask.modus-wc-mask-smiley:hover:not(:disabled), [data-theme=modus-classic-light] modus-wc-rating .modus-wc-rating-item.modus-wc-mask.modus-wc-mask-smiley:checked:not(:disabled), [data-theme=modus-classic-light] modus-wc-rating .modus-wc-rating-item.modus-wc-mask.modus-wc-mask-thumb:hover:not(:disabled), [data-theme=modus-classic-light] modus-wc-rating .modus-wc-rating-item.modus-wc-mask.modus-wc-mask-thumb:checked:not(:disabled) {
  background-color: var(--modus-wc-rating-item-color, var(--modus-wc-color-trimble-blue));
}

[data-theme=modus-classic-dark] modus-wc-rating .modus-wc-rating-item.modus-wc-mask.modus-wc-mask-smiley, [data-theme=modus-classic-dark] modus-wc-rating .modus-wc-rating-item.modus-wc-mask.modus-wc-mask-thumb {
  background-color: var(--modus-wc-rating-item-color, var(--modus-wc-color-gray-4));
}
[data-theme=modus-classic-dark] modus-wc-rating .modus-wc-rating-item.modus-wc-mask.modus-wc-mask-smiley:hover, [data-theme=modus-classic-dark] modus-wc-rating .modus-wc-rating-item.modus-wc-mask.modus-wc-mask-smiley:checked:not(:disabled), [data-theme=modus-classic-dark] modus-wc-rating .modus-wc-rating-item.modus-wc-mask.modus-wc-mask-thumb:hover, [data-theme=modus-classic-dark] modus-wc-rating .modus-wc-rating-item.modus-wc-mask.modus-wc-mask-thumb:checked:not(:disabled) {
  background-color: var(--modus-wc-rating-item-color, var(--modus-wc-color-highlight-blue));
}

modus-wc-rating .modus-wc-mask-smiley-1 {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M12 22C6.49 22 2 17.51 2 12S6.49 2 12 2s10 4.49 10 10-4.49 10-10 10m0-18c-4.41 0-8 3.59-8 8s3.59 8 8 8 8-3.59 8-8-3.59-8-8-8M8.5 8C7.67 8 7 8.67 7 9.5S7.67 11 8.5 11s1.5-.67 1.5-1.5S9.33 8 8.5 8m7 0c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5S16.33 8 15.5 8m1 8.99c.27-.06.44-.33.38-.6-.52-2.29-2.53-3.89-4.88-3.89s-4.36 1.6-4.88 3.89a.503.503 0 0 0 .98.22c.42-1.83 2.02-3.11 3.9-3.11s3.49 1.28 3.9 3.11c.05.23.26.39.49.39.04 0 .07 0 .11-.01'/%3E%3C/svg%3E");
}
modus-wc-rating .modus-wc-mask-smiley-1:checked {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2M8.5 8c.83 0 1.5.67 1.5 1.5S9.33 11 8.5 11 7 10.33 7 9.5 7.67 8 8.5 8m8 8.99s-.07.01-.11.01a.51.51 0 0 1-.49-.39c-.42-1.83-2.02-3.11-3.9-3.11s-3.49 1.28-3.9 3.11a.503.503 0 0 1-.98-.22C7.64 14.1 9.65 12.5 12 12.5s4.36 1.6 4.88 3.89c.06.27-.11.54-.38.6m-1-5.99c-.83 0-1.5-.67-1.5-1.5S14.67 8 15.5 8s1.5.67 1.5 1.5-.67 1.5-1.5 1.5'/%3E%3C/svg%3E");
}
modus-wc-rating .modus-wc-mask-smiley-2 {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M12 22C6.49 22 2 17.51 2 12S6.49 2 12 2s10 4.49 10 10-4.49 10-10 10m0-18c-4.41 0-8 3.59-8 8s3.59 8 8 8 8-3.59 8-8-3.59-8-8-8M8.5 8C7.67 8 7 8.67 7 9.5S7.67 11 8.5 11s1.5-.67 1.5-1.5S9.33 8 8.5 8m7 0c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5S16.33 8 15.5 8m.21 8.88c.21-.18.23-.5.05-.71-.95-1.08-2.32-1.71-3.76-1.71s-2.81.62-3.76 1.71c-.18.21-.16.52.05.71.21.18.52.16.71-.05.76-.87 1.86-1.36 3.01-1.36s2.25.5 3.01 1.36c.1.11.24.17.38.17q.18 0 .33-.12Z'/%3E%3C/svg%3E");
}
modus-wc-rating .modus-wc-mask-smiley-2:checked {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2M7 9.5C7 8.67 7.67 8 8.5 8s1.5.67 1.5 1.5S9.33 11 8.5 11 7 10.33 7 9.5m8.71 7.38c-.09.08-.21.12-.33.12-.14 0-.28-.06-.38-.17-.76-.87-1.86-1.36-3.01-1.36s-2.25.5-3.01 1.36c-.18.21-.5.23-.71.05a.505.505 0 0 1-.05-.71c.95-1.08 2.32-1.71 3.76-1.71s2.81.62 3.76 1.71c.18.21.16.52-.05.71ZM15.5 11c-.83 0-1.5-.67-1.5-1.5S14.67 8 15.5 8s1.5.67 1.5 1.5-.67 1.5-1.5 1.5'/%3E%3C/svg%3E");
}
modus-wc-rating .modus-wc-mask-smiley-3 {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M12 22C6.49 22 2 17.51 2 12S6.49 2 12 2s10 4.49 10 10-4.49 10-10 10m0-18c-4.41 0-8 3.59-8 8s3.59 8 8 8 8-3.59 8-8-3.59-8-8-8M8.5 8C7.67 8 7 8.67 7 9.5S7.67 11 8.5 11s1.5-.67 1.5-1.5S9.33 8 8.5 8m7 0c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5S16.33 8 15.5 8m.5 7.5c0-.28-.22-.5-.5-.5h-7c-.28 0-.5.22-.5.5s.22.5.5.5h7c.28 0 .5-.22.5-.5'/%3E%3C/svg%3E");
}
modus-wc-rating .modus-wc-mask-smiley-3:checked {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2M7 9.5C7 8.67 7.67 8 8.5 8s1.5.67 1.5 1.5S9.33 11 8.5 11 7 10.33 7 9.5m8.5 6.5h-7c-.28 0-.5-.22-.5-.5s.22-.5.5-.5h7c.28 0 .5.22.5.5s-.22.5-.5.5m0-5c-.83 0-1.5-.67-1.5-1.5S14.67 8 15.5 8s1.5.67 1.5 1.5-.67 1.5-1.5 1.5'/%3E%3C/svg%3E");
}
modus-wc-rating .modus-wc-mask-smiley-4 {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M12 22C6.49 22 2 17.51 2 12S6.49 2 12 2s10 4.49 10 10-4.49 10-10 10m0-18c-4.41 0-8 3.59-8 8s3.59 8 8 8 8-3.59 8-8-3.59-8-8-8M8.5 8C7.67 8 7 8.67 7 9.5S7.67 11 8.5 11s1.5-.67 1.5-1.5S9.33 8 8.5 8m7 0c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5S16.33 8 15.5 8m.26 8.29c.18-.21.16-.52-.05-.71a.506.506 0 0 0-.71.05c-.76.87-1.86 1.36-3.01 1.36s-2.25-.5-3.01-1.36a.505.505 0 0 0-.71-.05c-.21.18-.23.5-.05.71.95 1.08 2.32 1.71 3.76 1.71s2.81-.62 3.76-1.71Z'/%3E%3C/svg%3E");
}
modus-wc-rating .modus-wc-mask-smiley-4:checked {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2M7 9.5C7 8.67 7.67 8 8.5 8s1.5.67 1.5 1.5S9.33 11 8.5 11 7 10.33 7 9.5m8.76 6.79C14.81 17.37 13.44 18 12 18s-2.81-.62-3.76-1.71a.506.506 0 0 1 .05-.71c.21-.18.52-.16.71.05.76.87 1.86 1.36 3.01 1.36s2.25-.5 3.01-1.36c.18-.21.5-.23.71-.05s.23.5.05.71ZM15.5 11c-.83 0-1.5-.67-1.5-1.5S14.67 8 15.5 8s1.5.67 1.5 1.5-.67 1.5-1.5 1.5'/%3E%3C/svg%3E");
}
modus-wc-rating .modus-wc-mask-smiley-5 {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M12 22C6.49 22 2 17.51 2 12S6.49 2 12 2s10 4.49 10 10-4.49 10-10 10m0-18c-4.41 0-8 3.59-8 8s3.59 8 8 8 8-3.59 8-8-3.59-8-8-8M8.5 8C7.67 8 7 8.67 7 9.5S7.67 11 8.5 11s1.5-.67 1.5-1.5S9.33 8 8.5 8m7 0c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5S16.33 8 15.5 8m1.38 6.11a.503.503 0 0 0-.98-.22C15.48 15.72 13.88 17 12 17s-3.49-1.28-3.9-3.11a.503.503 0 0 0-.98.22C7.64 16.4 9.65 18 12 18s4.36-1.6 4.88-3.89'/%3E%3C/svg%3E");
}
modus-wc-rating .modus-wc-mask-smiley-5:checked {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2M8.5 8c.83 0 1.5.67 1.5 1.5S9.33 11 8.5 11 7 10.33 7 9.5 7.67 8 8.5 8m8.38 6.11C16.36 16.4 14.35 18 12 18s-4.36-1.6-4.88-3.89a.503.503 0 0 1 .98-.22C8.52 15.72 10.12 17 12 17s3.49-1.28 3.9-3.11a.503.503 0 0 1 .98.22M15.5 11c-.83 0-1.5-.67-1.5-1.5S14.67 8 15.5 8s1.5.67 1.5 1.5-.67 1.5-1.5 1.5'/%3E%3C/svg%3E");
}
modus-wc-rating .modus-wc-mask-thumb-1 {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M21.99 12.23c0-1.85-1.5-3.35-3.35-3.35h-3.69c.21-1.88.16-4.52-2.64-5.65-.38-.15-.76-.23-1.13-.23-.76 0-1.44.32-1.93.9-.92 1.1-.73 2.61-.65 3 .09.56-.31 1.06-1.16 2.01-.16.18-.32.35-.47.53a2.48 2.48 0 0 0-1.63-.6h-.83a2.5 2.5 0 0 0-2.5 2.5v7.51a2.5 2.5 0 0 0 2.5 2.5h.83c.76 0 1.45-.34 1.91-.88.6.56 1.4.9 2.28.9h7.06c1.99 0 2.8-1.08 3.49-2.91.6-1.44 1.59-3.81 1.69-4.03s.28-.62.22-2.21ZM6.17 18.86c0 .46-.38.83-.83.83h-.83c-.46 0-.83-.37-.83-.83v-7.51c0-.46.37-.83.83-.83h.83c.46 0 .83.38.83.83zm14.07-5.11c-.12.26-1.71 4.08-1.71 4.08-.63 1.65-1.02 1.88-1.95 1.88H9.52c-.93 0-1.68-.75-1.68-1.68V11.5s-.01-.45.1-.61c.99-1.27 2.59-2.42 2.31-4.23-.18-.99.14-2.38 1.45-1.87 2.29.93 1.64 3.46 1.39 5.35.03.22.32.33.72.38h.04c.18.02.37.03.58.03h4.2c.93 0 1.68.75 1.68 1.68 0 0 .05 1.26-.07 1.52'/%3E%3C/svg%3E");
}
modus-wc-rating .modus-wc-mask-thumb-1:checked {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M4 9H3c-.55 0-1 .45-1 1v9c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-9c0-.55-.45-1-1-1m17.95 2.06c0-1.11-.9-2.01-2.01-2.01h-5.03c-.25 0-.48 0-.69-.03h-.05c-.48-.06-.82-.19-.87-.46.3-2.27 1.08-5.3-1.67-6.42-1.56-.62-1.95 1.05-1.73 2.24.34 2.17-1.58 3.55-2.77 5.07-.13.2-.12.73-.12.73V18c0 1.11.91 2.01 2.02 2.01h8.46c1.11 0 1.58-.28 2.33-2.25 0 0 1.91-4.57 2.05-4.89s.09-1.82.09-1.82Z'/%3E%3C/svg%3E");
}
modus-wc-rating .modus-wc-mask-thumb-2 {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M21.99 12.15c0 1.85-1.5 3.35-3.35 3.35h-3.69c.21 1.88.16 4.52-2.64 5.65-.38.15-.76.23-1.13.23-.76 0-1.44-.32-1.93-.9-.92-1.1-.73-2.61-.65-3 .09-.56-.31-1.06-1.16-2.01-.16-.18-.32-.35-.47-.53-.44.38-1.01.6-1.63.6h-.83a2.5 2.5 0 0 1-2.5-2.5V5.53a2.5 2.5 0 0 1 2.5-2.5h.83c.76 0 1.45.34 1.91.88.6-.56 1.4-.9 2.28-.9h7.06c1.99 0 2.8 1.08 3.49 2.91.6 1.44 1.59 3.81 1.69 4.03s.28.62.22 2.21ZM6.17 5.52c0-.46-.38-.83-.83-.83h-.83c-.46 0-.83.37-.83.83v7.51c0 .46.37.83.83.83h.83c.46 0 .83-.38.83-.83zm14.07 5.11c-.12-.26-1.71-4.08-1.71-4.08-.63-1.65-1.02-1.88-1.95-1.88H9.52c-.93 0-1.68.75-1.68 1.68v6.53s-.01.45.1.61c.99 1.27 2.59 2.42 2.31 4.23-.18.99.14 2.38 1.45 1.87 2.29-.93 1.64-3.46 1.39-5.35.03-.22.32-.33.72-.38h.04c.18-.02.37-.03.58-.03h4.2c.93 0 1.68-.75 1.68-1.68 0 0 .05-1.26-.07-1.52'/%3E%3C/svg%3E");
}
modus-wc-rating .modus-wc-mask-thumb-2:checked {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M4 15.02H3c-.55 0-1-.45-1-1v-9c0-.55.45-1 1-1h1c.55 0 1 .45 1 1v9c0 .55-.45 1-1 1m17.95-2.06c0 1.11-.9 2.01-2.01 2.01h-5.03c-.25 0-.48 0-.69.03h-.05c-.48.06-.82.19-.87.46.3 2.27 1.08 5.3-1.67 6.42-1.56.62-1.95-1.05-1.73-2.24.34-2.17-1.58-3.55-2.77-5.07-.13-.2-.12-.73-.12-.73V6.02c0-1.11.91-2.01 2.02-2.01h8.46c1.11 0 1.58.28 2.33 2.25 0 0 1.91 4.57 2.05 4.89s.09 1.82.09 1.82Z'/%3E%3C/svg%3E");
}