.view-details-sized(@size) {

    .item {
        .label, .date, .size {
            line-height: @size + 14px;
        }
    }

    .square {
        width: @size;

        img {
            width: @size;
            height: @size;
        }
    }

    .label {
        margin: 0 246px 0 (@size + 32px);
    }
}


#view.view-details {

    margin: 16px;

    #items {
        .rounded();
        box-shadow: 0 1px 1px 0 rgba(0,0,0,0.2);
    }

    .header {
        position: relative;
        white-space: nowrap;
        display: list-item;
        background: #fafafa;
        border-bottom: 1px solid rgba(0,0,0,0.07);

        .label, .date, .size {
            line-height: 46px;
            opacity: 0.4;
            outline: 0;
            .transition(all 0.2s ease-in-out);

            &:hover {
                opacity: 1;
                color: @col-hover;
            }
        }

        .sort {
            display: none;
            position: relative;
            top: -2px;
            width: 12px;
            height: 12px;
            padding: 0 8px;
        }

        .ascending .sort.ascending,
        .descending .sort.descending {
            display: inline;
        }
    }

    .item {
        overflow: hidden;
        border-bottom: 1px solid rgba(0,0,0,0.07);

        &:hover {
            .raised();
            z-index: 1;
        }
    }

    .square {
        display: inline-block;
        position: absolute;
        left: 16px;
        top: -1px;
        padding: 8px;

        .thumb {
            .rounded();
            box-shadow: 0 0 1px 0 rgba(0,0,0,0.2);
        }
    }

    .label, .date, .size {
        padding: 0 8px;
    }

    .date {
        position: absolute;
        right: 116px;
        top: 0;
    }

    .size {
        position: absolute;
        right: 16px;
        top: 0;
    }

    .selector {
        left: -2px;
        top: -2px;
    }

    .view-details-sized(16px)
}