@import './dialog/alert';
@import './dialog/full-screen';

.dialog-wrapper {
    position: fixed;
    display: table;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 999;
    animation: dialogwrapper;
    animation-duration: 0.5s;

}

.dialog-overlay {
    width: 100%;
    height: 100%;
    background-color: $lightBlack;
    display: table-cell;
    vertical-align: middle;

    .bottom-sheet {
        position: absolute;
        bottom: 0;
        width: 100%;
        margin: 0 auto;
        @include breakpoint($breakpoint-l) {
            width: calc(100% - 128px);
            left: rem(64);
        }
        @include breakpoint($breakpoint-xl) {
            width: calc(100% - 256px);
            left: rem(128);
        }
        @include breakpoint($breakpoint-xl) {
            width: calc(100% - 378px);
            left: rem(196);
        }
    }

}