@import "./_stu-body";
@import "./_stu-box";
@import "./_stu-form";

.box {
    .box-body {
        position: relative;

        .body {
            padding: 10px;
            background: #d8e7f9;
            background: linear-gradient(174.54deg, rgba(204, 224, 248, 0.76) 0.23%, rgba(242, 249, 255, 0.76) 120.71%);
            display: flex;
            flex-direction: column;
        }
    }

    .logs-box {
        width: 100%;
        display: flex;
        flex-direction: column;

        .log-box {
            display: flex;
            padding: 10px;
            background: rgba(255, 255, 255, 0.6);
            border-radius: 8px;
            margin: 5px 0;
            overflow: hidden;

            .content {
                width: 100%;
                display: flex;
                flex-direction: column;
                padding: 5px;
                padding-right: 15px;

                .title {
                    font-weight: 600;
                    color: #03AEBC;
                    font-size: 14px;
                }

                .text {
                    color: #36536D;
                }
            }

            .btn-box {
                display: flex;
                justify-content: center;
                align-items: center;
                padding: 5px;

                .btn {
                    font-size: 14px;
                    width: 90px;
                }
            }

            &.send {
                .btn {
                    background: #DE5E5E;
                }
            }
        }

        .empty {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #36536D;
            font-size: 16px;
            opacity: .4;
        }
    }
}

.question {
    display: none;

    button {
        --w: 80px;
        width: var(--w);
        height: var(--w);
        border-radius: var(--w);
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translateX(-50%) translateY(-50%);
        z-index: 5;
        color: #fff;
        border: none;
        outline: none;

        &:hover {
            background-color: #bd2130;
        }

        i {
            font-size: 40px;
        }

        &:not(:hover) {
            animation: 1s shine ease-in-out infinite;

            i {
                animation: 1s flashing ease-in-out infinite;
            }
        }
    }
}

.question-text {
    font-size: 16px;
    margin-bottom: 10px;
    font-weight: 600;
    color: var(--mc);
}

@keyframes shine {
    0% {
        filter: drop-shadow(0 0 12px #dc3545);
    }

    50% {
        filter: drop-shadow(0 0 12px #bd2130);
    }

    100% {
        filter: drop-shadow(0 0 12px #dc3545);
    }
}

@keyframes flashing {
    0% {
        opacity: 1;
        transform: scale(1)
    }

    50% {
        opacity: 0.5;
        transform: scale(0.9)
    }

    100% {
        opacity: 1;
        transform: scale(1)
    }
}