/*
* NOTE:
* This file is used to apply our custom theme to Coral
*
* The stylesheet is built by the Origami Build Service
* and the URL for the CSS file is used in Coral Talk
* admin panel as the custom CSS URL.
*
* This is not a normal use case of Origami styles.
*/

@mixin _oCommentsTag() {
	// Non-linked tags and author tags are the same colour as the body copy.
	@if not is-superselector("a", "#{&}") {
		color: oPrivateFoundationGet("o3-color-use-case-body-text");
	}

	font-weight: oPrivateFoundationGet("o3-font-weight-semibold");

	// Apply tag link styles only to anchor elements.
	// e.g. `a.my-author-tag:hover`
	$tag-link-selector: selector-unify("a", "#{&}");
	@at-root #{$tag-link-selector} {
		text-decoration: none;
		border-bottom: 0;

		&:hover {
			color: oPrivateFoundationGet("o3-color-palette-claret");
		}
	}
}

// stylelint-disable selector-class-pattern, declaration-no-important, selector-max-id
@mixin _oCommentsTalkIframe {
	#coral[data-user-not-signed-in="true"] {
		.coral-guidelines,
		.coral-createComment,
		.coral-comment-reactButton,
		.coral-comment-replyButton,
		.coral-featuredComment-reactButton {
			display: none;
		}
		.coral__custom-message-content {
			font-family: var(--font-family-primary);
			font-size: var(--font-size-3);
			font-weight: var(--font-weight-primary-regular);
			background-color: oPrivateFoundationGet("o3-color-palette-wheat");
			border-color: oPrivateFoundationGet("o3-color-palette-wheat");
			border-radius: 0;
			padding: var(--spacing-4);

			h3 {
				margin-bottom: -14px;
				line-height: 1.375;
				font-weight: var(--font-weight-primary-semiBold);
			}

			a {
				@include oPrivateTypographyLink(
					$theme: (
						"base": "teal-40",
						"hover": "teal-30",
					)
				);
			}
		}
	}
	#coral {
		--ft-magnify: 1.1;
		// See https://financialtimes.atlassian.net/jira/software/c/projects/CI/boards/1653?view=detail&selectedIssue=CI-1725
		display: inline-block !important;
		width: 100%;
		.coral-comment-content {
			font-size: 1.05rem;
			line-height: 1.7rem;
		}
	}
	#coral.o-comments-root-font-size-1 {
		--ft-magnify: 1.0666666667;
		.coral-comment-content {
			font-size: 1rem;
			line-height: 1.45rem;
		}
	}
	#coral {
		--font-family-primary: #{inspect(
				oPrivateFoundationGet("o3-font-family-metric")
			)};
		--font-family-secondary: #{inspect(
				oPrivateFoundationGet("o3-font-family-metric")
			)};
		--font-weight-primary-bold: 600;
		--font-weight-primary-semiBold: 500;
		--font-weight-primary-regular: 400;
		--font-weight-secondary-regular: 400;

		--palette-background-body: #{inspect(
				oPrivateFoundationGet("o3-color-palette-paper")
			)};
		--palette-text-500: #{inspect(
				oPrivateFoundationGet("o3-color-palette-black-80")
			)};
		--palette-error-400: #{inspect(
				oPrivateFoundationGet("o3-color-palette-claret-80")
			)};
		--palette-error-800: #{inspect(
				oPrivateFoundationGet("o3-color-palette-claret-70")
			)};
		--palette-error-900: #{inspect(
				oPrivateFoundationGet("o3-color-palette-claret-70")
			)};
		--palette-error-500: #{inspect(
				oPrivateFoundationGet("o3-color-palette-claret-70")
			)};
		--palette-success-500: #{inspect(
				oPrivateFoundationGet("o3-color-palette-teal-50")
			)};
		--palette-success-400: #{inspect(
				oPrivateFoundationGet("o3-color-palette-teal-60")
			)};
		--palette-grey-100: #{inspect(
				oPrivateFoundationGet("o3-color-palette-paper")
			)};
		--palette-grey-200: #{inspect(
				oPrivateFoundationGet("o3-color-palette-paper")
			)};

		--palette-primary-400: #{inspect(
				oPrivateFoundationGet("o3-color-palette-teal-50")
			)};
		--palette-primary-500: #{inspect(
				oPrivateFoundationGet("o3-color-palette-teal-50")
			)};
		--palette-primary-600: #{inspect(
				oPrivateFoundationGet("o3-color-palette-teal-50")
			)};
		--palette-primary-700: #{inspect(
				oPrivateFoundationGet("o3-color-palette-teal-50")
			)};

		--font-size-1: calc(0.75rem * var(--ft-magnify));
		--font-size-2: calc(0.875rem * var(--ft-magnify));
		--font-size-3: calc(1rem * var(--ft-magnify));
		--font-size-4: calc(1.125rem * var(--ft-magnify));
		--font-size-5: calc(1.25rem * var(--ft-magnify));
		--font-size-6: calc(1.5rem * var(--ft-magnify));
		--font-size-7: calc(1.75rem * var(--ft-magnify));
		--font-size-8: calc(2rem * var(--ft-magnify));
		--font-size-9: calc(2.25rem * var(--ft-magnify));

		.coral-guidelines-content h3 {
			margin-bottom: -14px;
		}

		.coral-comment-content {
			font-family: var(--font-family-primary);
			font-style: normal;
			font-weight: var(--font-weight-primary-regular);
			color: var(--palette-text-900);
			word-wrap: break-word;
		}

		.coral-viewerBox {
			display: none;
		}

		// remove divider of the top tab bar
		.coral-tabBar {
			border-bottom-width: 0;

			li:only-child {
				display: none;
			}
		}

		.coral-tabBarSecondary {
			border-bottom-color: oPrivateFoundationGet("o3-color-palette-teal-50");
		}

		// community guidelines box
		.coral-guidelines {
			background-color: oPrivateFoundationGet("o3-color-palette-wheat");
			border-color: oPrivateFoundationGet("o3-color-palette-wheat");
			border-radius: 0;
		}

		.coral-guidelines a {
			@include oPrivateTypographyLink(
				$theme: (
					"base": "teal-40",
					"hover": "teal-30",
				)
			);
		}

		// top tab bar buttons
		.coral-tabBar-comments,
		.coral-tabBar-myProfile,
		.coral-tabBar-configure,
		.coral-tabBar-notifications {
			@include oPrivateButtonsContent(
				$opts: (
					"type": "secondary",
				)
			);
			border-width: 1px;
			padding: 6px 8px;

			// We have to declare this explicitly here because
			// Coral styles override our styles
			&[aria-pressed="true"],
			&[aria-current] {
				color: oPrivateFoundationGet(
					"_o3-button-primary-standard-color"
				) !important;
				background-color: oPrivateFoundationGet(
					"_o3-button-primary-standard-background"
				) !important;
				border-color: oPrivateFoundationGet(
					"_o3-button-primary-standard-border"
				) !important;
				border-top: 1px !important;
				border-bottom: 1px !important;
			}

			&[aria-selected="true"] {
				color: oPrivateFoundationGet(
					"_o3-button-primary-standard-color"
				) !important;
				background-color: oPrivateFoundationGet(
					"_o3-button-primary-standard-background"
				) !important;
				border-top: 1px !important;
				border-bottom: 1px solid
					oPrivateFoundationGet("_o3-button-primary-standard-border") !important;
			}
		}

		// there is a nested div with no static selector that is set to have a height of 24px, which breaks the bar design. this resets it.
		.coral-tabBar-notifications {
			padding: 2px 8px;
		}
		// the other buttons have icons that show up alongside the text at narrower widths, whereas this just has the icon, so the padding needs increased to match them in that situation
		&.coral-width-lt-sm .coral-tabBar-notifications,
		&.coral-width-lte-sm .coral-tabBar-notifications {
			padding: 17px 8px;
		}

		.coral-tabBar-notifications > div[class^="TabBar-notificationsIcon"] {
			height: auto;
		}

		.coral-tabBar-comments div i,
		.coral-tabBar-myProfile div i {
			display: none;
		}

		// comment textarea
		.coral-createComment {
			display: inline-block;
			width: 100%;
		}

		// post comment buttons
		.coral-createComment-submit,
		.coral-commentReply-submit,
		.coral-createComment-signIn,
		.coral-createReplyComment-submit,
		.coral-editComment-submit {
			@include oPrivateButtonsContent(
				$opts: (
					"type": "primary",
				)
			);

			// normally, these should come for free with the button mixin
			// but we have to declare this explicitly here because
			// Coral styles override our styles for some reason
			color: oPrivateFoundationGet(
				"_o3-button-primary-standard-color"
			) !important;
			background-color: oPrivateFoundationGet(
				"_o3-button-primary-standard-background"
			) !important;
			border-color: oPrivateFoundationGet(
				"_o3-button-primary-standard-border"
			) !important;

			&:hover {
				color: oPrivateFoundationGet(
					"_o3-button-primary-standard-color"
				) !important;
				background-color: oPrivateFoundationGet(
					"_o3-button-primary-standard-background"
				) !important;
				border-color: oPrivateFoundationGet(
					"_o3-button-primary-standard-border"
				) !important;
			}
		}

		// cancel buttons
		.coral-createReplyComment-cancel,
		.coral-editComment-cancel,
		.coral-editComment-close {
			@include oPrivateButtonsContent(
				$opts: (
					"type": "secondary",
				)
			);

			color: oPrivateFoundationGet(
				"_o3-button-secondary-standard-color"
			) !important;
			border-color: oPrivateFoundationGet(
				"_o3-button-secondary-standard-border"
			) !important;
			font-size: 12.18pt !important;
			font-family: var(--font-family-primary) !important;

			&:hover {
				color: oPrivateFoundationGet(
					"_o3-button-secondary-standard-color"
				) !important;
				border-color: oPrivateFoundationGet(
					"_o3-button-secondary-standard-border"
				) !important;
				text-decoration: none !important;
			}

			&:disabled {
				pointer-events: none !important;
				opacity: 0.4 !important;
				cursor: default !important;
			}
		}

		// spacing and divider between comments
		.coral-comment {
			padding-bottom: 6px;
			padding-top: 10px;
		}

		// comment author
		.coral-comment-username span,
		.coral-comment-username,
		.coral-comment-inReplyToUsername {
			@include _oCommentsTag();
			font-size: 14px;

			&:hover {
				color: oPrivateFoundationGet("o3-color-palette-black");
			}
		}

		.coral-comment-username span {
			line-height: 1.4;
		}

		// comment buttons
		.coral-comment-reactButton,
		.coral-comment-reactedButton,
		.coral-comment-replyButton,
		.coral-comment-shareButton,
		.coral-comment-reportButton,
		.coral-featuredComment-reactButton,
		.coral-featuredComment-replies {
			font-weight: 400 !important;
			font-size: 14px !important;
			letter-spacing: normal !important;

			&:hover {
				border-color: transparent !important;
			}
			span,
			i {
				color: oPrivateFoundationGet("o3-color-palette-teal-50");
			}
		}

		.coral-featuredComment-replies div {
			color: oPrivateFoundationGet("o3-color-palette-teal-50");
		}

		.coral-comment-replyButton,
		.coral-comment-shareButton {
			// this is required for selected state
			border-color: transparent !important;
			background-color: transparent !important;

			&:hover {
				border-color: transparent !important;
			}
		}

		// report button reported state
		.coral-comment-reportedButton {
			background-color: transparent !important;

			span,
			i {
				padding: 3px 7px;
				border-radius: var(--round-corners);
				font-weight: var(--font-weight-primary-regular);
				pointer-events: none;
			}
		}

		// share comment - copy button
		.coral-sharePopover-copyButotn, // a spelling mistake on Coral side
		.coral-sharePopover-copyButton {
			@include oPrivateButtonsContent(
				$opts: (
					"type": "primary",
				)
			);

			color: oPrivateFoundationGet(
				"_o3-button-primary-standard-color"
			) !important;
			background-color: oPrivateFoundationGet(
				"_o3-button-primary-standard-background"
			) !important;
			border-color: oPrivateFoundationGet(
				"_o3-button-primary-standard-border"
			) !important;

			&:hover {
				color: oPrivateFoundationGet(
					"_o3-button-primary-standard-color"
				) !important;
				background-color: oPrivateFoundationGet(
					"_o3-button-primary-standard-background"
				) !important;
				border-color: oPrivateFoundationGet(
					"_o3-button-primary-standard-border"
				) !important;
				font-weight: var(--font-weight-primary-regular) !important;
			}
		}

		// xx hours ago
		.coral-myComment-timestamp,
		.coral-myComment-timestamp span,
		.coral-comment-timestamp,
		.coral-comment-timestamp span {
			color: oPrivateFoundationGet("o3-color-palette-black-80");
			font-family: oPrivateFoundationGet("o3-type-label-font-family");
			font-size: oPrivateFoundationGet("o3-type-label-font-size");
			line-height: oPrivateFoundationGet("o3-type-label-line-height");
			text-transform: oPrivateFoundationGet("o3-type-label-text-case");
			margin-bottom: 0;
		}

		// "staff" tag
		.coral-comment-userTag {
			background-color: oPrivateFoundationGet("o3-color-palette-claret-70");
			color: oPrivateFoundationGet("o3-color-palette-white");
		}

		// "featured comment" tag
		.coral-comment-commentTag {
			background-color: oPrivateFoundationGet(
				"o3-color-palette-black"
			) !important;
			color: oPrivateFoundationGet("o3-color-palette-white") !important;
			border-radius: 0;
			border: 0 !important;
		}

		// comment content blockquote
		.coral-rte-content blockquote,
		.coral-comment-content blockquote,
		.coral-myComment-content blockquote {
			background-color: oPrivateFoundationGet("o3-color-palette-wheat");
			font-size: 14px !important;
		}

		// load more buttons
		.coral-allComments-loadMoreButton,
		.coral-featuredComments-loadMoreButton,
		.coral-myComments-loadMoreButton {
			@include oPrivateButtonsContent(
				$opts: (
					"type": "secondary",
				)
			);
			color: oPrivateFoundationGet(
				"_o3-button-secondary-standard-color"
			) !important;
			border-color: oPrivateFoundationGet(
				"_o3-button-secondary-standard-border"
			) !important;
			border-radius: 0 !important;

			background-color: oPrivateFoundationGet(
				"_o3-button-secondary-standard-background"
			) !important;
		}

		// featured comments
		.coral-featuredComment {
			border-color: oPrivateFoundationGet("o3-color-palette-wheat");
			background-color: oPrivateFoundationGet("o3-color-palette-wheat");
		}

		// edit button
		.coral-comment-editButton {
			@include oPrivateButtonsContent(
				$opts: (
					"type": "secondary",
				)
			);

			border-color: oPrivateFoundationGet(
				"_o3-button-secondary-standard-border"
			) !important;

			&:hover {
				color: oPrivateFoundationGet(
					"_o3-button-secondary-standard-color"
				) !important;
			}
		}

		// reply indent

		// Unfortunately at the moment it looks like there is a bug in Corals code
		// I believe there should be a .coral-indent class we could use here
		// If this is fixed in the future we can reduce this to a single selector
		.coral-comment .coral-indent-1,
		.coral-comment .coral-indent-2,
		.coral-comment .coral-indent-3,
		.coral-comment .coral-indent-4,
		.coral-comment .coral-indent-5,
		.coral-comment .coral-indent-6 {
			border-width: 0 0 0 2px;
			border-image: url("https://images.ft.com/v3/image/raw/https%3A%2F%2Fs3-eu-west-1.amazonaws.com%2Fft-next-assets-prod%2Fassets%2Fcomments%2Fborder-dots.svg?source=origami&format=svg");
			border-image-slice: 30%;
			border-image-repeat: round;
		}

		// Replies aren't nested inside each other so each level needs a greater margin
		// There are reply levels from 1 - 6 so we loop over these are produce styles for 2 breakpoints
		// Smaller screens have a smaller indentation than larger screens

		@for $index from 1 through 6 {
			$baseIndent: 20;
			$largeBaseIndent: 44;

			// Example
			// .coral-indent-1 will have 20px left margin
			// .coral-indent-2 will have a 40px left margin

			.coral-comment .coral-indent-#{$index} {
				margin-left: unquote(($baseIndent * $index) + "px");
			}

			// We aren't using o-grid breakpoints because these styles are used within an iframe
			// Which means the width of the document can be controlled by the parent document
			// So the o-grid named sizes (s,m,l) would be confusing in this case

			@media (min-width: 500px) {
				.coral-comment .coral-indent-#{$index} {
					margin-left: unquote(($largeBaseIndent * $index) + "px");
				}
			}
		}

		// replying to: <<user name>>
		.coral-createReplyComment-replyToUsername {
			@include _oCommentsTag();

			font-size: 14px;

			&:hover {
				color: oPrivateFoundationGet("o3-color-use-case-body-text");
			}
		}

		// In reply to <<author>>
		.coral-comment-inReplyToUsername {
			&:hover {
				color: oPrivateFoundationGet("o3-color-palette-black-50");
			}
		}

		// verify email resend button
		.coral-verifyEmail-resendButton {
			&:hover {
				color: oPrivateFoundationGet(
					"_o3-button-secondary-standard-color"
				) !important;
			}
		}

		// verify email - message sent
		.coral-verifyEmail-resentMessage {
			background-color: oPrivateFoundationGet("o3-color-palette-wheat");
			border-color: oPrivateFoundationGet("o3-color-palette-wheat");
		}

		// my comment - view conversation
		// featured comment - go to conversation button
		.coral-myComment-viewConversationButton,
		.coral-myComments-viewConversationButton,
		.coral-myComment-viewConversationButton,
		.coral-myComments-viewConversationButton,
		.coral-featuredComment-goToConversationButton {
			@include oPrivateTypographyLink;

			color: oPrivateFoundationGet("o3-color-use-case-link-text") !important;

			&:hover {
				color: oPrivateFoundationGet(
					"o3-color-use-case-link-text-hover"
				) !important;
			}
		}

		.coral-createComment-message a,
		.coral-createComment-message h1,
		.coral-createComment-message h2,
		.coral-createComment-message h3,
		.coral-createComment-message h4,
		.coral-createComment-message h5,
		.coral-createComment-message h6,
		.coral-configureMessageBox-messageBox a,
		.coral-configureMessageBox-messageBox h1,
		.coral-configureMessageBox-messageBox h2,
		.coral-configureMessageBox-messageBox h3,
		.coral-configureMessageBox-messageBox h4,
		.coral-configureMessageBox-messageBox h5,
		.coral-configureMessageBox-messageBox h6 {
			color: inherit;
		}

		.coral-selectField {
			background: oPrivateFoundationGet("o3-color-palette-paper");
			border-radius: 0;
		}

		.coral-rte-container {
			background: white;
		}

		.coral-rte-toolbar {
			background: white;

			border-top: 1px solid var(--palette-grey-400);
		}

		.coral-commentForm {
			border-style: solid;
			border-width: 1px;
			border-color: var(--palette-grey-400);
			border-radius: 0;
		}

		.coral-createReplyComment-replyTo {
			background-color: oPrivateFoundationGet("o3-color-palette-paper");
		}

		.coral-createReplyComment-replyTo {
			color: var(--palette-grey-500);

			border-bottom-width: 0;
			border-color: var(--palette-grey-400);
			border-radius: 0;
		}

		.coral-createComment-message,
		.coral-configureMessageBox-messageBox {
			background: var(--palette-text-500);
		}

		.coral-selectField {
			background: white !important;
			font-weight: var(--font-family-primary-regular) !important;
		}

		.coral-comment-userTag,
		.coral-rootParent-userTag {
			font-size: var(--font-size-1) !important;
			line-height: 1.2 !important;
		}

		.coral-counter {
			padding-top: 0 !important;
			padding-bottom: 0 !important;
		}

		.coral-comment-commentTag {
			padding: 2px 6px !important;
			font-size: var(--font-size-1) !important;
		}

		.coral-createReplyComment-replyToText {
			color: var(--palette-grey-500) !important;
		}

		.coral-comment-inReplyToText {
			font-weight: var(--font-weight-primary-regular) !important;
		}

		.coral-comment-reportButton[aria-pressed="true"] {
			color: var(--palette-text-000) !important;
			background: var(--palette-primary-500) !important;
			border: 0;
			& span,
			& i {
				color: var(--palette-text-000) !important;
			}
		}

		.coral-featuredComment-content {
			font-size: var(--font-size-3) !important;
		}

		.coral-replyList-showAllButton[disabled],
		.coral-replyList-showMoreButton[disabled] {
			pointer-events: none;
			opacity: 0.4;
			cursor: default;
		}

		.coral-replyList-showAllButton:hover,
		.coral-replyList-showMoreButton:hover {
			border-color: var(--palette-grey-400) !important;
			color: var(--palette-grey-400) !important;
			background: none !important;
		}
	}
}