@import "effects";

.vn-dialog {
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 20;
    position: fixed;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, .6);
    opacity: 0;
    transition: opacity 300ms ease-in-out;
    padding: 3em;
    box-sizing: border-box;

    &.shown {
        opacity: 1;
    }
    & > div {
        position: relative;
        box-shadow: 0 0 .4em $color-shadow;
        background-color: $color-bg-panel;
        border-radius: .2em;
        overflow: auto;
        padding: 2em;
        box-sizing: border-box;
        max-height: 100%;

        tpl-body {
            display: block;
            min-width: 16em;
        }
        & > button.close {
            @extend %clickable;
            text-transform: uppercase;
            background-color: transparent;
            border: none;
            border-radius: .1em;
            position: absolute;
            top: 0;
            right: 0;
            padding: .3em;
    
            & > vn-icon {
                display: block;
                color: #666;
            }
        }
        & > form > .buttons {
            margin-top: 1.5em;
            text-align: right;
    
            button,
            input[type="button"],
            input[type="submit"],
            input[type="reset"] {
                @extend %clickable;
                text-transform: uppercase;
                background-color: transparent;
                border: none;
                border-radius: .1em;
                color: $color-main;
                font-family: vn-font-bold;
                padding: .7em;
                margin: -0.7em;
                margin-left: .7em;
            }
        }
    }
}