/// Output All oComments Features
@mixin oComments($opts: ("coral-talk-iframe": true,
	)) {
	@include oPrivateFoundation();

	@if map-get($opts, coral-talk-iframe) {
		@include _oCommentsTalkIframe();
	}

	.o-comments__staging-message-container {
		margin-bottom: oPrivateSpacingByName("s2");
		padding: 0;
	}

	.o-comments__staging-message-content {
		padding-top: oPrivateSpacingByName("s1");
		padding-bottom: oPrivateSpacingByName("s1");
		background-color: oPrivateFoundationGet("o3-color-palette-claret-80");
	}

	.o-comments__staging-message {
		color: white;
		font-weight: bold;
		padding-left: oPrivateSpacingByName("s4");
	}

	.o-comments__signed-in-text {
		@include oPrivateTypographySans($scale: 0);
	}

	.o-comments__signed-in-inner-text {
		@include oPrivateTypographySans($scale: 2);
		font-weight: bold;
	}

	.o-comments__signed-in-container {
		margin-bottom: oPrivateSpacingByName("s6");
	}

	.o-comments__edit-display-name {
		@include oPrivateButtonsContent($opts: ("type": "primary",
				"icon": "edit",
			));

		margin-left: oPrivateSpacingByName("s2");
	}

	.o-comments__edit-display-name-descriptive {
		@include oPrivateNormaliseVisuallyHidden();
	}

	.o-overlay.o-comments__displayname-prompt {
		background: oPrivateFoundationGet("o3-color-palette-paper");
		padding: 10px;
		width: 100%;
		max-width: 400px;

		.o-overlay__title {
			margin: 5px 10px 10px;
			line-height: 25px;
			font-family: MetricWeb;
			font-size: 20px;
			font-weight: bold;
		}

		.o-comments__displayname-form {
			padding-right: 0px;
			padding-left: 0px;
		}

		.o-comments__displayname-container {
			margin-top: oPrivateSpacingByName("s2");
			@include oPrivateGridRespondTo(M) {
				display: grid;
				grid-template-columns: 1fr auto;
				gap: 15px;
			}
		}

		.o-comments__displayname-field {
			@include oPrivateNormaliseVisuallyHidden();
		}

		.o-comments__displayname-input {
			width: 100%;
			margin-top: 0;
			margin-bottom: oPrivateSpacingByName("s3");
		}

		.o-comments__displayname-submit {
			@include oPrivateButtonsContent($opts: ("type": "primary",
				));
			max-height: 44px;
			width: 100%;
		}

		.o-comments__displayname-error {
			margin: 0;
		}
	}
}

/// Provide a component specific error message
///
/// @param {String} $message - The message to insert in the error.
/// @access Private
@mixin _oComments($message) {
	@error '*** oComments SCSS error: #{$message} ***';
}