@import "../../../../assets/less/core/boot.less";

.report-container {
    margin-bottom: 15px;
    > ul {
        list-style: none;
        padding: 0;
        margin-bottom: 15px;

        .item {
            float: left;
            overflow: hidden;
            display: block;

            .content {
                margin: 5px;
                position: relative;

                .drag-handle {
                    width: 14px;
                    height: 14px;
                    position: absolute;
                    left: 15px;
                    top: 13px;
                    .opacity(0);
                    .transition(opacity 0.2s);
                    font-size: 14px;
                    cursor: move;

                    &:before {
                        .icon(@bars);
                        color: @color-report-widget-control-inactive;
                    }
                }

                .widget-control {
                    position: absolute;
                    display: none;
                    width: 15px;
                    height: 15px;
                    color: @color-report-widget-control-inactive;
                    .opacity(1);
                    outline: none;

                    &:hover {
                        color: @link-color;
                    }
                }

                .report-widget h3 {
                    padding-left: 0;
                    .transition(padding 0.2s);
                }

                .edit-widget {
                    text-indent: -10000em;
                    right: 15px;
                    top: 15px;

                    &:before {
                        position: absolute;
                        display: block;
                        text-indent: 0;
                        left: 0;
                        width: 15px;
                        height: 15px;
                        font-size: 16px;
                    }

                    &:hover:before {
                        text-decoration: none;
                    }

                    &.inspector-open {
                        display: block;
                    }
                }

                .close {
                    right: 10px;
                    top: 15px;
                }
            }

            &:hover, &.dragged {
                .widget-control {
                    display: block;
                }

                .report-widget h3 {
                    padding-left: 18px;
                }

                .drag-handle {
                    .opacity(1);
                }
            }

            &.width-1 {width: 8.33%;}
            &.width-2 {width: 16.66%;}
            &.width-3 {width: 24.99%;}
            &.width-4 {width: 33.32%;}
            &.width-5 {width: 41.65%;}
            &.width-6 {width: 49.98%;}
            &.width-7 {width: 58.31%;}
            &.width-8 {width: 66.64%;}
            &.width-9 {width: 74.97%;}
            &.width-10 {width: 83.3%;}
            &.width-11 {width: 91.63%;}
            &.width-12 {width: 100%;}

            &.dragged {
                .transition-duration(0s) !important;
                .translate3d(0, 0, 0) !important;
                position: absolute;
                opacity: 0.5;
                z-index: 2000;
            }

            &.placeholder {
                display: none;
            }

            &.separator {
                width: 100% !important;
            }
        }

        &.add-delete .item .content .edit-widget {
            right: 30px;
        }

        &.wrapped {
            .item {
                width: 100% !important;
            }
        }
    }

    .manage-widgets {
        display: inline-block;
        color: #bcc3c7;
        padding: 10px 15px;
        font-size: 14px;
        font-weight: 400;
        border: 1px dashed #bcc3c7;
        .border-radius(@border-radius-base);
        margin-left: 5px;

        i {
            margin-right: 5px;
        }

        &:hover {
            text-decoration: none;
            background-color: @link-color;
            color: white;
            border: 1px solid @link-color;
        }
    }

    .dropdown.open .manage-widgets {
        text-decoration: none;
        background-color: @link-color;
        color: white;
        border: 1px solid @link-color;
    }

    //
    // Isotope CSS3 transitions
    //

    &.isotope,
    &.isotope .isotope-item {
      .transition-duration(0.8s);
    }

    &.isotope {
        transition-property: height, width;
    }

    &.isotope .isotope-item {
        transition-property: transform, opacity;
    }
}

@media (max-width: @screen-sm) {
    .report-container {
        ul .item {
            // The breakpoint should be defined in the CSS and JS,
            // otherwise some widgets can't calculate the width properly,
            // as the JS is applied too late.
            width: 100% !important;
        }
    }
}