$modal-animation-time: 200ms;
@include keyframes(bg-enter) { from {opacity: 0;} to {opacity: 1;} }
@include keyframes(bg-leave) { from {opacity: 1;} to {opacity: 0;} }
@include keyframes(aside-enter) { from {transform: translateX(100%);} to {transform: translateX(0);} }
@include keyframes(aside-leave) { from {transform: translateX(0);} to {transform: translateX(100%);} }

nts-modal {
    .modal-bg{
        background-color: $modal-bg;
        padding: 5%;
        @include animation(bg-enter $modal-animation-time);

        &.leaving{
            opacity: 0;
            @include animation(bg-leave $modal-animation-time);
        }

        &.full{
            background-color: $modal-bg-full;
            .modal-container{
                border: 0;
                background-color: transparent;
            }
        }

        &.aside {
            .modal-container{
                @include animation(aside-enter $modal-animation-time);
                height: 100%;
                width: $aside-width;

                &.leaving{
                    transform: translateX(100%);
                    @include animation(aside-leave $modal-animation-time);
                }
            }

            &.large {
                .modal-container{ width: $aside-width * 2; }
            }
        }
    }

    .modal-container{
        border: $border-width $color-grey-medium solid;
        background-color: #fff;
        width: 100%;
        max-width: 800px;
        position: relative;
    }
    .close-button{
        opacity: 0.7;
        position: absolute;
        right: 30px;
        top: 20px;

        @include on-event {
            opacity: 1;
        }
    }



    @include mq($from: sm) {
        padding-top: $aside-width / 6;
    }

    @include mq($from: lg) {
        padding-top: $aside-width / 3;
    }
}