.dbqdcltg-container {
    .dbqdcltg-tree-grid-container {
        .dbqdcltg-tables-container {
            .dbqdcltg-data-table-container {
                .dbqdcltg-data-table {
                    
                    // Hide function buttons for all rows during in-place editing
                    &.dbqdcltg-is-in-place-editing {

                        // Rows
                        .dbqdcltg-row,
                        .dbqdcltg-total-row {
                            td {
                                cursor: initial !important;
                            }
                        }
                        
                        .dbqdcltg-row-function-button {
                            display: none; 
                        }
                    }

                    .dbqdcltg-row-editing, 
                    .dbqdcltg-row-editing.dbqdcltg-total-row {
                        td {
                            background-color: color(gray-7);

                            .dbqdcltg-editable-property-input:focus, 
                            .form-group:focus {
                                border: 1px solid $material-design-focus-border-color;
                            }

                            .dbqstd-output-button {
                                &:focus,
                                &:focus-visible {
                                    .dbqstd-output-content-container {
                                        border: 1px solid $material-design-focus-border-color;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

.dbqdcltg-data-table {

    .dbqdcltg-cell-editable {

        .dbqdcltg-cell-editable-container {
            display: flex;
            align-items: center;

            &.dbqdcltg-align-right {
                flex-direction: row-reverse;
            }

            .dbqdcltg-cell-editable-indicator {
                //display: none;
                opacity: 0;
                margin: 0 5px 3px 5px;

                svg {
                    width: 20px;
                    height: 20px;
                }
            }
        }
        
        // Document property type
        // Bool	= 7
        // Date	= 9
        // DateTime	= 8
        // File	= 12
        // Float = 4
        // Image = 11
        // Integer = 1
        // MultipleSelect = 2
        // Range = 3
        // String = 5
        // Text	= 6
        // Time = 10
        // Video = 13
        .dbqdcltg-editable-property-input {
            box-shadow: none;

            // Integer, Float, String
            &[data-document-property-type="1"],
            &[data-document-property-type="4"],
            &[data-document-property-type="5"] {
                height: 28px;
                min-width: 50px;
                border-radius: ($border-radius-default / 2);
            }

            // Integer, Float
            &[data-document-property-type="1"],
            &[data-document-property-type="4"] {
                text-align: right;
            }

            // Bool
            &[data-document-property-type="7"] {
                width: 25px;
                height: 25px;
            }

            &.dbqdcltg-editable-property-invalid,
            .dbqstd-invalid,
            .dbqstp-invalid {
                background-color: #f3b3b0;
                border-color: $modal-error-border;
                color: $modal-error-color !important; // Had to make this important due to .dbq-placeholder being important, which would override the text color of an empty DbqSelectTypeDropdown/DbqSelectTypePopup
            }
        }

        .dbqdcltg-editable-property-input-multiple-select {

            // SelectTypeDropdown and SelectTypeStaticDropdown styling override
            .dbqstd-output-content-container,
            .dbqstsd-output-content-container {
                color: $modal-input-color;
                background-color: $modal-input-background;
                border: 1px solid $modal-border-color;
                height: 28px;
                border-radius: ($border-radius-default / 2);
                border-width: 1px;

                .dbqstd-attribute-value,
                .dbqstsd-attribute-value {
                    font-weight: 400;
                    font-size: 14px;
                }
            }
        }
    }

    // While editing confirm & cancel button
    .dbqdcltg-editing-buttons-container {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;

        .dbqdcltg-editing-button {
            width: 24px;
            height: 24px;
            border: 0 none;
            border-radius: 50%;
            outline: 0;
            padding: 0;

            svg {
                width: 20px;
                height: 20px;
                fill: $color-white !important; // important is required, otherwise a custom FolderDocumentObjectDisplayMode can overrule the svg color.
            }

            &.dbqdcltg-editing-confirm-button {
                background: #28a745;
                margin-right: 5px;

                .dbq-button-spinner {
                    margin: 0 5px !important;
                    color: $color-white;
                }
            }

            &.dbqdcltg-editing-cancel-button {
                background: #dc3545;
            }
        }
    }
}

.dbqdcltg-row-editing {
    background-color: color(gray-7) !important;
    color: $text-color-default !important;

    // Since sticky cells have a default background color (in order to have other content go seemingly behind it)
    // we must override the sticky cells' background color as well.
    .dbqdcltg-cell-sticky {
        background-color: color(gray-7) !important;
    }

    &:hover {
        .dbqdcltg-cell-sticky {
            background-color: color(primary-tone, 90) !important;
        }
    }
}

// Show the editable cell indicator when hovering.
// Except when we're already editing a row, only 1 row may be edited at once.
.dbqdcltg-data-table:not(.dbqdcltg-is-in-place-editing) {
    .dbqdcltg-row-hover {
        .dbqdcltg-cell-editable-indicator {
            opacity: 1 !important;

            svg {
                fill: $text-color-default;
            }
        }
    }
}