.wp-block-buttons.is-style-pill {
	border-radius: 31px;
	background: var(--gray-100);
	padding: var(--spacing-3);
	width: fit-content;
  max-width: 100%;
  gap: var(--spacing-3);

	&.is-content-justification-center {
		margin-inline: auto;
	}

	.wp-block-button__link {
		padding: var(--spacing-10) var(--spacing-20);
		box-shadow: none;
		background: var(--white);
		color: var(--gray-400);

		&.tabbed-content__button--active {
			background-image: var(--wp--preset--gradient--purple);
			color: var(--white);
		}
	}
}

.wp-block-cover.is-style-flower {
	margin-bottom: var(--spacing-20);
	overflow: visible;

	&::after {
		background-image: url('../../images/flower.png');
		background-repeat: no-repeat;
		background-size: contain;
		background-position: center;
		content: '';
		position: absolute;
		bottom: calc(-1 * var(--spacing-20));
		right: 0;
		max-width: 500px;
		width: 50%;
		height: 50%;
	}
}

.esab__body > *:last-child {
	margin-bottom: 0;
}

.esab__body {
	/* biome-ignore lint/complexity/noImportantStyles: override block styles */
	margin-top: -1.5em !important;
}

.wp-block-media-text__media img {
	border-radius: var(--border-radius);
	box-shadow: 0 11px 85px -17px rgba(168, 173, 183, 0.80);
}

.wp-block-media-text.is-style-circles-1 {
	--circle-1-size: 100px;
	--circle-2-size: 40px;

	@media (width > 768px) {
		--circle-1-size: 230px;
		--circle-2-size: 70px;
	}

	position: relative;

	&::after {
		content: '';
		position: absolute;
		width: var(--circle-1-size);
		height: var(--circle-1-size);
		background-color: var(--blue-450);
		border-radius: 9999px;
		left: calc(var(--circle-1-size) / 2);
		top: calc(var(--circle-1-size) / -4);
		z-index: -1;
		opacity: 0.2;
	}

	&.has-media-on-the-right {
		&::after {
			right: calc(var(--circle-1-size) / 2);
			left: auto;
		}

		.wp-block-media-text__media::before {
			left: var(--circle-2-size);
			right: auto;
		}
	}

	.wp-block-media-text__media {
		position: relative;

		&::before {
			content: '';
			position: absolute;
			right: var(--circle-2-size);
			width: var(--circle-2-size);
			height: var(--circle-2-size);
			background-color: var(--purple-500);
			border-radius: 9999px;
			bottom: calc(var(--circle-2-size) / -2);
			z-index: 1;
		}
	}
}

.wp-block-media-text.is-style-circles-2 {
	--circle-1-size: 100px;
	--circle-2-size: 40px;
	--circle-3-size: 15px;


	@media (width > 768px) {
		--circle-1-size: 230px;
		--circle-2-size: 90px;
		--circle-3-size: 35px;
	}

	position: relative;

	&::after {
		content: '';
		position: absolute;
		width: var(--circle-1-size);
		height: var(--circle-1-size);
		background-color: var(--purple-300);
		border-radius: 9999px;
		left: calc(var(--circle-1-size) / 2);
		bottom: calc(var(--circle-1-size) / -4);
		z-index: -1;
		opacity: 0.2;
	}

	&.has-media-on-the-right {
		&::after {
			right: calc(var(--circle-1-size) / 2);
			left: auto;
		}

		.wp-block-media-text__content::before {
			left: calc(var(--circle-2-size) * -1 + 10px);
			right: auto;
		}

		.wp-block-media-text__content::after {
			left: calc(var(--circle-3-size) / -2);
			right: auto;
		}
	}

	.wp-block-media-text__content {
		&::before {
			content: '';
			position: absolute;
			right: calc(var(--circle-2-size) * -1 + 10px);
			width: var(--circle-2-size);
			height: var(--circle-2-size);
			background-color: var(--gray-400);
			border-radius: 9999px;
			top: var(--circle-2-size);
			z-index: -1;
			opacity: 0.05;
		}

		&::after {
			content: '';
			position: absolute;
			right: calc(var(--circle-3-size) / -2);
			width: var(--circle-3-size);
			height: var(--circle-3-size);
			background-color: var(--blue-500);
			border-radius: 9999px;
			top: calc(var(--circle-2-size) - 5px);
			z-index: -1;
			opacity: 0.05;
		}
	}
}

