@import ( reference ) 'mediawiki.skin.variables.less';

.ext-checkuser-temp-account-onboarding-dialog {
	// Allow the images shown in the dialog to have no padding, but make all other content have padding.
	/* stylelint-disable-next-line selector-class-pattern */
	.cdx-dialog__body {
		padding: 0;
	}

	.ext-checkuser-temp-account-onboarding-dialog-main-body {
		padding: @spacing-100 @spacing-150;
	}

	// Make the images appropriately tall so that they fully display.
	.ext-checkuser-temp-account-onboarding-dialog-image {
		background-color: #f4f9ff;
		height: 250px;
		background-position: center;
		background-repeat: no-repeat;
	}

	// Format the heading of the dialog to match the design specs.
	// Code here a modified copy of code in GrowthExperiments OnboardingDialog component.
	&__header {
		&__top {
			display: flex;
			justify-content: space-between;
			align-items: flex-start;

			&__title {
				padding-top: @spacing-35;
				font-size: @font-size-medium;
				line-height: @line-height-xx-small;
				font-weight: @font-weight-bold;
				padding-bottom: @spacing-35;
			}

			&__button {
				min-width: 90px;
			}
		}
	}

	// Format the navigation buttons of the dialog to match the design specs.
	// Code here a modified copy of code in GrowthExperiments OnboardingDialog component.
	&__footer {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;

		&__navigation {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			font-size: @font-size-small;
			flex-grow: 1;

			/* stylelint-disable selector-class-pattern */
			&--prev.cdx-button,
			&--next.cdx-button {
				margin-left: @spacing-50;
			}
			/* stylelint-enable selector-class-pattern */
		}
	}
}

// Modified copy of the styles in the OnboardingStepper.vue component in the
// mediawiki/extensions/GrowthExperiments repository.
.ext-checkuser-temp-account-onboarding-dialog-stepper {
	display: flex;
	font-size: @font-size-small;
	color: @color-subtle;
	align-items: center;

	&__label {
		margin-inline-end: @spacing-50;
	}

	&__dots {
		display: flex;
		align-items: center;
		height: @size-125;

		&__dot {
			background-color: @background-color-disabled;
			border-radius: @border-radius-circle;
			width: @size-50;
			height: @size-50;
			margin-inline-end: @spacing-50;

			&--active {
				background-color: @color-base;
			}
		}
	}
}

// Modified copy of the styles from the MultiPane.vue component in
// the mediawiki/extensions/GrowthExperiments repository.
.ext-checkuser-temp-account-onboarding-dialog-content {
	position: relative;
	overflow: hidden hidden;

	.ext-checkuser-temp-account-onboarding-right-enter-active,
	.ext-checkuser-temp-account-onboarding-right-leave-active,
	.ext-checkuser-temp-account-onboarding-left-enter-active,
	.ext-checkuser-temp-account-onboarding-left-leave-active {
		transition: all 500ms @animation-timing-function-base;
	}

	.ext-checkuser-temp-account-onboarding-right-enter-from {
		transform: translateX( @size-full );
	}

	.ext-checkuser-temp-account-onboarding-right-leave-to {
		// Use `calc()` for negative calculation to not rely on Less, but standard CSS.
		transform: translateX( calc( -1 * @size-full ) );
	}

	.ext-checkuser-temp-account-onboarding-left-leave-to {
		transform: translateX( @size-full );
	}

	.ext-checkuser-temp-account-onboarding-left-enter-from {
		// Use `calc()` for negative calculation to not rely on Less, but standard CSS.
		transform: translateX( calc( -1 * @size-full ) );
	}

	.ext-checkuser-temp-account-onboarding-right-leave-active,
	.ext-checkuser-temp-account-onboarding-left-leave-active {
		position: absolute;
	}
}