/**
 * Carxis Seasonal
 *
 * Shared seasonal decoration presentation.
 *
 * @package CarxisToolkit
 * @since   1.0.0
 */


/* ==========================================================
   01. Base
========================================================== */

.carxis-seasonal {
	position: absolute;

	width: var(
		--carxis-seasonal-desktop-width,
		420px
	);

	pointer-events: none;

	z-index: 1;
}


.carxis-seasonal__image {
	display: block;

	width: 100%;
	height: auto;

	max-width: none;

	user-select: none;

	pointer-events: none;
}


/* ==========================================================
   02. Positions
========================================================== */

.carxis-seasonal--top-right {
	top: 0;
	right: 0;
}


.carxis-seasonal--top-left {
	top: 0;
	left: 0;
}


.carxis-seasonal--bottom-right {
	right: 0;
	bottom: 0;
}


.carxis-seasonal--bottom-left {
	bottom: 0;
	left: 0;
}


/* ==========================================================
   03. Homepage Scope
========================================================== */

/*
 * Homepage hero provides the containing block
 * for the absolute Seasonal decoration.
 */

.carxis-home-hero {
	position: relative;
}


/*
 * Hero content must remain above the decoration.
 */

.carxis-home-hero > .carxis-home-container {
	position: relative;

	z-index: 2;
}


/*
 * Keep Seasonal artwork inside the hero boundary.
 */

.carxis-home-hero {
	overflow: hidden;
}


/* ==========================================================
   04. Tablet
========================================================== */

@media (max-width: 991px) {

	.carxis-seasonal {
		width: var(
			--carxis-seasonal-tablet-width,
			300px
		);
	}

}


/* ==========================================================
   05. Mobile
========================================================== */

@media (max-width: 767px) {

	.carxis-seasonal {
		width: var(
			--carxis-seasonal-mobile-width,
			175px
		);
	}


	/*
	 * Slight edge offset prevents decorative artwork
	 * from competing with the main hero content.
	 */

	.carxis-seasonal--top-right,
	.carxis-seasonal--bottom-right {
		right: -30px;
	}


	.carxis-seasonal--top-left,
	.carxis-seasonal--bottom-left {
		left: -30px;
	}

}


/* ==========================================================
   06. Small Mobile
========================================================== */

@media (max-width: 479px) {

	.carxis-seasonal--top-right,
	.carxis-seasonal--bottom-right {
		right: -40px;
	}


	.carxis-seasonal--top-left,
	.carxis-seasonal--bottom-left {
		left: -40px;
	}

}


/* ==========================================================
   07. Reduced Motion
========================================================== */

@media (prefers-reduced-motion: reduce) {

	.carxis-seasonal,
	.carxis-seasonal__image {
		animation: none !important;
		transition: none !important;
	}

}