@import "../scss/variables";

.section-ct-navbarside {
    .title {
        color: $midNight;
        font-weight: bold;
    }

    .section-exam,
    .section-user {
        display: flex;
        flex-flow: column nowrap;
    }

    .navbarside-cover {
        left: 0;
        top: 0;
        position: fixed;
        width: 100vw;
        height: 100vh;
        opacity: 0.7;
        background-color: $midNight;
        z-index: 99;
    }

    .navbarside-section {
        z-index: 100;

        .navbarside-content {
            position: fixed;
            background-color: $white;
            border-radius: 4px;
            border: solid 1px rgba(25, 34, 48, 0.1);
        }
    }
    @media (min-width: $mediaDesktop) {
        .navbarside-section {
            position: fixed;
            width: 100%;
            // width: 167px;
            height: 65px;
            top: 0;
            cursor: pointer;
        }

        .navbarside-section,
        .navbarside-content {
            @media (min-width: $Medium) {
                right: calc((100vw - 720px)/2);
            }

            @media (min-width: $Large) {
                right: calc((100vw - 960px)/2);
            }

            @media (min-width: $XLarge) {
                right: calc((100vw - 1140px)/2);
            }
        }

        .navbarside-user {
            display: none;
        }

        .navbarside-cover {
            opacity: 0;
        }

        .navbarside-content {
            margin-top: 65px;

            &.tutor {
                margin-top: 50px;
            }
        }

        .section-exam {
            line-height: 1.5;

            .title {
                padding: 5px 20px;
                line-height: 1.1;
                font-size: 14.7px;
            }
        }

        .section-exam {
            border-bottom: 1px solid $borderGray;
        }

        .section-exam,
        .section-user {
            padding: 15px 0 20px !important;

            > div {
                padding: 5px 20px 0;
            }
        }
    }
    @media (max-width: $mediaDesktop) {
        .navbarside-content {
            top: 0;
            right: 0;
            height: 100vh;
            font-size: 22.4px;

            .navbarside-user {
                padding: 15px;

                .icon > div {
                    border: solid 1px $midNight;
                    text-align: center;
                    font-size: 24px;
                    font-weight: bold;
                    line-height: 38px;
                    width: 38px;
                    height: 38px;
                    color: $white;
                    border-radius: 19px;
                    background-color: $midNight;
                }

                .text {
                    font-size: 24px;
                    font-weight: bold;
                    line-height: 38px;
                    color: $midNight;
                    padding-left: 10px;
                }

                .close {
                    position: absolute;
                    top: 0;
                    right: 5px;
                }
            }

            .section-exam {
                border-top: 1px solid $clearSky;
                border-bottom: 1px solid $clearSky;
            }

            .section-exam {
                line-height: 1.5;

                .title {
                    padding: 5px 20px;
                    line-height: 1.1;
                    font-size: 16px;
                }
            }

            .section-exam,
            .section-user {
                padding: 15px 0 20px !important;

                > div {
                    padding: 5px 20px 0;
                }
            }
        }
    }
}