$modal-animation-time: 200ms;
.uni-modal {

    &__title {
        font-size: $font-xlarge;
        font-weight: 300;
        margin-bottom: 0;
    }

    &__container {
        border: $border-width $color-grey-medium solid;
        background-color: #fff;
        width: 100%;
        max-width: 800px;
        position: relative;
    }

    &__btn-close {
        opacity: 0.7;
        position: absolute;
        right: 30px;
        top: 20px;

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

    &__inner {
        padding: 5%;
        background-color: $modal-bg;

        animation: fade-in-1 $modal-animation-time;

        &--leaving {
            opacity: 0;

            animation: bg-leave $modal-animation-time;
        }

        &--full {
            background-color: $modal-bg-full;

            .uni-modal__container {
                border: 0;
                background-color: transparent;
            }
        }

        &--aside {

            .uni-modal__container {
                width: $aside-width;
                height: 100%;

                animation: aside-enter-right $modal-animation-time;

                &--leaving {
                    transform: translateX(100%);

                    animation: aside-leave-right $modal-animation-time;
                }
            }

            &.large {

                .uni-modal__container {
                    width: $aside-width * 2;
                }
            }
        }

        &--only-content {

            .uni-modal__btn-close {
                top: 0;
                right: 0;
            }
        }
    }

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

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