/*
 * This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at https://www.mozilla.org/MPL/2.0/.
 */

.feedback-star-rating {
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
    gap: var(--sp-spacing-sm);
    padding: 0;
    margin: 0;
    border: none;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.feedback-star-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.feedback-star-label {
    cursor: pointer;
    font-size: 2.25rem;
    line-height: 1;
    color: var(--sp-border-medium);
    transition: color 0.15s ease, transform 0.1s ease;
}

.feedback-star-label:hover {
    transform: scale(1.12);
}

/* The fill effect: a checked/hovered star, and every star before it in
   DOM order (i.e. every star to its left on screen, thanks to
   row-reverse), turns the app's accent color. Pure CSS - no JS involved. */
.feedback-star-input:checked ~ .feedback-star-label,
.feedback-star-label:hover,
.feedback-star-label:hover ~ .feedback-star-label {
    color: var(--sp-primary);
}

.feedback-star-input:focus-visible ~ .feedback-star-label {
    outline: 2px solid var(--sp-primary);
    outline-offset: 2px;
    border-radius: var(--sp-radius-sm);
}

.feedback-pane textarea {
    resize: none;
}