.rewards-container {
    display: flex;
    width: 100%;
}

.rewards-container .rewards-content {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 1rem;
    background-color: var(--ColorContainer);
    padding-top: 1rem;
    padding-bottom: 1rem;
    border-radius: 1rem;
    box-shadow: var(--Shadow);
}

.rewards-container .rewards-content .rewards-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-left: 1rem;
    padding-right: 1rem;
}

.rewards-container .rewards-content .rewards-list {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    overflow: auto;
    scroll-snap-type: x mandatory;
    width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
}

.rewards-container .rewards-content .rewards-list .step {
    height: 2.5rem;
    aspect-ratio: 1 / 1;
    border-radius: 100%;
    background-color: var(--ColorRow);
    transition: var(--Transition);
    font-size: 1rem;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: var(--Shadow);
}

.rewards-container .rewards-content .rewards-list .progress-bar {
    background-color: var(--ColorRow);
    flex: 1;
    min-width: 1.5rem;
    height: 0.375rem;
}

.rewards-container .rewards-content .rewards-list .step.reward, .rewards-container .rewards-content .rewards-list .step:first-child {
    scroll-snap-align: center;
}

.rewards-container .rewards-content .rewards-list .step.reward {
    cursor: pointer;
    height: 3.5rem;
    font-size: 1.5rem;
    border-radius: var(--BorderRadius);
}

.rewards-container .rewards-content .rewards-list .step.completed, .rewards-container .rewards-content .rewards-list .progress-bar.completed {
    background-color: var(--ColorPrimary);
    color: var(--ColorPrimaryText);
}

.rewards-container .rewards-content .rewards-list .step.reward.completed.new {
    animation: rewardCompleted 1s ease-in-out 4;
}

.rewards-container .rewards-content .rewards-list .step.reward.completed.new i {
    animation: rewardCompletedIcon 1s ease-in-out 4;
}

.rewards-container .rewards-content .rewards-list p {
    width: 100%;
}

@media screen and (max-width: 500px) {
    .rewards-container .rewards-content .rewards-list .step {
        height: 2rem;
    }
    
    .rewards-container .rewards-content .rewards-list .progress-bar {
        min-width: 0.5rem;
    }

    .rewards-container .rewards-content .rewards-list .step.reward {
        height: 3rem;
    }
}

@keyframes rewardCompleted {
    0%, 100% {
        background-color: #FF7992;
    }
    25%, 75% {
        background-color: #FFA242;
    }
    50% {
        background-color: #FFC500;
    }
}

@keyframes rewardCompletedIcon {
    0% {
        transform: scale(1) rotate(0deg);
    }
    25% {
        transform: scale(1.2) rotate(10deg);
    }
    50% {
        transform: scale(1) rotate(-10deg);
    }
    75% {
        transform: scale(1.2) rotate(10deg);
    }
    100% {
        transform: scale(1) rotate(0deg);
    }

}