:root {
	--layout-comments-width: 512px; 
}
.comments-open,
.comments-peek,
.comments-side {
	display: none;
}
:root[data-comments-side] .comments-fold-seam,
:root[data-comments-side] .comments-fold-body {
	display: none;
}
.wp-block-comment-reply-link .comment-reply-mark {
	display: none;
}
@media (min-width: 1010px) {
	body.has-frame .comments-side {
		position: absolute;
		inset-block: 0;
		inset-inline-end: 0;
		z-index: auto;
		display: flex;
		flex-direction: column;
		width: var(--layout-comments-width);
		
		--interaction-surface: var(--frame-plane);
		background: transparent;
		box-shadow: none;
		border: 0;
		color: var(--text-primary);
		font-family: var(--font-sans);
		margin-block: 0;
	}
	
	:root:not([data-comments-open]) body.has-frame .comments-side {
		inset-inline-end: calc(-1 * (var(--layout-comments-width) + var(--frame-gap)));
	}
	
	:root[data-comments-open] body.has-frame .frame-paper {
		margin-inline-end: calc(var(--layout-comments-width) + var(--frame-gap));
	}
	
	body.has-frame .comments-side,
	body.has-frame .frame-paper {
		transition: none;
	}
	
	body.has-frame .comments-peek {
		position: absolute;
		z-index: var(--layer-sticky);
		inset-block: 0;
		inset-inline-end: calc(-1 * var(--frame-gap));
		width: var(--frame-gap);
		margin-block: 0;
		display: none;
	}
	:root:not([data-comments-open]) body.has-frame .comments-peek {
		display: block;
	}
	:root:not([data-comments-open]) body.has-frame .comments-side {
		opacity: 0;
		z-index: var(--layer-overlay);
		border-radius: var(--frame-panel-radius);
		border: 1px solid transparent; 
		box-shadow: var(--elevation-floating);
		
		--interaction-surface: var(--surface-floating);
		background: var(--surface-floating);
	}
	:root:not([data-comments-open])[data-comments-peek] body.has-frame .comments-side {
		inset-inline-end: 0;
		opacity: 1;
	}
	:root:not([data-comments-open]):not([data-focus-motion]) body.has-frame .comments-side {
		opacity: 1;
		transition: inset-inline-end var(--motion-duration-slow) var(--motion-easing-standard);
	}
	:root:not([data-comments-open]) body.has-frame .comments-close {
		display: none;
	}
	:root[data-comments-peek] body.has-frame .comments-open {
		display: none;
	}
	
	body.has-frame .comments-open {
		--interaction-surface: var(--surface-base);
		background: transparent;
		position: absolute;
		z-index: var(--layer-navigation);
		inset-block-start: var(--frame-inset); 
		inset-inline-end: var(--frame-inset);
		margin-block: 0;
		display: inline-flex;
	}
	
	:root[data-comments-open] body.has-frame .comments-open {
		inset-inline-end: calc(var(--frame-inset) + var(--layout-comments-width) + var(--frame-gap));
	}
	body.has-frame .comments-close {
		display: none;
	}
	
	body.has-frame .comments-open-btn > span:not(.comments-count),
	body.has-frame .comments-closed-mark > span {
		display: none;
	}
	body.has-frame .comments-open-btn,
	body.has-frame .comments-closed-mark {
		position: relative;
		width: var(--layout-action-square);
		padding-inline: 0;
		justify-content: center;
		background: var(--surface-hover);
		color: var(--text-primary);
	}
	@media (hover: hover) {
		body.has-frame .comments-open-btn:hover {
			background: var(--surface-selected);
		}
	}
	body.has-frame .comments-open-btn:active {
		background: var(--surface-pressed);
	}
	body.has-frame .comments-count {
		position: absolute;
		inset-block-start: calc(-1 * var(--space-1));
		inset-inline-end: calc(-1 * var(--space-1));
		min-width: var(--space-4);
		height: var(--space-4);
		padding: 0 var(--space-1);
		border-radius: var(--radius-full);
		background: var(--text-primary);
		color: var(--surface-base);
		font-family: var(--font-sans);
		font-size: var(--text-xs);
		font-weight: var(--font-weight-medium);
		line-height: var(--space-4);
		text-align: center;
	}
	
	body.has-frame .comments-open-btn,
	body.has-frame .comments-close-btn,
	body.has-frame .comments-closed-mark {
		height: var(--layout-action-square);
		gap: var(--space-1-5);
		font-size: var(--text-sm-contextual);
	}
	body.has-frame .comments-open-btn svg,
	body.has-frame .comments-close-btn svg,
	body.has-frame .comments-closed-mark svg {
		width: var(--icon-control); 
		height: var(--icon-control);
		stroke-width: var(--icon-stroke-width);
	}
	body.has-frame .comments-closed-mark {
		pointer-events: none;
		cursor: default;
	}
	
	
	
	body.has-frame .comments-side-head {
		display: flex;
		flex-direction: column;
		flex: none;
		margin-inline: 0;
		padding-inline: 0;
	}
	body.has-frame .comments-side-foot {
		margin-inline: 0;
		padding-inline: var(--space-4);
	}
	:root[data-comments-open] body.has-frame :is(.comments-side-head, .comments-side-foot) {
		margin-inline: calc(-1 * var(--frame-gap));
	}
	:root[data-comments-open] body.has-frame .comments-side-head {
		padding-inline: var(--frame-gap);
	}
	:root[data-comments-open] body.has-frame .comments-side-foot {
		padding-inline: calc(var(--space-4) + var(--frame-gap));
	}
	body.has-frame .comments-side-head-row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: var(--layout-shell-header-height);
		padding-inline: var(--space-4) var(--space-2);
	}
	body.has-frame .comments-side-actions {
		display: flex;
		align-items: center;
		gap: var(--space-1);
	}
	body.has-frame .comments-copy[data-tooltip-shown] .quire-tooltip-bubble {
		opacity: 1;
		visibility: visible;
		transition-delay: 0s, 0s;
	}
	body.has-frame .comments-side-head .quire-button {
		margin: 0;
	}
	body.has-frame .comments-side-title {
		margin: 0;
		padding: 0;
		font-family: var(--comment-face, var(--face-inter)); 
		font-size: var(--text-heading-sm);
		font-weight: var(--font-weight-medium);
		line-height: var(--text-heading-sm-line-height);
		color: var(--text-primary);
	}
	
	body.has-frame .comments-side-foot {
		flex: none;
		display: flex;
		align-items: center;
		min-height: var(--space-12);
		padding-block: var(--space-2);
	}
	body.has-frame .comments-side-foot .quire-button {
		margin: 0;
	}
	body.has-frame .comments-side-scroll {
		flex: 1;
		min-height: 0;
		overflow-y: auto;
		overscroll-behavior: contain;
		scrollbar-width: none;
		-webkit-mask-image: linear-gradient(
			to bottom,
			rgb(0 0 0 / calc(1 - var(--side-fade-lead, 0))) 0,
			rgb(0 0 0) var(--fade-scroll),
			rgb(0 0 0) calc(100% - var(--fade-scroll)),
			rgb(0 0 0 / calc(1 - var(--side-fade-trail, 0))) 100%
		);
		mask-image: linear-gradient(
			to bottom,
			rgb(0 0 0 / calc(1 - var(--side-fade-lead, 0))) 0,
			rgb(0 0 0) var(--fade-scroll),
			rgb(0 0 0) calc(100% - var(--fade-scroll)),
			rgb(0 0 0 / calc(1 - var(--side-fade-trail, 0))) 100%
		);
	}
	:root[data-lines="on"] body.has-frame .comments-side-scroll {
		-webkit-mask-image: none;
		mask-image: none;
	}
	:root[data-lines="on"] body.has-frame .comments-side-head {
		border-block-end: var(--border-width-default) solid var(--line);
	}
	:root[data-lines="on"] body.has-frame .comments-side-foot {
		border-block-start: var(--border-width-default) solid var(--line);
	}
	body.has-frame .comments-side-scroll::-webkit-scrollbar {
		display: none;
	}
	
	body.has-frame .comments-side-inner {
		padding: 0 var(--space-2) var(--space-10);
	}
	:root:not([data-comments-open]) body.has-frame .comments-side-inner {
		padding-inline: var(--space-4);
	}
	
	
	body.has-frame .comments-side .comments-section {
		margin-top: 0;
		margin-inline: 0;
		max-width: none;
	}
	body.has-frame .comments-side .wp-block-comments-title {
		display: none;
	}
	body.has-frame .comments-side .comment-respond {
		margin-top: var(--space-10);
		padding-top: var(--space-10);
		border-top: var(--border-width-default) solid var(--border);
	}
	body.has-frame .comments-side .comments-section .comment-reply-title {
		font-size: var(--text-heading-sm);
	}
	:root:is([data-comment-size], [data-comment-members]) body.has-frame .comments-side .comments-section .comment-reply-title {
		font-size: max(var(--text-floor-content), calc(var(--text-heading-sm) * var(--comment-size-title, var(--comment-size, 1)))); 
	}
	:root[data-comments-open] body.has-frame .comments-side .comment-respond {
		padding-inline: var(--space-2);
	}
	body.has-frame .comments-side .wp-block-comments > .comment-respond:first-child,
	body.has-frame .comments-side .wp-block-comments-title + .comment-respond {
		margin-top: var(--space-4);
		padding-top: 0;
		border-top: 0;
	}
	
	body.has-frame .comments-side .comments-section .wp-block-comment-author-name,
	body.has-frame .comments-side .comments-section .wp-block-comment-author-name a {
		order: 0;
		color: var(--text-primary);
		font-size: var(--text-base);
		line-height: var(--text-base-line-height);
		font-weight: var(--comment-weight, var(--font-weight-body)); 
	}
	:root:is([data-comment-size], [data-comment-members]) body.has-frame .comments-side .comments-section :is(.wp-block-comment-author-name, .wp-block-comment-author-name a) {
		font-size: max(var(--text-floor-content), calc(var(--text-base) * var(--comment-size-name, var(--comment-size, 1)))); 
	}
	:root[data-comment-leading] body.has-frame .comments-side .comments-section :is(.wp-block-comment-author-name, .wp-block-comment-author-name a) {
		line-height: calc(var(--text-base-line-height) * var(--comment-leading, 1));
	}
	body.has-frame .comments-side .comments-section .wp-block-comment-date {
		order: 1;
		margin-inline-start: 0;
		color: var(--text-subtle);
	}
	body.has-frame .comments-side .comments-section .wp-block-comment-date::before {
		content: "\00B7";
		margin-inline-end: var(--space-2);
	}
	body.has-frame .comments-side .comments-section .comment-badge {
		order: 2;
		margin-inline-start: auto;
	}
	body.has-frame .comments-side .comments-section .comment-replying-to,
	body.has-frame .comments-side .comments-section .comment-replying-to-name {
		color: var(--text-subtle);
	}
	body.has-frame .comments-side .comments-section .wp-block-comment-content p {
		font-size: var(--text-comment-body); 
		line-height: var(--text-base-line-height);
	}
	:root:is([data-comment-size], [data-comment-members]) body.has-frame .comments-side .comments-section .wp-block-comment-content p {
		font-size: max(var(--text-floor-content), calc(var(--text-comment-body) * var(--comment-size, 1)));
	}
	:root[data-comment-leading] body.has-frame .comments-side .comments-section .wp-block-comment-content p {
		line-height: calc(var(--text-base-line-height) * var(--comment-leading, 1));
	}
	
	body.has-frame .comments-side .comments-section .wp-block-comment-reply-link a {
		--layout-control-height-compact: 28px;
		border-radius: var(--radius-md);
		margin-inline-start: 0;
		color: var(--text-muted);
		text-decoration: none;
	}
	body.has-frame .comments-side .comment-reply-mark {
		display: inline-block;
		width: var(--icon-inline);
		height: var(--icon-inline);
	}
}