.dialog {
    position: absolute;
    width: 100%;
    height: 100%;
    background: white;
    z-index: 50;
    overflow: auto;
    animation: dialog-popout 0.3s ease-in-out;
    -webkit-animation: dialog-popout 0.3s ease-in-out;
    border-radius: 15px;

    $classes: (
        'preview': ('opacity': 0.3),
   );

    @each $pos, $values in $classes {
        &.#{$pos} {
            @each $property, $value in $values {
                #{$property}: $value;
            }
        }
    }

}

@keyframes dialog-popout {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 0.5;
    }

    100% {
        opacity: 1;
    }
}

@-webkit-keyframes dialog-popout {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 0.5;
    }

    100% {
        opacity: 1;
    }
}