/**
 * Kommentarslista för Bricks
 *
 * Everything configurable is a custom property set on the element root, so the
 * Bricks style controls override this file by specificity alone — no !important
 * anywhere, and a user's own CSS keeps working.
 */

.bcl-root {
	--bcl-gap: 1.25rem;
	--bcl-columns: 1;
	--bcl-avatar-size: 48px;
	--bcl-clamp: 0;
	--bcl-muted: color-mix(in srgb, currentColor 65%, transparent);
}

/*
 * The nestable element renders one root per comment, holding whatever child
 * elements you put in it. Stacking them is the sane default: Bricks' own Block
 * does the same, and without it two inline children (a Basic Text set to span,
 * say) would run together on one line. Bricks' own layout controls write
 * #brxe-{id} rules, which outrank this by specificity, so changing it in the
 * builder still works.
 */
.brxe-bcl-comment-list-nested {
	display: flex;
	flex-direction: column;
}

/* Anchor for the whole-item overlay link. */
.bcl-root.bcl-linked {
	position: relative;
}

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

.bcl-list--grid {
	grid-template-columns: repeat(var(--bcl-columns), minmax(0, 1fr));
}

.bcl-item {
	position: relative;
	display: flex;
	gap: 0.75rem;
	align-items: flex-start;
	min-width: 0;
}

.bcl-avatar-top .bcl-item {
	flex-direction: column;
	align-items: stretch;
}

.bcl-body {
	min-width: 0;
	flex: 1;
}

/* Avatar ------------------------------------------------------------------ */

.bcl-avatar {
	display: block;
	flex: 0 0 auto;
	width: var(--bcl-avatar-size);
	height: var(--bcl-avatar-size);
	overflow: hidden;
	border-radius: 50%;
	line-height: 0;
}

.bcl-avatar img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: inherit;
}

.bcl-avatar--initials {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: calc(var(--bcl-avatar-size) * 0.4);
	font-weight: 600;
	line-height: 1;
	color: hsl(var(--bcl-avatar-hue, 210) 45% 25%);
	background: hsl(var(--bcl-avatar-hue, 210) 60% 88%);
}

/* Text -------------------------------------------------------------------- */

.bcl-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.4em;
	margin: 0 0 0.25em;
}

.bcl-author {
	font-weight: 600;
}

.bcl-sep,
.bcl-date {
	color: var(--bcl-muted);
}

.bcl-reply {
	margin: 0 0 0.25em;
	font-size: 0.875em;
	color: var(--bcl-muted);
}

.bcl-excerpt {
	margin: 0 0 0.35em;
	overflow-wrap: anywhere;
}

.bcl-excerpt--clamp {
	display: -webkit-box;
	-webkit-line-clamp: var(--bcl-clamp);
	line-clamp: var(--bcl-clamp);
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.bcl-excerpt--locked {
	font-style: italic;
	color: var(--bcl-muted);
}

.bcl-post {
	margin: 0;
	font-size: 0.9em;
}

.bcl-post-prefix {
	color: var(--bcl-muted);
}

.bcl-post-image {
	display: block;
	margin-top: 0.5em;
	max-width: 100%;
	height: auto;
}

.bcl-more {
	display: inline-block;
	margin-top: 0.35em;
	font-size: 0.9em;
}

.bcl-empty {
	margin: 0;
	color: var(--bcl-muted);
}

/* Whole-item link --------------------------------------------------------- */

/*
 * An overlay link rather than wrapping the item: the text stays selectable and
 * screen readers get one accessible name for the item instead of three.
 */
.bcl-card-link {
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
}

.bcl-item--linked {
	cursor: pointer;
}

.bcl-card-link:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* Load more --------------------------------------------------------------- */

.bcl-loadmore {
	margin-top: var(--bcl-gap);
	cursor: pointer;
}

.bcl-loadmore[disabled] {
	cursor: progress;
	opacity: 0.6;
}

.bcl-item--skeleton {
	pointer-events: none;
}

.bcl-item--skeleton .bcl-skeleton-line {
	display: block;
	height: 0.75em;
	margin-bottom: 0.5em;
	border-radius: 3px;
	background: var(--bcl-muted);
	opacity: 0.25;
	animation: bcl-pulse 1.2s ease-in-out infinite;
}

.bcl-item--skeleton .bcl-skeleton-line:nth-child(2) {
	width: 80%;
}

.bcl-item--skeleton .bcl-skeleton-line:nth-child(3) {
	width: 45%;
}

@keyframes bcl-pulse {
	50% {
		opacity: 0.45;
	}
}

/* Arrival highlight ------------------------------------------------------- */

.bcl-target {
	animation: bcl-flash 2.4s ease-out 1;
}

@keyframes bcl-flash {
	0%,
	40% {
		background-color: color-mix(in srgb, currentColor 12%, transparent);
	}

	100% {
		background-color: transparent;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bcl-target,
	.bcl-item--skeleton .bcl-skeleton-line {
		animation: none;
	}
}

/* Screen-reader-only text ------------------------------------------------- */

.bcl-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}