// compileCompressed: ../gotrl-style.min.css

#wpadminbar{
    #wp-admin-bar-gotr-toolbar-nav>.ab-item{
        &:before{
            content: "\f165";
            top: 2px;
        }
    }
    #wp-admin-bar-gotr-check-images{
        &>.ab-item{
            &:before{
                content: ' ';
                top: 4px;
                font-size: 14px;
                line-height: 14px;
                width: 18px;
                height: 18px;
                border: 2px solid #a0a5aa;
                border: 2px solid rgba(240,245,250,.6);
                box-sizing: border-box;
                padding: 0;
                text-align: center;
            }
        }
        &.selected>.ab-item{
            &:before{
                content: "\f147";
                color: #00b9eb;
                border-color: #00b9eb;
            }
        }
    }
}

.gotr-lightbox-wrapper{
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 999999;
    &.visible{
        display: block;
    }
    .close-background-space{
        background-color: rgba(0,0,0,0.5);
        position: relative;
        width: 100%;
        height: 100%;
    }
    .gotr-lightbox-container{
        position: absolute;
        background-color: #ffffff;
    }
    .options-wrapper{
        display: none;
        min-width: 150px;
        min-height: 30px;
        .options-list{
            list-style-type: none;
            margin: 0;
            padding: 0;
            .item-row{
                display: block;
                margin: 0;
                padding: 0;
            }
        }
        .button-options{
            text-align: left;
            cursor: pointer;
            display: block;
            background-color: #ffffff;
            border: none;
            font-size: 14px;
            line-height: 20px;
            width: 100%;
            height: 30px;
            padding: 5px 15px;
            box-sizing: border-box;
            .before-icon{
                margin-right: 5px;
            }
        }
    }
    .content-result-block{
        display: none;
        position: relative;
        .gotr-close-button-wrapper{
            position: absolute;
            top: 0;
            right: 0;
            .gotr-close-button{
                cursor: pointer;
                background-color: transparent;
                display: block;
                width: 40px;
                height: 40px;
                padding: 10px;
                font-size: 20px;
                line-height: 20px;
                text-align: center;
                border: none;
            }
        }
    }
    .spinner-wrapp{
        display: none;
    }
    &.options{
        .options-wrapper{
            display: block;
        }
    }
    &.has-content{
        .content-result-block{
            display: block;
            .content-images-block{
                padding: 15px;
                .gotr-lightbox-title{
                    font-size: 24px;
                    line-height: 32px;
                    margin: 0;
                    margin-bottom: 15px;
                    text-align: center;
                }
                .sizes-list{
                    display: block;
                    list-style-type: none;
                    direction: ltr;
                    padding: 0;
                    margin-bottom: 0;
                    .size-item{
                        display: block;
                        min-width: 600px;
                        // margin-bottom: 15px;
                        border-top: 1px solid #cccccc;
                        padding: 15px 0;
                        margin: 0;
                        a{
                            text-decoration: none;
                        }
                        .size-data-box{
                            display: -webkit-box;
                            display: -webkit-flex;
                            display: -moz-flex;
                            display: -ms-flexbox;
                            display: flex;
                            .img-block{
                                flex: 0 1 auto;
                                -webkit-flex: 0 1 auto;
                                -ms-flex: 0 1 auto;
                                -webkit-box-flex: 0;
                                -moz-box-flex: 0;
                                -moz-flex: 0 1 auto;
                                .img-block-container{
                                    padding-right: 15px;
                                    border-right: 1px solid #cccccc;
                                    height: 100%;
                                }
                                .img-box{
                                    display: block;
                                    img{
                                        display: block;
                                        width: 100%;
                                        max-width: 120px;
                                        height: 100%;
                                        object-fit: cover;
                                    }
                                }
                            }
                            .thumbnail-meta{
                                flex: 1 1 auto;
                                -webkit-flex: 1 1 auto;
                                -ms-flex: 1 1 auto;
                                -webkit-box-flex: 1;
                                -moz-box-flex: 1;
                                -moz-flex: 1 1 auto;
                                p{
                                    margin: 0;
                                }
                                .text-box-wrapp{
                                    color: #333333;
                                    font-size: 16px;
                                    font-weight: 500;
                                    line-height: 22px;
                                    padding: 0 15px;
                                    .text-box{
                                        font-weight: 400;
                                    }
                                }
                            }
                            &:after{
                                content: '';
                                display: block;
                                clear: both;
                            }
                        }
                    }
                }
            }
        }
    }
    &.loading{
        .spinner-wrapp{
            display: block;
            padding: 15px;
        }
    }
    &.loading, &.has-content{
        .gotr-lightbox-container{
            top: 50%;
            left: 50%;
            -webkit-transform: translate( -50%, -50% );
            -moz-transform: translate( -50%, -50% );
            -ms-transform: translate( -50%, -50% );
            -o-transform: translate( -50%, -50% );
            transform: translate( -50%, -50% );
        }
    }
    // &.open-options, &.img-hover, &.settings-hover{
    //     display: block;
    // }
}