@filelist-active:                      @brand-selection;
@filelist-active-text:                 #ffffff;
@filelist-active-border:               @brand-primary;
@filelist-norecords-text:              #666666;
@filelist-norecords-bg:                #eeeeee;
@filelist-cb-border:                   #cccccc;
@filelist-title-hero:                  @primary-color;
@filelist-hero-item-bg:                @primary-bg;
@filelist-hero-item-border:            @toolbar-border;
@filelist-hero-hover-bg:               @dropdown-hover-bg;
@filelist-hero-hover-text:             @dropdown-hover-color;
@filelist-hero-active-bg:              @dropdown-active-bg;
@filelist-hero-active-text:            @dropdown-hover-color;

//
// 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: @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: @toolbar-hover-bg;
            }

            &.active > a {
                background: @filelist-active;
                position: relative;

                span.title, span.description {
                    color: @filelist-active-text;
                }
            }

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

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

                span {
                    display: block;

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

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

                        strong {
                            color: @toolbar-color;
                            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: @toolbar-color;
                        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(@icon-folder);
                            color: @color-list-icon;
                            font-size: 16px;
                        }

                        &:before {
                            left: 20px;
                            top: 9px;
                            color: @color-list-arrow;
                            .icon(@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: @toolbar-color;
                    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: @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: @filelist-hero-hover-bg;
            border-bottom: 1px solid @filelist-hero-hover-bg !important;
            span.title, span.description {
                color: @filelist-hero-hover-text !important;
            }

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

        .a-active() {
            background: @filelist-hero-active-bg;
            border-bottom: 1px solid @filelist-hero-active-bg !important;

            span.title, span.description {
                color: @filelist-hero-active-text !important;
            }

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

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

                > a {
                    padding: 11px 45px 10px 50px;
                    font-size: @font-size-base - 1;
                    border-bottom: 1px solid @filelist-hero-item-border;

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

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

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

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

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

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

                &.no-description {
                    .list-icon {
                        top: 10px;
                    }
                }

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

                        &:after {
                            display: none;
                        }

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

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

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

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

                        span.title, span.description {
                            color: @filelist-hero-active-text !important;
                        }

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

                > h4 {
                    padding-top: 7px;
                    padding-bottom: 6px;
                    border-bottom: 1px solid @filelist-hero-item-border;
                }

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

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

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

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

                &.separator {
                    position: relative;
                    border-bottom: 1px solid @border-color;
                    padding: 12px 15px 13px 15px;

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

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

                    h5 {
                        color: @heading-color;
                        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: @filelist-hero-hover-bg;

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

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

.control-filelist.snippet-list {
    li > a {
        position: relative;
        color: @toolbar-color;

        &:before {
            .icon-OctoFont();
            content: @icon-code-snippet;
            font-size: 19.5px;

            position: absolute;
            width: 17px;
            height: 19px;
            left: 18px;
            top: 12px;
        }

        &:hover {
            &:before {
                color: @filelist-hero-hover-text;
            }
        }
    }

    li.group ul li > a:before {
        left: 34px;
    }
}