/*
 * Modals.
 */

@import "connection-message";
@import "generic-type-picker";

.modal-content {
    border-radius: @modal-content-border-radius;
    .box-shadow(@modal-content-box-shadow);
}

// better alignment in header
.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    h4 {
        // sometimes `modal-title` class is missing
        // so we need to grab rules from it
        // it will no longer be needed when app will be full react
        &:extend(.modal-title);

        small {
            // same than page header
            display: block;
            margin-top: 5px;

            &.with-icon:before {
                content: " ";
                display: inline-block;
                // same as .modal-icon
                width: 20px;
                margin-right: 10px;
            }
        }
    }

    .close {
        order: 2;
        // reset bootstrap
        margin-top: 0;
        float: none;
    }
}

.modal-poster {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    min-height: 100px; // TODO : adapt height according to modal size
    align-items: flex-end;

    .close {
        opacity: .5;
        align-self: flex-start;
        .text-movie-subtitles();

        &:hover,
        &:focus {
            opacity: .75;
        }
    }
    // use movie subtitles styles to make title always readable
    .modal-title,
    .modal-title > small {
        .text-movie-subtitles();
    }
}

.modal-icon {
    width: 20px !important; // removes .fa-fw form HTML to avoid the !important
    margin-right: 10px;
}

.modal-title {
    order: 1;
    flex: 1;
}

.modal-footer {
    background: @modal-footer-bg;
    text-align: left;
}

.modal-btn {
    border-radius: 0 0 @modal-content-border-radius @modal-content-border-radius;
    display: block;
    width: 100%;
    padding: 10px @modal-inner-padding;
    .font-size-modifier(16px);
}

// customize list groups
.modal-content > .list-group {
    margin-bottom: 0;

    .list-group-item {
        border-left: none;
        border-right: none;

        &:first-child {
            border-top: none;
        }
    }
}

// customize nav tabs
.modal-content .nav-tabs {
    padding: 0 @modal-inner-padding;
    border-color: @modal-header-border-color;
    background: @gray-lightest;

    > li > a {
        border-radius: 0;
    }

    .active > a {
        border-color: transparent @modal-header-border-color !important;
    }
}

// customize panel groups
// we use direct child selector to avoid break the display of
// groups inside the body.
.modal-content > .data-details .sections,
.modal-content div > .data-form .form-sections, // spa wrapper
.modal-content > .data-form .form-sections,
.modal-content > .panel-group {
    margin: 0;

    .panel {
        box-shadow: none; // this may be applied to all panels in modals
        border-radius: 0;
        border-left: 0;
        border-right: 0;

        + .panel {
            border-top: none;
            margin: 0;
        }
    }

    .panel-default {
        border-color: @modal-header-border-color;

        .panel-heading {
            background: @gray-lightest;
        }
    }
}

.modal-content {
    div > .data-form + .data-form, // spa wrapper
    > .data-form + .data-form {
        border-top: 1px solid @modal-header-border-color;
    }
}

// customize tables
.modal-content > .table,
.modal-content > div > .table { // allows SPA containers
    margin-bottom: 0;

    tbody {
        background: @modal-content-bg;
        border: none;
        box-shadow: none;
    }

    + .modal-body {
        border-top: 1px solid @table-border-color;
    }
}

.modal-content > .data-details .primary-section,
.modal-content div > .data-form .form-primary-section, // spa wrapper
.modal-content > .data-form .form-primary-section {
    // removes panel styles
    box-shadow: none;
    border: none;
    border-radius: 0;
    background: @modal-content-bg;
    margin-bottom: 0;

    .panel-body {
        padding: @modal-inner-padding;
    }

    + .primary-section,
    + .form-primary-section {
        border-top: 1px solid @modal-header-border-color;
    }
}

// customize meta
.modal-content .content-meta {
    background: @modal-footer-bg;
    padding: 10px @modal-inner-padding;
    border-bottom: 1px solid @modal-header-border-color;
    margin-bottom: 0;
}
