// Distance
$modal-distance:10px;
$modal-info-color: #5394ff;
$modal-success-color: #01d36b;
$modal-warning-color: #ff8e38;
$modal-danger-color: #ff4b4b;

// Styles for body
body {
    &.modal-open {
        padding-right: 0 !important;
        overflow: auto;
    }
    &.scrollable {
        overflow-y: auto;
    }
}

// *** ENHANCED BOOTSTRAP MODALS ***///
// General styles
.modal-dialog {
    .modal-content {
        @include border-radius(2px);
        @extend .z-depth-1-half;
        border: 0;
    }
}

// Position & Size
.modal {
    padding-right:0 !important;
    .modal-dialog {
        @media (min-width: 768px) {
            &.modal-top {
                top: 0;
            }
            &.modal-left {
                left: 0;
            }
            &.modal-right {
                right: 0;
            }
            &.modal-bottom {
                bottom: 0;
            }
            &.modal-top-left {
                top: $modal-distance;
                left: $modal-distance;
            }
            &.modal-top-right {
                top: $modal-distance;
                right: $modal-distance;
            }
            &.modal-bottom-left {
                left: $modal-distance;
                bottom: $modal-distance;
            }
            &.modal-bottom-right {
                right: $modal-distance;
                bottom: $modal-distance;
            }
        }
    }
    &.fade {
        &.top:not(.show) .modal-dialog {
            transform: translate3d(0, -25%, 0);
        }
        &.left:not(.show) .modal-dialog {
            transform: translate3d(-25%, 0, 0);
        }
        &.right:not(.show) .modal-dialog {
            transform: translate3d(25%, 0, 0);
        }
        &.bottom:not(.show) .modal-dialog {
            transform: translate3d(0, 25%, 0);
        }
    }
    @media (min-width: $medium-screen) {
        &.modal-scrolling {
            position: relative;
            .modal-dialog {
                position: fixed;
                z-index: 1050;
            }
        }
        &.modal-content-clickable {
            top:auto;
            bottom:auto;
            .modal-dialog {
                position:fixed;
            }
        }
        .modal-fluid {
            width: 100%;
            max-width: 100%;
            .modal-content {
                width: 100%;
            }
        }
        .modal-frame {
            position: absolute;
            width: 100%;
            max-width: 100%;
            margin: 0;
            &.modal-bottom {
                bottom: 0;
            }
        }
        .modal-full-height {
            display: flex;
            position: absolute;
            width: 400px;
            height: 100%;
            margin: 0;
            top: 0;
            // bottom: 0;
            right: 0;
            &.modal-top, &.modal-bottom {
                display:block;
                width:100%;
                max-width:100%;
                height:auto;
            }
            &.modal-top {
                bottom:auto;
            }
            &.modal-bottom {
                top:auto;
            }
            .modal-content {
                width:100%;
            }
            &.modal-lg {
                max-width:90%;
                width:90%;
                @media (min-width:$medium-screen) {
                    max-width:800px;
                    width:800px;  
                }
                @media (min-width:$large-screen) {
                    max-width:1000px;
                    width:1000px;  
                }
            }
        }
        .modal-side {
            position: absolute;
            right: $modal-distance;
            bottom: $modal-distance;
            margin: 0;
            width: 400px;
        }
    }
}

// Styles
.modal-dialog {
    .btn .fa {
        color:#fff !important;
    }
    [class*="btn-outline-"] .fa {
        color: inherit !important;
    }
    // Cascading modals
    &.cascading-modal {
        margin-top: 10%;
        .close {
            color:#fff;
            opacity:1;
            text-shadow:none;
        }
        // Cascading header
        .modal-header {
            text-align: center;
            margin: -2rem 1rem 1rem 1rem;
            padding: 1.5rem;
            border: none;
            @extend .z-depth-1-half;
            @include border-radius(3px);
            .close {
                margin-right: 1rem;
            }
            .title {
                width: 100%;
                margin-bottom: 0;
                font-size: 1.25rem;
                .fa {
                    margin-right: 9px;
                }
            }
            .social-buttons {
                margin-top: 1.5rem;
                a {
                    font-size: 1rem;
                }
            }
        }
        // Cascading tabs nav
        .modal-c-tabs {
            .nav-tabs {
                margin: -1.5rem 1rem 0 1rem;
                @extend .z-depth-1;
            }
            .tab-content {
                padding: 1.7rem 0 0 0;
            }
        }
        .nav-tabs {
            display:flex;
            li {
                flex:1;
                a {
                    text-align:center;
                    font-weight:normal;
                }
            }
        }
        // Footer customization
        .modal-body,
        .modal-footer {
            color: #616161;
            padding-right: 2rem;
            padding-left: 2rem;
            .additional-option {
                text-align: center;
                margin-top: 1rem;
            }
        }
        // Cascading avatar
        &.modal-avatar {
            margin-top: 6rem;
            .modal-header {
                @extend .z-depth-0;
                @extend .img-fluid;
                margin: -6rem 2rem -1rem 2rem;
                img {
                    width: 130px;
                    @extend .z-depth-2;
                    margin-left: auto;
                    margin-right: auto;
                }
            }
        }
    }
    // Modal notify
    &.modal-notify {
        .heading {
            margin: 0;
            padding: 0.3rem;
            color: #fff;
            font-size: 1.15rem;
        }
        .modal-header {
            @extend .z-depth-1;
            border: 0;
        }
        .close {
            opacity: 1;
        }
        .modal-body {
            padding: 1.5rem;
            color: #616161;
        }
        .btn-outline-secondary-modal {
            background-color: transparent;
        }
        // Modal info
        &.modal-info {
            .modal-header {
                background-color: $modal-info-color;
            }
            .fa {
                color: $modal-info-color;
            }
            .badge {
                background-color: $modal-info-color;
            }
            @include make-button('primary-modal', $modal-info-color);
            @include make-outline-button('secondary-modal', $modal-info-color);
        }
        // Modal warning
        &.modal-warning {
            .modal-header {
                background-color: $modal-warning-color;
            }
            .fa {
                color: $modal-warning-color;
            }
            .badge {
                background-color: $modal-warning-color;
            }
            @include make-button('primary-modal', $modal-warning-color);
            @include make-outline-button('secondary-modal', $modal-warning-color);
        }
        // Modal success
        &.modal-success {
            .modal-header {
                background-color: $modal-success-color;
            }
            .fa {
                color: $modal-success-color;
            }
            .badge {
                background-color: $modal-success-color;
            }
            @include make-button('primary-modal', $modal-success-color);
            @include make-outline-button('secondary-modal', $modal-success-color);
        }
        // Modal danger
        &.modal-danger {
            .modal-header {
                background-color: $modal-danger-color;
            }
            .fa {
                color: $modal-danger-color;
            }
            .badge {
                background-color: $modal-danger-color;
            }
            @include make-button('primary-modal', $modal-danger-color);
            @include make-outline-button('secondary-modal', $modal-danger-color);
        }
    }
}