.modal-body {
    legend {
        border-bottom: 1px solid $cc-bg;
        font-size: 14px;
        font-weight: 500;
        border-bottom: 1px solid $cc-bg;
        margin-bottom: 20px;
        padding: 10px 0;
    }
}

.modal-title {
    font-size: 16px;
}

.modal-header, .modal-footer {
    border-width: 0;
}

// Modal that takes up virtually the entire screen, with a variable amount of padding around it
@mixin absolute-center-modal($spacing) {
    .modal-dialog {
        position: absolute;
        top: $spacing;
        bottom: $spacing;
        left: $spacing;
        right: $spacing;
        margin: 0;
        width: auto;

        .modal-content {
            position: absolute;
            top: $spacing;
            bottom: $spacing;
            left: $spacing;
            right: $spacing;

            // These styles, along with the body/header/footer ones below,
            // allow the body to scroll vertically while the header and footer stay fixed
            display: flex;
            flex: auto;
            flex-direction: column;

            .modal-body {
                overflow-y: auto;
                flex-grow: 1;
            }

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

.full-screen-modal {
    @include absolute-center-modal(20px);
}

// Modal that has some kind of control (pagination, search box, etc.) in header or footer
.modal-header.with-controls, .modal-footer.with-controls {
    h4 {
        margin-top: 3px;    // vertically align better with controls, which are taller than plain text
    }

    .close {
        margin-left: 10px;
    }

    .nav-pills {
        display: inline-block;
        vertical-align: middle;

        a {
            padding: 6px 9px;
        }
    }

    .pagination {
        margin: 0;
    }
}


.modal-primary {
    .modal-header {
        border-bottom: 4px solid $primary-border-subtle-dark;
    }

    .modal-content {
        color: white;
        background-color: $primary;
    }

    .close {
        color: white;
        opacity: 1.0;
    }
}
