.uses-category {
	display: flex;
	flex-direction: column;
	background-color: hsl(var(--container-bg));
	padding-bottom: 0;

	&:first-child summary.meta {
		border-radius: 1.35rem 1.35rem 0 0;
	}
	&:last-child:not([open]) summary.meta {
		border-radius: 0 0 1.35rem 1.35rem;
	}
}

.uses-category[open] {
	summary {
		background-color: hsla(var(--surface1) / 0.3);
	}
	.meta-arrow {
		transform: rotate(180deg);
	}
}

.uses-category .meta {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	padding: 0.5rem;

	.meta-content {
		display: flex;
		flex-direction: column;
	}

	.meta-arrow {
		display: flex;
		align-items: center;
		justify-content: center;

		width: 2rem;
		height: 2rem;
		color: hsl(var(--subtext1));
		transform-origin: center;
	}

	outline-offset: -2px;

	&:hover,
	&:focus-visible {
		background-color: hsla(var(--surface1) / 0.3);
		cursor: pointer;
		transition: none;
	}

	h3 {
		font-weight: 700;
		font-size: 1.2rem;
	}

	p {
		font-size: 0.9rem;
		color: hsl(var(--subtext1));
		margin-bottom: 0.5rem;
	}
}

.uses-category .items {
	display: flex;
	flex-direction: column;

	.item {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		gap: 0.5rem;
		padding: 0.2rem 0.5rem;

		background-clip: padding-box;
		border-top: 2px solid hsla(var(--surface0) / 0.25);
		border-bottom: 2px solid transparent;
		margin-top: -2px;

		.label {
			h4 {
				color: hsl(var(--subtext1));
				font-weight: 500;
			}
		}

		.value {
			color: hsl(var(--subtext0));
			font-weight: 400;
			text-align: right;
			.subtext {
				font-size: 0.8rem;
				color: hsla(var(--subtext0) / 0.8);
			}
		}

		&:hover {
			background-color: hsla(var(--surface0) / 1);
			border-bottom: 2px solid hsla(var(--surface1) / 0.5);
			border-top: 2px solid hsla(var(--surface1) / 0.5);

			transition: none;

			&:last-child {
				border-bottom: 2px solid hsla(var(--surface1) / 0.3);
			}

			.label h4,
			.value p,
			.value .subtext {
				color: hsl(var(--text));
				transition: none;
			}
		}
	}
}