@import "_globals.scss";

.modal__wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba($CL_BACKGROUND, 0.6);
    z-index: 100;
    place-items: center;
    display: grid;
    .modal__box {
        background-color: lighten($CL_BACKGROUND, 5);
        box-shadow: 3px 3px 0px rgba(0, 0, 0, 0.372);
        border: 1px solid lighten($CL_BACKGROUND, 10);
        padding: 20px;
        border-radius: $GLOBAL_BORDER_RADIUS;
        max-width: 550px;
        .content {
            position: relative;
            max-width: 550px;
            .changelog {
                // display: flex;
                // flex-direction: column;
                // align-items: center;

                p {
                    color: darken($CL_TEXT, 5);
                    font-size: 18px;
                    max-width: 95%;
                    margin: 5px;
                }
            }
            padding: 10px 0px;
            font-size: 20px;
            img {
                border-radius: 8px;
            }
            ul {
                margin: 10px 40px;
                font-size: 16px !important;
                color: darken($CL_TEXT, 20);
                display: flex;
                flex-direction: column;
                gap: 5px;
            }
        }
        .modal__title {
            color: darken($CL_TEXT, 20);
            border-bottom: 1px solid lighten($CL_BACKGROUND, 15);
            font-size: 28px;
        }
        .actions {
            display: flex;
            gap: 10px;
            button {
                background-color: darken($CL_BACKGROUND, 2);
                margin: 10px 0px;
            }
        }
    }
}
