@import "effects";

.vn-dialog {
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 11;
    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;

    &.shown {
        opacity: 1;
    }
    & > div {
        position: relative;
        box-shadow: 0 0 .4em rgba(0, 0, 0, .4);
        background-color: white;
        border-radius: .2em;
        overflow: auto;
        padding: 2em;
        box-sizing: border-box;

        tpl-body {
            display: block;
            width: 20em;
        }
        button,
        input[type="button"],
        input[type="submit"],
        input[type="reset"] {
            @extend %clickable;
            text-transform: uppercase;
            background-color: transparent;
            border: none;
            border-radius: .1em;
        }
        & > button.close {
            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"] {
                color: $main-01;
                font-family: vn-font-bold;
                padding: .7em;
                margin: -0.7em;
                margin-left: .7em;
            }
        }
    }

    &.dialog-summary {

        vn-card {
            border: none;
            box-shadow: none;
            padding: 0;
    
            & > div > vn-vertical {
                padding: 0;
                margin: 0
            }
        }
    
        & > div > button.close > vn-icon {
            color: $main-01;
        }
    
        & > div {
            padding: 0
        }
    
        tpl-body {
            width:auto; 
            background-color: transparent;
            padding: 0 2em
        }
    
        .body {
            overflow: auto;
            margin-top: 2em;
            max-height: 700px;
        }
    
        form {
            min-width: 680px;
        }
    
        .buttons {
            margin-top: 2em
        }
    
        vn-check label span {
            font-size: .9em
        }
    }
}