@view-transition {
    navigation: auto;
}

.quiz-container {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem;
    padding-bottom: 2rem;
}

.quiz-question, .quiz-results-list {
    margin: 3rem 0;
}

.quiz-answer {
    display: flex;
    align-items: center;
    gap: 1rem;
    cursor: pointer;
    margin-bottom: .2rem;

    &:before {
        content: "";
        height: 1.2rem;
        aspect-ratio: 1;
        border: solid rgb(107, 107, 107) 2px;
        border-radius: 3px;
    }

    &.active:before {
        border-color: #319f49;
        background-image: url(./../../Icons/check.svg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: 70%;
    }

    &.correct {
        &:before {
            border-color: #319f49;
            background-color: #319f49;
            background-image: url(./../../Icons/check-white.svg);
            background-repeat: no-repeat;
            background-position: center;
            background-size: 70%;
        }
    }

    &.answer-error-2 {
        &:before {
            border-color: #ffb822;
            background-color: #ffb822;
            background-image: url(./../../Icons/check-white.svg);
            background-repeat: no-repeat;
            background-position: center;
            background-size: 70%;
        }
    }

    &.answer-error-3 {
        &:before {
            border-color: #981113;
            background-color: #981113;
            background-image: url(./../../Icons/check-white.svg);
            background-repeat: no-repeat;
            background-position: center;
            background-size: 70%;
        }
    }
}

.answer-result-prefix {
    font-weight: bold;
}

.button--primary.disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.quiz-results + .quiz-results {
    margin-top: 5rem;
}

.quiz-hero {
    padding-top: 3rem;

    &:has(figure) {
        display: grid;
        grid-template-columns: 1fr 2fr;
        gap: 3rem;
    }

    figure {
        background-color: #fff;
        padding: .5rem;
        filter: drop-shadow(2px 4px 8px rgba(71, 64, 48, 0.3));
        width: fit-content;
        height: fit-content;
        object-fit: contain;
        rotate: 4deg;
        grid-column: 1 / 2;
    }
}

.quiz-error {
    color: #d4060b;
}

.quiz-answer-correct, .quiz-answer-wrong {
    margin-top: 1rem;
    padding: 1.5rem;
    background-color: #319f49;
    color: #fff;
    border-radius: .5rem;
}

.quiz-answer-wrong {
    background-color: #d4060b;
}