@import "../../style_config/config";


// ⚠️ JDmodal 로 수정할수없음 
.ReactModal {
    // 모달 장막
    &__Overlay {
        display: flex;
        position: fixed;
        top:0;
        left: 0;
        right: 0;
        bottom: 0;
        align-items: center;
        justify-content: center;
        z-index: $z-index-9;
        background-color: $modal-background-color;
        opacity: 0;
        transition: 0.2s;
        transition-timing-function: ease-in-out;
        

        &--after-open {
            opacity: 1;
        }
    }

    // 모달 내용
    &__Content  {
        background-color:white;
        position: relative;
        padding: $modal-content-padding;
        outline: none;
        border-radius: $modal-border-radius;
        opacity: 0;
        transform: scale(0);
        transition: 0.3s;
        transition-timing-function: ease-out;
        
        &--after-open {
            transform: scale(1);
            opacity: 1;
        }
        @extend %z-depth-3;
        
        @include response ($full,$phablet) {
            max-width: 80%;
        }

        @include response ($phablet) {
            margin: $container-padding;
        }

        max-height: 80vh;
        overflow-y:auto;

        .container {
            padding: 0;
        }

        @include response($phablet) {
            padding: $modal-content-padding /2;
            max-height: 80%;
            margin-bottom: 10%;
        }
    }
}

.inIframe {
    .ReactModal {
        &__Content{
            margin-bottom: 0%!important;
            margin-top:0%!important;
        }
    }
}

// 커스텀 여기서부터
.JDmodal-overlay {
    
    &--underHeader {
        z-index: $z-index-7;
        height: 100vh;
        .ReactModal__Content {
            top: 1.5rem;
            max-height: calc(85vh - #{$header-height});
        }
    }
    
    &--noAnimation {
        transition: 0s!important;
        .ReactModal__Content {
            transition: 0s!important;
        }
    }
}
.JDmodal {



    &--alert {
        font-weight:bold;
    }

    &--center {
        text-align:center;
    }

    &--visibleOverflow {
        overflow:visible;
        @include response($tablet) {
            overflow:auto;
        }
    }
    
    // 엔드섹션
    &__endSection {

        &--confirm {
            padding-top: $modal-section-padding;
        }

        &--float {
          position:absolute;   
        }
        
        bottom: 0 + $modal-content-padding;
        left: $modal-content-padding;
        right: $modal-content-padding;
        .JDbtn {
            margin-bottom: 0;
        }
        h6 {
            margin-bottom: 0;
        }
    }
    
    // 모달 내부 영역구분
    .modal__section {
        padding-bottom: $modal-section-padding;
    }
}