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

.dbqdclf-container {
	float: left;
	clear: both;
	width: 100%;
	padding: ($classlists-folders-padding / 2);
	background: $classlists-folders-background;

	.row {
		margin: 0;

		.dbqdclf-col {
			display: flex;
			align-items: flex-start;
			padding: ($classlists-folders-padding / 2);

			.dbqdclf-folder {
				@include border-radius;
				width: inherit;
				flex: 1;
				display: flex;
				flex-direction: column;
				align-items: stretch;
				background: $classlists-folder-tile-background;
				box-shadow: $classlists-folder-tile-drop-shadow;

				h4,
				span,
				p {
					font-style: normal;
					text-shadow: $classlists-folder-tile-text-shadow;
					line-height: $classlists-folder-tile-text-line-height;
					margin: 0;
					padding: 0;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				h4 {
					color: $classlists-folder-tile-header-color;
					font-size: $classlists-folder-tile-header-font-size;
					font-weight: $classlists-folder-tile-header-font-weight;
				}

				h5 {
					width: 100%;
					color: #ff6655;
					font-size: 11px;
					line-height: 16px;
					font-weight: 600;
					padding: 0;
					margin: 0 0 7px 0;
				}

				p {
					font-size: $classlists-folder-tile-text-font-size;
					font-weight: $classlists-folder-tile-text-font-weight;
				}

				.dbqdclf-folder-header {
					display: flex;
					flex-direction: row;
					align-items: center;
					padding: $padding-default;
					background: $color-primary;
					border-radius: $border-radius-default $border-radius-default 0 0;
					color: $classlists-folder-tile-header-color;
					font-size: $classlists-folder-tile-header-font-size;
					font-weight: $classlists-folder-tile-header-font-weight;
					text-shadow: $classlists-folder-tile-text-shadow;
					cursor: pointer;
					
					.dbqdclf-folder-image {
						svg {
							width: $classlists-folder-tile-icon-size;
							height: $classlists-folder-tile-icon-size;
							padding: $classlists-folder-tile-icon-padding !important;
							fill: $classlists-folder-tile-icon-color;

							.dbq-icon-color-1 {
								fill: transparent;
							}

							.dbq-icon-color-2 {
								fill: $classlists-folder-tile-icon-color;
							}
						}

						img {
							width: auto;
							height: auto;
							//filter: brightness(5);
						}
					}

					.dbqdclf-folder-image {
						height: $classlists-folder-tile-icon-size;
						width: $classlists-folder-tile-icon-size;
						display: flex;
						align-items: stretch;
						flex-shrink: 0;
						background: 0;
						margin-right: $classlists-folder-tile-icon-margin;

						svg {
							padding: 20px;
						}
					}
					
					span {
						&:not(.dbqdclf-folder-image) {
							overflow: hidden;
							font-style: normal;
							font-size: 14px;
							font-weight: 600;
						}
					}

					> svg {
						display: none;
						fill: $classlists-folder-tile-icon-color;
						margin-left: auto;
					}
				}

				&[data-is-showing-class-lists="false"] {
					.dbqdclf-folder-header {
						border-radius: $border-radius-default;

						> svg {
							display: block;
						}
					}
				} 

				.dbqdclf-folder-document-class-lists {
					display: flex;
					flex-direction: column;
					list-style-type: none;
					padding: 0;
					margin: 0;

					.dbqdclf-folder-document-class-list {
						display: flex;
						flex-direction: row;
						justify-content: space-between;
						align-items: center;
						font-style: normal;
						position: relative;
						cursor: pointer;
						color: $text-color-default;
						font-size: $classlists-folder-tile-text-font-size;
						font-weight: $classlists-folder-tile-header-font-weight;
						text-shadow: $classlists-folder-tile-text-shadow;
						border-top: $classlists-folder-tile-border;
						margin: 0;
						padding: $padding-default;
						text-overflow: ellipsis;
						min-height: 50px;

						&:first-child {
							border-top: 0 none;
						}

						svg {
							fill: #D9D9D9;
							flex-shrink: 0;
						}

						.dbqdclf-folder-document-class-list-submenu {
							position: absolute;
							display: none;
							padding: 0;
							top: 0;
							right: 0;
							min-width: 150px;
							z-index: 9999;
							background: $classlists-folder-tile-background;
							border-radius: $border-radius-default;
							box-shadow: 0px 3px 7px RGBA(0, 24, 62, 0.15);

							.dbqdclf-folder-document-class-list {
								font-weight: 400 !important;
							}
						}

						&:hover {
							& > span {
								&:not(.dbqdclf-folder-image) {
									color: $color-primary;
								}
							}

							.dbqdclf-folder-document-class-list-submenu {
								display: block;
							}
						}
					}
				}
			}
		}
	}
}