@import 'commons';
@import 'm-popper';
$m-popper--scale: 0.96 !default;
$m-popper--margin: $m-space-sm !default;

.m-popper {
    display: inline-flex;
    cursor: pointer;

    &__article {
        position: relative;
        display: flex;
        flex-direction: column;

        &.m--has-shadow {
            box-shadow: $m-box-shadow;
        }

        &.m--has-background {
            background: $m-color-white;
        }

        &.m--is-hidden {
            display: none;
        }

        &.m--is-default-anim {

            &.m--is-enter-active,
            &.m--is-leave-active {
                transition-property: transform, opacity;
                transition-duration: $m-transition-duration;
                transition-timing-function: ease;
            }

            &.m--is-enter,
            &.m--is-leave-to {
                opacity: 0;

                &.m--is-placement-top,
                &.m--is-placement-top-start,
                &.m--is-placement-top-end {
                    transform: translate3d(0, calc(-1 * #{ $m-popper--margin }), 0) scale($m-popper--scale);
                }

                &.m--is-placement-right,
                &.m--is-placement-right-start,
                &.m--is-placement-right-end {
                    transform: translate3d($m-popper--margin, 0, 0) scale($m-popper--scale);
                }

                &.m--is-placement-bottom,
                &.m--is-placement-bottom-start,
                &.m--is-placement-bottom-end {
                    transform: translate3d(0, $m-popper--margin, 0) scale($m-popper--scale);
                }

                &.m--is-placement-left,
                &.m--is-placement-left-start,
                &.m--is-placement-left-end {
                    transform: translate3d(calc(-1 * #{ $m-popper--margin }), 0, 0) scale($m-popper--scale);
                }
            }
        }

        > :first-child {

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

    &__header,
    &__body,
    &__footer {
        position: relative;

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

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

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

    &__body {
        flex: 1 1 auto;
    }
}