//
// File list control
// --------------------------------------------------

.control-filelist {
    .listPaddings (@level, @offset-base) when (@level > 0) {
        > li.group {
            > ul {
                > li > a {
                    padding-left: (@level+2)*@offset-base;
                    margin-left: -1*@level*@offset-base;
                }

                .listPaddings(@level - 1, @offset-base);
            }
        }
    }
    .listPaddings (0, 27px) {}

    p.no-data {
        padding: 22px 0;
        margin: 0;
        color: @color-filelist-norecords-text;
        font-size: @font-size-base;
        text-align: center;
        font-weight: normal;
        .border-radius(@border-radius-base);
    }

    ul {
        padding: 0;
        margin: 0;

        li {
            font-weight: normal;
            line-height: 150%;
            position: relative;
            list-style: none;

            a:hover {
                background: @color-list-hover;
            }

            &.active > a {
                background: @color-list-active;
                position: relative;
                &:after {
                    position: absolute;
                    height: 100%;
                    width: 4px;
                    left: 0;
                    top: 0;
                    background: @color-list-active-border;
                    display: block;
                    content: ' ';
                }
            }

            a {
                display: block;
                padding: 10px 45px 10px 20px;
                outline: none;

                &:hover, &:focus, &:active {text-decoration: none;}

                span { 
                    display: block;

                    &.title {
                        font-weight: normal;
                        color: @color-text-title;
                        font-size: @font-size-base;
                    }

                    &.description {
                        color: @color-text-description;
                        font-size: @font-size-base - 2;
                        white-space: nowrap;
                        font-weight: normal;
                        overflow: hidden;
                        text-overflow: ellipsis;

                        strong {
                            color: @color-text-title;
                            font-weight: normal;
                        }
                    }
                }
            }

            &.group {
                > h4, > div.group > h4 {
                    font-weight: normal;
                    font-size: @font-size-base;
                    margin-top: 0;
                    margin-bottom: 0;
                    position: relative;

                    a {
                        padding: 10px 20px 10px 53px;
                        color: @color-text-title;
                        position: relative;
                        outline: none;

                        &:hover { background: transparent; }

                        &:before, &:after {
                            width: 10px;
                            height: 10px;
                            display: block;
                            position: absolute;
                            top: 1px;
                        }

                        &:after {
                            left: 33px;
                            top: 9px;
                            .icon(@folder);
                            color: @color-list-icon;
                            font-size: 16px;
                        }

                        &:before {
                            left: 20px;
                            top: 9px;
                            color: @color-list-arrow;
                            .icon(@caret-right);
                            .transform( ~'rotate(90deg) translate(5px, 0)' );
                            .transition(all 0.1s ease);
                        }
                    }
                }

                > ul {
                    > li > a {
                        padding-left: 52px;
                    }

                    > li.group {
                        padding-left: 20px;
                    }

                    .listPaddings(10, 27px);
                }

                &[data-status=collapsed] {
                    > h4 a:before, > div.group > h4 a:before {
                        .transform(~'rotate(0deg) translate(3px, 0)');
                    }

                    & > ul, & > div.subitems {
                        display: none;
                    }
                }
            }

            > div.controls {
                position: absolute;
                right: 19px;
                top: 6px;

                .dropdown {
                    width: 14px;
                    height: 21px;

                    &.open a.control {
                        display: block!important; 
                        &:before {
                            visibility: visible;
                            display: block;
                        }
                    }
                }

                a.control {
                    color: @color-text-title;
                    font-size: @font-size-base;
                    visibility: hidden;
                    overflow: hidden;
                    width: 14px;
                    height: 21px;
                    display: none;
                    text-decoration: none;
                    cursor: pointer;
                    padding: 0;
                    .opacity(0.5);
                    &:before {
                        visibility: visible;
                        display: block;
                        margin-right: 0;
                    }

                    &:hover {
                        .opacity(1);
                    }
                }
            }

            &:hover {
                > div.controls, > a.control {
                    display: block!important;

                    > a.control {
                        display: block!important;
                    }
                }
            }

            .checkbox {
                position: absolute;
                top: -5px;
                right: 0;

                label {
                    margin-right: 0;

                    &:before {
                        border-color: @color-filelist-cb-border;
                    }
                }
            }
        }
    }

    &.single-line {
        ul {
            li a span.title {
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
            }
        }
    }

    //
    // Templates have emphasis
    //

    &.filelist-hero {
        .a-hover() {
            background: @color-filelist-hero-hover-bg;
            border-bottom: 1px solid @color-filelist-hero-hover-bg !important;
            span.title, span.description {
                color: @color-filelist-hero-hover-text !important;
            }

            .list-icon {
                color: @color-filelist-hero-hover-text !important;
            }
        }

        .a-active() {
            background: @color-filelist-hero-active-bg;
            border-bottom: 1px solid @color-filelist-hero-active-bg !important;
            span.title, span.description {
                color: @color-filelist-hero-active-text !important;
            }

            .list-icon {
                color: @color-filelist-hero-active-text !important;
            }
        }

        ul {
            li {
                background: @color-filelist-hero-item-bg;
                border-bottom: none;

                > a {
                    padding: 11px 45px 10px 50px;
                    font-size: @font-size-base - 1;
                    border-bottom: 1px solid @color-panel-light;

                    span.title {
                        font-size: @font-size-base;
                        font-weight: normal;
                        color: @color-filelist-title-hero;
                    }

                    span.description {
                        font-size: @font-size-base - 1;
                    }

                    .list-icon {
                        position: absolute;
                        left: 14px;
                        top: 15px;
                        font-size: 22px;
                        color: #b7c0c2;
                    }

                    &:hover {
                        .a-hover();
                    }

                    &:active {
                        .a-active();
                    }
                }

                .checkbox {
                    top: -2px;
                    right: 0;
                }

                &.active {
                    > a {
                        border-bottom: 1px solid @color-list-active;

                        &:after {
                            top: -1px;
                            bottom: -1px;
                            height: auto;
                        }

                        > span.borders {
                            &:before {
                                content: ' ';
                                position: absolute;
                                width: 100%;
                                height: 1px;
                                display: block;
                                left: 0;
                                background-color: @color-list-active;
                            }

                            &:before {top: -1px;}
                        }

                        &:hover > span.borders:before {
                            background-color: @color-filelist-hero-hover-bg;
                        }

                        &:active > span.borders:before {
                            background-color: @color-filelist-hero-active-bg;
                        }
                    }
                }

                > h4 {
                    padding-top: 7px;
                    padding-bottom: 6px;
                    border-bottom: 1px solid @color-panel-light;
                }

                > div.controls {
                    display: none;
                    position: absolute;
                    right: 16px;
                    top: 15px;

                    > a.control {
                        width: 16px;
                        height: 23px;
                        background: transparent;
                        overflow: hidden;
                        display: inline-block;
                        color: @color-filelist-hero-hover-text!important;
                        padding: 0;

                        &:before {
                            font-size: 17px;
                        }
                    }
                }

                &:hover > div.controls {
                    display: block;
                }

                &.separator {
                    position: relative;
                    border-bottom: 1px solid #95a5a6;
                    padding: 12px 15px 13px 15px;

                    &:before {
                        z-index: 31;
                        .triangle(down, 19px, 11px, white);
                        position: absolute;
                        left: 13px;
                        bottom: -8px;
                    }

                    &:after {
                        z-index: 30;
                        .triangle(down, 17px, 9px, #95a5a6);
                        position: absolute;
                        left: 14px;
                        bottom: -9px;
                    }

                    h5 {
                        color: #2b3e50;
                        font-size: @font-size-base;
                        margin: 0;
                        font-weight: normal;
                        padding: 0;
                    }
                }
            }

            > li.group {
                > ul > li > a {
                    padding-left: 66px;
                }
            }
        }

        &.single-level {
            ul li:hover {
                background: @color-filelist-hero-hover-bg;

                > a {
                    .a-hover();
                }
            }
            ul li:active {
                background: @color-filelist-hero-active-bg;

                > a {
                    .a-active();
                }
            }
        }
    }
}