@import "../../common/css/variables";
@import "../../common/css/functions";

.wp-parsely-block-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(255, 255, 255, 0.85);
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	font-size: to_rem(18px);

	.wp-parsely-block-overlay-label {
		flex-grow: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		pointer-events: none;
		user-select: none;
		gap: var(--grid-unit-10);
		width: var(--grid-unit-10);
	}

	.wp-parsely-block-overlay-cancel {
		pointer-events: all;
		z-index: 10;
		user-select: none;
		padding: 0;
		font-size: to_rem(18px);

		&:focus {
			outline: none;
			box-shadow: none;
		}
	}

	svg {
		width: to_rem(25px);
		height: to_rem(25px);
	}

	&.full-content-overlay {
		z-index: 999;
		font-size: to_rem(20px);

		span {
			margin-top: to_rem(15px);
		}

		svg {
			width: to_rem(50px);
			height: to_rem(50px);
		}
	}
}

// Parse.ly icon appearing in Block settings.
.wp-parsely-panel .components-panel__icon {
	height: to_rem(24px);
	margin: 0 var(--grid-unit-15) 0 0;
	order: -1;
	width: to_rem(24px);
}

.wp-parsely-smart-linking {

	/* Override the default block inspector styles for the panel. */
	.components-panel__row {
		flex-direction: column;
		margin-bottom: 0;
	}

	.components-base-control {
		margin-bottom: 0;

		&:last-child {
			margin-bottom: 0;
		}

		.components-panel__row {
			margin-bottom: 0;
		}
	}

	.smart-linking-text {
		display: flex;
		padding: to_rem(6px) 0 var(--grid-unit-20) 0;
		flex-direction: column;
		align-items: flex-start;
		gap: to_rem(10px);
		align-self: stretch;
	}

	.parsely-panel-settings {
		width: 100%;
	}

	.parsely-panel-settings-body {
		display: flex;
		padding: to_rem(6px) 0 var(--grid-unit-20) 0;
		flex-direction: column;
		gap: to_rem(10px);

		.smart-linking-block-select {
			display: flex;
			padding: to_rem(6px) 0 var(--grid-unit-20) 0;
			flex-direction: column;
			gap: to_rem(24px);
			align-self: stretch;

			.components-toggle-group-control {
				height: 40px;

				/**
				 * Workaround for the ToggleGroupControl animation:
				 * Prevents the animation from exiting the container.
				 */
				overflow: hidden;

				/**
				 * Workaround animation bug with ToggleGroupControl.
				 * This works by setting the button background to transparent and
				 * then setting the active item background to the sidebar black color.
				 * The background should only pop-up as visible after 0.5s, therefore
				 * hiding any janky animation.
				 */
				button {
					background: transparent;
					outline: transparent solid 2px;
					outline-offset: -3px;

					&[data-active-item] {
						background: var(--sidebar-black);
						transition:
							background 0s 0.5s,
							border-radius 0s 0.5s,
							box-shadow 0s 0.5s,
							color 0.2s 0.1s;
						box-shadow: 0 -3px 0 0 #fff, 0 3px 0 0 #fff;
						border-radius: 3px;
					}

					&:not([data-active-item]) {
						transition: color 0.2s 0.1s;
					}
				}
			}
		}

		.smart-linking-settings {
			display: flex;
			flex-direction: column;
			gap: var(--grid-unit-20);
			align-self: stretch;
		}

	}

	.smart-linking-generate {
		display: flex;
		padding: to_rem(6px) 0 var(--grid-unit-20) 0;
		flex-direction: column;
		align-self: stretch;

		/* stylelint-disable-next-line no-descending-specificity */
		button {
			display: flex;
			align-items: center;
			align-self: stretch;
			width: 100%;
			justify-content: center;
		}
	}

	.wp-parsely-smart-linking-suggested-links {
		margin: 0;
	}

	.wp-parsely-smart-linking-hint {
		margin-top: calc(var(--grid-unit-10) * -1);
	}
}
