@import "effects";

.vn-dialog > .window {
    position: relative;

    & > .close {
        @extend %clickable;
        text-transform: uppercase;
        background-color: transparent;
        border: none;
        border-radius: 1px;
        position: absolute;
        top: 0;
        right: 0;
        padding: 4px;
        color: #666;
    }
    & > form {
        padding: $spacing-lg;

        & > h6 {
            margin-bottom: $spacing-md;
        }
        & > .body > tpl-body {
            display: block;
            min-width: 256px;
        }
        & > .buttons > tpl-buttons {
            display: block;
            margin-top: 24px;
            text-align: right;
    
            button,
            input[type="button"],
            input[type="submit"],
            input[type="reset"] {
                text-transform: uppercase;
                background-color: transparent;
                border: none;
                border-radius: 1px;
                color: $color-button;
                font-family: vn-font-bold;
                padding: 11px;
                margin: -11px;
                margin-left: 11px;

                &:hover,
                &:focus {
                    color: lighten($color-button, 10%);
                }
            }
            button {
                background-color: $color-button;
                color: white;
                &:hover,
                &:focus {
                    background-color: lighten($color-button, 10%);
                    color: white;
                }
            }
        }
    }
    & > .loading-overlap {
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, .2);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1;
        opacity: 0;
        transition: opacity 200ms ease-in-out;

        &.shown {
            opacity: 1;
        }
    }
}