@import 'commons';

$m-modal--max-width--l: $m-max-width !default;
$m-modal--max-width: 672px !default; // padding + input + margin + input + padding
$m-modal--max-width--s: 420px !default;

:root {
    --m-modal--top: 0;
    --m-modal--min-height: 160px;
    --m-modal--header-padding: #{ $m-space };
    --m-modal--header-justify-content: space-between;
    --m-modal--body-padding: #{ $m-space-xl  $m-space };
    --m-modal--footer-padding: #{ $m-space };

    @media (min-width: $m-mq-min-sm) {
        --m-modal--header-padding: #{ $m-space $m-space-lg };
        --m-modal--body-padding: #{ $m-space-xl  $m-space-lg };
        --m-modal--footer-padding: #{ $m-space $m-space-lg };
    }
}

.m-modal {
    &__wrap {
        position: fixed;
        top: var(--m-modal--top, 0);
        right: 0;
        bottom: 0;
        left: 0;
        background: none;
        display: flex;
        align-items: center;
        outline: none;
        min-width: $m-min-width;
        overflow: hidden;

        // MODUL-20, MODUL-87, ENA2-760
        // the mq must stay sync with the component template and TS file
        @media (min-width: $m-mq-min-sm) {
            justify-content: center;
        }

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

        @include m-is-ie() {
            display: block;
        }

        &.m--is-close-on-backdrop {
            cursor: pointer;
            -webkit-tap-highlight-color: transparent;
        }

        &.m--is-enter-active,
        &.m--is-leave-active {
            &.m--is-full-screen {
                transition-duration: $m-transition-duration-xl;
            }

            &:not(.m--is-full-screen) {
                transition-duration: $m-transition-duration;
            }
        }

        &.m--is-enter,
        &.m--is-leave-to {
            &:not(.m--is-full-screen) {
                .m-modal__article {
                    transform: translate3d(0, $m-space-lg, 0) scale(0.98);
                    opacity: 0;
                }
            }

            &.m--is-full-screen {
                .m-modal__article {
                    transform: translate3d(0, 110%, 0);
                }
            }
        }

        &:not(.m--is-full-screen) {
            padding: 0 $m-space-lg 0 $m-space-lg;

            .m-modal__article {
                transition: transform $m-transition-duration ease, opacity $m-transition-duration-sm linear;
                margin-top: auto;
                margin-bottom: auto;
                max-width: $m-modal--max-width;
                transform: translate3d(0, 0, 0);
            }
        }

        &.m--is-full-screen {
            .m-modal__article {
                transition: transform $m-transition-duration-xl ease;
                position: absolute;
                top: 0;
                bottom: 0;
                margin: 0 !important; //style for IE
            }
        }

        &.m--is-large {
            .m-modal__article {
                max-width: $m-modal--max-width--l;
            }
        }

        &.m--is-small {
            .m-modal__article {
                max-width: $m-modal--max-width--s;
            }
        }

        &.m--has-body-max-width {
            .m-modal__body {
                max-width: $m-max-width-lg;
                margin: 0 auto;
            }
        }
    }

    &__article {
        cursor: auto;
        width: 100%;
        background: $m-color-white;
        box-shadow: 0 3px 5px rgba(0, 0, 0, 0.15);
        overflow: hidden;
        display: flex;
        flex-direction: column;
        max-height: 100%;
        outline: none;

        @include m-is-ie() {
            margin: calc(#{$m-space-lg} * 2) auto;
        }
    }

    &__header,
    &__body,
    &__footer {
        > :first-child {
            margin-top: 0;
        }
    }

    &__header,
    &__footer {
        flex-shrink: 0;
        min-height: $m-min-height-box;
    }

    &__header {
        position: relative;
        background-color: $m-color-grey-black;
        color: $m-color-white;
        display: flex;
        align-items: center;
        justify-content: var(--m-modal--header-justify-content);
        padding: var(--m-modal--header-padding);
    }

    &__close-button {
        margin-right: -12px; // Magic number: visually align
    }

    &__body {
        overflow-x: hidden;
        overflow-y: auto;
        position: relative;
        flex: 1 1 auto;
        width: 100%;
        -webkit-overflow-scrolling: touch;
        min-height: var(--m-modal--min-height);
        padding: var(--m-modal--body-padding);

        @include m-scrollbar();

        @include m-is-ie() {
            flex: none;
        }

        // deprecated
        &.m--has-no-padding {
            --m-modal--body-padding: 0;
        }
    }

    &__footer {
        position: relative;
        display: flex;
        align-items: center;
        border-top: 1px solid $m-color-border;
        padding: var(--m-modal--footer-padding);
    }
}