.wp-postratings {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: 0.5em;
} .wp-postratings-rating-preview {
padding-inline-start: 8px;
} .wp-postratings-shape-preview .wp-postratings-track {
color: #d4d4d8;
}
.wp-postratings-shape-preview .wp-postratings-fill,
.wp-postratings-shape-preview .wp-postratings-single {
color: #f5a623;
} .wp-postratings-shape-row {
margin-block: 0.5em;
} .wp-postratings-shape-row .wp-postratings {
vertical-align: middle;
margin-inline: 0.5em;
} .wp-postratings-item {
display: block;
flex: none;
inline-size: var( --wp-postratings-size, 20px );
block-size: var( --wp-postratings-size, 20px );
background-color: currentColor; -webkit-mask-image: var( --wp-postratings-shape );
mask-image: var( --wp-postratings-shape );
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
} .wp-postratings-strip {
position: relative;
display: inline-flex;
vertical-align: middle;
line-height: 1;
}
.wp-postratings-row {
display: flex;
gap: var( --wp-postratings-gap, 2px );
inline-size: max-content;
}
.wp-postratings-track {
color: var( --wp-postratings-color-off, #d4d4d8 );
} .wp-postratings-single {
color: var( --wp-postratings-color-on, #f5a623 );
} .wp-postratings-undecided {
color: var( --wp-postratings-color-off, #d4d4d8 );
}
.wp-postratings-single.wp-postratings-shape-thumb,
.wp-postratings-single.wp-postratings-shape-plusminus,
.wp-postratings-single.wp-postratings-shape-tickcross,
.wp-postratings-single.wp-postratings-shape-updown {
color: var( --wp-postratings-color-on, #f5a623 );
} .wp-postratings-fill {
position: absolute;
inset-block: 0;
inset-inline-start: 0;
overflow: hidden;
color: var( --wp-postratings-color-on, #f5a623 );
inline-size: var( --wp-postratings-fill, 0% );
} .wp-postratings-vote {
display: inline-flex;
align-items: center;
gap: var( --wp-postratings-gap, 2px );
border: 0;
padding: 0;
margin: 0;
min-inline-size: 0;
} .wp-postratings-vote > legend {
position: absolute;
inline-size: 1px;
block-size: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.wp-postratings-vote input[type="radio"] {
position: absolute;
opacity: 0;
inline-size: 1px;
block-size: 1px;
margin: 0;
pointer-events: none;
}
.wp-postratings-vote label {
display: block;
cursor: pointer;
color: var( --wp-postratings-color-off, #d4d4d8 );
transition: color var( --wp-postratings-transition, 120ms ease-in-out );
}
.wp-postratings-vote label span {
position: absolute;
inline-size: 1px;
block-size: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
} .wp-postratings-scale {
flex-direction: row-reverse;
justify-content: flex-end;
} .wp-postratings-scale label .wp-postratings-item {
background-image: linear-gradient(
to right,
var( --wp-postratings-color-on, #f5a623 ) var( --wp-postratings-step-fill, 0% ),
var( --wp-postratings-color-off, #d4d4d8 ) var( --wp-postratings-step-fill, 0% )
);
}
[dir="rtl"] .wp-postratings-scale label .wp-postratings-item {
background-image: linear-gradient(
to left,
var( --wp-postratings-color-on, #f5a623 ) var( --wp-postratings-step-fill, 0% ),
var( --wp-postratings-color-off, #d4d4d8 ) var( --wp-postratings-step-fill, 0% )
);
} .wp-postratings-scale:hover label .wp-postratings-item,
.wp-postratings-scale:focus-within label .wp-postratings-item,
.wp-postratings-scale:has( input:checked ) label .wp-postratings-item {
background-image: none;
}
.wp-postratings-scale label:hover,
.wp-postratings-scale label:hover ~ label,
.wp-postratings-scale input:focus-visible + label,
.wp-postratings-scale input:focus-visible + label ~ label {
color: var( --wp-postratings-color-hover, var( --wp-postratings-color-on, #f5a623 ) );
}
.wp-postratings-scale input:checked + label,
.wp-postratings-scale input:checked + label ~ label {
color: var( --wp-postratings-color-on, #f5a623 );
}
.wp-postratings-scale input:focus-visible + label {
outline: 2px solid currentColor;
outline-offset: 2px;
}  .wp-postratings-updown button {
display: block;
border: 0;
padding: 0;
margin: 0;
background: none;
cursor: pointer;
color: var( --wp-postratings-color-off, #d4d4d8 );
transition: color var( --wp-postratings-transition, 120ms ease-in-out );
}
.wp-postratings-updown button:hover,
.wp-postratings-updown button:focus-visible {
color: var( --wp-postratings-color-hover, var( --wp-postratings-color-on, #f5a623 ) );
}
.wp-postratings-updown button:focus-visible {
outline: 2px solid currentColor;
outline-offset: 2px;
} .wp-postratings-updown .wp-postratings-up:hover,
.wp-postratings-updown .wp-postratings-up:focus-visible {
color: var( --wp-postratings-color-on, var( --wp-postratings-color-up, #2e9e4f ) );
}
.wp-postratings-updown .wp-postratings-down:hover,
.wp-postratings-updown .wp-postratings-down:focus-visible {
color: var( --wp-postratings-color-on, var( --wp-postratings-color-down, #e5484d ) );
}
.wp-postratings-updown button span {
position: absolute;
inline-size: 1px;
block-size: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
} .wp-postratings[aria-busy="true"] {
opacity: 0.5;
transition: opacity var( --wp-postratings-transition, 120ms ease-in-out );
}
.wp-postratings[aria-busy="true"] label,
.wp-postratings[aria-busy="true"] button {
pointer-events: none;
} .wp-postratings-schema {
display: none;
}
@media (prefers-reduced-motion: reduce) {
.wp-postratings-vote label,
.wp-postratings-updown button,
.wp-postratings {
transition: none;
}
}
@media (prefers-contrast: more) {
.wp-postratings,
.wp-postratings-strip,
.wp-postratings-vote {
--wp-postratings-color-off: #6b7280;
}
} @media (prefers-color-scheme: dark) {
.wp-postratings,
.wp-postratings-strip,
.wp-postratings-vote {
--wp-postratings-color-off: #52525b;
}
}