/* General listings, like for pages, images or snippets */
ul.listing{
    @include unlist();
}

.listing{
    margin-bottom:2em;
    color:lighten($color-text-base, 20%);
    font-size:0.95em;

    ul{
        @include unlist();
    }
    > li{
        padding:1em 0;
        border-bottom:1px dashed $color-input-border;
    }

    h3{
        margin:0;
        font-size:1em;
    }

    td, th{
        padding:1.2em 1em;
    }

    &.small td, th{
        padding:0.6em 1em;
    }

    thead{
        font-size:1.1em;
        color: $color-text-base;
        border-bottom:1px solid $color-grey-4;

        th{
            font-size:0.85em;
            text-align:left;
            font-weight:normal;
            white-space: nowrap;
            text-transform:uppercase;
        }
        th.children{
            border:0;
        }

        th a{
            text-decoration:none;
            color:inherit;
            position:relative;

            &.icon:after{
                opacity:0.5;
                right:0;
            }
        }
    }

    &.full-width td:first-child,
    &.full-width th:first-child{
        padding-left:20px;
    }

    &.full-width{
        margin-bottom:-3em; /* this negates the padding added to the bottom of .content */
    }
    &.full-width th{
        background-color:$color-thead-bg;
    }

    .table-headers{
        border-bottom:1px solid  $color-grey-4
    }

    tbody{
        border-bottom:1px dashed $color-input-border;
        
        
        tr{
            border-top:1px dashed $color-input-border;
            
            &:first-child{
                border-top:1px dashed $color-input-border;
            }
        }
    }

    &.full-width tbody{
        border:0;
    }
    &.full-width tbody tr:hover{
        background-color:#FDFDFD;
    }

    &.chooser {
        tbody .title a{
            display:block;
            @include transition(none);
        }
        tbody tr:hover{
            background-color:$color-teal;
            color:white;

            .title a, .title a:hover{
                color:white;
            }
            .status-tag{
                border-color:white;
            }
        }
        tbody tr.disabled td{
            opacity:0.25;
        }
        tbody tr.disabled td.children{
            opacity:1;
        }
        tbody tr.disabled:hover{
            background-color:inherit;
            color:inherit;

            .title{
                cursor:not-allowed;
            }
            .status-tag{
                border-color:inherit;
            }
        }
    }

    &.small tbody tr{
        font-size:1em;
    }

    &.full-width .divider td{
        padding-left:20px;
    }

    /* specific columns */
    .bulk{
        padding-right:0;

        label{
            font-size:1em;
            display:block;
            width:100%;
            position:relative;
        }
        label span{
            @include visuallyhidden();
        }
        input{
            margin-top:3px;

        }
    }

    .title{
        color:darken($color-grey-2, 10%);

        h2{
            text-transform:none;
            margin:0;
            font-size:1.15em;
            font-weight:600;
            color:inherit;
            line-height:1.5em;

            a{
                color:inherit;
                text-decoration:none;

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

    .actions{
        @include clearfix();
        margin-top:0.8em;
        text-transform:uppercase;
        margin-bottom:-0.5em;

        a{
            text-decoration:none;
        }

        li{
            float:left;
            padding:0 0.5em 0 0;
            margin:0 0 0.5em 0;
            line-height:1em;
        }
    }

    .button{
        color:$color-teal;
        border-color:$color-grey-3;
        background:white;
        font-size:0.84em; /* 0.01em difference to regular small buttons */

        &:hover{
            border-color:$color-teal;
            background-color:$color-teal;
            color:white;
        }
    }

    .moderate-actions form{
        float:left;
        margin:0 1em 1em 0;
    }

    .children,
    .no-children{
        padding:0 !important;
       
        &:hover{
            background-color:$color-grey-5;
        }

        a{
            display:block;
            padding:2em 0;
        }
    }

    .children a{
        color:$color-teal;
        display:block;
        
        &:before{
            font-size:3rem;
        }
    }

    .no-children a{
        color:$color-grey-3;
        display:block;
        
        &:before{
            font-size:1.5rem;
        }
        &:hover{
            color:$color-teal;
        }
    }

    &.small .children a:before{
        font-size:30px;
    }

    .ord{
        padding-left:10px !important;
    }
    th.ord a:before{
        width:1em;
        font-size:15px;
    }
    th.ord a:hover:before{
        color:$color-teal;
    }
    .handle{
        cursor:move;
        width:20px;

        &:before{
            font-size:20px;
            color:$color-grey-3;
            width:1em;
        }
        &:hover:before{
            color:$color-text-base;
        }
    }

    .ui-sortable-helper{
        border:1px dashed $color-input-border;
        border-width:1px 0;

        td{
            display:none;

        }
        .ord,.title{
            display:table-cell;
        }
        .ord{

        }
    }
    .dropzone{
        height:80px;
        background-color:$color-grey-1;

        &:hover{
            background-color:$color-grey-1;
        }
        td{
            padding: 0 !important;
        }
    }

    table .no-results-message{
        padding-left:20px;
    }

    .unpublished h2{
        opacity:0.7;
    }

    .index {
        background-color:$color-grey-4;

        .title h2{
            font-size:1.2em;
            opacity:1;

            a{
                @include transition(opacity 0.2s ease);
            }
            a:hover{
                opacity:0.7;
            }
        }
        .actions{
            margin-top:1em;
        }
        .button{
            background-color:transparent;
            color:white;
            border-color:$color-teal-darker;

            &:hover{
                color:white;
                background:$color-teal-darker;
            }

            &.bicolor{
                background:$color-teal-darker;
            }
        }
    }
}
ul.listing{
    border-top:1px dashed $color-input-border;
    margin-bottom:2em;
}
table.listing{
    width:100%;
}


 /* explorer specific tweaks */
.page-explorer .listing {
    position:relative;

    .index{
        color:white;
        background-color:$color-header-bg;

        td{
            padding-top:1.5em;
            padding-bottom:1.5em;
        }

        .privacy-indicator{
            font-size:1em;
            opacity:1;
            position:absolute;
            right:5%;
            top:2em;
        }
        .locked-indicator{
            font-size:0.8em;
        }

        .title{
            h2{
                color:white;
                font-size:1.8em;
                font-weight:500;

                a:hover{
                    color:white;
                }
            }

        }
    }

    .privacy-indicator,
    .locked-indicator{
        margin-right:0;
        font-size:1em;
        opacity:0.7;
    }

    .table-headers{
        .ord{
            padding-right:0;
        }
        .title{
            padding-left:0;
        }
    }
    tbody .title{
        padding-left:0;
    }
}

.pagination{
    text-align:center;
    p{
        margin:0;
    }
    ul{
        @include unlist();
    }
    ul{
        margin-top:-1.7em;
    }
    li{
        line-height:1em;
    }
    .prev{
        float:left;
    }
    .next{
        float:right;
    }
}

.listing.full-width + .pagination{
    margin-top: 3em;
    border-top: 1px dashed #d9d9d9;
    padding:2em 50px 0 50px;
}


/* listing filters */

.listing-filter{
    @include clearfix();
    background-color:$color-grey-5;
    border-width:1px 0;
    margin:3em 0;
}
.filter-title{
    float:left;
    text-transform:uppercase;
    font-size:0.95em;
    padding:1em;
    margin:0 1em 0 0 ;
    background-color:$color-grey-4;
}
.filter-options{
    @include unlist();
    @include clearfix();
    overflow:hidden;

    li{
        padding:0.8em;
        float:left;
    }
}


@media screen and (min-width: $breakpoint-mobile){
    .listing{
        &.horiz > li{
           float:left;
        }
        &.images {
            @include clearfix();
            border: 1px solid $color-grey-4;
            border-width:0 0 0 1px !important;

            > li{
                padding:1.3em;
                width:200px;
                height:220px;
                text-align:center;
                margin-top:-1px;
                border:1px solid $color-grey-4;
                border-width:1px 1px 1px 0px;

                .image{
                    text-align:center;
                    height:180px;

                    &:before {
                        content: '';
                        display: inline-block;
                        height: 100%;
                        vertical-align: middle;
                        margin-right: -0.25em;
                    }

                    img{

                        display:inline-block;
                        vertical-align: middle;
                    }
                }

                &:hover{
                    background-color:#FDFDFD;

                    img{
                        border-color:$color-teal;
                    }
                }
            }
            a{
                color:inherit;
            }

        }
        .actions{
           visibility: hidden;
        }
        .index .actions{
            visibility:visible;
        }
        td:hover .actions{
            visibility:visible;
        }
        .no-children {
            border-color:transparent;
            
            a{
                opacity:0;
            }
        }
        tr:hover .no-children a{
            opacity:1;
        }
        tr:hover .children{
            background-color:$color-teal;

            a:before{
                color:white;
            }
        }

        td.children:hover{
            background-color:$color-teal-darker;
        }


        table .no-results-message{
            padding-left:50px;
        }

        &.full-width td:first-child,
        &.full-width th:first-child{
            padding-left:50px;
        }

        &.full-width .divider td{
            padding-left:50px;
        }
    }
}

/* Transitions */
.listing {
    thead .dropdown ul{
        @include transition(none);
    }
    .children, .no-children{
        @include transition(background-color 0.2s ease);
    }
    .children a,
    .no-children a{
        @include transition(all 0.2s ease);
    }
}