// Variables
$function-column-width: 28px;

// Row styling variables per mode
$list-font-size: 12px !default;
$list-font-weight: 500 !default;
$list-font-weight-selected: 600 !default;
$list-text-decoration: none !default;

$list-standard-background-color: color(background-color-default) !default;
$list-standard-font-color: color(list-standard-font-color) !default;
$list-standard-hover-background-color: color(primary-tone, 90) !default;
$list-standard-hover-font-color: $color-primary !default;
$list-standard-selected-background-color: color(primary-tone, 90) !default;
$list-standard-selected-font-color: $color-primary !default;

$list-elevated-background-color: #7F7F7F !default;
$list-elevated-font-color: #FFFFFF !default;
$list-elevated-hover-background-color: if($dark-theme, darken(#7F7F7F, 5%), lighten(#7F7F7F, 5%)) !default;
$list-elevated-hover-font-color: #FFFFFF !default;
$list-elevated-selected-background-color: $list-elevated-background-color !default;
$list-elevated-selected-font-color: $list-elevated-font-color !default;

$list-essential-background-color: $list-standard-background-color !default;
$list-essential-font-color: $list-standard-font-color !default;
$list-essential-hover-background-color: if($dark-theme, darken($list-standard-background-color, 5%), lighten($list-standard-background-color, 5%)) !default;
$list-essential-hover-font-color: $list-essential-font-color !default;
$list-essential-selected-background-color: $list-essential-hover-background-color !default;
$list-essential-selected-font-color: $list-essential-hover-font-color !default;

$list-information-background-color: color(background-color-info) !default;
$list-information-font-color: color(text-color-info) !default;
$list-information-hover-background-color: if($dark-theme, lighten($list-information-background-color, 5%), darken($list-information-background-color, 5%)) !default;
$list-information-hover-font-color: $list-information-font-color !default;
$list-information-selected-background-color: $list-information-hover-background-color !default;
$list-information-selected-font-color: $list-information-hover-font-color !default;

$list-warning-background-color: color(background-color-warning) !default;
$list-warning-font-color: color(text-color-warning) !default;
$list-warning-hover-background-color: if($dark-theme, lighten($list-warning-background-color, 5%), darken($list-warning-background-color, 5%)) !default;
$list-warning-hover-font-color: $list-warning-font-color !default;
$list-warning-selected-background-color: $list-warning-hover-background-color !default;
$list-warning-selected-font-color: $list-warning-hover-font-color !default;

$list-error-background-color: color(background-color-error) !default;
$list-error-font-color: color(text-color-error) !default;
$list-error-hover-background-color: if($dark-theme, lighten($list-error-background-color, 5%), darken($list-error-background-color, 5%)) !default;
$list-error-hover-font-color: $list-error-font-color !default;
$list-error-selected-background-color: $list-error-hover-background-color !default;
$list-error-selected-font-color: $list-error-hover-font-color !default;

$list-diminished-background-color: $list-standard-background-color !default;
$list-diminished-font-color: $list-standard-font-color !default;
$list-diminished-hover-background-color: if($dark-theme, lighten($list-diminished-background-color, 5%), darken($list-diminished-background-color, 5%)) !default;
$list-diminished-hover-font-color: $list-diminished-font-color !default;
$list-diminished-selected-background-color: $list-diminished-hover-background-color !default;
$list-diminished-selected-font-color: $list-diminished-hover-font-color !default;

$list-disabled-background-color: transparent !default;
$list-disabled-font-color: $list-standard-font-color !default;
$list-disabled-hover-background-color: transparent !default;
$list-disabled-hover-font-color: $list-disabled-font-color !default;
$list-disabled-selected-background-color: $list-disabled-hover-background-color !default;
$list-disabled-selected-font-color: $list-disabled-hover-font-color !default;

$list-success-background-color: color(background-color-success) !default;
$list-success-font-color: color(text-color-success) !default;
$list-success-hover-background-color: if($dark-theme, lighten($list-success-background-color, 5%), darken($list-success-background-color, 5%)) !default;
$list-success-hover-font-color: $list-success-font-color !default;
$list-success-selected-background-color: $list-success-hover-background-color !default;
$list-success-selected-font-color: $list-success-hover-font-color !default;

// List display mode style maps
$list-standard: (
    font-color: $list-standard-font-color,
    background-color: $list-standard-background-color,
    font-weight: $list-font-weight,
    font-size: $list-font-size,
    text-decoration: $list-text-decoration,
    hover-background-color: $list-standard-hover-background-color,
    hover-font-color: $list-standard-hover-font-color,
    selected-background-color: $list-standard-selected-background-color,
    selected-font-color: $list-standard-selected-font-color
);

$list-elevated: (
    font-color: $list-elevated-font-color,
    background-color: $list-elevated-background-color,
    font-weight: $list-font-weight,
    font-size: $list-font-size,
    text-decoration: $list-text-decoration,
    hover-background-color: $list-elevated-hover-background-color,
    hover-font-color: $list-elevated-hover-font-color,
    selected-background-color: $list-elevated-selected-background-color,
    selected-font-color: $list-elevated-selected-font-color
);

$list-essential: (
    font-color: $list-essential-font-color,
    background-color: $list-essential-background-color,
    font-weight: $list-font-weight,
    font-size: $list-font-size,
    text-decoration: $list-text-decoration,
    hover-background-color: $list-essential-hover-background-color,
    hover-font-color: $list-essential-hover-font-color,
    selected-background-color: $list-essential-selected-background-color,
    selected-font-color: $list-essential-selected-font-color
);

$list-information: (
    font-color: $list-information-font-color,
    background-color: $list-information-background-color,
    font-weight: $list-font-weight,
    font-size: $list-font-size,
    text-decoration: $list-text-decoration,
    hover-background-color: $list-information-hover-background-color,
    hover-font-color: $list-information-hover-font-color,
    selected-background-color: $list-information-selected-background-color,
    selected-font-color: $list-information-selected-font-color
);

$list-warning: (
    font-color: $list-warning-font-color,
    background-color: $list-warning-background-color,
    font-weight: $list-font-weight,
    font-size: $list-font-size,
    text-decoration: $list-text-decoration,
    hover-background-color: $list-warning-hover-background-color,
    hover-font-color: $list-warning-hover-font-color,
    selected-background-color: $list-warning-selected-background-color,
    selected-font-color: $list-warning-selected-font-color
);

$list-error: (
    font-color: $list-error-font-color,
    background-color: $list-error-background-color,
    font-weight: $list-font-weight,
    font-size: $list-font-size,
    text-decoration: $list-text-decoration,
    hover-background-color: $list-error-hover-background-color,
    hover-font-color: $list-error-hover-font-color,
    selected-background-color: $list-error-selected-background-color,
    selected-font-color: $list-error-selected-font-color
);

$list-diminished: (
    font-color: $list-diminished-font-color,
    background-color: $list-diminished-background-color,
    font-weight: $list-font-weight,
    font-size: $list-font-size,
    text-decoration: $list-text-decoration,
    hover-background-color: $list-diminished-hover-background-color,
    hover-font-color: $list-diminished-hover-font-color,
    selected-background-color: $list-diminished-selected-background-color,
    selected-font-color: $list-diminished-selected-font-color
);

$list-disabled: (
    font-color: $list-disabled-font-color,
    background-color: $list-disabled-background-color,
    font-weight: $list-font-weight,
    font-size: $list-font-size,
    text-decoration: $list-text-decoration,
    hover-background-color: $list-disabled-hover-background-color,
    hover-font-color: $list-disabled-hover-font-color,
    selected-background-color: $list-disabled-selected-background-color,
    selected-font-color: $list-disabled-selected-font-color
);

$list-success: (
    font-color: $list-success-font-color,
    background-color: $list-success-background-color,
    font-weight: $list-font-weight,
    font-size: $list-font-size,
    text-decoration: $list-text-decoration,
    hover-background-color: $list-success-hover-background-color,
    hover-font-color: $list-success-hover-font-color,
    selected-background-color: $list-success-selected-background-color,
    selected-font-color: $list-success-selected-font-color
);

// Mixins specific for this file
@mixin apply-row-style($style) {
    td {
        font-size: map-get($style, font-size);
        font-weight: map-get($style, font-weight);
        color: map-get($style, font-color);
        background-color: map-get($style, background-color);
        text-decoration: map-get($style, text-decoration);
        cursor: pointer;

        &.dbqdcltg-total-value {
            font-weight: bold;
            padding-right: 5px;
            white-space: nowrap;
        }
    }

    svg {
        width: $classlist-tree-grid-function-button-svg-size;
        height: $classlist-tree-grid-function-button-svg-size;
        fill: map-get($style, font-color);
    }

    .dbqdcltg-expand-button svg {
        fill: map-get($style, font-color);
    }

    // Selected and active state gets priority
    &.dbqdcltg-row-selected td,
    &.dbqdcltg-row-active td {
        background-color: map-get($style, selected-background-color);
        color: map-get($style, selected-font-color);
        font-weight: $list-font-weight-selected;

        .dbqdcltg-cell-sticky {
            background-color: map-get($style, selected-background-color);
        }

        .dbqdcltg-row-function-button svg,
        .dbqdcltg-inline-svg {
            fill: map-get($style, selected-font-color);
        }
    }

    // Hover styling if not selected or active
    &.dbqdcltg-row-hover:not(.dbqdcltg-row-selected):not(.dbqdcltg-row-active) td {
        background-color: map-get($style, hover-background-color);
        color: map-get($style, hover-font-color);
        border-color: map-get($style, hover-background-color);

        .dbqdcltg-cell-sticky {
            background-color: map-get($style, hover-background-color);
        }

        .dbqdcltg-row-function-button svg {
            fill: map-get($style, hover-font-color);
        }
    }

    &.dbqdcltg-row-selected td,
    &.dbqdcltg-row-active td {
        background-color: map-get($style, selected-background-color);
        color: map-get($style, selected-font-color);

        .dbqdcltg-cell-sticky {
            background-color: map-get($style, selected-background-color);
        }

        .dbqdcltg-row-function-button svg,
        .dbqdcltg-inline-svg {
            fill: map-get($style, selected-font-color);
        }
    }
}

.dbqdcltg-container {
    //z-index: 12;
    display: inline-block;
    position: relative;
    width: 100%;
    clear: both;
    margin: 0;
    padding: 0;
    background-color: unset;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    border-radius: $border-radius-default;
    background-color: $classlist-background;

    &[data-is-loading="true"] {
        min-height: (100 + ($padding-default * 2));
    }

    .dbqdcltg-tree-grid-container {
        display: flex;
        flex-direction: column;
        position: relative;
        min-height: 65px; // To ensure the loading indicator has enough room to work with when the list is initially loading

        &.dbqdcltg-has-report-refresh-view {
            min-height: 200px;
        }

        .dbqdcltg-tables-container {
            display: flex;
            flex-wrap: nowrap;
            flex-direction: row;

            // Data table
            .dbqdcltg-data-table-container {
                flex-grow: 1;
                overflow-x: auto;
                //margin-left: 5px;
                background-color: $classlist-background;
                @include scrollbar($sidebar-background, 0, $sidebar-scrollbar-thumb-color, $sidebar-scrollbar-thumb-color-hover, $sidebar-scrollbar-width, true);

                .dbqdcltg-data-table {
                    width: 100%;

                    tr {
                        td {
                            min-width: 30px;
                            max-width: 500px;
                            padding: 0 ($padding-default / 3);
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                            border-bottom: $classlist-row-border;
                            height: $classlist-tree-grid-row-height;
                            position: relative; // This is needed for the corner tags

                            user-select: none; /* CSS3 (little to no support) */
                            -ms-user-select: none; /* IE 10+ */
                            -moz-user-select: none; /* Gecko (Firefox) */
                            -webkit-user-select: none; /* Webkit (Safari, Chrome) */

                            .dbqdcltg-cell-corner-tag {
                                position: absolute;
                                top: 0;
                                right: 0;
                                width: 0;
                                height: 0;
                                border-style: solid;
                                border-width: 0 10px 10px 0;
                                z-index: 2;
                            }       

                            &:first-of-type {
                                padding-left: (($padding-default / 3) * 2);
                            }

                            &:last-of-type {
                                padding-right: ($padding-default / 3);
                            }

                            &.dbqdcltg-cell[class*="dbqdcltg-ellipsis-"] {
                                padding: ($padding-default / 3);
                            }

                            &.dbqdcltg-cell-has-custom-color {
                                padding: 3px;
                                position: relative;
                                min-width: 35px;

                                .dbqdcltg-cell-value {
                                    border-radius: 5px;
                                    display: flex;
                                    align-items: center;
                                    height: 100%;
                                    width: 100%;
                                    padding: 5px;
                                }

                                .dbqdcltg-cell-corner-tag {
                                    top: 3px;
                                    right: 3px;
                                    border-radius: 0 5px 0 0;
                                }
                            }

                            &.dbqdcltg-merged-border-right {
                                padding-right: 0;

                                .dbqdcltg-cell-value {
                                    right: 0px;
                                    border-radius: 5px 0px 0px 5px; // If you change this border-radius, you must also change the .dbqdcltg-cell-corner-tag border-radius.
                                    padding-right: 0px;
                                }
                            }

                            &.dbqdcltg-merged-border-left {
                                padding-left: 0;

                                .dbqdcltg-cell-value {
                                    left: 0px;
                                    border-radius: 0px 5px 5px 0px; // If you change this border-radius, you must also change the .dbqdcltg-cell-corner-tag border-radius.
                                    padding-left: 5px;
                                }
                            }

                            &.dbqdcltg-cell-function {
                                width: $function-column-width;
                                min-width: $function-column-width;
                                max-width: $function-column-width;
                                padding: 0;
                            }

                            .dbqdcltg-cell-corner-tag {
                                position: absolute;
                                top: 0;
                                right: 0;
                                width: 0;
                                height: 0;
                                border-style: solid;
                                border-width: 0 10px 10px 0;
                                z-index: 2;
                            }       
                        }   
                    }
                    
                    // Row function buttons
                    .dbqdcltg-row-function-button {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        background: none;
                        border: none;
                        outline: 0;
                        width: $classlist-tree-grid-function-button-size;
                        height: $classlist-tree-grid-function-button-size;
                        border-radius: 50%;
                        padding: 5px;

                        svg {
                            fill: $text-color-default;
                            width: $classlist-tree-grid-function-button-svg-size;
                            height: $classlist-tree-grid-function-button-svg-size;
                        }

                        &.dbqdcltg-row-hover-first-function.dbqdcltg-highlight,
                        &:hover {
                            background: $color-white;
                            color: $color-white;
                            box-shadow: 0 0 5px $color-white;
                            text-shadow: 0 0 5px $color-white;

                            svg {
                                fill: $color-primary !important;
                                transform: scale(1.1);
                            }
                        }
                    }

                    // Remove fixed height for tables with ellipsis
                    &.dbqdcltg-table-has-ellipsis {
                        tr {
                            td {
                                height: initial;
                            }
                        }
                    }

                    // Spreadsheet mode
                    &.dbqdcltg-spreadsheet-mode {
                        tr {
                            th {
                                position: relative;
                            }

                            th:not(.dbqdcltg-sticky-column-header), 
                            td:not(.dbqdcltg-cell-sticky) {
                                border: $classlist-row-border;
                            }
                        }

                        // The vertical grab handle at the right edge of each header cell
                        .dbqdcltg-col-resizer {
                            position: absolute;
                            top: 0;
                            right: -3px;

                            // The handle is a bit wider than 1px so it is easy to grab
                            width: 6px;
                            height: 100%;
                            cursor: col-resize;
                            user-select: none;
                            -webkit-user-select: none;
                        }
                    }
                }

                // To prevent data from being visible on right side of the sticky buttons due to rounding errors in the width of the flex container
                &::after {
                    content:"";
                    position: absolute;
                    top: 0;
                    right: 0px;
                    width: 1px;
                    height: 100%;
                    background: inherit;
                }
            }

            // Column headers
            .dbqdcltg-column-header {
                padding: 0 ($padding-default / 3);
                height: $classlist-tree-grid-row-height;
                min-width: 28px; // Function headers didn't have enough width, making it possible for content behind it to become visible

                &:first-of-type {
                    padding-left: (($padding-default / 3) * 2);
                }

                &.dbqdcltg-expand-button-column-header {
                    width: 50px;
                }
        
                &.dbqdcltg-merged-border-left { 
                    padding-left: 1px;
                    border-left: none;
                } 
        
                &.dbqdcltg-merged-border-right {
                    padding-right: 1px;
                    border-right: none;
                }

                .dbqdcltg-column-header-title {
                    display: flex;
                    align-items: center;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    font-size: $font-size-small;
                    font-weight: bold;

                    .dbqdcltg-column-header-tooltip {
                        margin-left: 2px;
                        cursor: default;

                        svg {
                            fill: $text-color-default;
                            width: 20px;
                            height: 20px;
                        }
                    }
                }

                &.dbqdcltg-sticky-column-header {
                    position: sticky !important; // Changed to !important since spreadsheet-mode would override it to relative otherwise.
                    background-color: $classlist-background;
                    
                    // Set the right position for each sticky column.
                    // Increment the right position from the last item towards the first item.
                    $right: 0;
                    @for $i from 1 through 10 {
                        &:nth-last-of-type(#{$i}) { right: $right;}
                        $right: $right + $function-column-width;
                    }
                }

                &.dbqdcltg-drag-handle-column-header {
                    width: 24px;
                }
            }

            .dbqdcltg-row,
            .dbqdcltg-total-row {
                &[data-folder-document-object-display-mode="0"] {   // Added to add this styling to the Project > Planning module treegrid.
                    @include apply-row-style($list-standard);
                }
                &[data-folder-document-object-display-mode="1"] {
                    @include apply-row-style($list-elevated);
                }
                &[data-folder-document-object-display-mode="2"] {
                    @include apply-row-style($list-essential);
                }
                &[data-folder-document-object-display-mode="3"] {
                    @include apply-row-style($list-information);
                }
                &[data-folder-document-object-display-mode="4"] {
                    @include apply-row-style($list-warning);
                }
                &[data-folder-document-object-display-mode="5"] {
                    @include apply-row-style($list-error);
                }
                &[data-folder-document-object-display-mode="6"] {
                    @include apply-row-style($list-diminished);
                }
                &[data-folder-document-object-display-mode="7"] {
                    @include apply-row-style($list-disabled);
                }
                &[data-folder-document-object-display-mode="8"] {
                    @include apply-row-style($list-success);
                }

                // fallback for no display-mode set
                &:not([data-folder-document-object-display-mode]) {
                    @include apply-row-style($list-standard);
                }
            }

            .dbqdcltg-total-row {
                cursor: initial;
            }

            &[data-folder-document-class-list-mode="4"] {
                .dbqdcltg-data-table-container {
                    .dbqdcltg-column-header,
                    tr td {
                        &:first-of-type {
                            border-right: none;
                        }

                        &:nth-of-type(2) {
                            border-left: none;
                        }
                    }
                }
            }
        }

        .dbqdcltg-footer {
            font-weight: 600;
            line-height: 20px;
            font-size: $font-size-small;
            padding: ($padding-default / 3) $padding-default;
            margin: 0;
            color: $text-color-default;
            
            user-select: none; /* CSS3 (little to no support) */
            -ms-user-select: none; /* IE 10+ */
            -moz-user-select: none; /* Gecko (Firefox) */
            -webkit-user-select: none; /* Webkit (Safari, Chrome) */
        }
    }

    // When bulk changes are active
    &[data-is-bulk-changes-active="true"] {
        .dbqdcltg-tree-grid-container {
            .dbqdcltg-tables-container {
                .dbqdcltg-row,
                .dbqdcltg-total-row {
                    &:not([data-folder-document-object-display-mode]) {
                        &.dbqdcltg-row-active:not(.dbqdcltg-row-selected) {
                            td {
                                background-color: $color-layer-3;
                                color: $text-color-default;
                                font-weight: $list-font-weight;

                                .dbqdcltg-row-function-button svg,
                                .dbqdcltg-inline-svg {
                                    fill: $text-color-default;
                                }
                            }
                        }
                    }      
                }
            }
        }
    }
}

.dbqdcltg-cell-sticky {
    position: sticky !important; // A cell has position: relative by default. Make sure sticky overrides it.
    right: 0;
    //background-color: $classlist-background;

    // Set the right position for each function.
    // Increment the right position from the last item towards the first item.
    $right: 0;
    @for $i from 1 through 10 {
        &:nth-last-of-type(#{$i}) { right: $right;}
        $right: $right + $function-column-width;
    }
}

.dbqdcltg-indent {
    display: inline-block;
}

.dbqdcltg-cell {
    .dbq-progress-bar {
        max-width: 120px;
    }
}

.dbqdcltg-cell-custom,
.dbqdcltg-merged-cell {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-shrink: 0;

    .dbqdcltg-merged-cell-description {
        font-size: 10px;
    }
    
    .dbqdcltg-row-image {
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        overflow: hidden; 
        height: 30px;
        max-height: 30px;
        margin-right: 5px;

        // Standard
        &[data-image-type-view-format="0"] {
        }
        // Square
        &[data-image-type-view-format="1"] {
            width: 30px;
            max-width: 30px;
        }
        // Circle
        &[data-image-type-view-format="2"],
        &[data-image-type-view-format="3"] {
            width: 30px;
            max-width: 30px;
            border-radius: 50%;
        }

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            vertical-align: inherit;
        }

        // Required when using an SVG as FolderDocumentClassListDefaultImage
        svg {
            fill: $list-standard-font-color;
        }

        .dbqdcltg-row-image-full-screen {
            display: none;
            position: absolute;
            width: 20px;
            height: 20px;
            bottom: 0;
            right: 0;

            svg {
                fill: #fff;
            }
        }
    }

    .dbqdcltg-row-inline-image {
        display: flex;
        flex-shrink: 0;
        overflow: hidden;
        height: 24px;
        width: max-content;
        max-height: 24px;
        margin-right: 5px;

        img {
            display: block;
        }
    }

    // Anchors with SVG's are used for strings with constraint: URL
    a {
        svg {
            fill: $list-standard-font-color;
            width: 18px;
            height: 18px;
            margin-left: 3px;
        }

        &:hover {
            svg {
                fill: $color-primary;
            }
        }
    }
}

.dbqdcltg-image-popup {
    .modal-body {
        border-radius: $border-radius-default !important; // Note from Jeroen @ 31-08-2023: Added !important here due to the .modal-body:last-child line in _modal.scss
    }
}

// Move this somewhere else
.dbqdcltg-table-cell-color-preview {
    display: inline-block;
    position: relative; 
    width: 22px;
    height: 22px;
    margin-right: 5px;
    border-radius: 50%;
    background-image: repeating-linear-gradient(45deg, #aaa 25%, transparent 25%, transparent 75%, #aaa 75%, #aaa), repeating-linear-gradient(45deg, #aaa 25%, #fff 25%, #fff 75%, #aaa 75%, #aaa);
    background-position: 0 0, 4px 4px;
    background-size: 8px 8px;

    &:after {
        content: "";
        display: block;
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        border-radius: inherit;
        box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.5);
        background-color: inherit;
    }
}

.dbqdcltg-italic {
    font-style: italic;
}

.dbqdcltg-align-right {
    text-align: right;

    .dbqdcltg-column-header-title {
        justify-content: flex-end;
    }

    .dbqdcltg-merged-cell, .dbqdcltg-cell-value {
        justify-content: flex-end;
    }
}

// .dbqdcltg-total-value {
//     font-weight: bold;
//     padding-right: 5px;
//     white-space: nowrap;
// }

// Document tag tooltips (corner tags)
.dbqdcltg-tooltip-container {
    max-width: 320px;
    font-size: $font-size-small;

    .dbqdcltg-tooltip-header {
        font-weight: $font-weight-bold;
    }

    .dbqdcltg-tooltip-text {
        font-weight: $font-weight-default;

        p {
            margin-bottom: 0;
            font-size: $font-size-small;

            strong {
                font-weight: $font-weight-bold;
            }
        }
    }
}

#classlist {
    .classlist-window:first-child {
        .dbqdcltg-container {
            z-index: 13;
        }
    }

    // Update the drilldown indicator rotation if the drilldown indicator
    // is displayed in a top list and points to a bottom list.
    &[data-class-list-display-mode="2"],
    &[data-class-list-display-mode="3"],
    &[data-class-list-display-mode="4"] {
        .classlist-window[data-window-index="0"] {
            .dbqdcltg-row-drilldown-function-button {
                svg {
                    transform: rotate(270deg) scale(-1, 1);
                }
            }
        }
    }
}

@for $i from 1 through 10 {
    .dbqdcltg-ellipsis-#{$i} {
        display: table-cell;
        //vertical-align: top; // Disabled to create a more 

        .dbqdcltg-cell-value {
            max-height: calc(18px * #{$i});
		    white-space: normal;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: #{$i};
            overflow: hidden;
        }
    }
  }