@import url(global.css);

& .logo {
    display: flex;
    width: 10.75rem;
    margin: 4.75rem 0 5.5625rem 7.5rem;
    align-items: center;
    gap: .75rem;

    & h1 {
        font: var(--display-md);
        font-size: 1.5rem;
        text-transform: uppercase;
        letter-spacing: -0.04em;
    }
}

main {
    display: grid;
    grid-template-areas: 
    "title sorteio"
    "help sorteio";
    width: 68.625rem;
    margin-inline: auto;
    column-gap: 6.75rem;
}

& .title {
    grid-area: title;
    width: 31.875rem;
    margin-bottom: 2.375rem;

    & h2 {
        font: var(--overline);
        text-transform: uppercase;
        background: var(--gradient-content);
        background-clip: text;
        color: transparent;
        margin-bottom: .75rem;
    }

    & h1 {
        font: var(--display-lg);
        text-transform: uppercase;
    }
}

& .helps {
    grid-area: help;
    width: 24.125rem;

    & .help {
        display: flex;
        margin-bottom: 2.25rem;
        gap: .5rem;

        & h3 {
            font: var(--pg-md);
            color: var(--content-brand);
        }

        & p {
            font: var(--pg-sm);
            color: var(--content-secondary);
        }
    }
}

& .sorteio {
    grid-area: sorteio;
    width: 30.125rem;
    align-self: center;
    transition: opacity 0.2s linear;

    & .tutorial {
        margin-bottom: 2.5rem;

        & h1 {
            font: var(--lb-lg);
            color: var(--content-primary);
            text-transform: uppercase;
            margin-bottom: 0.125rem;
        }
    
        & p {
            font: var(--pg-lg);
            color: var(--content-secondary);
        }
    }

    & .configs-sorteio {
        display: flex;
        gap: .75rem;
        text-align: center;

        & div {
            width: 5.375rem;
            
            & label {
                font: var(--lb-md);
                color: var(--content-secondary);
                text-transform: uppercase;
                margin-bottom: .5rem;
                transition: color 0.2s ease-in-out;
            }

            & .input-wrapper {
                background: transparent;
                border-radius: .5rem;
                padding: 1px;
                z-index: -1;
                transition: opacity 0.2s ease-in-out;

                & input {
                    font: var(--display-sm);
                    color: var(--content-primary);
                    padding-block: .25rem;
                    border-radius: .5rem;
                    background-color: var(--background-primary);
                    transition: background-color 0.2s ease-in-out;
                }
            }

            &:hover {
                & label {
                    color: var(--content-brand);
                }

                & .input-wrapper {
                    background: var(--gradient-border);
                    & input {
                        background-color: var(--background-tertiary);
                    }
                }
            }
        }

    }

    & .repeat {
        display: flex;
        gap: .5rem;
        margin-block: 1.25rem 2.5rem;
        height: 1.25rem;

        & .switch {
            width: 1.875rem;
            height: 1.25rem;
            position: relative;

            & input[type="checkbox"] {
                position: absolute;
                inset: 0;
                z-index: 1;
                &:checked + .slider::before {
                    transform: translateX(0.625rem);
                }
            }

            & .slider {
                position: absolute;
                inset: 0;
                background: var(--content-secondary);
                border-radius: 1rem;
                display: flex;
                align-items: center;

                &::before {
                    content: "";
                    position: absolute;
                    width: .875rem;
                    height: .875rem;
                    border-radius: 50%;
                    background-color: var(--content-primary);
                    margin-inline: .1875rem;
                    transition: transform 0.5s cubic-bezier(.11,1.62,.65,.96);
                }
            }

            &:has(input[type="checkbox"]:checked) {
                & .slider {
                    background: var(--gradient-background);
                }
            }
        }

        & label {
            font: .75rem/1.5 var(--ff-Inter);
            color: var(--content-primary);
        }
    }

    & ul.lista-numeros {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: .5rem;
        min-height: 7rem;
        max-height: 30rem;
        overflow-y: auto;
        scrollbar-width: none;
        scroll-behavior: smooth;
        margin-bottom: 2.5rem;

        & li.numero-sorteado {
            display: flex;
            justify-content: center;
            align-items: center;

            font: var(--lucky-number);
            color: transparent;

            width: 6.25rem;
            height: 6.25rem;
            border-radius: 1.75rem;

            animation: showNumber 3s forwards;

            position: relative;
            &::before {
                content: "";
                position: absolute;
                inset: 0;
                width: inherit;
                height: inherit;
                border-radius: inherit;
                z-index: -1;

                animation: background-animation 3s forwards;
            }
        }
        
    }

    & button {
        background-color: var(--background-tertiary);
        border-radius: .5rem;
        width: 100%;
        padding-block: 1rem;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: opacity .5s ease-in-out;

        & div {
            display: flex;
            gap: 1rem;
            justify-content: center;
            align-items: center;

            & h1 {
                font: var(--lb-md);
                text-transform: uppercase;
                color: var(--content-primary);
            }

            position: relative;
            & div.icon img {
                position: absolute;
                transition: transform 0.5s linear;
                &[src="assets/reload-arrow-icon.svg"] {
                    transition: transform 1s linear;
                }
            }
        }

        position: relative;
        
        &::before {
            content: "";
            position: absolute;

            width: 0;
            
            background: var(--gradient-border);
            border-radius: inherit;
            transition: width 0.5s ease-in-out;
            z-index: -1;
        }

        &:hover {
            & div img[src="assets/arrow-right.svg"] {
                transform: translateX(10px);
            }

            & div img[src="assets/reload-arrow-icon.svg"] {
                transform: rotate(360deg);
            }

            &::before {
                width: calc(100% + 2px);
                height: calc(100% + 2px);
            }
        }
    }
}

@keyframes upContent {
    50% {
        transform: translateY(-1.5rem);
    }
    100% {
        transform: translateY(-1.35rem);
    }
}

@keyframes background-animation {
    0% {
        background-color: var(--content-brand);
    }

    33% {
        transform: none;
    }

    70% {
        transform: rotate(180deg);
    }

    80% {
        background-color: var(--content-brand);
    }

    95% {
        background-color: transparent;
    }

    100% {
        transform: rotate(180deg);
        background-color: transparent;
    }
}

@keyframes showNumber {
    0% {
        color: transparent;
        transform: scale(0);
    }

    20% {
        transform: scale(1.05);
    }

    33% {
        transform: scale(1);
    }

    40% {
        color: transparent;
    }

    50% {
        color: var(--color-inverse);
    }

    66% {
        transform: scale(1);
    }

    70% {
        transform: scale(1.05);
    }

    80% {
        color: var(--color-inverse);
    }

    100% {
        color: var(--content-brand);
        transform: scale(1);
    }
}

@media (width < 80em) {
    & .logo {
        margin: 2.75rem auto 2.875rem;
    }

    & main {
        grid-template-areas: 
        "title"
        "sorteio"
        "help";
        width: 19.9375rem;
        column-gap: 0;
    }

    & .title {
        width: inherit;
        margin-bottom: 2.625rem;

        & h1 {
            font: var(--display-md);
        }

        & h2 {
            margin-bottom: .5rem;
        }
    }

    & .sorteio {
        width: inherit;
        margin-bottom: 5rem;

        & ul.lista-numeros {
            flex-wrap: nowrap;
            overflow-y: hidden;
            overflow-x: scroll;
            justify-content: flex-start;
            padding-inline: .5rem;

            & li {
                flex: 0 0 auto;
                isolation: isolate;
            }
        }
    }

    & .helps {
        width: inherit;
    }
}