.file-selector-tree .selectableFile .thumbnail {
    width: 48px;
    margin-right: 8px;
}

.file-selector-tree .thumbnail img {
    max-width: 100%;
    margin: 0;
}

.file-selector-tree__table {
    margin-bottom: 80px;
    overflow-y: scroll;
    display: flex;
    flex: 1;
}

.file-selector-tree {
    &.dijitDialog {
        height: 90vh;
        width: 90vw;
    }

    .dijitDialogPaneContent {
        padding: 0;
    }

    .portlet-sidebar-wrapper {
        height: 84vh !important;
        width: 200px;
    }

    .selectableFile {
        display: flex;
        align-items: center;
        cursor: pointer;

        img {
            margin-right: calc($spacing-1 / 2);
        }
    }

    .portlet-main {
        display: block;
        height: 84vh !important;
        justify-content: space-between;
        padding: 0;
        overflow-y: scroll;
        width: 100%;
    }
}

.file-selector-tree__container {
    width: 90vw;
    height: 84vh !important;
}

.file-selector-tree__pagination {
    &.portlet-pagination {
        background: #ffffff;
        padding: $spacing-1 * 2;
        position: absolute;
        width: 100%;
        bottom: 0px;
        margin: 0;
    }
}

.file-selector-tree__loading,
.file-selector-tree__no-results,
.file-selector-tree__select-folder {
    align-self: center;
    display: flex;
    flex-direction: column;
    flex: 1;
    justify-content: center;
    text-align: center;
}

.file-selector-tree__sidebar {
    padding: $spacing-1 * 2 0 $spacing-1 * 2 $spacing-1 * 2;

    .dijitTreeContainer {
        float: none;
    }

    .dijitTreeNode {
        padding: calc($spacing-1 / 2) 0;
    }
}

.file-selector-tree__toolbar {
    background-color: $color-palette-gray-400;
    margin: 0;
    padding: $spacing-1 * 2;
}

.file-selector-tree__views-menu {
    display: flex;
    align-items: center;

    span {
        margin-right: calc($spacing-1 / 2);
        font-weight: bold;
    }

    img {
        cursor: pointer;
        margin: 0 calc($spacing-1 / 2);
    }
}

.file-selector-tree__card-view {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    grid-template-rows: repeat(auto-fill, 220px);
    grid-gap: 0.75rem;
    margin: 2rem;
    width: 100%;
}

.file-selector-tree__card {
    box-shadow:
        0 1px 3px $color-palette-black-op-10,
        0 1px 2px $color-palette-black-op-20;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 220px;
    transition: box-shadow 100ms;
    margin: 0.25rem;

    &:hover {
        box-shadow:
            0 3px 6px $color-palette-black-op-10,
            0 3px 6px $color-palette-black-op-20;
    }

    .thumbnail {
        position: relative;
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
        width: 100%;
        height: 100%;
    }

    .icon {
        position: relative;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    div[class$="Icon"] {
        font-size: 72px;
        height: 72px;
        line-height: 1;
        width: 72px;
    }

    .thumbnail img {
        width: 0px;
        height: 0px;
        position: absolute;
    }

    .label {
        font-size: $font-size-md;
        padding: 1.5rem 1rem;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        flex-shrink: 0;
    }
}
