@import "../../styles/typography";
@import "../../styles/color";
@import "../../styles/media";

.one-ui-modal {
    $root: &;

    display: flex;

    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    height: 100%;
    z-index: var(--con-builder-modal-z-index);

    @include media('', 'xsm') {
        align-items: flex-end;
        z-index: 10000000000; //to cover up intercom
        &__content {
            min-width: 100%;
            max-width: 100%;
            padding-bottom: 64px;
            border-radius: 16px;
        }
    }

    &__content {
        display: flex;
        background-color: color(bg);
        box-shadow: 8px 40px 140px rgba(0, 0, 0, 0.3);
        border-radius: 6px;
        overflow: auto;
        min-height: auto;
        transform: translateY(20%);
        opacity: 0;
        transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
        //transition:
        //    transform .3s ease,
        //    opacity 0.1s ease-in;
        box-sizing: border-box;


    }

    &__back-drop {
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: hsla(0, 0, 0, 0.2);
        z-index: -1;
        opacity: 0;
        transition: opacity 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
        &--transparent{
            background: hsla(0, 0, 0, 0);
        }
    }

    &__actions {
        position: fixed;
        right: 40px;
        top: 24px;
        border: none;
        outline: none;
        background: none;
        opacity: 0;
        transition: opacity 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    }


    &--size {
        &-xs {
            #{ $root }__content {
                width: 432px;
                max-width: 90vw;
            }
        }

        &-lg {
            #{ $root }__content {
                width: 1100px;
                max-width: 90vw;
            }
        }
        &-xl {
            #{ $root }__content {
                width: calc(100vw - 80px);
                height: calc(100vh - 80px);
            }
        }
    }

    @mixin modalTransition($X:0,$Y:0,$Z:0) {
        // input values start position
        &#{$root}-enter-active,
        &#{$root}-appear-active {
            #{$root}__back-drop, #{$root}__actions {
                opacity: 0;
            }

            #{$root}__content {
                opacity: 0;
                transform: translate3d($X, $Y, $Z);
            }
        }

        &#{$root}-exit,
        &#{$root}-exit-active {
            #{$root}__back-drop, #{$root}__actions {
                opacity: 0;
            }

            #{$root}__content {
                opacity: 0;
                transform: translate3d($X, $Y, $Z);
            }
        }

        &#{$root}-enter-done {
            #{$root}__back-drop, #{$root}__actions {
                opacity: 1;
            }

            #{$root}__content {
                opacity: 1;
                transform: translate3d(0, 0, 0);
            }
        }
    }

    &--position {
        &-center {
            justify-content: center;
            align-items: center;
            @include modalTransition(0, 20px);
        }
        &-bottom-right {
            justify-content: flex-end;
            align-items: flex-end;
            padding-bottom: 22px;
            padding-right: 24px;
            @include modalTransition(0, 20px);
        }

        &-top {
            justify-content: center;
            align-items: flex-start;
            padding-top: 48px;

            @include modalTransition(0, -20px)
        }

        &-top, &-center,&-bottom-right {
            @include media('', 'xsm') {
                align-items: flex-end;
                @include modalTransition(0, 20px)
            }
        }
    }


}