// Variables
$nav-tabs-container-background-color: transparent;
$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-font-size: $font-size-small;
$nav-tabs-tile-font-weight: $font-weight-bold;
$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(primary-tone, 90);
$nav-tabs-tile-hover-text-color: color(text-color-inverse);
$nav-tabs-tile-hover-background-color: color(primary-tone, 90);
$nav-tabs-tile-disabled-text-color: color(nav-tabs-text-color-disabled);
$nav-tabs-tile-disabled-background-color: #ddd;


.dbq-form {
	.nav-tabs {
		background-color: #3c3c3c;
		border-bottom: 2px solid #3c3c3c;
		margin: 0;
		padding: 9px 20px 0 20px;
		min-height: 50px;

		>li {
			padding-right: 20px;

			>a {
				border: none;
				color: white;
				font-size: $font-size-small;
				font-weight: 600;
				line-height: 20px;
				padding: 6px 14px;

				&:hover {
					border: none;
					color: white !important;
					background: transparent;
					text-decoration: none;
				}

				&::after {
					content: "";
					height: 0;
					position: absolute;
					width: 100%;
					left: 0px;
					bottom: -1px;
					background: 0 none !important;
					transition: none;
					transform: scale(0);
				}
			}

            &:hover {
                >a {
                    &::after {
                        transform: scale(1);
                    }
                }
            }
		}

		>li.active {
			>a {
				border-width: 0;
				background-color: transparent;
				border: none;
				color: #fff !important;
				background: transparent;
				text-decoration: none;
				&:focus {
					border-width: 0;
					background-color: transparent;
				}
				&::after {
					transform: scale(1);
				}
                &:hover {
                    border-width: 0;
                    background-color: transparent;
                }
			}
		}
	}

	.tab-nav {
		>li {
			>a {
				&::after {
					background: white none repeat scroll 0% 0%;
					color: #fff;
				}
			}
		}
	}
}

// Nav tabs in modals

#document-topic-tabs.nav-tabs {
	background: $nav-tabs-container-background-color;
	border-bottom: $nav-tabs-container-border;
	border-bottom: 0 none; // To reset the default bootstrap styling
	padding: 0 30px;
	float: left;

	> li {
		margin: 10px 0;
		
		&:hover {
			> a {
				&::after {
					background: #0c0c0c !important;
					border-bottom: 5px solid #0c0c0c !important;
				}
			}

			a {
				&::after {
					background: 0 !important;
					border-bottom: 0 !important;
				}
			}
		}
	}

	> li.active {
		color: $nav-tabs-tile-active-text-color !important;
		background: $nav-tabs-tile-active-background-color !important;
		border-radius: $nav-tabs-border-radius;
	}
}

#document-topic-tabs.nav-tabs.document-topic-tabs {
	> li {
		> a {
            font-size: $nav-tabs-tile-font-size;
            font-weight: $nav-tabs-tile-font-weight;
            line-height: 20px;
            padding: 6px 14px;
			color: $nav-tabs-tile-default-text-color; 
            text-decoration: none;
            float: left;
		}
	}

	> li.active {
		> a {
			color: $nav-tabs-tile-active-text-color !important;
            border-radius: $nav-tabs-border-radius;
			background-color: $nav-tabs-tile-active-background-color;
		}

		&:hover {
			> a {
				color: $nav-tabs-tile-active-text-color !important;
			}
		}
	}

	>li.disabled {
		>a {
			cursor: not-allowed;
			color: $nav-tabs-tile-disabled-text-color;
		}
	}
}

.document-topic-tabs {
	>li {
		&:first-of-type {
			a {
				// padding: 6px 14px 6px 0 !important; Removed this because it caused tabs to jump when switching the to another active tab.
			}
		}
	}

	>li.active {
		a {
			padding: 6px 14px !important;
		}
	}
}