@use "../citrine/abstracts/functions" as *;

.article-details {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin-block-end: 2rem;
	color: var(--fg-muted-2);
	font-size: var(--font-size-small);

	.items {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		gap: 0.25rem 0.5rem;
	}

	.item {
		display: inline-flex;
		align-items: center;
		gap: 0.375rem;
		border-radius: var(--rounded-corner-small);
	}

	a {
		color: inherit;
		font-weight: var(--font-weight-normal);
		font-size: var(--font-size-small);
		text-decoration-color: transparent;

		&:hover {
			text-decoration-style: solid;
			text-decoration-color: var(--fg-muted-1);
		}
	}

	.tooltip {
		cursor: help;
	}

	.icon {
		box-shadow: var(--edge-highlight);
		border-radius: var(--rounded-corner-small);
		background-color: var(--bg-muted-1);
		padding: 0.375rem;
		color: var(--accent-color);
		font-size: 1.25rem;
	}

	.tags {
		display: flex;
		flex-wrap: wrap;
		gap: 0 0.5rem;
		margin: 0;
		border-block-start: rpx(1) solid var(--bg-muted-2);
		padding-inline-start: 0;
		padding-block-start: 0.5rem;
		width: 100%;
		list-style: none;

		li {
			display: flex;
			margin-block: 0;
			padding: 0;
		}

		a::before {
			content: "#";
		}
	}
}