/**
 * WPX Rating Element Styles
 * 
 * Styles for the star rating element including partial fill support.
 * Colours are controlled via Bricks element controls, not hardcoded here.
 */

.wpx-rating {
    display: inline-block;
}

.wpx-rating-icons {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 1.5em;
}

.wpx-rating-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* SVG icons need explicit sizing - color inherited from parent */
.wpx-rating-icon svg {
    width: 1em;
    height: 1em;
    fill: currentColor;
}

/* Full stars - color set by Bricks control via .wpx-rating-full selector */
.wpx-rating-full {
    /* Color controlled by Bricks element settings */
}

/* Empty stars - color set by Bricks control via .wpx-rating-empty selector */
.wpx-rating-empty {
    /* Color controlled by Bricks element settings */
}

/* Partial star - uses clip-path for precise fill */
.wpx-rating-partial {
    position: relative;
    display: inline-flex;
}

.wpx-rating-partial .wpx-rating-icon-bg,
.wpx-rating-partial .wpx-rating-icon-fill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.wpx-rating-partial .wpx-rating-icon-bg {
    /* Color controlled by Bricks element settings via .wpx-rating-partial .wpx-rating-icon-bg */
}

.wpx-rating-partial .wpx-rating-icon-fill {
    position: absolute;
    top: 0;
    left: 0;
    /* Color controlled by Bricks element settings via .wpx-rating-partial .wpx-rating-icon-fill */
    clip-path: inset(0 calc(100% - var(--fill-percent, 50%)) 0 0);
}

/* For SVGs in partial stars, inherit color */
.wpx-rating-partial .wpx-rating-icon-bg svg,
.wpx-rating-partial .wpx-rating-icon-fill svg {
    fill: currentColor;
}