/*** List and treelist widgets ***/

.listing {
    tbody td,
    li {
        display: block;
        border-bottom: 1px solid #f4f4f4;
        cursor: default;
        font-weight: normal;
    }

    tbody td,
    li a {
        display: block;
        text-decoration: none;
        cursor: default;
        padding: 0 0.5em;
        white-space: nowrap;
        vertical-align: middle;
        line-height: 2.4em;
        color: @list-color;
    }

    tbody td {
        display: table-cell;
        outline: none;
    }

    li.selected,
    tr.selected td {
        color: @list-selected-color;
        background-color: @list-selected-color-background;
    }

    td.selection {
        padding: 0 1em;
        width: 3em;
        text-align: center;
    }

    td.selection > input {
        vertical-align: middle;
    }

    /* because of border-collapse, we make the left border twice what we want it to be - half will be hidden to the left */
    &.focus tbody tr.focused > td:first-child {
        border-left: 2px solid #739da8; /* TODO */
    }
}

table.listing {
    width: 100%;
    table-layout: fixed;
}

ul.listing {
    display: block;
    list-style: none;
    margin: 0;
    padding: 0;

    li {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        position: relative;

        ul {
            border-top: 1px solid #f4f4f4;
            padding-left: 1.5em;

            li:last-child {
                border-bottom: none;
            }
        }

        input[type=checkbox] {
            position: absolute;
            top: 0;
            right: 0.2em;
            height: 2.4em;
            vertical-align: middle;
        }
    }
}


/* icons */

.listing.iconized li {
    a:before {
        &:extend(.font-icon-class);
    }
    &.preferences > a:before {
        content: @fa-var-sliders;
    }
    &.folders > a:before {
        content: @fa-var-folder;
    }
    &.responses > a:before {
        content: @fa-var-comment;
    }
    &.identities > a:before {
        content: @fa-var-at;
    }
    &.password > a:before {
        content: @fa-var-lock;
    }
    &.addressbook a:before {
        content: @fa-var-book;
    }
    &.contactgroup a:before {
        content: @fa-var-group;
    }
    &.contactsearch a:before {
        content: @fa-var-search;
    }
    &.filter > a:before {
        content: @fa-var-filter;
    }
    &.enigma.keys > a:before {
        content: @fa-var-key;
    }

    /* autocomplete popup */
    & > i:before {
        &:extend(.font-icon-class);
        content: @fa-var-user;
    }
    &.group > i:before {
        content: @fa-var-group;
    }
}

.listing.iconized tr {
    td:before {
        &:extend(.font-icon-class);
    }
    &.contact.person td.name:before {
        content: @fa-var-user;
    }
    &.contact.group td.name:before {
        content: @fa-var-group;
    }
    &.general > td.section:before {
        content: @fa-var-desktop;
    }
    &.mailbox > td.section:before {
        content: @fa-var-envelope-o;
    }
    &.mailview > td.section:before {
        content: @fa-var-inbox;
    }
    &.compose > td.section:before {
        content: @fa-var-paper-plane;
    }
    &.addressbook > td.section:before {
        content: @fa-var-user;
    }
    &.folders > td.section:before {
        content: @fa-var-folder-o;
    }
    &.server > td.section:before {
        content: @fa-var-server;
    }
    &.enigma > td.section:before {
        content: @fa-var-lock;
    }
}

/* selecatable list: e.g. spellcheck language selection */
.listing.iconized.selectable li {
    a:before {
        &:extend(.font-icon-class);
        content: "";
    }
    a.selected:before {
        content: @fa-var-check;
    }
}

ul.treelist li div.treetoggle {
    position: absolute;
    top: 1.2em;
    left: 1.3em;
    width: 0.8em;
    height: 0.8em;
    line-height: 0.8em;
    cursor: pointer;

    &:before {
        &:extend(.font-icon-class);
        content: @fa-var-plus-square-o;
        font-size: 0.8em;
        width: 0.8em;
        height: 0.8em;
        background-color: white;
    }

    &.expanded:before {
        content: @fa-var-minus-square-o;
    }
}