@import '../../styles/variables.scss';

.root {
	position: relative;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	width: 100%;
	max-width: 540px;
	padding: 41px 0 0;

	@include breakpoint-md {
		max-width: 100%;
		padding: 0;
	}
}

.background {
	position: absolute;
	top: 10px;
	right: 0;
	left: 0;
	z-index: -1;
	width: 100%;
	overflow: hidden;
	border-radius: 8px;
	transform: rotate(2deg);

	&::after {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 0;
		content: ' ';
		background: rgba($black, 0.16);
		border-radius: 8px;
	}

	@include breakpoint-md {
		top: 0;
		bottom: 0;
		border-radius: 0;
		transform: rotate(0);

		&::after {
			background: rgba($black, 0.56);
			border-radius: 0;
		}
	}
}

.mobileBackground {
	position: relative;
	width: 100%;
	height: 100vh;

	@include breakpoint-md-up {
		display: none;
	}
}

.desktopBackground {
	position: relative;

	@include breakpoint-md {
		display: none;
	}
}

.image {
	position: absolute;
	top: 57px;
	right: 15px;
	z-index: -1;
	width: 185px;
	height: 109px;
	opacity: 1;
	transition: all 0.2s ease-in-out;
	transform: translate(160px, -96px);

	&.hide {
		pointer-events: none;
		visibility: hidden;
		opacity: 0;
	}

	@media screen and (width >= 1280px) {
		transform: translate(100%, -100%);
	}

	@include breakpoint-lg {
		pointer-events: none;
		visibility: hidden;
		opacity: 0;
	}
}

.imageLight,
.imageDark {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: all 0.2s ease;
}

:global(.light) {
	.imageLight {
		opacity: 1;
	}

	.imageDark {
		visibility: hidden;
		opacity: 0;
	}
}

:global(.dark) {
	.imageLight {
		visibility: hidden;
		opacity: 0;
	}

	.imageDark {
		opacity: 1;
	}
}