@use "../features/features.colors";

[class^="jetpack-ai-breve__has-proofread-highlight"] {
	transition: background-color;
	transition-duration: 0.3s;
	border-bottom: 3px solid;

	@include features.features-colors( ( "border-bottom-color" ) );

	&.jetpack-ai-breve__is-loading {

		@include features.pulse();
	}

	&.jetpack-ai-breve__highlight-hovered {

		@include features.features-colors( ( "background-color" ), 0.2 );
	}
}

.jetpack-ai-breve__highlight-popover {
	color: #000;
	cursor: default;
	font-size: 13px;
	font-style: normal;
	font-weight: 400;
	line-height: 18px;
	width: auto;

	.jetpack-ai-breve__highlight-content {
		align-items: center;
		display: flex;
		flex-direction: column;

		&.jetpack-ai-breve__has-suggestions {
			align-items: flex-start;

			.jetpack-ai-breve__suggestions-container {
				max-height: calc(200px - 32px); // 32px is the height of the helper buttons wrapper
				overflow-y: auto;
				overflow-x: hidden;
				padding: 3px 0; // Space for the focus highlight
			}
		}

		.jetpack-ai-breve__header-container {
			display: flex;
			width: 100%;
			justify-content: space-between;
			gap: 32px;
			height: 40px;

			.jetpack-ai-breve__title,
			.jetpack-ai-breve__action {
				padding: 8px 12px;
			}

			.jetpack-ai-breve__title {
				display: flex;
				align-items: center;
				justify-content: flex-start;
				gap: 8px;
				font-size: 14px;
				font-weight: 500;
				white-space: nowrap;

				.jetpack-ai-breve__color {
					width: 10px;
					height: 10px;
					border-radius: 50%;

					@include features.features-colors( ( "background-color" ) );
				}
			}

			.jetpack-ai-breve__action {
				font-size: 13px;
				display: flex;
				align-items: center;
				justify-content: flex-end;
				gap: 4px;

				.jetpack-ai-breve__suggest.components-button {
					padding-top: 0;
					padding-bottom: 0;
					padding-right: 0;
					height: 24px;

					> svg,
					path {
						fill: #0277a8;
					}
				}

				.jetpack-ai-breve__loading {
					height: 24px;
					display: flex;
					align-items: center;

					svg {
						margin-top: 0;
					}
				}
			}
		}

		.jetpack-ai-breve__suggestions-container {
			display: flex;
			flex-direction: column;
			border-top: 1px solid #dcdcde;
			width: 100%;

			.jetpack-ai-breve__spelling-suggestion {

				+ .jetpack-ai-breve__spelling-suggestion {
					border-top: 1px solid #dcdcde;
				}

				&.components-button.is-tertiary {
					padding: 8px 12px;
				}
			}

			.components-button.is-tertiary {
				color: #000;
				white-space: break-spaces;
				min-height: 36px;
				height: unset;
				min-width: 320px;
				text-align: unset;
				padding-top: 16px;
				padding-bottom: 16px;
				line-height: 20px;
			}
		}

		.jetpack-ai-breve__helper {
			padding: 4px 8px;
			background-color: #f6f7f7;
			white-space: nowrap;
			color: #646970;
			margin: 4px;
			border-radius: 4px;
			font-size: 12px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			gap: 8px;
			width: calc(100% - 8px);

			.jetpack-ai-breve__helper-buttons-wrapper {
				display: flex;
				gap: 16px;
			}

			.jetpack-ai-breve__helper-inner {
				display: flex;
				gap: 8px;
			}

			.components-button {
				padding: 0;
				color: #646970;
			}

			.ai-assistant-feedback {

				&__selection {

					.components-button:not(:disabled):hover {
						color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
					}
				}

				&__thumb-selected {
					color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
				}
			}
		}
	}
}
