$tab-border: #7f7f7f !default;

$tab-selected: #FFF !default;
$tab-selected-text: #000 !default;

$tab-notselected: #f0f0f0 !default;
$tab-notselected-text: #000 !default;

@mixin tabs {

	tabset, .tab-group {

		margin: 2rem 0 1rem 0;

		[role="tablist"] li.selected {
			background-color: var(--colour-green);
			color: var(--colour-white);
			
		}

		> ul,
		.tab-scroll > ul {
			display: flex;
			margin: 0;
			padding: 0;
			user-select: none;

			li.separator {
				border-bottom: 1px solid $tab-border;
				border-left: 1px solid $tab-border;
				display: inline-block;
				flex: 1 1 auto;
				margin: .45rem 0 0 0;
				width: auto;
			}
		}

		.tab-hidden {
			display: none;
		}

		[role="tab"] {
			background-color: $tab-selected;
			border-left: 1px solid $tab-border;
			border-radius: .5rem .5rem 0 0;
			border-top: 1px solid $tab-border;
			cursor: pointer;
			display: block;
			flex: 0 0 auto;
			margin: 0;
			max-width: 100vw;
			overflow: hidden;
			padding: 1rem 1.5rem .14rem 1.5rem;
			user-select: none;
			white-space: normal;
			word-break: break-word;

			&:last-of-type {
				border-right: 1px solid $tab-border;
			}

			&:not(.selected) {
				background-color: $tab-notselected;
				border-bottom: 1px solid $tab-border;
			}

			span {
				display: block;
				margin: 0 0 .5rem 0;
			}
		}

		[role="tabpanel"] {
			background-color: $tab-selected;
			border: 1px solid $tab-border;
			border-top: none;
			padding: 1rem;
			z-index: 1;

			&:not(.open) {
				display: none;
			}

			@content;
		}
	}

	// scroller
	.tab-scroll {
		width: 100%;
		overflow-x: auto;
		overflow-y: hidden;
		scrollbar-width: none;
		-ms-overflow-style: none;
		user-select: none;

		&::-webkit-scrollbar {
			display: none;
		}

		> ul {
			flex-wrap: nowrap;
			min-width: 100%;
			width: max-content;
		}
	}

	// wrapper (now owns the fade)
	.tab-scroll-wrapper {
		position: relative;
		user-select: none;
		$radial: 2.5rem;
		// edge fades (this is the fix)
		&::before,
		&::after {
			content: "";
			position: absolute;
			top: 0;
			width: 2.5rem;
			height: 100%;
			pointer-events: none;
			z-index: 2;
			opacity: 0; // hidden by default
			transition: opacity 0.2s ease;
		}

		// left fade
		&::before {
			background: radial-gradient(
				circle at left center,
				rgba(255,255,255,1) 0%,
				rgba(255,255,255,0.9) 50%,
				rgba(255,255,255,0.5) 75%,
				rgba(255,255,255,0.25) 95%,
				transparent 100%
			);
			border-top-right-radius: $radial;
			border-bottom-right-radius: $radial;
			left: 0;
		}

		// right fade
		&::after {
			right: 0;
				background: radial-gradient(
					circle at right center,
					rgba(255,255,255,1) 0%,
					rgba(255,255,255,0.9) 50%,
					rgba(255,255,255,0.5) 75%,
					rgba(255,255,255,0.25) 95%,
					transparent 100%
				);
				border-top-left-radius: $radial;
				border-bottom-left-radius: $radial;
		}

		// show fade only when overflowing
		&.is-overflowing {
			&::before,
			&::after {
				opacity: 0;
				transition: opacity 0.15s ease-out;
				transition: opacity 0.12s cubic-bezier(0.4, 0, 0.2, 1);
			}
			
			&.show-left {
				&::before {
					opacity: 1;
				}
			}
			&.show-right {
				&::after {
					opacity: 1;
				}
			}
			
		}

		// arrows
		.tab-scroll-arrow {
			align-items: center;
			cursor: pointer;
			display: none;
			height: 100%;
			justify-content: center;
			position: absolute;
			top: 0;
			user-select: none;
			width: 2.5rem;
			z-index: 3;
			path {
				fill: $tab-border;
			}
			&.left {
				left: 0;
			}

			&.right {
				right: 0;
			}

			&.hidden {
				display: none !important;
				pointer-events: none;
				visibility: hidden;
			}
		}

		// only show arrows when overflow
		&.is-overflowing {
			.tab-scroll-arrow {
				display: flex;
			}
		}
	}
}