/*!
 * Colors copied from Pico CSS ✨ v2.1.1 (https://picocss.com)
 * Copyright 2019-2025 - Licensed under MIT
 */
:host,:root {
    --pico-color-red-500:#d93526;
    --pico-color-red-450:#ee402e;
    --pico-color-jade-450:#029764;

    --color-incorrect: var(--pico-color-red-450);
    --color-correct: var(--pico-color-jade-450);
    --answer-img-border-width: calc(var(--pico-border-width) * 3);
}

.incorrect {
    color: var(--color-incorrect);
    img {
        border: var(--color-incorrect) var(--answer-img-border-width) solid;
    }
}
.correct {
    color: var(--color-correct);
    img {
        border: var(--color-correct) var(--answer-img-border-width) solid;
    }
}

.test-part {
    .counts {
        display: block;
    }
}

section.test-index ul {
    padding-inline-start: 0;
    li {
        list-style-type: none;
        margin-block-end: var(--pico-block-spacing-vertical);
    }
}

section.test-management {
    form {
        margin-block-end: var(--pico-block-spacing-vertical);
    }
    @media (min-width: 576px) {
        display: flex;
        gap: var(--pico-block-spacing-horizontal);
        form {
            flex: 1 1 0;
        }
    }
}

#start-new-test button {
    --pico-border-color: var(--pico-color-red-450);
    --pico-color: var(--pico-border-color);
    &:hover, &:active, &:focus {
        --pico-border-color: var(--pico-color-red-500);
    }
}

.container.submit-answers {
    position: fixed;
    bottom: 0;
    background-color: var(--pico-card-background-color);
    display: flex;
    justify-content: center;
    margin-block-end: 0;
    padding-block-start: calc(var(--pico-block-spacing-vertical) / 2);
    padding-block-end: calc(var(--pico-block-spacing-vertical) / 2);
    @media (max-width: 575px) {
        left: 0;
    }
    @media (min-width: 576px) {
        padding-inline-start: var(--pico-block-spacing-horizontal);
        padding-inline-end: var(--pico-block-spacing-horizontal);
    }
    button {
        width: 100%;
    }
}

.section p img {
    vertical-align: bottom;
}

.section p label img {
    vertical-align: middle;
}

p.question img {
    display: block;
    margin-block-start: calc(var(--pico-typography-spacing-vertical) / 2);
}

div.question {
    margin-block-end: calc(var(--pico-typography-spacing-vertical) * 2);
    p {
        margin-block-end: calc(var(--pico-typography-spacing-vertical) / 2);
    }
    p.answer {
        display: flex;
        align-items: center;

        input {
            flex-shrink: 0;
        }
    }
    &.canceled:before {
        position: absolute;
        display: block;
        content: "ANULOWANE";
        color: var(--color-incorrect);
        font-size: 3em;
        filter: opacity(60%);
        transform: rotate(-25deg) translate(-20%, 75%);
        @media (min-width: 576px) {
            transform: rotate(-25deg) translate(50%, 150%);
        }
    }
}

footer {
    color: var(--pico-muted-color);
    text-align: center;
    section {
        flex: 1 1 0;
    }
    .copy p {
        margin-block-end: 0;
        font-size: 80%;
    }
    .social {
        p {
            margin-block-end: calc(var(--pico-typography-spacing-vertical) / 2);
        }
        ul {
            padding-inline-start: 0;
            display: flex;
            justify-content: space-between;
        }
        li {
            display: inline;
            flex: 1 1 0;
            font-size: 3.5em;
            margin-inline-start: calc(var(--pico-block-spacing-horizontal) / 2);
        }
        a {
            text-decoration: none;
            --pico-color: var(--pico-muted-color);
            :hover {
                text-decoration: none;
                --pico-color: var(--pico-muted-color);
            }
        }
        svg {
            height: 1em;
            width: 1em;
        }
    }
}
@media (min-width: 576px) {
    footer {
        text-align: left;
        display: flex;
        .social {
            text-align: right;
            ul {
                display: block;
            }
            li {
                font-size: 1.5em;
            }
        }
    }
}

.part footer {
    margin-block-end: calc(var(--pico-block-spacing-vertical) * 2);
}