//
// Popup
// --------------------------------------------------

@color-popup-header-bg:                      transparent;
@color-popup-header-text:                    @heading-color;
@color-popup-footer-bg:                      transparent;
@color-popup-content-bg:                     @popup-bg;

@popup-box-shadow: ~"0 27px 24px 0 rgba(0, 0, 0, 0.2), 0 40px 77px 0 rgba(0, 0, 0, 0.22)";

@modal-inner-padding:                        @padding-standard;
@modal-title-padding:                        15px;
@modal-title-line-height:                    @line-height-base;
@modal-content-border-color:                 rgba(0,0,0,.2);
@modal-content-fallback-border-color:        #999;
@modal-backdrop-bg:           @overlay-background;
@modal-backdrop-opacity:      .5;
@modal-header-border-color:   #e5e5e5;
@modal-footer-border-color:   @modal-header-border-color;
@modal-lg:                    900px;
@modal-md:                    600px;
@modal-sm:                    300px;

//
// Popup
// --------------------------------------------------

@popup-size-giant: 982px;
@popup-size-huge: 900px;
@popup-size-large: 750px;
@popup-size-small: 400px;
@popup-size-tiny: 300px;

.modal {
    z-index: @zindex-modal;
}

.modal-backdrop {
    z-index: (@zindex-modal-background - 10);
    background-color: @modal-backdrop-bg;
}

.modal-content {
    border: @popup-border;
    border-radius: 8px;
    box-shadow: @box-shadow-z2;
    background: @color-popup-content-bg;
}

.modal-content.popup-shaking {
    .animation(popup-shake 0.82s cubic-bezier(.36,.07,.19,.97) both);
    .transform(translate3d(0, 0, 0));
    .backface-visibility(hidden);
    .perspective(1000px);
}

.modal-content .modal-header {
    background: @color-popup-header-bg;
    color: @color-popup-header-text;
    .border-top-radius(@border-radius-base);
    padding: @modal-title-padding @padding-standard;
    border-bottom: @popup-border;

    h4 {
        font-weight: normal;
        font-size: 18px;
    }

    button.close {
        width: 19px;
        height: 19px;
        border-radius: 20px;
        position: relative;
        top: 5px;
        .opacity(1);
        font-size: 0;
        color: transparent;

        &:after {
            .icon-OctoFont();
            content: @icon-cross;
            color: @color-grey-1;
            font-size: 16px;
            position: relative;
            top: -1px;
        }

        &:hover:after {
            color: @brand-danger;
        }

        &:focus {
            outline: none;
            background-color: @toolbar-focus-bg;
        }

    }
}

.modal-content .modal-body {
    padding: 20px 20px 0 20px;

    > p:last-child {
        margin-bottom: 20px;
    }

    &.modal-no-header {
        padding-top: @padding-standard;
    }

    &.modal-no-footer {
        padding-bottom: @padding-standard;
    }
}

.modal-content .modal-footer {
    background: @color-popup-footer-bg;
    border: none;
    margin-top: 0;
    padding: 0 @padding-standard @padding-standard @padding-standard;
    justify-content: flex-start;

    > .pull-right {
        margin-left: auto;
    }

    > *:first-child {
        margin-left: 0;
    }

    > *:last-child {
        margin-right: 0;
    }

    .btn-link {
        padding-left: 5px;
        padding-right: 5px;
    }
}

.modal-dialog {
    max-width: 598px;

    &.size-adaptive {
        max-width: 100%;
        padding-right: 50px;
        padding-left: 50px;
    }

    &.adaptive-height {
        height: 100%;
        min-height: 600px;
        margin-top: 0;
        margin-bottom: 0;
        padding-top: 50px;
        padding-bottom: 50px;

        .modal-content {
            height: 100%;
        }
    }

    @media (min-width: @screen-sm-min) {
        &.size-tiny  { max-width: @popup-size-tiny; }
        &.size-small { max-width: @popup-size-small; }
    }
    @media (min-width: @screen-md-min) {
        &.size-large { max-width: @popup-size-large; }
        &.size-huge  { max-width: @popup-size-huge; }
        &.size-giant { max-width: @popup-size-giant; }
    }
    @media (max-width: @screen-sm) {
        &.size-adaptive {
            max-width: auto;
            padding: 5px 0;
            margin: 0;
        }
    }

    &.size-400 { max-width: 400px; }
    &.size-450 { max-width: 450px; }
    &.size-500 { max-width: 500px; }
    &.size-550 { max-width: 550px; }
    &.size-600 { max-width: 600px; }
    &.size-650 { max-width: 650px; }
    &.size-700 { max-width: 700px; }
    &.size-750 { max-width: 750px; }
    &.size-800 { max-width: 800px; }
    &.size-850 { max-width: 850px; }
    &.size-900 { max-width: 900px; }
    &.size-950 { max-width: 950px; }
    &.size-1000 { max-width: 1000px; }
    &.size-1050 { max-width: 1050px; }
    &.size-1100 { max-width: 1100px; }
    &.size-1200 { max-width: 1200px; }
    &.size-1400 { max-width: 1400px; }
    &.size-auto {
        max-width: auto;
        padding: 5px 0;
        margin: 0;
    }
}

.control-popup {
    &.fade {
        &:not(.show) {
            pointer-events: none;
        }

        .modal-dialog {
            opacity: 0;
            .transition(~'all 0.3s, width 0s');
            .transform(~'scale(0.7)');
        }
    }

    &.fade.show {
        .modal-dialog {
            opacity: 1;
            .transform( ~'scale(1)');
        }
    }
}

.popup-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: (@zindex-modal-background - 10);
    background-color: @modal-backdrop-bg;
    opacity: 1;

    .popup-loading-indicator {
        background: @color-popup-content-bg;
        display: block;
        width: 100px;
        height: 100px;
        position: absolute;
        top: 130px;
        left: 50%;
        margin-left: -50px;
        transition: all 0.3s, width 0s;
        transform: scale(0.7);
        opacity: 0;

        &:after {
            content: ' ';
            display: block;
            background-size: 50px 50px;
            background-repeat: no-repeat;
            background-position: 50% 50%;
            background-image: url('../../images/loader-transparent.svg');
            animation: spin 1s linear infinite;
            width: 50px;
            height: 50px;
            margin: 25px 0 0 25px;
        }
    }

    &.loading .popup-loading-indicator {
        opacity: 1;
        .transform(~'scale(1)');
    }

}

.mac body.modal-open {
    margin-right: 0;
}

// Popup animations
// -------------------------

@-moz-keyframes popup-shake {
    10%, 90% { -moz-transform: translate3d(-1px, 0, 0); }
    20%, 80% { -moz-transform: translate3d(2px, 0, 0); }
    30%, 50%, 70% { -moz-transform: translate3d(-4px, 0, 0); }
    40%, 60% { -moz-transform: translate3d(4px, 0, 0); }
}

@-webkit-keyframes popup-shake {
    10%, 90% { -webkit-transform: translate3d(-1px, 0, 0); }
    20%, 80% { -webkit-transform: translate3d(2px, 0, 0); }
    30%, 50%, 70% { -webkit-transform: translate3d(-4px, 0, 0); }
    40%, 60% { -webkit-transform: translate3d(4px, 0, 0); }
}

@keyframes popup-shake {
    10%, 90% { transform: translate3d(-1px, 0, 0); }
    20%, 80% { transform: translate3d(2px, 0, 0); }
    30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
    40%, 60% { transform: translate3d(4px, 0, 0); }
}