.root {
	display: flex;
	flex-direction: column;
}

.list {
	flex-shrink: 0;
	display: flex;
}

.trigger {
	width: 80px;
	height: 30px;
	margin: 4px 0;
	font-family: inherit;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 15px;
	line-height: 1;
	user-select: none;
	cursor: pointer;
	transition: color 0.1s ease;
	margin-bottom: var(--gap-half);
}

.trigger:hover {
	background-color: var(--lighter-gray);
	color: var(--fg);
}

.trigger:first-child {
	border-top-left-radius: 4px;
}

.trigger:last-child {
	border-top-right-radius: 4px;
}

.trigger[data-state="active"] {
	color: var(--darkest-gray);
	box-shadow: inset 0 -1px 0 0 currentColor, 0 1px 0 0 currentColor;
}