$adf-viewer-background-color: #f5f5f5;

@mixin full-screen() {
    width: 100%;
    height: 100%;
    background-color: $adf-viewer-background-color;
}

.adf-viewer {

    &-container {
        .adf-viewer-layout-content {
            @include full-screen();
            position: relative;
            overflow-y: auto;
            overflow-x: hidden;
            z-index: 1;

            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            flex: 1;

            & > div {
                display: flex;
                flex-flow: row wrap;
                margin: 0 auto;
                align-items: stretch;
            }
        }

        .adf-viewer-layout {
            @include full-screen();

            display: flex;
            flex-direction: row;
            overflow-y: auto;
            overflow-x: hidden;
            position: relative;
        }

        .adf-viewer-content {
            @include full-screen();
            flex: 1;
        }
    }

    &-overlay-container {
        .adf-viewer-content {
            position: fixed;
            top: 0px;
            left: 0px;
            z-index: 1000;
        }
    }

    &-inline-container {
        @include full-screen();
    }

    &-content-container {
        display: flex;
        justify-content: center;
    }

    &-unknown-content {
        align-items: center;
        display: flex;
    }

    &__loading-screen {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        height: 85vh;

        .md-spinner {
            margin: 0 auto;
        }
    }

    &__info-drawer {
        width: 350px;
        display: block;
        padding: 8px 0;
        background-color: #fafafa;
        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.27);
        border-left: 1px solid rgba(0, 0, 0, 0.07);

        .mat-tab-label {
            text-transform: uppercase;
        }

        .mat-card {
            margin: 6px;
        }
    }
}