// Variables
$nav-tabs-container-background-color: $color-layer-2;
$nav-tabs-container-border: transparent;
$nav-tabs-container-height: 45px;
$nav-tabs-border-radius: $global-border-radius;
$nav-tabs-padding: calc($global-padding / 2) 0;
$nav-tabs-margin: cakc($global-margin / 2) $global-margin calc($global-margin / 2) 0;
$nav-tabs-tile-default-text-color: color(text-color-default);
$nav-tabs-tile-default-background-color: transparent;
$nav-tabs-tile-active-text-color: $color-primary;
$nav-tabs-tile-active-background-color: $color-subtle;
$nav-tabs-tile-hover-text-color: $color-primary;
$nav-tabs-tile-hover-background-color: $color-subtle;
$nav-tabs-tile-disabled-text-color: color(nav-tabs-text-color-disabled);
$nav-tabs-tile-disabled-background-color: #000000;


.document-class-list-tabs-container,
.classlist-window-tabs {
	position: relative;
	z-index: 15;

	.nav-tabs {
		display: flex;
		flex-wrap: nowrap;
		overflow-x: auto;
		overflow-y: hidden;
		padding: 0 $global-padding;
		gap: $global-margin;
		background: $nav-tabs-container-background-color;
		width: 100%;
		border: 0;
		border-radius: $border-radius-default $border-radius-default 0 0;
		@include custom-scrollbar(false, 'small');



		.dbqdcl-nav-tab-item {
			cursor: pointer;
			margin: 0;
			border: none;
			border-radius: 0px;
			height: $nav-tabs-container-height;
			display: flex;
			align-items: center;
			justify-content: center;

			.dbqdcl-nav-tab-item-content {
				padding: 4px 10px;
				border-radius: 5px;
				min-width: max-content;

				a {
					white-space: nowrap;
					float: unset;
					font-size: $font-size-base;
					font-weight: $font-weight-default;
					text-decoration: none;
					text-align: center;
					display: inline-flex;
					flex-direction: column;
					color: $nav-tabs-tile-default-text-color;

					&::after {
						content: attr(data-name);
						content: attr(data-name) / "";
						height: 0;
						visibility: hidden;
						overflow: hidden;
						user-select: none; 
						pointer-events: none;
						font-weight: $font-weight-bold;

						@media speech {
							display: none;
						}
					}
				}

				svg {
					fill: $nav-tabs-tile-default-text-color; 
				}
			}
 
			&[data-has-submenu="true"] {
				&[data-is-hovering-submenu="true"],
				&[data-is-hovering="true"] {
					border-bottom-left-radius: 0;
					border-bottom-right-radius: 0;
				}
			}

			&[data-is-hovering-submenu="true"],
			&.active,
			&.active:hover,
			&:hover {
				background: transparent !important;
				-webkit-box-shadow: none;
				box-shadow: none;
						
			}

			// Hide the dropdown menu indicator for active tab bar items
			&.active {
				.dbqdcl-nav-tab-item-content {
					> svg {
						display: none;
					}
				}

				.dbqdcl-submenu {
					display: none;
				}
			}

			&.active, 
			&.active:hover {
				&::after {
					content: '';
					position: absolute;
					bottom: 0;
					left: 0;
					width: 100%;
					height: 2px;
					background-color: $nav-tabs-tile-active-text-color;
				}
				//border-bottom: 2px solid $color-primary;

				.dbqdcl-nav-tab-item-content {
					> a {
						color: $color-primary !important;
						font-weight: $font-weight-bold;
					}

					svg {
						fill: $nav-tabs-tile-active-text-color !important;
					}
				}
			}

			&:hover {
				border-bottom: 0;

				.dbqdcl-nav-tab-item-content {
					background: $nav-tabs-tile-hover-background-color;

					> a {
						color: $nav-tabs-tile-hover-text-color !important;
						font-weight: $font-weight-bold;
					}
				}
			}

			&.active:hover {
				.dbqdcl-nav-tab-item-content {
					background: $nav-tabs-tile-active-background-color;
				}
			}

			&:last-of-type {
				margin-right: 0;
			}
		}
	}

	// Added extra padding to prevent buttons from overlapping the tabs.
	&:has(.dbqdcl-nav-tab-options-container),
	&:has(.classlist-window-control-buttons) {
		.dbqdcl-nav-tabs {
			padding-right: 45px;
		}
	}

	&:has(.dbqdcl-nav-tab-options-container):has(.classlist-window-control-buttons) {
		.dbqdcl-nav-tabs {
			padding-right: 75px;
		}
	}
}

