// ==========================================================================
// Components - Modals
// @status: Not Ready
// ==========================================================================

.modal {
    visibility: hidden;
    z-index: 100;
    display: block;
    position: fixed;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    transition: opacity .3s, visibility 0 0;

    background-color: rgba(0,0,0,.5);

    opacity: 0;
    overflow: auto;
    &.is-visible {
        visibility: visible;

        opacity: 1;
    }
    .modal-window {
        z-index: 1001;
        display: block;
        position: relative;
        top: 2rem;
        left: 50%;

        margin-bottom: 2rem;
        padding: 2rem;

        transform: translateX(-50%);

        border-radius: 6px;
        background-color: #fff;
        img {
            max-width: 100%;
        }
        // @media only screen and (max-width: 767px) {
        // 	width: 95%;
        // }
        // @media only screen and (min-width: 768px) {
        // 	width: 88%;
        // }
        // @media only screen and (min-width: 992px) {
        // 	width: 850px;
        // }
        // @media only screen and (min-width: 1200px) {
        // 	width: 900px;
        // }
        // @media only screen and (min-width: 1920px) {
        // 	width: 950px;
        // }
        // @include breakpoint($screen-xsmall) {
        // 	width: 95%;
        // }
        // @include breakpoint($screen-small) {
        // 	width: 88%;
        // }
        // @include breakpoint($screen-medium) {
        // 	width: 850px;
        // }
        // @include breakpoint($screen-large) {
        // 	width: 900px;
        // }
        // @include breakpoint($screen-xlarge) {
        // 	width: 950px;
        // }
    }
    .modal-close {
        display: block;
        position: absolute;
        top: 0;
        right: 0;

        width: 32px;
        height: 32px;

        color: #666;
        font-size: 24px;
        font-weight: bold;
        line-height: 32px;
        text-align: center;
        text-decoration: none;
        i.icon {
            width: 24px;
            height: 24px;

            color: #666;
            font-size: 24px;
            font-weight: bold;
            line-height: 32px;
        }
    }
    // .modal-overlay {
    // 	position: fixed;
    // 	z-index: 1000;
    // 	top: 0;
    // 	left: 0;
    // 	width: 100%;
    // 	height: 100%;
    // 	background-color: rgba(0,0,0,0.5);
    // }
    .section:first-of-type {
        padding-top: 0;
    }
    .section:last-of-type {
        padding-bottom: 0;
    }
}
