/*
Currently in use at:
- NDN
		perl/Ndn/Dhwebpanel/Domain/Secure.pm.tp
		perl/Ndn/Dhwebpanel/Referrals/Dashboard.pm.tp
- DH.com
		Numerous pages
- Signup
		Custom component (?)
*/

.Tabs {
	margin-bottom: 2.5rem;
}


.Tabs__nav {
	border-bottom: solid 1px $c-g200;
	font-size: 0; // allow inline horizontal collapse
	overflow-x: auto;
	white-space: nowrap;
}

.Tabs__nav-item {
	margin: 0 1rem;
	padding: 0 0 1rem 0;
	@include fontsize($t-1);
	font-weight: $t-bold;
	color: $c-g400;
	display: inline-block;
	position: relative;
	user-select: none;

	a {
		display: block;
		color: $c-g400;

		&:hover {
			text-decoration: none;
			color: $c-b700;
		}
	}

	transition: right 0.2s ease-out;

	&:after {
		content: "";
		position: absolute;
		left: 0;
		right: 100%;
		bottom: 0;
		background: $c-b300;
		height: 2px;
		transition: right 0.2s ease-out;
	}

	&:hover, &:active, &.is-active a {
		text-decoration: none;
		color: $c-b700;
	}

	&:first-child {
		margin-left: 0; // to align with hard-left start of box below
	}

	// States
	&.is-active {
		font-weight: $t-bold;
		color: $c-b700;
		&:hover {
			cursor: default;
		}
		&:after {
			right: 0%;
		}
	}
}

// Text Tab Style
.Tabs--block {
	.Tabs__nav {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-evenly;
	}

	.Tabs__nav-item {
		padding-top: 1rem;
		flex-grow: 1;
		text-align: center;
		margin: 0;
		border-bottom: solid 1px $c-g300;
		min-width: 75px;
	}
}

// Block Tab Style
.Tabs--button {
	text-align: center;

	ul {
		min-width: unset;
		border-bottom: 0;
	}

	.Tabs__nav-item {
		display: block;
		border: solid 1px $c-g200;
		border-bottom: none;
		margin: 0;
		padding: 0.75rem 1rem;

		&:after {
			height: 0px;
		}

		&:first-of-type {
			border-radius: 3px 3px 0 0;
		}

		&:last-of-type {
			border-radius: 0 0 3px 3px;
			border-bottom: solid 1px $c-g200;
		}

		&.is-active {
			border-color: $c-b300;
			background: $c-b300;
			color: $c-w100;
			font-weight: $t-regular;
		}

		&.is-active:hover {
			color: $c-w100;
		}
	}

	@media (min-width: 500px) {

		.Tabs__nav-item {
			display: inline-block;
			border: solid 1px $c-g200;
			border-right: none;
			margin: 0;
			font-weight: $t-regular;

			&:first-of-type {
				border-radius: 3px 0 0 3px;
				border-left: solid 1px $c-g200;
			}

			&:last-of-type {
				border-radius: 0 3px 3px 0;
				border-right: solid 1px $c-g200;
			}

		}
	}
}

.Tab {
	padding: 2rem;
	background: $c-w100;
	> *:last-child {
		&:not(input) {
			&:not(textarea) {
				margin-bottom: 0;
			}
		}
	}
	display: none;
	&.is-active {
		display: block;
	}
}