.document-class-list-tabs-container {
	.nav-tabs {
		li {
			position: relative;

			// Note from Jeroen @ 06-02-2024:
			// Turned this off as this causes issues when there's only 1 tab, while this tab has multiple submenu items.
			// &.active {
			// 	&:first-child:last-child {
			// 		display: none;
			// 	}
			// }

			ul {
				display: none;
			}

			&:hover {
				&:has(ul) {
					border-radius: $border-radius-default $border-radius-default 0 0;
				}
				ul {
					display: block;
				}
			}
		}
	}
}

.classlist-window-tabs {
	//border-top: 1px solid color(border-color);

	.nav-tabs {
		li {
			position: relative;

			ul {
				display: none;
			}

			&:hover {
				&:has(ul) {
					border-radius: $border-radius-default $border-radius-default 0 0;
				}
				ul {
					display: block;
				}
			}
		}
	}
}

.dbqdcl-nav-tabs-main-menu-container {
	display: flex;
	background: color(gray-8);
	border-radius: $border-radius-default $border-radius-default 0 0;
	border-bottom: 1px solid $global-border-color;
}

// Submenu as a dropdown
ul.dbqdcl-submenu {
	position: absolute;
	z-index: 1040;
	list-style: none;
	padding: ($padding-default / 2);
	margin: 0;//9px 0 0 0;
	border-radius: $border-radius-default;
	box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.2);
	background: $dropdown-background-color !important;

	li {
		cursor: pointer;
		padding: 2px 0px;
		margin: 0;
		background: $dropdown-background-color;
		border: 1px solid $dropdown-background-color;

		a {
			color: $text-color-default !important;
			padding: 4px 10px;
			border-radius: 5px;
			width: 100%;
			text-decoration: none;
			float: unset;
			display: inline-flex;
			flex-direction: row;
			justify-content: space-between;
			position: relative;

			.dbqdcl-nav-tab-item-name {
				display: inline-flex;
				flex-direction: column;
				font-family: $font-family-default;
				font-size: $font-size-base;
				font-weight: $font-weight-default;
				white-space: nowrap;

				&::after {
					content: attr(data-name);
					font-weight: $font-weight-bold;
					font-family: $font-family-default;
					font-size: 14px;
					visibility: hidden;
					pointer-events: none;
					white-space: nowrap;
					height: 0;
	
					@media speech {
						display: none;
					}
				}
			}

			svg {
				fill: $nav-tabs-tile-default-text-color; 
			}
		}

		&.active,
		&.active:hover,
		&:hover {
			> a {
				color: $nav-tabs-tile-hover-text-color !important;
				background: $nav-tabs-tile-hover-background-color;
					
				.dbqdcl-nav-tab-item-name {
					font-weight: $font-weight-bold;
				}

				svg {
					fill: $nav-tabs-tile-hover-text-color !important;
				}
			}
		}

		&.active,
		&.active:hover {
			> a {
				background: $nav-tabs-tile-hover-background-color;
				
				.dbqdcl-nav-tab-item-name {
					color: $color-primary !important;
				}
			}
		}

		&:first-of-type {
			margin-top: 0;
		}

		&:last-of-type {
			margin-bottom: 0;
		}
	}
}

// Submenu as a tab bar
.document-class-list-tabs-container,
.classlist-window-tabs {
	.nav-tabs.dbqdcl-nav-tabs-submenu {
		border-bottom: 1px solid $global-border-color;

		.dbqdcl-nav-tab-item {
			.dbqdcl-nav-tab-item-content {
				border-radius: 15px;
			}

			&.active, 
			&.active:hover {
				
				// Change the active tab bar item style
				.dbqdcl-nav-tab-item-content {
					padding: 4px 10px;
					background: $nav-tabs-tile-hover-background-color;
					a {
						color: $nav-tabs-tile-active-text-color !important;
						font-weight: $font-weight-bold;
					}
				}

				// Hide the bottom border
				&::after {
					display: none; 
				}
			}
		}
	}
}	

// This is placed separately as this is used in both the regular nav-bar items as well as the submenu
.dbqdcl-nav-tab-item-counter {
	@include alert-badge;
	margin-left: 5px;
}