@import "mithril-material-forms/lib/typography";
@import "../../sass/card";
@import "../../sass/elevation";
@import "../../sass/export-once";


@if export-once("editron-core/components/overlay") {

    .ui-overlay {
        z-index: 1002;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        box-sizing: border-box;
        padding: $mmf-block $mmf-unit;
        background: rgba(30, 30, 30, 0.5);
    }

    .ui-overlay {
        display: flex;
        flex-direction: row;
        justify-content: center;
    }

    .ui-overlay__card {
        @include card-layout();
        @include elevation24();

        display: flex;
        flex-direction: column;

        margin: 0;
        box-sizing: border-box;
        width: auto;
        align-self: center;

        max-width: 20 * $mmf-block;
        min-height: 3 * $mmf-block;
        max-height: 96vh;

        &--fullscreen {
            width: 96vw;
            height: 96vh;
        }
    }

    .ui-overlay {

        h1 {
            @include font-regular();
            line-height: 1em;
            margin: 0;
        }

        .ui-card__header {
            padding: $mmf-block * 0.5;
        }

        .ui-card__content {
            position: relative;
            padding: $mmf-block * 0.5;
            flex-grow: 1;
            overflow-y: auto;
            overflow-x: hidden;
        }

        .ui-card__footer {
            padding: $mmf-unit;
            text-align: right;
        }
    }
}