/* Tabs */
.badge {
	padding: 4px 8px;

	border-radius: 4px;
	font-family: var(--mantine-font-family-monospace);
	text-transform: lowercase;

	color: light-dark(var(--mantine-color-text-1), var(--mantine-color-text-0));
	background-color: light-dark(var(--mantine-color-background-2), var(--mantine-color-background-3));

	@media (--lt-md) {
		display: none;
	}
}

.tab {
	background-color: transparent;
	border: none;
	border-radius: 4px;
	padding: var(--mantine-spacing-xs) var(--mantine-spacing-md);
	cursor: pointer;
	display: flex;
	align-items: center;

	&[data-active] {
		background-color: var(--mantine-color-button-hover);
		font-weight: 700;
	}

	color: light-dark(var(--mantine-color-text-1), var(--mantine-color-text-0));

	&:hover {
		color: var(--mantine-color-purple);
		background-color: var(--mantine-color-button-hover);
	}

	&[data-active] {
		color: var(--mantine-color-purple);
	}
}

.list {
	display: flex;
	align-items: center;
	gap: 10px;
}

.download-button {
	display: flex;

	background-color: transparent;

	border: none;
	border-radius: 4px;
	padding: var(--mantine-spacing-xs) var(--mantine-spacing-md);
	cursor: pointer;
	text-decoration: none;

	color: light-dark(var(--mantine-color-text-1), var(--mantine-color-text-0));

	&:hover {
		background-color: var(--mantine-color-button-hover);
		color: var(--mantine-color-purple);
	}

	@media (--lt-sm) {
		display: none;
	}
}

.hide-tab {
	@media (--lt-xs) {
		display: none;
	}
}
