@import 'commons';

.m-overlay {
    &__wrap {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        outline: none;
        min-width: $m-min-width;
        overflow: hidden;
        background: $m-color-grey-lightest;

        &.m--is-enter-active,
        &.m--is-leave-active {
            transition: background linear;

            .m-overlay__article {
                transition: transform ease;
            }
        }

        &.m--is-enter-active {
            transition-duration: $m-transition-duration;

            .m-overlay__article {
                transition-delay: $m-transition-duration-sm;
                transition-duration: $m-transition-duration-xl;
            }
        }

        &.m--is-leave-active {

            &,
            .m-overlay__article {
                transition-duration: $m-transition-duration-xl;
            }
        }

        &.m--is-enter,
        &.m--is-leave-to {
            background: rgba(255, 255, 255, 0);

            .m-overlay__article {
                transform: translate3d(0, 110%, 0);
            }
        }
    }

    &__article {
        transform: translate3d(0, 0, 0);
        cursor: auto;
        max-width: $m-max-width-lg;
        margin: 0 auto;
        background: $m-color-white;
        box-shadow: $m-box-shadow;
        height: 100%;
        flex-direction: column;
        outline: none;
    }

    &__header,
    &__footer,
    &__article {
        width: 100%;
        background: $m-color-white;
        display: flex;
        align-items: center;
        position: relative;
    }

    &__header,
    &__footer {
        min-height: $m-min-height-box;
        display: flex;
        align-items: center;

        @include m-box-padding($m-space, $m-space-lg, $m-space, $m-space);
    }

    &__header {
        color: $m-color-white;
        background-color: $m-color-grey-black;

        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            margin: 0;
            @include m-font-size('h2');
            font-weight: $m-font-weight-semi-bold;
        }
    }

    &__header-left {
        flex: 1 1 auto;
    }

    &__body {
        overflow-x: hidden;
        overflow-y: auto;
        position: relative;
        flex: 1 1 auto;
        width: 100%;
        min-height: 160px;
        -webkit-overflow-scrolling: touch;

        @include m-scrollbar();
        @include m-box-padding();
    }

    &__footer {
        border-top: $m-border-width-sm solid $m-color-border;
    }

    &__save-button {
        margin-right: $m-space;
    }
}