// Copyright (c) 2016-2018 VMware, Inc. All Rights Reserved.
// This software is released under MIT license.
// The full license information can be found in LICENSE in the root directory of this project.

.modal {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: map-get($clr-layers, modal);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2rem;

    @media screen and (max-width: map-get($clr-breakpoints, small)) {
        padding: 0.5rem;
    }
}

.modal-dialog {
    position: relative;
    z-index: map-get($clr-layers, modal);
    width: $clr-modal-md-width;
    max-width: 100%;

    &.modal-sm {
        width: $clr-modal-sm-width;
    }

    &.modal-lg {
        width: $clr-modal-lg-width;
    }

    &.modal-xl {
        width: $clr-modal-xl-width;
    }

    $modal-boxshadow-y: 1px;
    $modal-boxshadow-spread: 2px;

    .modal-content {
        padding: $clr-modal-content-padding-top $clr-modal-content-padding-right $clr-modal-content-padding-bottom $clr-modal-content-padding-left;
        background-color: $clr-modal-bg-color;
        border-radius: $clr-global-borderradius;
        box-shadow: 0 $modal-boxshadow-y $modal-boxshadow-spread $modal-boxshadow-spread $clr-modal-content-box-shadow-color;
    }

}

.modal-header {
    border-bottom: none;
    padding: 0 0 1rem 0;

    .modal-title {
        @include clr-getTypePropertiesForDomElement(modal_header, (color, font-size, font-family, font-weight, line-height, letter-spacing));
        margin: 0;
        padding: 0 0.125rem;
    }

    .close {
        margin-top: -0.0416667rem;
        margin-right: -0.208333rem;
        font-size: 1.0833rem;
        line-height: 1rem;

        clr-icon {
            fill: $clr-modal-close-color;

            // per measurement, this results in an icon that is 16x16...
            width: 1rem;
            height: 1rem;
        }
    }
}

.modal-body {
    // This doesn't do much, but at least with several paragraphs in the content
    // it doesn't mess up the modal's proportions.
    max-height: 70vh;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 0.125rem;

    & > :first-child {
        margin-top: 0;
    }
    & > :last-child {
        margin-bottom: 0;
    }
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    padding: 1rem 0 0 0;

    .btn {
        //switched right margin to left because footer is right aligned
        margin: 0 0 0 0.5rem;
    }
}

@media screen
and (max-width: map-get($clr-breakpoints, medium))
and (orientation: landscape) {
    .modal-body {
        max-height: 55vh;
    }
}

@media screen and (max-width: map-get($clr-breakpoints, small)) {
    .modal-content {
        padding: 0.5rem 0 0.5rem 1rem;
    }

    .modal-header {
        padding: 0 1rem 0.5rem 0;
    }

    .modal-body {
        max-height: 55vh;
    }

    .modal-footer {
        padding: 0.5rem 1rem 0 0;
    }
}

.modal-backdrop {
    $clr-backdrop-opacity: 0.85;
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background-color: $clr-modal-backdrop-color;
    opacity: $clr-backdrop-opacity;
    z-index: map-get($clr-layers, modal-bg);
}

// modal-nav is only used in wizards
.modal .modal-nav {
    display: none;
}

.modal-outer-wrapper {
    height: 100%;
    width: 100%;
}

.modal-ghost-wrapper {
    display: none;
}