@import "mixins.less";

#woocommerce-product-data ul.wc-tabs .product_dgallery_tab {
    a {
        &:before {
            content: "\f161";
            font-family: dashicons;
        }
    }
}

#wc-dgallery-variations-images {
    .inside {
        padding: 0px;
    }
}
.a3-dynamic-metabox-panel-wrap {

    margin: 0 !important;

    .dgallery_images_container {

        ul {
            margin: 0;
            padding: 0px 12px;

            &:after, &:before {
                content: " ";
                display: table;
            }

            &:after {
                clear: both;
            }

            li.metabox-sortable-placeholder {
                &:after {
                    text-indent:0;
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    text-align: center;
                    font-size: 40px;
                    line-height: 70px;
                    color: #ddd;
                    content: "\f128";
                    font-family: dashicons;
                    border: 3px dashed #ddd;
                    .borderbox();
                }
            }

            ul.actions {
                position: absolute;
                top: -8px;
                right: -8px;
                padding: 2px;
                display: none;

                li {
                    float: right;
                    margin: 0 0 0 2px;

                    a {
                        width: 1em;
                        margin: 0;
                        height: 0;
                        display: block;
                        overflow: hidden;

                        &.delete {
                            display: block;
                            text-indent: -9999px;
                            position: relative;
                            height: 25px;
                            width: 25px;
                            font-size: 18px;

                            &:before {
                                text-indent:0;
                                position: absolute;
                                top: 0;
                                right: 0;
                                width:20px;
                                height: 20px;
                                line-height: 20px;
                                text-align: center;
                                color: #fff;
                                background-color: #000;
                                .border_radius(100%);
                                box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
                                content: "\f335";
                                font-family: dashicons;
                            }

                            &:hover {
                                &:before {
                                    background-color: #a00;
                                }
                            }
                        }

                        &.dg_tips {
                            cursor: pointer;
                        }

                        &.view {
                            display: block;
                            text-indent: -9999px;
                            position: relative;
                            height: 1em;
                            width: 1em;
                            font-size: 1.4em;
                        }
                    }
                }
            }

            li {
                &.add, &.image, &.metabox-sortable-placeholder {
                    width: 80px;
                    float: left;
                    cursor: move;
                    border: 1px solid #d5d5d5;
                    margin: 9px 9px 0 0;
                    background: #f7f7f7;
                    .border_radius(2px);
                    position: relative;
                    .borderbox();

                    img {
                        width: 100%;
                        height: auto;
                        display: block;
                    }
                }

                &:hover {
                    ul.actions {
                        display: block;
                    }
                }
            }
        }
    }
}