//RISCRITTURA IN SASS DI COMPONENTS/MODALS.LESS

$modal__z-index: 20;

$modal__background-color:  $modal-content-bg;
$modal__box-shadow: 0 0 12px 2px rgba(0, 0, 0, .35);

$modal-popup__indent-vertical: 5rem;
$modal-popup__padding: 3rem;
$modal-popup__width: 75%;
$modal-popup__z-index: $modal__z-index;

$modal-slide__first__indent-left: 14.8rem;
$modal-slide__indent-left: 4.5rem;
$modal-slide__padding: 2.6rem;
$modal-slide__z-index: $modal__z-index;

$modal-slide-header__padding-vertical: 2.1rem;

$modal-popup-confirm__width: 50rem;

$modal-popup-image-box__border-color: $gray-100;
$modal-popup-image-box__max-width: 78rem;

$modal-popup-image-box-preview__max-width: 400px;
$modal-popup-image-box-preview-image__max-height: 54rem;

//
//  Utilities
//  ---------------------------------------------

.lib-modal {
    bottom: 0;
    left: 0;
    min-width: 0;
    position: fixed;
    right: 0;
    top: 0;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s .3s, opacity .3s ease;

    &._show {
        visibility: visible;
        opacity: 1;
        transition: opacity .3s ease;

        .modal-inner-wrap {
            transform: translate(0, 0);
        }
    }

    .modal-inner-wrap {
        background-color: $modal__background-color;
        box-shadow: $modal__box-shadow;
        opacity: 1;
        pointer-events: auto;
    }
}

.lib-modal-slide {
    left: $modal-slide__first__indent-left;
    z-index: $modal-slide__z-index;

    &._show {
        .modal-inner-wrap {
            transform: translateX(0);
        }
    }

    .modal-inner-wrap {
        height: 100%;
        overflow-y: auto;
        position: static;
        transform: translateX(100%);
        transition:         transform .3s ease-in-out;
        width: auto;
    }
}

.lib-modal-popup {
    z-index:  $modal-popup__z-index;
    left: 0;
    overflow-y: auto;

    &._show {
        .modal-inner-wrap {
            transform: translateY(0);
        }
    }

    .modal-inner-wrap {
        margin: $modal-popup__indent-vertical auto;
        width: $modal-popup__width;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        height: auto;
        left: 0;
        position: absolute;
        right: 0;
        transform: translateY(-200%);
        transition:         transform .2s ease;
        border-radius: $border-radius;


    }
}

//
//  Common
//  _____________________________________________

body {
    &._has-modal {
        height: 100%;
        overflow: hidden;
        width: 100%;
    }
}

//  Modals overlay
.modals-overlay {
    background-color: rgba($modal-backdrop-bg, $modal-backdrop-opacity);
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 10;
}

.modal-slide,
.modal-popup {
    @extend .lib-modal;
}


@mixin action-close(){    
    float: right;
    margin: -$modal-inner-padding;
    padding: $modal-inner-padding;
    font-size: 30px;
    line-height: 22px;
    cursor: pointer;
    background: transparent;
    border: 0;
    box-shadow: none;
    
    span {
        display:none;
    }

    &:before {
        color: #8f8f8f;
        content: "\00d7";
        margin: 0;        
        speak: none;
    }
}

.modal-slide {
    @extend .lib-modal-slide;
    &._inner-scroll {
        .modal-inner-wrap {
            overflow-y: visible;
            display: flex;
            flex-direction: column;
        }

        .modal-header,
        .modal-footer {
            flex-grow: 0;
            flex-shrink: 0;
        }

        .modal-content {
            overflow-y: auto;
        }

        .modal-footer {
            margin-top: auto;
        }
    }

    .modal-header,
    .modal-content,
    .modal-footer {
        padding: $modal-inner-padding;
    }

    .modal-header {
        border-bottom: $modal-header-border-width solid $modal-header-border-color;

        .action-close {
            @include action-close();
        }
    }
}

.modal-popup {
    @extend .lib-modal-popup;

    //  If applied, switching outer popup scroll to inner
    &._inner-scroll {
        overflow-y: visible;

        .ie11 &,
        .ie10 &,
        .ie9 & {
            overflow-y: auto;
        }

        .modal-inner-wrap {
            max-height: 90%;

            .ie11 &,
            .ie10 &,
            .ie9 & {
                max-height: none;
            }
        }

        .modal-content {
            overflow-y: auto;
        }
    }

    .modal-header,
    .modal-content,
    .modal-footer {
        padding: $modal-inner-padding;
    }

    .modal-header,
    .modal-footer {
        flex-grow: 0;
        flex-shrink:0;
    }

    .modal-header {
        border-bottom: $modal-header-border-width solid $modal-header-border-color;
        .action-close {
            @include action-close();
        }        
    }    
    .modal-footer {
        border-top: $modal-header-border-width solid $modal-header-border-color;
    }    

    .modal-footer-actions {
        text-align: right;
    }
}

.modal-footer {
    button {
        @extend .btn;

        &.action-primary {
            @extend .btn-primary;            
        }
        &.action-secondary  {
            @extend .btn-secondary;            
        }        
    }
}
//
//  Mobile
//  _____________________________________________

//  Mobile transform to modal-slide
/*
.media-width($extremum, $break) when ($extremum = 'max') and ($break = $screen__m) {
    .modal-popup {
        &.modal-slide {
            @extend .lib-modal-slide;

            .modal-inner-wrap {
                margin: 0;
                max-height: none;
            }
        }
    }
}
*/
