@import "mixins.less";

.a3_portfolio_font() {
    font-family: "a3-portfolio-dashboard" !important;
    font-style: normal !important;
    font-weight: normal !important;
    font-variant: normal !important;
    text-transform: none !important;
    speak: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

@font-face {
  font-family: "a3-portfolio-dashboard";
  src:url("../fonts/a3-portfolio-dashboard.eot");
  src:url("../fonts/a3-portfolio-dashboard.eot?#iefix") format("embedded-opentype"),
    url("../fonts/a3-portfolio-dashboard.woff") format("woff"),
    url("../fonts/a3-portfolio-dashboard.ttf") format("truetype"),
    url("../fonts/a3-portfolio-dashboard.svg#a3-portfolio-dashboard") format("svg");
  font-weight: normal;
  font-style: normal;

}

#a3_portfolio_data_meta_box {

    .inside {
        padding: 0;
        margin: 0;
    }

    .a3rev_panel_container {
        margin: 0 !important;

        ul.a3-metabox-data-tabs {
            li {
                &.portfolio_gallery_options {
                    a {
                        &:before {
                            content: "\e001";
                        }
                    }
                }
                &.card_description_options {
                    a {
                        &:before {
                            font-family: dashicons !important;
                            content: "\f123";
                        }
                    }
                }
                &.portfolio_sticky_options {
                    a {
                        &:before {
                            font-family: dashicons !important;
                            content: "\f481";
                        }
                    }
                }
                &.single_layout_options {
                    a {
                        &:before {
                            content: "\e004";
                        }
                    }
                }
                &.portfolio_attributes_options {
                    a {
                        &:before {
                            content: "\e003";
                        }
                    }
                }
                &.portfolio_button_options {
                    a {
                        &:before {
                            content: "\e002";
                        }
                    }
                }
                a {
                    &:before {
                        margin-right: 7px;
                        font-size: 16px;
                        margin-top: 10px;
                        content: "\e004";
                    }
                }
            }
        }

        #portfolio_images_container {
            padding: 10px 15px;

            ul {
                margin: 0;
                padding: 0;

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

                &:after {
                    clear: both;
                }

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

                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: 1em;
                                width: 1em;
                                font-size: 1.4em;

                                &:before {
                                    .a3_portfolio_font();
                                    text-indent:0;
                                    position: absolute;
                                    top: 0;
                                    left: 0;
                                    width: 100%;
                                    height: 100%;
                                    text-align: center;
                                    color: #fff;
                                    background-color: #000;
                                    -webkit-border-radius: 100%;
                                    border-radius: 100%;
                                    box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
                                    content: "\e000";
                                }

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

                            &.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;
                        -webkit-border-radius: 2px;
                        -moz-border-radius: 2px;
                        border-radius: 2px;
                        position: relative;
                        -webkit-box-sizing: border-box;
                        -moz-box-sizing: border-box;
                        box-sizing: border-box;

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

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

        .add_portfolio_images {
            padding: 0 12px 10px;
        }

        .portfolio_attributes {
            .a3-metabox-item {
                &.open, &.closed {
                    h3 {
                        cursor: move;
                    }
                }

                h3 {
                    a.delete {
                        color: red;
                        font-weight: 400;
                        position: relative;
                        text-decoration: none;
                        float: right;
                    }

                    .handlediv {
                        position: relative;
                        height: 16px;
                        width: 16px;
                        right: auto;
                        margin: 2px 10px 0 0;
                    }
                }

                input[type="text"], textarea {
                    width: 100%;
                    padding: 4px;
                }

                table {
                    background: #fdfdfd;
                    border-top: 1px solid #dfdfdf;

                    .minus, .plus {
                        margin-top: 2px;
                    }

                    .fr {
                        float: right;
                    }
                }

                .chosen-container-multi {
                    width: 100% !important;
                    max-width: none;
                }
            }

            .a3rev-ui-multiselect {
                width: 100% !important;
                max-width: none;
            }
        }
    }

    .a3-portfolio-metabox-icon {
        &:before {
            .a3_portfolio_font();
        }
    }
}