/* ------------------------------------------------------------------------------
 *
 *  # Modal component
 *
 *  Overrides for modal dialog component
 *
 * ---------------------------------------------------------------------------- */

// Modal header
.modal-header {
    position: relative;

    // Close button
    .close {
        color: inherit;
        align-self: stretch;
    }

    // If header has '.bg-*' class,
    // remove bottom padding and border
    &:not([class*=bg-]) {
        padding-bottom: 0;
        border-bottom-width: 0;
    }
}

// Footer (for actions)
.modal-footer {

    // If footer has '.bg-*' class,
    // remove top padding and border
    &:not([class*=bg-]) {
        padding-top: 0;
        border-top-width: 0;
    }

    // Add top border if footer comes after table
    [class*=table-responsive] + &,
    .table + & {
        border-top-width: $modal-footer-border-width;
        border-top-color: $table-border-color;
    }

    // Override defaults
    > * {
        margin: 0;
    }

    // Button spacing
    > .btn + .btn {
        margin-left: map-get($spacers, 3);
    }
}

// Scale up the modal
@include media-breakpoint-up(sm) {

    // Mini size
    .modal-xs {
        max-width: $modal-xs-width;
    }

    // Full width size
    .modal-full {
        max-width: $modal-full-width;
        margin-left: ((100% - $modal-full-width) / 2);
        margin-right: ((100% - $modal-full-width) / 2);
    }
}


//
// Modal as sliding panels
//

// Reset default modal styles
.modal-left,
.modal-right,
.modal-top,
.modal-bottom {
    .modal-dialog {
        margin: 0;
    }
    .modal-content {
        border: 0;
    }
    .modal-content,
    .modal-header,
    .modal-footer {
        border-radius: 0;
    }
}

//
// Left and right base

.modal-left,
.modal-right {

    // Default size
    .modal-dialog {
        width: $panel-md;
        height: 100%;
    }

    // Sliding animation
    &.fade .modal-dialog {
        @include transition(transform $component-transition-timer ease-in-out);
    }

    // Reset max height
    .modal-dialog-scrollable {
        &,
        .modal-content {
            max-height: none;
        }
    }

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

    // Sizes
    .modal-xs {
        width: $panel-xs;
    }
    .modal-sm {
        width: $panel-sm;
    }
    .modal-lg {
        @include media-breakpoint-up(sm) {
            width: $panel-lg;
        }
    }
}

// Left
.modal-left {

    // Hidden
    &.modal .modal-dialog {
        transform: translateX(-100%);
    }

    // Shown
    &.show .modal-dialog {
        transform: translateX(0);
    }
}
        
// Right
.modal-right {

    // Stick it to the right
    .modal-dialog {
        margin-left: auto;
    }

    // Hidden
    &.modal .modal-dialog {
        transform: translateX(100%);
    }

    // Shown
    &.show .modal-dialog {
        transform: translateX(0);
    }
}

//
// Top and bottom base

.modal-top,
.modal-bottom {

    // Base
    .modal-dialog {
        width: 100%;
        max-width: none;
    }

    // Disable default transform
    &.modal .modal-dialog {
        transform: none;
    }

    // Sliding animation
    &.fade .modal-content {
        @include transition(transform $component-transition-timer ease-in-out);
    }
}

// Top
.modal-top {

    // Hidden
    &.modal .modal-content {
        transform: translateY(-100%);
    }

    // Shown
    &.show .modal-content {
        transform: translateY(0);
    }
}

// Bottom
.modal-bottom {

    // Hidden
    &.modal .modal-content {
        transform: translateY(100%);
    }

    // Shown
    &.show .modal-content {
        transform: translateY(0);
    }
}