@use "../../../../010-settings/" as *;
@use "../../../../030-tools/tool_focus-outline" as focus;
@use "../../../../050-layout/basics" as *;

$nav-tabs-active-link-hover-bg: $il-text-color !default;
$nav-tabs-active-link-hover-color: $il-text-color-invert !default;
$nav-tabs-active-link-hover-border-color: $il-text-color !default;
$nav-tabs-border: 1px solid $il-main-border-color !default;
/* Services/UIComponent/Tabs */

#ilTab {
	padding: 0;
	margin:  $il-padding-base-vertical 0;
	border: 0 none;
	border-bottom: $nav-tabs-border;

	> li {
		float: left;
		// Make the list-items overlay the bottom border
		margin: 0 $il-padding-xs-horizontal 0 0;

		// Actual tabs (as links)
		> a,
        > .c-tooltip__container > a {
			margin: 0;
			margin-right: 2px;
			font-size: $il-font-size-base;
			line-height: $il-line-height-base;
			padding: $il-padding-large-vertical $il-padding-xlarge-horizontal $il-padding-base-vertical;
			border-bottom: 2px solid;
			border-color: transparent;
			border-radius: $il-border-radius-base $il-border-radius-base 0 0;

			&:hover,
			&:focus {
				border-bottom-color: $nav-tabs-active-link-hover-bg;
			}
			@include focus.clear-focus-for-override($clearAfter: true);
			@include focus.il-focus();
		}

		// Active state, and its :hover to override normal :hover
		&.active > a,
        &.active > .c-tooltip__container > a {
			&,
			&:hover,
			&:focus {
				color: $nav-tabs-active-link-hover-color;
				cursor: default;
				background-color: $nav-tabs-active-link-hover-bg;
				border-bottom-color: $nav-tabs-active-link-hover-bg;
			}
		}
	}
}

#ilTab a:focus-visible {
	z-index: 3;
}

#ilTab > li > a:focus {
	border-bottom: 2px solid $nav-tabs-active-link-hover-bg;
}

/* Sub Tabs */
#ilSubTab {
	padding: $il-padding-large-vertical 0;
	margin: 0;

	> li:first-child > a,
    > li:first-child > .c-tooltip__container > a {
		padding-left: $il-padding-large-horizontal;
	}


	> li {
		float: left;

		> a,
        > .c-tooltip__container > a {
			border-radius: 0;
			padding: $il-padding-base-vertical $il-padding-base;
			font-size: ($il-font-size-small);

			&:hover {
				text-decoration: underline;
				background-color: transparent;
			}
			@include focus.clear-focus-for-override($clearAfter: true);
			@include focus.il-focus();
		}
		&.active > a,
        &.active > .c-tooltip__container > a {
			&,
			&:hover,
			&:focus {
				color: $il-link-color;
				background-color: transparent;
				text-decoration: underline;
			}
		}
	}
}

.il_after_tabs_spacing {
	margin-bottom: $il-margin-xxlarge-vertical;
}