.list {
	display: flex;
	flex-shrink: 0;
	padding: 0;
	cursor: default;
}

.trigger {
	display: flex;
	align-items: center;
	gap: var(--component-spacing-xs);
	-webkit-user-select: none;
	   -moz-user-select: none;
	        user-select: none;
	outline: none;
	position: relative;
}

.content {
	flex-grow: 1;
	outline: none;
	cursor: auto;
}

/* ------------------------------------------------------------ */

/* Medium emphasis */

/* ------------------------------------------------------------ */

.list--emphasis-medium {
	--tabs-stroke-color: var(--color-neutral-300);
	--tabs-stroke-color-hover: var(--color-neutral-500);
	--tabs-stroke-color-active: var(--color-accent-900);
	--tabs-stroke-color-element: transparent;
	border-bottom: var(--component-border-width-md) solid var(--tabs-stroke-color);
	gap: var(--component-spacing-lg);
}

.list--emphasis-medium .trigger {
	color: var(--color-neutral-canvas-default-fg-default);
	height: var(--size-control-large);
	padding: var(--component-spacing-md) 0;
	border: none;
	border-radius: var(--component-radii-sm);
	background: transparent;
	font: var(--font-label-sm);
}

.list--emphasis-medium .trigger::after {
	content: '';
	position: absolute;
	bottom: -1px;
	border-top-left-radius: var(--component-radii-sm);
	border-top-right-radius: var(--component-radii-sm);
	left: 0;
	right: 0;
	height: var(--component-border-width-lg);
	background: var(--tabs-stroke-color-element);
}

.list--emphasis-medium .trigger:hover {
	--tabs-stroke-color-element: var(--tabs-stroke-color-hover);
}

.list--emphasis-medium .trigger:focus-visible {
	box-shadow: var(--shadows-focus);
}

.list--emphasis-medium .trigger[data-state='active'] {
	--tabs-stroke-color-element: var(--tabs-stroke-color-active);
}

/* ------------------------------------------------------------ */

/* Low emphasis */

/* ------------------------------------------------------------ */

.list--emphasis-low {
	gap: var(--component-spacing-xs);
	padding: var(--component-spacing-sm) 0;
}

.list--emphasis-low .trigger {
	height: var(--size-control-small);
	padding: 0 var(--component-spacing-sm);
	font: var(--font-label-xs);
	border: var(--component-border-width-sm);
	border-radius: var(--component-radii-sm);
	background: transparent;
	color: var(--color-neutral-1200);
}

.list--emphasis-low .trigger:focus-visible {
	box-shadow: var(--shadows-focus);
}

.list--emphasis-low .trigger[data-state='active'] {
	background: var(--color-neutral-200);
	color: var(--color-neutral-canvas-default-fg-default);
}

.leadingIcon {
	color: var(--fg-default);
}

.trailingIcon {
	color: var(--fg-default);
}