@import '@wordpress/base-styles/breakpoints';
@import '@wordpress/base-styles/mixins';
@import '@wordpress/base-styles/variables';

.signup-wrapper {
	display: flex;
	background-color: var( --color-surface );
	border-radius: 16px;

	@include break-small {
		padding: 16px;
		margin: 16px;
		height: 90vh;
	}

	.signup-wrapper__left {
		display: none;
		position: relative;
		background-color: var( --color-neutral-0 );
		background-image: url( calypso/assets/images/a8c-for-agencies/signup-sidebar-bg-light.svg );
		background-repeat: no-repeat;
		background-position: 50% 50px;
		background-size: 80% auto;
		padding: 32px;
		width: 320px;
		border-radius: 16px;
		margin-right: 32px;
		align-items: flex-start;
		max-width: 30%;

		@include break-xlarge {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
		}
	}

	.signup-wrapper__logo {
		margin-block-start: 1rem;
	}

	.signup-wrapper__sidebar-image {
		position: relative;
		left: 50%;
		transform: translateX( -50% );
		top: -3rem;
		max-width: 100%;
		height: auto;

		rect {
			fill: var( --color-neutral-0 );
		}

		@media ( prefers-color-scheme: dark ) {
			circle {
				stroke: #022836;
			}
		}
	}

	.signup-wrapper__testimonial-wrapper {
		margin: -32px;
		padding: 32px;
		background-color: var( --color-neutral-0 );
		border-radius: 16px;
	}

	.signup-wrapper__testimonial {
		color: var( --color-text );
		padding: 24px;
		background: var( --color-surface );
		border-radius: 16px;
		box-shadow: 0 2px 4px rgba( 0, 0, 0, 0.05 );
		position: relative;
		top: -1rem;

		.signup-wrapper__testimonial-text {
			@include body-large;
			margin-bottom: 24px;
			color: var( --color-text );
		}

		.signup-wrapper__testimonial-author {
			display: flex;
			align-items: center;
			gap: 12px;
		}

		.signup-wrapper__testimonial-avatar {
			width: 48px;
			height: 48px;
			border-radius: 50%;
		}

		.signup-wrapper__testimonial-info {
			@include body-large;
			display: flex;
			flex-direction: column;
			gap: 4px;
		}

		.signup-wrapper__testimonial-name {
			@include heading-large;
			color: var( --color-text );
		}

		.signup-wrapper__testimonial-title {
			@include heading-large;
			color: var( --color-text );
		}
	}

	.signup-wrapper__right {
		flex: 1;
		padding: 24px;
		background: inherit;
		border-radius: 4px;
		overflow-y: auto;
		max-height: 100%;
		scrollbar-width: thin;
		scrollbar-gutter: stable;

		/* Custom scrollbar styling for webkit browsers */
		&::-webkit-scrollbar {
			width: 8px;
			background-color: transparent;
		}

		&::-webkit-scrollbar-thumb {
			background-color: var( --color-neutral-10 );
			border-radius: 4px;

			&:hover {
				background-color: var( --color-neutral-20 );
			}
		}

		&::-webkit-scrollbar-track {
			background-color: transparent;
		}

		@include break-medium {
			padding: 48px 48px 8px;
		}
	}

	@media ( prefers-color-scheme: dark ) {
		background-color: #021b24;

		.signup-wrapper__left {
			background-image: url( calypso/assets/images/a8c-for-agencies/signup-sidebar-bg-dark.svg );
			background-color: #022836;
		}

		.signup-wrapper__logo {
			fill: var( --color-surface );
		}

		.signup-wrapper__sidebar-image {
			rect {
				fill: #022836;
			}
		}

		.signup-wrapper__testimonial-wrapper {
			background-color: #022836;
		}

		.signup-wrapper__testimonial {
			color: var( --color-surface );
			background: #02506e;
			box-shadow: 0 4px 12px rgba( 0, 0, 0, 0.3 );
			backdrop-filter: blur( 8px );

			.signup-wrapper__testimonial-text {
				color: var( --color-neutral-0 );
			}

			.signup-wrapper__testimonial-avatar {
				background: var( --color-neutral-50 );
			}

			.signup-wrapper__testimonial-name {
				color: var( --color-surface );
			}

			.signup-wrapper__testimonial-title {
				color: var( --color-surface );
			}

			.signup-wrapper__testimonial-url {
				color: var( --color-surface );

				&:visited {
					color: var( --color-surface );
				}
			}
		}

		.signup-wrapper__right {
			&::-webkit-scrollbar-thumb {
				background-color: rgba( 255, 255, 255, 0.2 );

				&:hover {
					background-color: rgba( 255, 255, 255, 0.3 );
				}
			}
		}
	}
}

.blueprint-form__radio-group {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.blue-print-form__radio {
	cursor: pointer;
	padding-block: 4px;

	.form-radio__label {
		@include body-medium;
	}
}
