@use '@talend/design-tokens/lib/tokens' as tokens;

.tablist {
	list-style-type: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-flow: row;
	flex-wrap: nowrap;
	align-items: flex-start;
	justify-content: flex-start;
	row-gap: var(--coral-spacing-m, 1rem);
	column-gap: var(--coral-spacing-m, 1rem);
}

.tabpanel {
	width: 100%;
	height: 100%;

	&--hidden {
		display: none;
	}
}

.tab {
	font: tokens.$coral-heading-s;
	height: tokens.$coral-sizing-xs;
	color: tokens.$coral-color-neutral-text-weak;
	position: relative;
	display: inline-flex;
	justify-content: flex-start;
	align-items: flex-start;
	background: transparent;
	border: 0;
	padding: 0;
	margin: 0;
	transition: tokens.$coral-transition-fast;
	text-decoration: none;

	&__copy {
		max-width: tokens.$coral-sizing-xxxl;
		text-overflow: ellipsis;
		min-width: 0;
		overflow: hidden;
		text-align: left;
		display: inline-block;
		white-space: nowrap;
		text-transform: capitalize;
	}

	> svg {
		color: tokens.$coral-color-neutral-icon-weak;
	}

	&::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		border-top: tokens.$coral-border-m-solid tokens.$coral-color-accent-border;
		opacity: 0;
		transition: tokens.$coral-transition-fast;
		transform: translateY(100%);
	}

	&[aria-selected='true'] {
		color: tokens.$coral-color-accent-text;

		> svg {
			color: tokens.$coral-color-accent-icon;
		}

		&::after {
			opacity: 1;
			transform: translateY(0%);
		}
	}

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

		> svg {
			color: tokens.$coral-color-accent-icon-hover;
		}
	}

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

		> svg {
			color: tokens.$coral-color-accent-icon-active;
		}
	}

	&_large {
		font: tokens.$coral-heading-l;
		height: tokens.$coral-sizing-s;

		&:not(:last-of-type) {
			margin-right: tokens.$coral-spacing-s;
		}
	}

	&_error {
		color: tokens.$coral-color-danger-text;

		&[aria-selected='true'] {
			color: tokens.$coral-color-danger-text;
		}
	}

	&_error::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		border-top: tokens.$coral-border-m-solid tokens.$coral-color-danger-text;
		opacity: 0;
		transition: tokens.$coral-transition-fast;
		transform: translateY(100%);
	}

	.statusDot {
		align-self: flex-start;
	}
}