.rating-root {
    display: inline-flex;
    color: #ffb400;

    &:focus-visible {
        outline: none;

        &:not(.disabled) {
            background-color: var(--palette-action-default-hover);
        }
    }
}

.rating-item {
    cursor: pointer;
    transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;

    &.rating-item-active {
        transform: scale(1.2);
    }

    &.disabled, .disabled:hover {
        cursor: default;
        pointer-events: none;

        & * {
            cursor: default;
            color: var(--palette-text-disabled);
        }
    }

    &.readonly {
        cursor: default;
    }

    & .rating-input {
        clip: rect(0,0,0,0);
        margin: 0;
        opacity: 0;
        padding: 0;
        z-index: 1;
        position: absolute;
        cursor: inherit;
        overflow: hidden;
    }

    & svg {
        pointer-events: none;

        & path {
            pointer-events: none;
        }
    }
}