//		DS2 core (c) 2024 Alexander McIlwraith 
//		Licensed under CC BY-SA 4.0 

$tab-border: #7f7f7f !default; 
$tab-selected: #FFF !default;
$tab-notselected: #f0f0f0 !default;

@mixin tabs {
	tabset, .tab-group {
		margin: 2rem 0 1rem 0;
		> ul {
			display: flex;
			margin: 0;
			padding: 0;

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

		.tab-hidden {
			display: none;
		}

		[role="tab"] {
			background-color: $tab-selected;
			border-left: 1px solid $tab-border;
			border-top: 1px solid $tab-border;
			border-radius: .5rem .5rem 0 0;
			cursor:pointer;
			margin: 0;
			display: inline;
			padding: 1rem 1.5rem .14rem 1.5rem;
			z-index: 2;
			
			&: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;

		}
	}
}