/**
 * BUIC: Browser.
 */
.buic-browser {
    // Make the listing scrolling
    $screen-height:   100vh;
    $dialog-margin:   2 * 30px;
    $header-vpadding: 6px;
    $header-height:   37px + 2 * $header-vpadding;
    $footer-vpadding: 12px;
    $footer-height:   26px + 2 * $footer-vpadding;
    $body-padding:    15px;
    $thead-height:    21px;
    $thead-vpadding:  10px;

    div.header {
        height: $thead-height + 2 * $thead-vpadding;
        padding: $thead-vpadding 10px;
    }

    div.list {
        overflow-y: scroll;
        margin: 0;
        height: calc(#{$screen-height} - #{4px + $dialog-margin + $header-height + 2 * $body-padding + $thead-height + 2* $thead-vpadding});

        &.multi {
            height: calc(#{$screen-height} - #{4px + $dialog-margin + $header-height + 2 * $body-padding + $footer-height + $thead-height + 2* $thead-vpadding});
        }
    }

    table {
        margin: 0;
        padding: 0;
    }

    // Modal header
    .modal-header {
        padding: $header-vpadding 15px;

        // Fix text getting bottom chopped off
        // Increase line height and shrink margin to half to compensate
        line-height: inherit;
        margin-top: 5px;
        margin-bottom: 5px;
    }

    // Modal footer
    .modal-footer {
        padding: $footer-vpadding 15px;
    }

    h4 {
        span {
            display: inline-block;
            margin: 0 8px 0 4px;
        }
    }

    // Listing header
    div.header {
        line-height: $thead-height;
        background: #f2f2f2;
        overflow: hidden;
        white-space: nowrap;

        & > div {
            display: inline-block;
            border-left: 1px solid #888;
            padding-left: 10px;
            margin-left: 6px;
            height: $thead-height;
            vertical-align: top;

            &:first-child {
                border: none;
                padding-left: 0;
                margin-left: 0;
            }
        }

        input[type="text"], select {
            font-weight: normal;
            line-height: 15px;
            padding: 1px 4px;
        }

        .toogle-folders, .toogle-files {
            border: none;
            background: none;
            font-family: FontAwesome;
            color: #ddd;

            &[aria-pressed="true"] {
                color: #000;
            }
        }

        .toogle-folders:after {
            font-size: 18px;
            content: "\f114"; // fa-folder-o
        }

        .toogle-files:after {
            font-size: 16px;
            content: "\f016"; // fa-file-o
        }
    }

    // Listing
    table {
        td {
            padding: 2px 8px;
            vertical-align: middle;
        }

        // Name column
        td.name {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            width: 100%;
            max-width: 0;
            line-height: 2rem;

            .disabled {
                color: #999;
            }
        }

        // Info column
        td.info {
            width: 110px;
            min-width: 110px;

            div {
                float: left;
                clear: both;
            }

            .filesize {
                border-bottom: 1px dashed #bbb;
                line-height: 1.1;
            }

            .dimensions {
                margin-top: 3px;
                color: #999;
                font-size: 90%;
            }
        }

        // Thumbnail column
        td.thumb {
            width: 70px;
            min-width: 70px;
        }

        // Selection column
        td.select {
            padding: 2px 0 0 0;
        }

        @media (max-width: 640px) {
            td.info {
                display: none;
            }
        }

        @media (max-width: 400px) {
            td.thumb {
                display: none;
            }
        }

        tr.directory td {
            background: #fdfdfd;
        }

        mark {
            padding-left: 0;
            padding-right: 0;
        }
    }

    // Folder/file icons
    .entry {
        font-weight: bold;

        &:before {
            display: inline-block;
            margin-right: 5px;
            width: 1.2em;
            vertical-align: middle;
            text-align: center;
            font-family: FontAwesome;
            font-size: 120%;
            font-weight: normal;
            color: #555;
        }
    }

    .type-folder {
        color: #7e94a5;

        &:before {
            content: $fa-var-folder-o;
            color: #7e94a5;
        }
    }

    .type-file:before {
        content: $fa-var-file-o;
    }

    .type-image:before {
        content: $fa-var-file-image-o;
    }

    .type-video:before {
        content: $fa-var-file-video-o;
    }

    .type-audio:before {
        content: $fa-var-file-audio-o;
    }

    .type-archive:before {
        content: $fa-var-file-archive-o;
    }

    .type-pdf:before {
        content: $fa-var-file-pdf-o;
    }

    .type-powerpoint:before {
        content: $fa-var-file-powerpoint-o;
    }

    .type-excel:before {
        content: $fa-var-file-excel-o;
    }

    .type-word:before {
        content: $fa-var-file-word-o;
    }

    .type-code:before {
        content: $fa-var-file-code-o;
    }

    .type-text:before {
        content: $fa-var-file-text-o;
    }

    .image-dimensions{
        color: #999;
        font-size: 90%;
    }

    .times {
        padding: 0 2px;
    }
}
