//@import "../../../abstracts/abstracts";

// Variables
$background-color-default: $global-background-color-default;

.dbqkbc-files-container {
    float: left;
    //width: 100%;
    //padding: 0;
    //margin: 0;
    margin: $global-margin;
    background-color: $render-engine-background-color;
	box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
	width: calc(100% - 30px);
	min-height: 90px;
    border-radius: $global-border-radius;

    &.dbqkbc-files-container-empty {
        display: none;
    }

    .dbqkbc-files {
        float: left;
        width: 100%;

        .dbqkbc-files-content-container {
            .dbqkbc-files-list-container {
                .dbqkbc-files-content {
                    .row {
                        //margin: $global-margin;
                        margin: 0;
                    }
                }
            }

            .dbqkbc-file-content {
                // background: $background-color-default;
                background-color: $render-engine-background-color;
                padding: $global-padding calc($global-padding * 2);
                //margin: 0 30px;
                //padding: 45px 60px;
				//@include border-radius;
				//box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
            }
        }
    }

    .dbqkbc-file-item {
        display: flex;
        width: 100%;
        height: 100%;
        padding: 10px;
        cursor: pointer;
        background: transparent;
        //box-shadow: 0px 0px 15px #00000026;
        //border-radius: $border-radius-default;
        position: relative;

        .dbqkbc-file-item-type-container {
            background: color(gray-7);
            padding: 20px;
            width: 80px;
            height: 80px;
            border-radius: 50%;
            flex-shrink: 0;
        }

        .dbqkbc-file-item-info-container {
            display: flex;
            flex-direction: column;
            margin-left: 10px;
            width: calc(100% - 130px);

            .dbqkbc-file-item-name {
                float: left;
                width: 100%;
                color: $text-color-default;
                margin: 5px 0;
                font-weight: 700;
                font-size: 16px;
                line-height: 20px;
                font-style: normal;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .dbqkbc-file-item-size {
                margin-bottom: 5px;
                font-size: 12px;
            }

            .dbqkbc-file-item-update-time {
                font-size: 12px;
            }

            .dbqkbc-file-item-description {
                font-size: 12px;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
            }
        }

        .dbqkbc-file-item-options-container {
            .dbqkbc-file-download-button {
                top: 0;
                outline: 0;
            }
        }

        .dropdown {
            position: absolute;
            top: 0;
            right: 0;
            .dropdown-toggle {
                background: 0;
                border: 0;
                box-shadow: none;
            }
        }
    }
}

.dbqkbc-files-empty-container {
    display: flex;
    width: 100%;
}

.dbqkbc-files-content-container {
    display: flex;
    flex-direction: row;

    .dbqkbc-files-list-container {
        display: flex;
        position: relative;
        flex-direction: row;
        align-items: flex-start;
        background:  $color-layer-3;
        border-radius: $global-border-radius 0 0 $global-border-radius;
        overflow: hidden;

        .dbqkbc-files-content {
            position: relative;
            //width: 100%;
            flex: 1 1 auto;
            min-width: 0;
        }

        .dbqkbc-file-scrollbar-container {
            position: absolute;
            top: 3px;
            right: 0;
            bottom: 3px;
            z-index: 3;
            visibility: hidden;

            .dbqsb-scrollbar {
                margin: 0;
                height: 100%;
            }
        }

        &:hover {
            .dbqkbc-file-scrollbar-container {
                visibility: visible;
            }
        }
    }

    // Side panel view
    &[data-is-compact-mode-enabled="true"] {
        .dbqkbc-files-list-container {
            border-radius: $global-border-radius;
            
            .dbqkbc-files-content {
                .dbqkbc-col {
                    border-bottom: 1px solid $global-border-color;
                    
                    .dbqkbc-file-item {
                        background: $color-layer-1;
                    }
                }
            }
        }
    }

    // 1 by 11  
    &[data-horizontal-ratio="1"] {
        .dbqkbc-files-list-container {
            width: 8%;
        }
    
        .dbqkbc-file-content {
            width: 92%;
        }
    }

    // 2 by 10
    &[data-horizontal-ratio="2"] {
        .dbqkbc-files-list-container {
            width: 16%;
        }
    
        .dbqkbc-file-content {
            width: 84%;
        }
    }

    // 3 by 9
    &[data-horizontal-ratio="3"] {
        .dbqkbc-files-list-container {
            width: 25%;
        }
    
        .dbqkbc-file-content {
            width: 75%;
        }
    }

    // 4 by 8
    &[data-horizontal-ratio="4"] {
        .dbqkbc-files-list-container {
            width: 34%;
        }
    
        .dbqkbc-file-content {
            width: 66%;
        }
    }

    // 5 by 7
    &[data-horizontal-ratio="5"] {
        .dbqkbc-files-list-container {
            width: 42%;
        }
    
        .dbqkbc-file-content {
            width: 58%;
        }
    }

    // 6 by 6
    &[data-horizontal-ratio="6"] {
        .dbqkbc-files-list-container {
            width: 50%;
        }
    
        .dbqkbc-file-content {
            width: 50%;
        }
    }

    // 7 by 5
    &[data-horizontal-ratio="7"] {
        .dbqkbc-files-list-container {
            width: 58%;
        }
    
        .dbqkbc-file-content {
            width: 42%;
        }
    }

    // 8 by 4
    &[data-horizontal-ratio="8"] {
        .dbqkbc-files-list-container {
            width: 66%;
        }
    
        .dbqkbc-file-content {
            width: 34%;
        }
    }

    // 9 by 3
    &[data-horizontal-ratio="9"] {
        .dbqkbc-files-list-container {
            width: 75%;
        }
    
        .dbqkbc-file-content {
            width: 25%;
        }
    }

    // 10 by 2
    &[data-horizontal-ratio="10"] {
        .dbqkbc-files-list-container {
            width: 84%;
        }
    
        .dbqkbc-file-content {
            width: 16%;
        }
    }

    // 11 by 1
    &[data-horizontal-ratio="11"] {
        .dbqkbc-files-list-container {
            width: 92%;
        }
    
        .dbqkbc-file-content {
            width: 8%;
        }
    }

    // Compact mode (used in sidepanels)
    &[data-is-compact-mode-enabled="true"] {
        .dbqkbc-files-list-container {
            width: 100%;
        }
    
        .dbqkbc-file-content {
            display: none !important;
        }
    }
}