/*
 * Citizen
 *
 * SkinStyles for Extension:Popups
 * Module: ext.popups.main
 * Version: REL1_39 a40ebc1
 *
 * Date: 2022-11-28
*/

/* popup.less */
.mwe-popups {
	// See FIXME below
	// border-radius: var( --border-radius--medium );
	background: var( --color-surface-1 );
	box-shadow: var( --box-shadow-dialog );

	.mwe-popups-container {
		color: var( --color-base );
	}

	.mwe-popups-settings-icon {
		border-radius: var( --border-radius--small );
		opacity: var( --opacity-icon-base );

		&:hover {
			background-color: var( --background-color-quiet--hover );
			opacity: var( --opacity-icon-base--hover );
		}

		&:active {
			background-color: var( --background-color-quiet--active );
			opacity: var( --opacity-icon-base--active );
		}
	}

	.mwe-popups-extract {
		color: var( --color-base );

		&[ dir='ltr' ]:after {
			/* @noflip */
			background-image: linear-gradient( to right, transparent, var( --color-surface-1 ) 50% );
		}

		&[ dir='rtl' ]:after {
			/* @noflip */
			background-image: linear-gradient( to left, transparent, var( --color-surface-1 ) 50% );
		}

		blockquote:after {
			/* @noflip */
			background-image: linear-gradient( to bottom, transparent, var( --color-surface-1 ) 75% );
		}

		&.mwe-popups-type-generic,
		&.mwe-popups-type-disambiguation {
			.mwe-popups-read-link {
				font-weight: var( --font-weight-semibold );
			}
		}

		&.mwe-popups-no-image-pointer {
			&:before {
				border-bottom-color: var( --border-color-base );
			}

			&:after {
				border-bottom-color: var( --color-surface-1 );
			}
		}

		&.mwe-popups-image-pointer {
			&:before {
				border-bottom-color: var( --border-color-base );
			}

			&:after {
				border-bottom-color: var( --color-surface-1 );
			}

			&.flipped-x {
				&:before {
					border-bottom-color: var( --border-color-base );
				}

				&:after {
					border-bottom-color: var( --color-surface-1 );
				}
			}
		}

		&.flipped-x.mwe-popups-is-tall {
			&:before {
				border-bottom-color: var( --border-color-base );
			}
		}

		&.flipped-x-y {
			&:before {
				border-top-color: var( --border-color-base );
			}

			&:after {
				border-top-color: var( --color-surface-1 );
			}

			&.mwe-popups-is-tall {
				&:before {
					border-top-color: var( --border-color-base );
				}

				&:after {
					border-top-color: var( --color-surface-1 );
				}
			}
		}

		&.flipped-y {
			&:before {
				border-top-color: var( --border-color-base );
			}

			&:after {
				border-top-color: var( --color-surface-1 );
			}
		}
	}

	/* preview.less */
	.mwe-popups-title {
		font-weight: var( --font-weight-semibold );
	}

	/* referencePreview.less */
	&.mwe-popups-type-reference {
		.mwe-popups-extract {
			.mwe-popups-fade {
				background-image: linear-gradient( transparent, var( --color-surface-1 ) );
			}
		}

		.mwe-collapsible-placeholder {
			font-weight: var( --font-weight-semibold );
		}
	}
}

@supports ( clip-path: polygon( 1px 1px ) ) {
	.mwe-popups {
		.mwe-popups-container {
			background: var( --color-surface-1 );
			// FIXME: Come up with a clip path that works with increased border radius
			// Popups is using polygon to clip the card
			// So the thumbnail corner would look weird if we adjust the border radius
			// --pseudo-radius: var( --border-radius--medium );
		}
	}
}

/* settingsDialog.less */
#mwe-popups-settings {
	border-color: var( --border-color-base );
	border-radius: var( --border-radius--medium );
	background: var( --color-surface-1 );
	box-shadow: var( --box-shadow-dialog );

	header {
		border-bottom-color: var( --border-color-base );

		h1 {
			font-family: var( --font-family-base );
			font-weight: var( --font-weight-semibold );
		}
	}

	.mwe-ui-icon-popups-close {
		opacity: var( --opacity-icon-base );

		&:hover {
			opacity: var( --opacity-icon-base--hover );
		}

		&:active {
			opacity: var( --opacity-icon-base--active );
		}
	}

	main#mwe-popups-settings-form {
		p {
			color: var( --color-base--subtle );
		}

		form {
			label {
				> span {
					color: var( --color-base--emphasized );
					font-weight: var( --font-weight-semibold );
				}
			}
		}
	}
}

/* settingsDialogRenderer.less */
.mwe-popups-overlay {
	background-color: var( --background-color-overlay );
}