/**
 * [Copyright Regular Labs]
 */

@import "variables";
@import "animations";

[data-modals-element] {
    box-sizing: border-box;
}

[data-modals-element].hidden {
    display: none !important;
}

[data-modals-element="modal"] {
    z-index:  $zindex-main;
    position: fixed;
    width:    100%;
    height:   100%;
    top:      0;
    left:     0;
    overflow: hidden;
    outline:  none;

    [data-modals-element="overlay"] {
        --color:          0, 0, 0;
        --opacity:        0.9;

        position:         fixed;
        width:            calc(100% + 2px);
        height:           calc(100% + 2px);
        top:              -1px;
        left:             -1px;
        will-change:      opacity;
        background-color: rgba(var(--color), var(--opacity));
    }

    [data-modals-element="spinner"] {
        --color:       #ffffff;

        position:      absolute;
        height:        32px;
        width:         32px;
        animation:     rl-modals-animation-spinner 1.2s infinite linear;
        border:        3px solid transparent;
        border-color:  var(--color) transparent;
        border-radius: 50%;
        margin:        0 auto;
        left:          0;
        right:         0;
        top:           calc(50% - 16px);
    }

    [data-modals-element="container"] {
        position:  absolute;
        width:     100%;
        height:    100%;
        top:       0;
        left:      0;

        display:   flex;
        flex-flow: column;
    }

    [data-modals-element="main"] {
        order:   2;
        display: flex;
        flex:    auto;
    }

    [data-modals-element="pagination-bar"] {
        order:   3;
        display: flex;
    }

    [data-modals-element="close-bar"] {
        order:          1;
        width:          100%;
        top:            0;
        left:           0;
        display:        flex;
        flex-direction: row-reverse;
    }

    [data-modals-element="left"] {
    }

    [data-modals-element="center"] {
        flex: auto;
    }

    [data-modals-element="right"] {
    }

    [data-modals-element="slides"] {
        position:        relative;
        height:          100%;
        width:           100%;
        display:         flex;
        justify-content: center;
        align-items:     center;
        transition:      transform 0.4s ease;
        transform:       translate3d(0, 0, 0);
    }

    [data-modals-element="slide"] {
        position:        absolute;
        height:          100%;
        width:           100%;
        display:         flex;
        justify-content: center;
        align-items:     center;

        &[data-modals-position$="left"] {
            left: 0;
        }

        &[data-modals-position$="right"] {
            right: 0;
        }

        &[data-modals-position^="top"] {
            top: 0;
        }

        &[data-modals-position^="bottom"] {
            bottom: 0;
        }
    }

    [data-modals-element="slide-container"] {
        display:     flex;
        align-items: center;
        max-height:  100%;
        max-width:   100%;
        //overflow:    hidden;
    }

    [data-modals-element="slide-container-inner"] {
        display:     flex;
        align-items: center;
        max-height:  100%;
    }

    [data-modals-orientation="vertical"] {
        [data-modals-element="slide-container"] {
            flex-flow: column;
        }
    }

    [data-modals-orientation="horizontal"] {
        [data-modals-element="slide-container"] {
            flex-flow: row;
        }
    }

    [data-modals-element="slide-before"],
    [data-modals-element="slide-content"],
    [data-modals-element="slide-content-inner"],
    [data-modals-element="slide-after"] {
        max-height: 100%;
        max-width:  100%;
    }

    [data-modals-element="slide-before"],
    [data-modals-element="slide-after"] {
        overflow: auto;
    }

    [data-modals-element="slide-content-inner"] {
        overflow: visible;
    }

    [data-modals-element="slide-before"] {
        flex: none;
    }

    [data-modals-element="slide-content"] {
        position: relative;
        flex:     auto;
    }

    [data-modals-element="slide-content-inner"] {
    }

    [data-modals-element="slide-after"] {
        flex: none;
    }

    [data-modals-element="slide-title"] {
        overflow:    auto;
        font-size:   calc(1.3rem + 0.6vw);
        line-height: initial;
    }

    [data-modals-element="slide-description"] {
        overflow: auto;
    }

    [data-modals-element="previous"],
    [data-modals-element="next"],
    [data-modals-element="close"],
    [data-modals-element="pagination-button"] {
        content:             "";
        background-color:    transparent;
        background-position: 50% 50%;
        background-repeat:   no-repeat;
        border:              none;
    }

    [data-modals-element="previous"],
    [data-modals-element="next"],
    [data-modals-element="close"] {
        cursor:   pointer;
        position: relative;
    }

    [data-modals-element="previous"],
    [data-modals-element="next"] {
    }

    [data-modals-element="previous"],
    html[dir="rtl"] & [data-modals-element="next"] {
        content: ">";
    }

    [data-modals-element="next"],
    html[dir="rtl"] & [data-modals-element="previous"] {
        content: "<";
    }

    [data-modals-element="close"] {
        content: "X";
        z-index: 2;
    }

    [data-modals-element="pagination"] {
        display:     flex;
        align-items: center;
        margin:      0 auto;
    }

    [data-modals-element="pagination-button"] {
        &:not(.active) {
            cursor: pointer;
        }
    }

    [data-modals-element="pagination-text"] {
        display:     flex;
        align-items: baseline;
    }

    /* CONTENT TYPES */
    [data-modals-type="inline"] {
        [data-modals-element="slide-content"] {
            overflow: auto;
        }
    }

    [data-modals-type="image"] {
        [data-modals-element="slide-content"] {
            display: flex;

            img {
                object-fit: contain;
            }
        }
    }

    [data-modals-type="image"],
    [data-modals-type="iframe"],
    [data-modals-type="video"] {
        [data-modals-element="slide-content-inner"] {
            overflow: hidden;

            & > * {
                vertical-align: middle;
            }
        }
    }
}