@zeix/ui-element/docs-src/components/tab-group/tab-group.css

UIElement - minimal reactive framework based on Web Components

tab-group {
	display: block;
	margin-bottom: var(--space-l);

	> [role="tablist"] {
		display: flex;
		border-bottom: 1px solid var(--color-gray-50);
		padding: 0;
		margin-bottom: 0;

		& button {
			border: 0;
			border-top: 2px solid transparent;
			border-bottom-width: 0;
			font-family: var(--font-family-sans);
			font-size: var(--font-size-s);
			font-weight: var(--font-weight-bold);
			padding: var(--space-s) var(--space-m);
			color: var(--color-text-soft);
			background-color: var(--color-secondary);
			cursor: pointer;
			transition: all var(--transition-short) var(--easing-inout);

			&:hover,
			&:focus {
				color: var(--color-text);
				background-color: var(--color-secondary-hover);
			}

			&:active {
				color: var(--color-text);
				background-color: var(--color-secondary-active);
			}

			&[aria-selected="true"] {
				color: var(--color-primary-active);
				border-top: 3px solid var(--color-primary);
				background-color: var(--color-background);
				margin-bottom: -1px;
			}
		}
	}

	> [role="tabpanel"] {
		font-family: sans-serif;
		font-size: var(--font-size-m);
		background: var(--color-background);
		margin-block: var(--space-l);
	}
}