@charset 'utf-8';
@use '../global' as *;

/* comments
---------------------------------------------*/
.comments {
	&__title {
		position: relative;
		// margin: 0 0 1.5em;
	}
	&__closed {
		margin-block: 1.5rem 0;
		color: var(--ap-color-text-subtle);
		text-align: center;
	}
}


.comment-list {
	// margin: 0 0 48px;
	&__item {

	}
}


.comment {
	--comment-spacing--y: 1.5rem;
	--comment-avatar-size: #{px-to-rem(48px)};
	padding-block: var(--comment-spacing--y);
	border-bottom: 1px solid #ddd;

	&__article {
		position: relative;
	}
	&__footer {
		display: flex;
		margin-block: 0 1rem;
	}
	&__author-image {
		flex-shrink: 0;
		// margin: 0 1em 0 0;
	}
	&__meta {
		padding-inline: 1rem;
	}
	&__author-name {
		display: block;
		margin: 0;
		font-size: var(--font-size--sm);
		font-weight: 600;
		> a {
			color: var(--text-color);
		}
	}
	&__time-link {
		color: var(--ap-color-text-subtle);
		font-size: var(--font-size--sm);
	}
	&__moderation-note {
		margin: 0;
		color: red;
		font-size: var(--font-size--sm);
	}
	&__content {
		font-size: var(--font-size);

		a {
			text-decoration: underline;
		}

		@include mq('lg', '>=') {
			padding-inline-start: calc(var(--comment-avatar-size) + 1rem);
		}
		> p:last-child {
			margin: 0;
		}
	}
}

.comment-list.comment-list--children {
	margin-inline: 1.5rem 0;
	padding-block: var(--comment-spacing--y) 0;
}

.comment-list--children {
	.comment-list__item:last-child {
		border: none;
		padding-block: var(--comment-spacing--y) 0;
		border-top: 1px solid #ddd;
	}
}

.comment-reply {
	flex-shrink: 0;
	margin-inline-start: auto;
	// position: absolute;
	// inset-block-start: 0;
	// inset-inline-end: 0;
}

.comment-reply-link {
	display: inline-block;
	padding: .25rem 1rem;
	border: 1px solid #ddd;
	color: var(--text-color);
	font-size: var(--font-size--sm);
	&:hover {
		border-color: var(--ap-color-primary);
		color: var(--ap-color-primary);
	}
}

.comment-navigation {
	margin-block: 2rem 0;
	>.nav-links {
		display: flex;
		justify-content: space-between;
	}
	// :where(.nav-previous a, .nav-next a) {
	// 	display: inline-block;
	// 	width: 120px;
	// 	border: 1px solid #ddd;
	// 	padding: .25em .5em;
	// }
}


/* Comment Form
---------------------------------------------*/
.comment-respond {
	margin-block: 2rem 0;
}

.comment-form {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	margin-block: 1.5rem 0;
}

.comment-form [type="text"],
.comment-form [type="email"],
.comment-form [type="url"] {
	width: 100%;
}

.required {
	color: #ff0000;
}


.form-submit {
	text-align: center;
}

.form-submit > [type="submit"] {
	transition: var(--transition);
	display: inline-block;
	padding: .5em 2em;
	border: 2px solid var(--button-color, var(--ap-color-extra));
	background: var(--button-color, var(--ap-color-extra));
	color: var(--text-color, #fff);
	font-size: 1rem;
}

.form-submit > [type="submit"]:hover {
	background: var(--text-color, #fff);
	color: var(--button-color, var(--ap-color-extra));
}