/* stylelint-disable selector-no-qualifying-type */
@use '@talend/design-tokens/lib/tokens' as tokens;

$tc-tabbar-active-border-size: 0.125rem !default;

.nav {
	.btn-link {
		background-color: inherit;
		color: inherit;
		display: inline-block;

		&:focus,
		&:active,
		&:hover {
			text-decoration: none;
		}

		> *,
		> span > * {
			vertical-align: middle;
		}
	}

	&-inverse {
		color: tokens.$coral-color-accent-text-weak;
		background-color: tokens.$coral-color-accent-background-strong;
	}

	&-pills {
		> li {
			&,
			+ li {
				margin: 0;
			}

			.btn-link {
				color: tokens.$coral-color-accent-text-weak;
			}

			&:focus,
			&:hover,
			&:active {
				.btn-link {
					// TODO: replace with token
					background-color: rgba(255, 255, 255, 0.12);
				}
			}

			&.active,
			&.open {
				.btn-link {
					background-color: tokens.$coral-color-neutral-background;
					color: tokens.$coral-color-accent-text;
				}
			}

			&.disabled .btn {
				&:focus,
				&:hover {
					// background-color: tokens.$coral-color-accent-background-weak;
					color: tokens.$coral-color-accent-text-weak;
				}
			}

			&.active > a,
			&.active > a:hover,
			&.active > a:focus {
				background-color: tokens.$coral-color-accent-background-strong;
			}
		}

		.btn.btn-link {
			padding: $padding-large;
			width: 100%;
			line-height: 1;
			text-align: left;
			text-overflow: ellipsis;
			overflow: hidden;
			white-space: nowrap;

			&.dropdown-toggle {
				position: relative;
				padding-right: 2 * $padding-large;

				.caret {
					position: absolute;
					right: $padding-large;
					margin-top: calc(#{$dropdown-caret-size} / 2);
				}
			}
		}

		&.nav-stacked {
			.btn.btn-link {
				width: 100%;
				text-align: left;
			}
		}
	}

	&-pills.nav-inverse {
		> li {
			.btn-link {
				color: tokens.$coral-color-accent-text;
			}

			&:focus,
			&:hover {
				background-color: tokens.$coral-color-accent-background-hover;

				.btn-link:hover {
					color: tokens.$coral-color-accent-text;
					background-color: tokens.$coral-color-accent-background-hover;
				}
			}

			&:active,
			&.active,
			&.open {
				background-color: tokens.$coral-color-accent-background-weak;
			}
		}
	}

	&-tabs {
		border: none;

		> li {
			margin: 0;

			> a,
			> button {
				background: transparent;
				border: none;
				border-radius: 0;
				color: tokens.$coral-color-neutral-text;
				margin-bottom: 0.3125rem;
				outline: none;
				padding: $padding-smaller $padding-small;
				padding-bottom: calc(#{$padding-smaller} + #{$tc-tabbar-active-border-size});

				max-width: 12.5rem;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;

				&:hover,
				&:focus {
					color: tokens.$coral-color-accent-text;
				}
			}

			&.active {
				> a,
				> button {
					color: tokens.$coral-color-accent-text;
					font-weight: $font-weight-semi-bold;

					position: relative;

					&::after {
						position: absolute;
						content: '';

						left: $padding-small;
						right: $padding-small;
						bottom: 0;

						border-bottom: solid $tc-tabbar-active-border-size tokens.$coral-color-accent-text;
					}

					&:focus {
						color: tokens.$coral-color-accent-text-hover;
					}

					&:hover {
						color: tokens.$coral-color-accent-text-hover;
					}
				}
			}

			&.disabled {
				> a,
				> button {
					cursor: not-allowed;
					color: tokens.$coral-color-neutral-text-disabled;
					opacity: 0.54;

					&,
					&:focus,
					&:hover {
						background-color: tokens.$coral-color-neutral-background-disabled;
						border: none;
					}
				}
			}
		}

		+ .tab-content {
			padding-top: $padding-large;
		}
	}
}