/* ==========================================================================
   metabox.css loads on any Envira Gallery Create/Edit Screen

   Any styles that will be used by the main Gallery editor screen should be
   added to this file
   ========================================================================== */

body.envira_page_envira-gallery-settings {
    input#envira-video-youtube-api-id {
        width: 350px;
    }
}
.media-frame .envira-gallery-accepted-urls > ul > li a {
    text-decoration: none;
    font-weight: 700;
    color: black;
}
.media-frame .envira-gallery-accepted-urls .closed {
    display: none;
}
.envira-gallery-accepted-urls a {
    position:relative;
    padding-left: 15px;
}

.envira-gallery-accepted-urls a:before {
    content:"\A";
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 6px solid black;
    position: absolute;
    left: 0px;
    top: 3px;
}
.envira-gallery-accepted-urls a.title-opened:before {
    content:"\A";
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid black;
    position: absolute;
    left: -4px;
    top: 3px;
}

body.post-type-envira {
    .envira-gallery-accepted-urls {
        overflow: visible;
        section, ul {
            margin-bottom: 10px;
            li {
                margin: 0;
                font-size: 13px;
                line-break: 15px;
                ul {
                    list-style: disc;
                    list-style-position: outide;
                    margin-left: 15px;
                    word-wrap: break-word;
                }
            }
        }
    }
    /* ==========================================================================
       Form
       ========================================================================== */
    form#post {
        /**
         * Defined so we override WordPress' default styles
         */
        #poststuff {
            /* ==========================================================================
               Envira Gallery Settings
               ========================================================================== */
            #envira-gallery-settings {

                /**
                * Settings
                */
                #envira-tabs {
                    /**
                    * Tab: Images
                    */
                    #envira-tab-images {
                        /**
                        * Image Grid
                        */
                        ul#envira-gallery-output.grid {
                            li {
                                /**
                                * Metadata
                                */
                                div.meta {
                                    overflow:  visible;
                                    position: relative;
                                    /**
                                    * Additional metadata
                                    */
                                    div.additional {
                                        position: absolute;
                                        bottom: 15px;
                                        right:  5px;
                                        .envira-active-item {
                                            display: none;
                                        }
                                        display: inline-block;
                                        span.envira-video-type {
                                            display: inline-block;
                                            text-indent: -9999px;
                                            width: 50px;
                                            height: 40px;

                                            &.youtube,
                                            &.youtube_playlist {
                                                background: url(../images/youtube.png) top left no-repeat;
                                                background-size: 25px;
                                                margin-bottom:  5px;
                                                width:  25px;
                                            }
                                            &.vimeo {
                                                background: url(../images/vimeo.png) top left no-repeat;
                                                background-size: 25px;
                                                margin-bottom:  5px;
                                                width:  25px;
                                            }
                                            &.wistia {
                                                background: url(../images/wistia.png) top left no-repeat;
                                                background-size: 25px;
                                                margin-bottom:  5px;
                                                width:  25px;
                                            }
                                            &.twitch {
                                                background: url(../images/twitch.png) top left no-repeat;
                                                background-size: 25px;
                                                margin-bottom:  5px;
                                                width:  25px;
                                            }
                                            &.dailymotion {
                                                background: url(../images/dailymotion.png) top left no-repeat;
                                                background-size: 25px;
                                                margin-bottom:  5px;
                                                width:  25px;
                                            }
                                            &.metacafe {
                                                background: url(../images/metacafe.png) top left no-repeat;
                                                background-size: 25px;
                                                margin-bottom:  5px;
                                                width:  25px;
                                            }
                                            &.facebook {
                                                background: url(../images/facebook.png) top left no-repeat;
                                                background-size: 25px;
                                                margin-bottom:  5px;
                                                width:  25px;
                                            }
                                            &.videopress {
                                                background: url(../images/videopress.png) top left no-repeat;
                                                background-size: 25px;
                                                margin-bottom:  5px;
                                                width:  25px;
                                            }
                                            &.instagram {
                                                background: url(../images/instagram.png) top left no-repeat;
                                                background-size: 25px;
                                                margin-bottom:  5px;
                                                width:  25px;
                                            }
                                            &.self-hosted {
                                                background: url(../images/self-hosted.svg) top left no-repeat;
                                                background-size: 50px;
                                            }
                                        }
                                    }
                                }
                            }
                        }
                        ul#envira-gallery-output.list {
                            li {

                                    /**
                                    * Additional metadata
                                    */
                                    div.additional-grid {
                                        // display: none;
                                    }
                                    div.additional-list {
                                        position: absolute;
                                        bottom: -14px;
                                        left: 110px;
                                        .envira-active-item {
                                            display: none;
                                        }
                                        display: inline-block;
                                        span.envira-video-type {
                                            display: inline-block;
                                            text-indent: -9999px;
                                            width: 50px;
                                            height: 40px;

                                            &.youtube,
                                            &.youtube_playlist {
                                                background: url(../images/youtube.png) top left no-repeat;
                                                background-size: 25px;
                                                margin-bottom:  5px;
                                                width:  25px;
                                            }
                                            &.vimeo {
                                                background: url(../images/vimeo.png) top left no-repeat;
                                                background-size: 25px;
                                                margin-bottom:  5px;
                                                width:  25px;
                                            }
                                            &.wistia {
                                                background: url(../images/wistia.png) top left no-repeat;
                                                background-size: 25px;
                                                margin-bottom:  5px;
                                                width:  25px;
                                            }
                                            &.twitch {
                                                background: url(../images/twitch.png) top left no-repeat;
                                                background-size: 25px;
                                                margin-bottom:  5px;
                                                width:  25px;
                                            }
                                            &.dailymotion {
                                                background: url(../images/dailymotion.png) top left no-repeat;
                                                background-size: 25px;
                                                margin-bottom:  5px;
                                                width:  25px;
                                            }
                                            &.metacafe {
                                                background: url(../images/metacafe.png) top left no-repeat;
                                                background-size: 25px;
                                                margin-bottom:  5px;
                                                width:  25px;
                                            }
                                            &.facebook {
                                                background: url(../images/facebook.png) top left no-repeat;
                                                background-size: 25px;
                                                margin-bottom:  5px;
                                                width:  25px;
                                            }
                                            &.videopress {
                                                background: url(../images/videopress.png) top left no-repeat;
                                                background-size: 25px;
                                                margin-bottom:  5px;
                                                width:  25px;
                                            }
                                            &.instagram {
                                                background: url(../images/instagram.png) top left no-repeat;
                                                background-size: 25px;
                                                margin-bottom:  5px;
                                                width:  25px;
                                            }
                                            &.self-hosted {
                                                background: url(../images/self-hosted.svg) top left no-repeat;
                                                background-size: 50px;
                                            }
                                        }
                                    }

                            }
                        }
                    }
                }
            }
        }
    }
}

@import 'media-view.scss';