@viewdo/dxp-story-player-assets/less/base/embedded-scenes.less

## Installation

.embedded-scene-mixins(@modalColor: @black, @maxModalWidth: 1080px, @modalPosition: absolute){

    .ivx-embedded-origin{
        overflow: hidden;

        &.ivx-state-video-section{
            position: relative;
            height: 100%;
        }

    }

    .ivx-embedded-view{

        &.ivx-embedded-isolated{

            .ivx-embedded-state{
                .ivx-embedded-modal,
                &.ivx-embedded-modal{
                    opacity: 0;
                    position: @modalPosition;
                    z-index: 99999;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    background: fade(@modalColor, 80%);

                    >*{
                        width: 100%;
                        max-width: @maxModalWidth;
                        position: relative;

                        .ivx-embedded-modal-close{
						    position: absolute;
						    display: block;
						    width: 3rem;
						    height: 3rem;
						    right: 1.5rem;
						    top: 1.5rem;
						    background: #858c95;
						    border-radius: 3rem;
						    box-shadow: 0px 0px 8px rgba(0,0,0,.2);
						    z-index: 1;
                        }

                        .ivx-embedded-modal-close:before{
                            content: "\2715";
						    left: 50%;
						    top: 50%;
						    position: absolute;
						    transform: translate3d(-50%, -50%, 0);
						    font-size: 1.5rem;
						    color: @white;
                        }

                    }
                }

                .ivx-embedded-swap{
                    overflow: hidden;
                }
            }

        }

        &.ivx-embedded-interactive{

            .ivx-embedded-state{

                .ivx-embedded-overlay,
                &.ivx-embedded-overlay{
                    position: absolute;
                    z-index: 9999;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    overflow: hidden;

                    &.ivx-embedded-position-full{

                    }

                    &.ivx-embedded-position-left{
                        top: 0;
                        left: 0;
                        width: 50%;
                        height: 100%;
                    }

                    &.ivx-embedded-position-right{
                        top: 0;
                        right: 0;
                        left: auto;
                        width: 50%;
                        height: 100%;
                    }

                    &.ivx-embedded-position-tl{
                        top: 0;
                        left: 0;
                        width: 50%;
                        height: 50%;
                    }

                    &.ivx-embedded-position-tr{
                        top: 0;
                        right: 0;
                        left: auto;
                        width: 50%;
                        height: 50%;
                    }

                    &.ivx-embedded-position-bl{
                        bottom: 0;
                        left: 0;
                        top: auto;
                        width: 50%;
                        height: 50%;
                    }

                    &.ivx-embedded-position-br{
                        bottom: 0;
                        right: 0;
                        top: auto;
                        left: auto;
                        width: 50%;
                        height: 50%;
                    }

                }

                .ivx-embedded-popin,
                &.ivx-embedded-popin{
                    position: absolute;
                    z-index: 9999;
                    top: 0;
                    left: 0;

                    &.ivx-embedded-position-c{
                        top: 50%;
                        left: 50%;
                        transform: translate3d(-50%, -50%, 0);
                    }

                    &.ivx-embedded-position-tl{
                        top: 0;
                        left: 0;
                    }

                    &.ivx-embedded-position-tr{
                        top: 0;
                        left: auto;
                        right: 0;
                    }

                    &.ivx-embedded-position-tc{
                        top: 0;
                        left: 50%;
                        transform: translateX(-50%);
                    }

                    &.ivx-embedded-position-bl{
                        top: auto;
                        bottom: 0;
                        left: 0;
                    }

                    &.ivx-embedded-position-br{
                        top: auto;
                        bottom: 0;
                        left: auto;
                        right: 0;
                    }

                    &.ivx-embedded-position-bc{
                        top: auto;
                        bottom: 0;
                        left: 50%;
                        transform: translateX(-50%);
                    }

                }

            }
        }

    }

}