.star-rating {
display: flex;
flex-direction: column;
}
.star-rating-icons {
display: flex;
width: 0;
> input {
border: 0px;
clip: rect(0px, 0px, 0px, 0px);
height: 1px;
width: 1px;
margin: -1px;
padding: 0px;
overflow: hidden;
white-space: nowrap;
position: absolute;
}
> .button {
border: 1px solid;
border-color: var(--reflag-feedback-dialog-input-border-color, #d8d9df);
padding: 0px 7px;
&:not(:first-of-type) {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
&:not(:last-of-type) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
margin-inline-end: -1px;
}
+ .button-tooltip {
pointer-events: none;
opacity: 0;
background: var(--reflag-feedback-dialog-tooltip-background-color, #000);
color: var(--reflag-feedback-dialog-tooltip-color, #fff);
padding: 6px 8px;
border-radius: 4px;
font-size: 13px;
}
&:hover + .button-tooltip {
opacity: 1;
}
> svg {
transition: transform 200ms ease-in-out;
}
}
}
.button-tooltip-arrow {
position: absolute;
width: 10px;
height: 10px;
background-color: var(
--reflag-feedback-dialog-tooltip-background-color,
#000
);
transform: rotate(45deg);
}