/// Global namespace for modal component
/// @access public
/// @group modal
/// @type string
$DBmodal-namespace: "c-modal" !default;

/// Padding for modal component
/// @access public
/// @group modal
/// @type string
$DBmodal-padding: 32px;

/// Background color for modal component
/// @access public
/// @group modal
/// @type color
$DBmodal-background: color(white) !default;

/// Background color for alternate modal component
/// @access public
/// @group modal
/// @type color
$DBmodal-background-alt: color(gray, x-light) !default;

// Modal component
.#{$DBmodal-namespace}-overlay {
    @include share(top, right, bottom, left, 0);
    display: flex;
    position: absolute;
    align-content: center;
    align-items: center;
    justify-content: center;
    padding: $DBmodal-padding;

    background-color: color(gray, dark, 0.6);
}

.#{$DBmodal-namespace} {
    overflow: scroll;
    flex: 1 1 640px;
    max-width: 640px;

    border-radius: 3px;
    box-shadow: 0 1px 2px color(gray, x-dark, 0.1);
    background-color: $DBmodal-background;
}

.#{$DBmodal-namespace}__title,
.#{$DBmodal-namespace}__header {
    z-index: 3;
    padding: ($DBmodal-padding/2) $DBmodal-padding;

    box-shadow: 0 1px 1px color(gray, x-dark, 0.1);
    background-color: $DBmodal-background;

    .#{$DBmodal-namespace}--unibody & {
        padding-bottom: 0;

        box-shadow: none;
    }

    h2 {
        margin-bottom: 0;
    }
}

.#{$DBmodal-namespace}__content {
    // Raise the z-index to enable overlapping of sibling banners
    z-index: 2;
    padding: $DBmodal-padding;

    background-color: $DBmodal-background-alt;

    .#{$DBmodal-namespace}--unibody & {
        // The 'unibody' variant of c-modal has no differentiation between the
        // title and the content
        background-color: $DBmodal-background;
    }
}

.#{$DBmodal-namespace}__banner {
    box-shadow: inset 0 1px 0 color(gray, x-dark, 0.1);
}
