style_modal.less

:root {
    --levitate: 8;
}

// Color variables (appears count calculates by raw css)
@br: var(--br);

@color0: var(--nc-bg-2); // Appears 6 times
@color1: #333333; // Appears 2 times
@color2: var(--green); // Appears 2 times

// Width variables (appears count calculates by raw css)
@width0: 160px; // Appears 2 times
@width1: 100vw; // Appears 2 times
@width3: 100%; // Appears 2 times

// Height variables (appears count calculates by raw css)
@height0: 100vh; // Appears 2 times

.modal-container {
    padding: 2em 0;
    width: @width0;

    button,
    label {
        cursor: pointer;
        display: block;
        background: #446CB3;
        border-radius: @br;
        border: 0;
        //box-shadow: 0 5px 5px -5px @color1;
        color: @color0;
        font-size: 22px;
        //height: 50px;
        line-height: 50px;
        margin: 0 auto;
        transition: background 0.3s ease-in;
        width: @width0;
    }

    .modal-backdrop {
        height: 0;
        opacity: 0;
        overflow: hidden;
        transition: opacity 0.2s ease-in;
        width: 0;
    }

    .modal-toggle {
        cursor: pointer;
        //height: 100%;
        left: 0;
        margin: 0;
        opacity: 0;
        position: absolute;
        top: 0;
        width: @width3;

        &:hover~button {
            background: @color2;
        }

        &:checked {
            height: @height0;
            left: 0;
            opacity: 0;
            position: fixed;
            top: 0;
            width: @width1;
            z-index: 9;

            .donation {
                background-color: #ed1c24 !important;
                color: @color0  !important;
                padding: 10px 20px !important;
            }
        }

        &:checked~.modal-backdrop {
            background-color: rgba(0, 0, 0, 0.6);
            height: @height0;
            left: 0;
            opacity: 1;
            pointer-events: none;
            position: fixed;
            top: 0;
            width: @width1;
            z-index: 9;

            .modal-content {
                background-color: @color0;
                border-radius: @br;
                box-shadow: 0 calc(var(--levitate) * 0.5 px) calc(var(--levitate) * 0.6 px) rgba(0, 0, 0, calc(var(--levitate) * 0.013)), 0 calc(var(--levitate) * 1 px) calc(var(--levitate) * 1.2 px) rgba(0, 0, 0, calc(var(--levitate) * 0.013)), 0 calc(var(--levitate) * 2 px) calc(var(--levitate) * 2.4 px) rgba(0, 0, 0, calc(var(--levitate) * 0.013)), 0 calc(var(--levitate) * 4 px) calc(var(--levitate) * 4.4 px) rgba(0, 0, 0, calc(var(--levitate) * 0.013));
                cursor: auto;
                height: 280px;
                left: calc(50% - 200px);
                max-width: 400px;
                padding: 10px 30px;
                pointer-events: auto;
                position: absolute;
                top: 12%;
                width: @width3;
                z-index: 999;

                .modal-close {
                    background: @color0;
                    color: var(--text-main);
                    cursor: pointer;
                    font-size: 1em;
                    position: absolute;
                    right: 2px;
                    text-align: center;
                    top: 0;
                    width: 25px;

                    &:hover {
                        color: @color1;
                    }

                    &.button {
                        background: var(--nc-lk-1);
                        border-radius: @br;
                        color: @color0;
                        font-size: 14px;
                        font-weight: normal;
                        bottom: 10px;
                        right: 10px;
                        top: initial;
                        width: 50px;

                        &:hover {
                            background: var(--nc-lk-2);
                            color: @color0;
                        }
                    }
                }
            }
        }
    }
}

@media(max-width :400px) {
    .modal-container modal-toggle:checked~.modal-backdrop .modal-content {
        left: 0;
    }
}