@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: 24px;
                    height: 24px;
                    position: absolute;
                    left: 8px;
                    top: 12px;
                    opacity: 0;
                    transition: opacity 0.2s;
                    cursor: move;

                    > i {
                        font-size: 24px;
                        line-height: 1;
                    }
                }

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

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

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

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

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

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

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

            &.is-removable {
                .edit-widget {
                    right: 40px;
                }

                .btn-close {
                    right: 12px;
                    top: 12px;
                    font-size: 13px;
                }
            }

            &.is-sortable {
                &:hover, &.dragged {
                    .report-widget h3 {
                        padding-left: 18px;
                    }

                    .drag-handle {
                        opacity: 1;
                    }
                }
            }

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

            &.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: 40px;
        }

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

    .manage-widgets {
        display: inline-block;
        color: @dropdown-trigger-color;
        background-color: @dropdown-trigger-bg;
        border: 1px dashed @dropdown-trigger-border;
        padding: 7px 15px;
        font-size: @font-size-base;
        font-weight: normal;
        border-radius: @border-radius-base;
        margin-left: 5px;

        i {
            margin-right: 5px;
        }
    }

    .manage-widgets:hover,
    .manage-widgets.show {
        background-color: @dropdown-hover-bg;
        border-color: transparent;
        color: @dropdown-hover-color;
        text-decoration: none;
    }

    //
    // 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;
        }
    }
}