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

$tab-border: #7f7f7f !default; 
$tab-panel-background-color: #FFF !default;
$tab-panel-top-border: #7f7f7f !default;
$tab-panel-top-border-width: 1px !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"] {
			display: flex;
			margin: 0;
			padding: 0;


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

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

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

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

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