/*
 * Widget kit structure. Layered (lowest priority) so skins can restyle
 * anything here; visual styling and kit-owned state rules ([hidden], mobile
 * badge, reduced motion) live in the compiled /skins/<name>.css.
 */

@layer rv.kit {
  rv-stars,
  rv-summary,
  rv-list,
  rv-carousel,
  rv-write-button {
    display: block;
  }
  rv-stars {
    display: inline-flex;
  }
  rv-write-button {
    display: inline-block;
  }

  /* Half-star: left half filled, overlaid on an empty star. */
  .rv-star--half {
    position: relative;
    display: inline-block;
    line-height: 1;
  }
  .rv-star--half .rv-star__empty {
    color: var(--rv-color-star-empty, #767676);
  }
  .rv-star--half .rv-star__full {
    position: absolute;
    left: 0;
    top: 0;
    width: 50%;
    overflow: hidden;
    color: var(--rv-color-star, currentColor);
  }

  .rv-badge {
    position: fixed;
    z-index: 40;
    bottom: 1.25rem;
    right: 1.25rem;
    pointer-events: none;
  }
  html.rv-has-badge body {
    padding-bottom: 5rem;
  }
  @media (max-width: 640px) {
    html.rv-has-badge body {
      padding-bottom: 0;
    }
  }
}