@import 'commons';

$m-dialog--max-width: 380px !default;
$m-dialog--max-width--l: 500px !default;

.m-dialog {
    display: inline-block;

    &__wrap {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: none;
        display: flex;
        justify-content: center;
        align-items: center;
        outline: none;
        min-width: $m-min-width;
        overflow: auto;
        padding: $m-space-lg;

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

        @media (max-width: $m-mq-max-sm) {
            padding-left: $m-space-xs;
            padding-right: $m-space-xs;
        }

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

            .m-dialog__article {
                transition: transform $m-transition-duration ease, opacity $m-transition-duration-sm linear;
            }
        }

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

    &__article {
        margin-top: auto;
        margin-bottom: auto;
        border-radius: $m-border-radius;
        cursor: auto;
        width: 100%;
        max-width: $m-dialog--max-width;
        background: $m-color-white;
        box-shadow: 0 3px 5px rgba(0, 0, 0, 0.15);
        outline: none;

        @include m-is-ie() {
            margin: 60px auto;
        }

        &.m--has-width-large {
            max-width: $m-dialog--max-width--l;
        }

        &.m--is-message-style-large-and-center {
            .m-dialog__body {
                text-align: center;
            }

            .m-dialog__message {
                @include m-font-size('md');

                @media (min-width: $m-mq-min-sm) {
                    @include m-font-size('h5');
                }
            }

        }
    }

    &__header,
    &__body,
    &__footer {
        &.m--no-padding {
            padding: 0;
        }

        > :first-child {
            margin-top: 0;

            > :first-child {
                margin-top: 0;
            }
        }
    }

    &__header {
        width: 100%;
        border-bottom: 1px solid $m-color-border;

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

        &:not(.m--no-padding) {
            padding: $m-space;

            @media (min-width: $m-mq-min-sm) {
                padding: 28px $m-space-md 26px;
            }
        }
    }

    &__body {
        &:not(.m--no-padding) {
            padding: $m-space-md $m-space;

            @media (min-width: $m-mq-min-sm) {
                padding: $m-space-lg $m-space-md;
            }
        }

        @include m-scrollbar();

        ~.m-dialog__footer {
            padding-top: 0;
        }
    }

    &__message {
        +.m-dialog__hint {
            margin-top: $m-space;

            @media (min-width: $m-mq-min-sm) {
                margin-top: $m-space-md;
            }
        }
    }

    &__state-icon {
        .m-message {
            &.m--is-skin-page-light {
                margin-top: - $m-space-xs;
                margin-bottom: $m-space;

                @media (min-width: $m-mq-min-sm) {
                    margin-top: - $m-space;
                }
            }
        }
    }

    &__hint {
        display: flex;
        border: 1px solid $m-color-hint;
        background-color: $m-color-white;
        padding: 2px;
        position: relative;
    }

    &__hint-body {
        min-width: 100%;
        border: 1px solid $m-color-hint;
        padding: 10px $m-space-xs;
        text-align: left;
        font-style: italic;
        @include m-font-size();
        line-height: 1;
        display: flex;
    }

    &__hint-icon {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-shrink: 0;
        position: relative;
        top: -2px;

        .m-icon {
            color: $m-color-hint;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }

    &__hint-text {
        display: flex;
        justify-content: center;
        flex-direction: column;
        padding-left: $m-space-sm;
        @include m-font-size('h6');
    }

    &__footer {
        width: 100%;
        display: inline-flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;

        &:not(.m--no-padding) {
            padding: 0 $m-space $m-space;

            @media (min-width: $m-mq-min-sm) {
                padding: 0 $m-space-md 28px;
            }
        }

        &__nav {
            display: inline-flex;
            flex-direction: column;
            align-items: center;

            .m-link {
                margin-top: $m-space-sm;
            }
        }

        .m-button {
            +.m-button {
                margin-top: $m-space-sm;
            }
        }
    }
}