.wp-block-media-text.is-style-circles-3 {
	--circle-1-size: 75px;
	--circle-2-size: 30px;


	@media (width > 768px) {
		--circle-1-size: 170px;
		--circle-2-size: 70px;
	}

	.wp-block-media-text__media {
		position: relative;

		&::before {
			content: '';
			position: absolute;
			right: calc(var(--circle-2-size) / -3);
			width: var(--circle-2-size);
			height: var(--circle-2-size);
			background-color: var(--blue-500);
			border-radius: 9999px;
			top: var(--spacing-10);
			z-index: 1;
		}

		&::after {
			content: '';
			position: absolute;
			width: var(--circle-1-size);
			height: var(--circle-1-size);
			background-color: var(--purple-300);
			border-radius: 9999px;
			left: calc(var(--circle-1-size) / -2);
			top: calc(var(--circle-1-size) / 2);
			z-index: -1;
			opacity: 0.2;
		}
	}

	&.has-media-on-the-right .wp-block-media-text__media::before {
		left: calc(var(--circle-2-size) / -3);
		right: auto;
	}

	&.has-media-on-the-right .wp-block-media-text__media::after {
		@media (width < 1640px) {
			display: none;
		}

		right: calc(var(--circle-1-size) / -2);
		left: auto;
	}
	}
}

.wp-block-media-text:not(.has-media-on-the-right)>.wp-block-media-text__content {
	@media (width > 600px) {
		padding-inline-end: 0;
	}
}

.wp-block-media-text.has-media-on-the-right>.wp-block-media-text__content {
	@media (width > 600px) 	{
		padding-inline-start: 0;
	}
}

.wp-block-list.is-style-checkmarks-purple {
	list-style-type: none;
	padding-left: 0;

	li {
		display: flex;
		align-items: center;
		gap: var(--spacing-5);

		&::before {
			content: '';
			width: 20px;
			height: 20px;
			background-image: url('../../images/check-purple.svg');
			background-size: contain;
			background-repeat: no-repeat;
			transform: translateY(2px);
		}
	}
}

.has-moved-button {
	.wp-block-media-text__media {
		display: flex;
		flex-direction: column;
	}

	.wp-block-buttons {
		margin-inline: auto;
		transform: translateY(-50%);
	}

	.wp-block-button__link {
		padding-inline: var(--spacing-40);
	}
}

.wp-block-button.is-style-chevron {
	.wp-block-button__link {
		display: flex;
		justify-content: space-between;
		align-items: center;
		text-align: left;
		padding-right: var(--spacing-3);
		padding-block: var(--spacing-3);
		gap: var(--spacing-5);

		@media (width > 768px) {
			gap: var(--spacing-10);
		}

		&::after {
			content: url('../../images/chevron-blue.svg');
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: var(--white);
			border-radius: 999px;
			aspect-ratio: 1 / 1;
			width: 100%;
			height: 20px;

			@media (width > 768px) {
				width: 50px;
				height: 50px;
			}
		}
	}
}

.post-password-form {
	padding-block: var(--spacing-20);

	p:last-child {
		display: flex;
		border-radius: var(--btn-radius);
		border: 1px solid var(--gray-200);
		background: var(--white);
		max-width: 450px;
		position: relative;
	}

	label {
		font-size: 0;
		margin-bottom: 0;
		width: calc(100% - 110px);
	}

	input[type="password"][name="post_password"] {
		background: transparent;
		border-radius: var(--btn-radius);
		border: 0;
		padding: var(--spacing-10);
		margin-inline-end: calc(var(--spacing-10) * -3);
		max-width: none;
		font-size: var(--font-size);
	}

	input[type="submit"] {
		min-width: auto;
		box-shadow: none;
		position: absolute;
		inset: 0 0 0 auto;
		margin: 0;
		height: 100%;
		display: flex;
		align-items: center;
		border-radius: var(--btn-radius);
		transition: background-image 0.3s ease, color 0.3s ease;
		font-weight: 600;
		text-decoration: none;
		background-image: var(--wp--preset--gradient--blue);
		color: var(--white);
		padding: var(--spacing-5) var(--spacing-10);
		font-size: 1.125rem;
		@media (width > 768px) {
			padding: var(--spacing-10) var(--spacing-20);
		}

		&:hover,
		&:focus-visible {
			background-image: linear-gradient(var(--blue-250));
			color: var(--white);
		}
	}
}