/* ==========================================================================
    Demo Modal
========================================================================== */

.c-demoModal {
    --body-text-color: var(--black);
    --modal-padding: 64px;
    --close-size: 40px;

    position: relative;
    background: var(--white);
    max-width: 450px;
    border-radius: 16px;
    text-align: center;
    box-shadow: 0 20px 25px -5px rgba(var(--box-shadow-color), 0.1), 0 8px 10px -6px rgba(var(--box-shadow-color), 0.1);
    border: 1px solid rgb($gray-200, 0.6);
    opacity: 0;
    transform: scaleY(0) translateX(-100%);

    &__close {
        position: absolute;
        top: calc(var(--modal-padding) / 2 - var(--close-size) / 2);
        right: calc(var(--modal-padding) / 2 - var(--close-size) / 2);
        z-index: 1;
        width: var(--close-size);
        height: var(--close-size);
        line-height: 0;
        opacity: 0;
        transform: scale(0.01);

        &:before, &:after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 28px;
            height: 3px;
            background: var(--black);
            transition: background .35s $ease-in;
        }

        &:before {
            transform: translate3d(-50%, -50%, 0) rotate(-45deg);
        }

        &:after {
            transform: translate3d(-50%, -50%, 0) rotate(45deg);
        }

        &:hover {
            &:before, &:after {
                background: var(--body-heading-color);
            }
        }
    }

    &__inner {
        padding: var(--modal-padding);
        opacity: 0;
    }
}