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

.list {
	display: flex;
	gap: 0.25rem;
	border-bottom: 1px solid var(--border-default);
}

.trigger {
	padding: 0.75rem 1rem;
	background: transparent;
	font-size: 0.875rem;
	font-weight: 500;
	letter-spacing: -0.006em;
	color: var(--text-secondary);
	cursor: pointer;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	transition: all var(--duration-normal) var(--ease-out);

	&:hover {
		color: var(--purple-500);
	}

	&:focus-visible {
		outline: none;
		box-shadow: var(--focus-ring);
		border-radius: var(--radius-sm) var(--radius-sm) 0 0;
	}

	&[data-state="active"] {
		color: var(--purple-500);
		border-bottom-color: var(--purple-500);
		font-weight: 600;
	}

	&[data-disabled] {
		opacity: 0.5;
		cursor: not-allowed;
	}
}

.content {
	padding: 1rem 0;

	&:focus {
		outline: none;
	}
}
