@layer components {
	.comments-area {
		display: grid;
		gap: var(--space-xl);
		font-family: var(--font-body);
		font-size: var(--text-body-size);
		line-height: var(--text-body-lh);
	}

	.comments-title {
		font-family: var(--font-heading);
		font-size: var(--font-size-lg);
		font-weight: var(--text-heading-weight);
		line-height: var(--text-heading-lh);
	}

	.comment-list {
		display: grid;
		gap: var(--space-lg);
		list-style: none;
		padding: 0;
		margin: 0;
	}

	.comment,
	.pingback,
	.trackback {
		position: relative;
		display: grid;
		gap: var(--space-md);
		padding: var(--space-lg);
		border-radius: var(--radius-card);
	}

	.comment.depth-2 {
		margin-left: var(--space-xl);
	}

	.comment.depth-3 {
		margin-left: calc(var(--space-xl) * 2);
	}

	.comment.depth-4,
	.comment.depth-5 {
		margin-left: 0;
		padding-left: var(--space-lg);
	}

	.comment-body {
		display: grid;
		gap: var(--space-md);
	}

	.comment-meta {
		display: flex;
		align-items: center;
		gap: var(--space-sm);
		font-size: var(--text-small-size);
		line-height: var(--text-small-lh);
	}

	.comment-author {
		display: flex;
		align-items: center;
		gap: var(--space-sm);
		font-weight: var(--fw-medium);
	}

	.comment-author img {
		width: 2.25rem;
		height: 2.25rem;
		border-radius: 50%;
		flex-shrink: 0;
	}

	.comment-metadata {
		display: flex;
		align-items: center;
		gap: var(--space-xs);
		font-size: var(--text-caption-size);
	}

	.comment-metadata time {
		white-space: nowrap;
	}

	.comment-content {
		display: grid;
		gap: var(--space-sm);
		font-size: var(--text-body-size);
		line-height: var(--text-body-lh);
	}

	.comment-content p:last-child {
		margin-bottom: 0;
	}

	.comment-content a {
		text-decoration: underline;
		text-underline-offset: 2px;
	}

	.reply {
		display: flex;
		gap: var(--space-md);
		font-size: var(--text-small-size);
	}

	.reply a {
		font-weight: var(--fw-medium);
		text-decoration: none;
	}

	.comment-edit-link {
		font-size: var(--text-caption-size);
	}

	.children {
		display: grid;
		gap: var(--space-lg);
		margin-top: var(--space-lg);
		padding-left: var(--space-xl);
		list-style: none;
	}

	.comment-respond {
		display: grid;
		gap: var(--space-lg);
		padding-top: var(--space-xl);
	}

	.comment-reply-title {
		font-family: var(--font-heading);
		font-size: var(--font-size-md);
		font-weight: var(--text-heading-weight);
		line-height: var(--text-heading-lh);
	}

	.comment-form {
		display: grid;
		gap: var(--space-md);
	}

	.comment-reply-link {
		padding: var(--space-xs) var(--space-md);
		border-radius: var(--radius-control);
	}

	.comment-form label {
		font-size: var(--text-small-size);
		font-weight: var(--fw-medium);
	}

	.comment-form input[type="text"],
	.comment-form input[type="email"],
	.comment-form input[type="url"],
	.comment-form textarea {
		width: 100%;
		font-family: var(--font-body);
		font-size: var(--text-body-size);
		line-height: var(--text-body-lh);
		padding: var(--space-sm);
		border-radius: var(--radius-control);
	}

	.comment-form textarea {
		min-height: 8rem;
		resize: vertical;
	}

	.comment-form input:focus:not(:focus-visible),
	.comment-form textarea:focus:not(:focus-visible) {
		outline: none;
	}

	.form-submit {
		margin-top: var(--space-md);
	}

	.comment-form-cookies-consent {
		display: inline-flex;
		align-items: center;
		gap: var(--space-xs);
		font-size: var(--text-caption-size);
		line-height: var(--text-caption-lh);
	}

	.comment-form-cookies-consent label {
		display: inline-flex;
		align-items: center;
		gap: var(--space-xs);
		cursor: pointer;
		margin: 0;
	}

	.comment-form-cookies-consent input[type="checkbox"] {
		margin: 0;
		flex-shrink: 0;
	}

	.comment-form input[type="submit"],
	.comment-form .submit {
		cursor: pointer;
	}
}