{"version":3,"file":"rating.module.mjs","names":[],"sources":["../../../../package/common/rating/rating.module.pcss"],"sourcesContent":[".rating {\n  /* calc, not em: this is the element that sets the base, so an em here would measure\n     whatever the rating happens to sit in instead of the theme's text size. */\n  --custom-rating-size: var(--rating-size, calc(var(--default-font-size) * 1.25));\n\n  display: inline-flex;\n  align-items: center;\n  align-self: flex-start;\n  width: fit-content;\n  gap: 0.15em;\n  font-size: var(--custom-rating-size);\n  outline: none;\n  touch-action: pan-y;\n  user-select: none;\n\n  &:focus-visible {\n    box-shadow: 0 0 0 2px var(--primary-lighter);\n    border-radius: var(--default-border-radius);\n  }\n\n  &-disabled {\n    opacity: 0.5;\n  }\n\n  &-disabled,\n  &-readOnly {\n    pointer-events: none;\n  }\n\n  &-item {\n    position: relative;\n    display: inline-flex;\n    width: 1em;\n    height: 1em;\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\n  }\n\n  &-iconEmpty {\n    /* FontAwesome's own rule is unlayered, so it outranks `width` from inside the library's layer and\n       reads this instead. `width` still sizes a custom icon. */\n    --fa-width: 1em;\n\n    width: 1em;\n    height: 1em;\n\n    /* Not --background-accent-light, which is Card's own surface: on a Card the empty stars\n       vanished. A tint of the text colour shows on any surface. */\n    color: var(--rating-empty-color, color-mix(in srgb, currentcolor 20%, transparent));\n  }\n\n  &-iconFilledClip {\n    position: absolute;\n    top: 0;\n    left: 0;\n\n    /* flex, so the icon is not an inline box: on a baseline it sat a fraction of a pixel below\n       the empty icon behind it, which the clip then cut off the bottom of. */\n    display: flex;\n    height: 100%;\n    overflow: hidden;\n    pointer-events: none;\n  }\n\n  &-iconFilled {\n    --fa-width: 1em;\n\n    width: 1em;\n    height: 1em;\n\n    /* The clip is narrower than a star at a partial fill. An `svg` refuses to shrink, but `icon`\n       takes any element, and a wrapped one would be squeezed rather than clipped. */\n    flex-shrink: 0;\n    color: var(--rating-filled-color, var(--primary-color));\n  }\n}\n"],"mappings":""}