@use 'utilities/convert' as *;
@use 'utilities/bemify' as *;
@use '@carbon/layout';
@use '@carbon/type';
@use '@carbon/grid';

// .light-theme
// .illustration {
//   background-image: url(/assets/illustrations/illustration-4.png);
//   background-position: bottom;
//   background-repeat: no-repeat;
//   height: 100vh;
// }

// .dark-theme
@include block(illustration) {
	background-image: url(/assets/illustrations/illustration-5.png);
	background-position: 50% 75%;
	background-repeat: no-repeat;
	background-size: contain;
	opacity: 0.7;
	height: 100vh;
	width: 100%;

	@include modifier(inline) {
		background-position: 50% 50%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
		opacity: 0.25;
	}
}

@include block(sign-up) {
	height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	overflow: hidden;
	align-items: center;
	position: relative;

	@include grid.breakpoint(lg) {
		justify-content: flex-start;
	}

	@include element(wrapper) {
		display: flex;
		flex-direction: column;
		max-width: 500px;
		width: 100%;

		@include grid.breakpoint(lg) {
			margin-top: 25%;
		}
	}

	.illustration {
		display: none;
	}

	@include grid.breakpoint-between(md, lg) {
		.illustration {
			display: block;
		}
	}
}

form {
	& > * {
		margin-bottom: layout.$spacing-05;
	}
}

.help {
	margin-top: layout.$spacing-05;
	@include type.type-style('body-01');
}
