.recipe-notation {
    align-items: center;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap:.313rem;
    justify-content: center;
    margin-bottom: 1.313rem;
}

.recipe-notation-number{
    font-size: 1.125rem;
    margin: 0;
}

.recipe-notation-text{
    display: flex;
    justify-self: center;
    align-items: center;
    gap: .313rem;
}

.recipe-notation:not(:has(.recipe-notation-star.filled:nth-child(3))):not(:has(+ .cta)) {
    visibility: hidden;
    height: 0;
    margin-bottom: 0;
}

.recipe-notation-total{
    font-size: var(--p-s-size);
    margin: 0;
}

.recipe-notation-stars{
    display: flex;
    justify-content: center;
    align-items: center;
    gap:0.01rem;
    padding: 0;
    margin:0;
}

.recipe-notation-stars:only-child{
    grid-column: span 2;
}

.recipe-notation-star {
    width: var(--star-notation-size);
    height: var(--star-notation-size);
    background-image: var(--star-notation-background);
    background-size: 100% 100%;
    background-position: center center;
    background-repeat: no-repeat;
}

.pageRecipe-rating .recipe-notation-star {
    cursor: pointer;
}

.recipe-notation-star.filled,
.pageRecipe-rating:has(.recipe-send-rating:not(.disabled)) .recipe-notation-star:hover,
.pageRecipe-rating:has(.recipe-send-rating:not(.disabled)) .recipe-notation-star:nth-child(1):has( ~ .recipe-notation-star:nth-child(2):hover),
.pageRecipe-rating:has(.recipe-send-rating:not(.disabled)) .recipe-notation-star:nth-child(1):has( ~ .recipe-notation-star:nth-child(3):hover),
.pageRecipe-rating:has(.recipe-send-rating:not(.disabled)) .recipe-notation-star:nth-child(1):has( ~ .recipe-notation-star:nth-child(4):hover),
.pageRecipe-rating:has(.recipe-send-rating:not(.disabled)) .recipe-notation-star:nth-child(1):has( ~ .recipe-notation-star:nth-child(5):hover),
.pageRecipe-rating:has(.recipe-send-rating:not(.disabled)) .recipe-notation-star:nth-child(2):has( ~ .recipe-notation-star:nth-child(3):hover),
.pageRecipe-rating:has(.recipe-send-rating:not(.disabled)) .recipe-notation-star:nth-child(2):has( ~ .recipe-notation-star:nth-child(4):hover),
.pageRecipe-rating:has(.recipe-send-rating:not(.disabled)) .recipe-notation-star:nth-child(2):has( ~ .recipe-notation-star:nth-child(5):hover),
.pageRecipe-rating:has(.recipe-send-rating:not(.disabled)) .recipe-notation-star:nth-child(3):has( ~ .recipe-notation-star:nth-child(4):hover),
.pageRecipe-rating:has(.recipe-send-rating:not(.disabled)) .recipe-notation-star:nth-child(3):has( ~ .recipe-notation-star:nth-child(5):hover),
.pageRecipe-rating:has(.recipe-send-rating:not(.disabled)) .recipe-notation-star:nth-child(4):has( ~ .recipe-notation-star:nth-child(5):hover) {
    background-image: var(--star-notation-filled-background);
}

#pageRecipe .recipe-send-rating {
    max-height: 2.5rem;
    opacity: 1;
    transition: max-height var(--transition-time), background-color var(--transition-time), margin-top var(--transition-time);
}

#pageRecipe .recipe-send-rating.disabled {
    margin-top: 0;
    max-height: 0;
    opacity: 0;
    pointer-events: none;
}

@media screen and (min-width: 64rem) {

    .recipe-notation {
        margin-bottom: 1.125rem;
    }
}