@import url("global.css");

.trainOverlay {
    position: fixed;
    top: 0;
    opacity: 0;
    pointer-events: none;
    height: 100vh;
    width: 100vw;
    background-color: var(--bg);
    color: var(--light);
    display: flex;
    justify-content: start;
    align-items: center;
    flex-direction: column;
    transition: .4s;
    z-index: 100;
}

.trainOverlay.open {
    opacity: 1;
    pointer-events: all;
}

.trainOverlay.open~.setContainer {
    display: none;
}

/*#region while training*/

.whileTrainingContainer {
    display: flex;
    flex-direction: column;
    width: 75vw;
    gap: var(--margin-s);
    margin-top: var(--margin-xl);
    transition: opacity 0.3s;
}

.quitBtn {
    position: absolute;
    top: var(--margin-m);
    left: var(--margin-m);
    width: max-content;
    height: max-content;
    padding: var(--margin-xs);
    border-radius: var(--radius-xl);
    font-size: var(--fs-header);
    cursor: pointer;
    opacity: 0.7;

    &:hover {
        opacity: 1;
    }
}

.casesLeft {
    text-align: center;
    font-size: var(--fs-subheader);
}

.progressBarContainer {
    display: flex;
    align-items: center;
    justify-content: start;
    width: 100%;
    height: var(--margin-s);
    border: 2px solid var(--light);
    background-color: var(--bg);
    border-radius: var(--radius-m);
    overflow: hidden;
}

.progressBar {
    width: 0%;
    height: 100%;
    background: linear-gradient(to right, color-mix(in srgb, var(--vib) 50%, var(--bg) 50%), var(--vib));
    transition: width .3s ease-out;
}

.overlayLetterpair {
    font-size: 20rem;
    text-align: center;
}

.nextLetterpair {
    font-size: var(--fs-header);
    text-align: center;
    color: #ffffff80;
}

@media (max-width: 768px) {
    .whileTrainingContainer {
        width: 85vw;
    }
    .overlayLetterpair {
        font-size: 13.5rem;
    }
    .quitBtn {
        top: var(--margin-s);
        left: var(--margin-s);
    }
}

@media (max-width: 480px) {
    .whileTrainingContainer {
        width: 90vw;
        gap: var(--margin-xs);
    }

    .progressBarContainer {
        height: calc(var(--margin-s)*1.5);
        border-radius: var(--radius-xl);
    }

    .overlayLetterpair {
        font-size: 8.5rem;
    }
}

/*#endregion*/

/* Done training */

.afterTrainingContainer {
    transition: opacity 0.3s;
    display: grid;
    grid-template-columns: 2.5fr 1.5fr 1fr;
    grid-template-rows: 1fr 3fr;
    grid-template-areas:
        "data btns table"
        "chart chart table";
    width: 90vw;
    height: 90vh;
    gap: var(--margin-m);
    margin: auto;
}

.afterTrainingContainer>div {
    border: 3px solid var(--light);
    border-radius: var(--radius-l);
    box-shadow: 0 0 10px 0 var(--light);
}

.trainEndData {
    grid-area: data;
    display: flex;
    flex-direction: row;
}

.trainEndDataC1,
.trainEndDataC2 {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    font-size: var(--fs-subheader);
    text-align: center;
}

.shareSessionBtn {
    color: var(--light);
    outline: 2px solid var(--light);
    border-radius: var(--radius-m);
    padding-inline: var(--margin-s);
    line-height: 1;
    text-decoration: none;
    text-align: center;

    &:hover {
        color: var(--vib);
        outline: 2px solid var(--vib);
        cursor: pointer;
    }
}

.trainEndTableDiv {
    grid-area: table;
    height: 100%;
    overflow: scroll;
}

#trainEndTable {
    width: 100% !important;
    max-height: 100%;
    border-collapse: separate;

    & thead {
        background-color: var(--bg);
        font-size: var(--fs-subheader);
        position: sticky;
        top: 0;
    }

    & th {
        padding-block: var(--margin-xs);
        border-bottom: 3px solid var(--light);

        &:hover {
            cursor: pointer;
            color: var(--vib);
        }
    }

    & tbody tr {
        background-color: var(--bg);
        color: var(--light);
    }

    & td {
        border-collapse: collapse;
        border-bottom: 1px solid var(--light);
        font-size: var(--fs-subheader);
        padding-block: var(--margin-xs);
        text-align: center;
        width: 50%;
        user-select: text;
    }
}

.trainEndChartDiv {
    grid-area: chart;
    padding-block: var(--margin-s);
    display: flex;
    justify-content: center;
    align-items: center;
}

.trainEndBtns {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;

    &>* {
        color: var(--bg);
        width: 80%;
        font-size: var(--fs-subpoints);
        text-align: center;
        background-color: var(--light);
        border-radius: var(--radius-m);
        padding-block: 3px;
        text-decoration: none;
        border: 2px solid transparent;

        &:hover {
            color: var(--light);
            background-color: var(--bg);
            border: 2px solid var(--light);
            cursor: pointer;
        }
    }
}

@media (max-width: 1500px) and (min-width: 1025px){

    .trainEndData * {
        font-size: var(--fs-subpoints);
    }
}

@media (max-width: 1024px) and (min-width: 769px) {
    .trainOverlay {
        padding: var(--margin-l);
    }

    .afterTrainingContainer {
        width: 100%;
        height: 100%;
        grid-template-columns: 2fr 1fr;
        grid-template-rows: 2fr 1fr 3fr;
        grid-template-areas:
            "data table"
            "btns table"
            "chart chart";
        gap: var(--margin-s);
    }

    .trainEndBtns {
        flex-direction: row;
        gap: var(--margin-xs);
    }

    .trainEndBtns>* {
        width: 25%;
    }

    #trainEndTable {
        & th {
            font-size: var(--fs-subpoints);
        }

        & td {
            font-size: var(--fs-subpoints);
        }

    }
}

@media (max-width: 768px) and (min-width: 481px) {
    .afterTrainingContainer {
        grid-template-columns: 2fr 1fr;
        grid-template-rows: 1fr 1fr 3fr;
        grid-template-areas:
            "data table"
            "btns table"
            "chart chart";
    }
    .trainEndData * {
        font-size: var(--fs-subpoints);
    }
    #trainEndTable {
        & th {
            font-size: var(--fs-subpoints);
        }

        & td {
            font-size: var(--fs-subpoints);
        }
    }
}

@media (max-width: 480px) {
    .afterTrainingContainer {
        grid-template-columns: 1fr;
        grid-template-rows: max-content max-content 1fr 0px;
        grid-template-areas:
            "data"
            "btns"
            "table"
            "chart";
    }

    .afterTrainingContainer>div {
        border: 2px solid var(--light);
        border-radius: var(--radius-l);
        box-shadow: 0 0 5px 0 var(--light);
    }

    .trainEndData {
        flex-direction: column;
        padding-block: var(--margin-s);
        gap: 0;
    }

    .trainEndDataC1,
    .trainEndDataC2 {
        width: 100%;
        gap: var(--margin-xs);
        font-size: var(--fs-subheader);
    }

    .trainEndBtns {
        padding: var(--margin-xs);
        flex-direction: row;

        &>* {
            padding-inline: var(--margin-xs);
            width: max-content;
        }
    }

    .trainEndChartDiv {
        display: none;
    }

    .trainEndTableDiv {
        & th {
            font-size: var(--fs-header);
        }
    }
}