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

.dbqkbc-articles-container {
	//margin: 0;
	float: left; 
	//width: 100%;
	//padding: 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-articles-container-empty {
        display: none;
    }

	.dbqkbc-articles {
		float: left;
		width: 100%;
        flex: 1;

        // Reduce the padding-inline-start for lists that do not have the custom knowledge base backgrounds
        ul:not([class*="dbq-list-type-"]) {
            padding-inline-start: 20px;
        }

		.row:not(.dbqdb-alert),
        .element.flex-container,
        ol,
        ul {
			//float: left; // removed float left to fix lists in ordered lists, float doesn't seem to be needed anymore
			width: 100%;
		}
        
		.row:not(.dbqdb-alert),
        .element.flex-container,
        li > ul,
        li > ol {
			margin: 0;
		}

		h3 {
			//float: left;
			font-size: 24px;
			font-weight: bold;
			line-height: 40px;
			margin: 20px 0;
			padding: 0 15px;
		}

        .dbqkbc-articles-header {
            display: flex;
            flex-direction: row;
        }
        .dbqkbc-articles-list-container {
            .row:not(.dbqdb-alert) {
                //padding: 15px;
            }
        }
	}
}

.dbqkba-article {
    &[data-document-version-state='0'],
    &[data-document-version-state='2'] {
        .dbqkba-article-content {
            opacity: 0.5;
        }
    }

    .dbqkba-article-content {
        &[data-has-image="false"] {
            .dbqkba-article-text-container {
                width: calc(100% - 40px);
                max-width: calc(100% - 40px);
                padding: 20px;
            }

        }
    }
}

.dbqkba-document-tags {
	.dbqkba-document-tag {
		display: inline-flex;
		font-size: 11px;
		line-height: 16px;
		font-weight: 600;
		color: #FFFFFF;
		background: #0054F0;
		padding: 3px 7px;
		margin-right: 3px;
		border-radius: 5px;
	}
}

.dbqkba-article-content {
	//float: left;
	width: 100%;
	height: 100%;
}

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

.dbqkbc-articles-content-container {
    display: flex;
    flex-direction: row;
    height: 100%;

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

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

            .dbqkbc-loading-spinner-container {
                height: 100%;
                margin-top: 0;
            }
        }

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

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

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

    .dbqkbc-article-content {
        padding: $global-padding calc($global-padding * 2);
    }

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

                    .dbqkba-article {
                        background: $color-layer-1;
                    }
                }
            }
        }
    }

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

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

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

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

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

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

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

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

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

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

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

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