/* ==========================================================
   Base Decoration Anchor
   ========================================================== */

.has-decoration-anchor {
	position: relative;
	z-index: 1;
}

.decoration-anchor,
.has-decoration {
	position: absolute;
	z-index: -1;
}

/* ==========================================================
   Base Decoration Element (MASK-BASED)
   ========================================================== */

/*
 * Each decoration is:
 * - positioned relative to its anchor
 * - rendered via mask-image
 * - coloured via CSS variables
 */

.has-decoration {
	pointer-events: none;

	/* Colour (theme concern) */
	background-color: var(--decoration-colour, currentColor);

	/* Geometry (structure concern) */
	mask-image: var(--decoration-mask);
	-webkit-mask-image: var(--decoration-mask);

	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;

	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	-webkit-mask-size: contain;

	/* Base dimensions (defined by type family) */
	width: var(--base-width);
	height: var(--base-height);

	/* Transform system */
	--decoration-scale: 1;
	--decoration-flip-x: 1;
	--decoration-offset-x: 0;
	--decoration-offset-y: 0;

	transform: scale(var(--decoration-scale)) scaleX(var(--decoration-flip-x))
		translate(var(--decoration-offset-x), var(--decoration-offset-y));

	top: var(--decoration-top, auto);
	right: var(--decoration-right, auto);
	bottom: var(--decoration-bottom, auto);
	left: var(--decoration-left, auto);
}

/* ==========================================================
   Position Variants (ANCHOR ONLY)
   ========================================================== */

.has-decoration__position--top-right {
	top: 0;
	right: 0;
}

.has-decoration__position--top-left {
	top: 0;
	left: 0;
}

.has-decoration__position--bottom-right {
	bottom: 0;
	right: 0;
}

.has-decoration__position--bottom-left {
	bottom: 0;
	left: 0;
}

.has-decoration__position--center-right {
	right: 0;
	--decoration-offset-x: 6%;
	--decoration-offset-y: 24%;
}

.has-decoration__position--center-left {
	left: 0;
	--decoration-offset-x: -50%;
	--decoration-offset-y: 0;
}

/* ==========================================================
   Size Variants (SCALE ONLY)
   ========================================================== */

.has-decoration__size--accent-sm {
	--decoration-scale: 0.6;
}

.has-decoration__size--accent-md {
	--decoration-scale: 1;
}

.has-decoration__size--accent-lg {
	--decoration-scale: 1.6;
}

.has-decoration__size--accent-xl.has-decoration__type--starburst,
.has-decoration__size--accent-xl.has-decoration__type--database,
.has-decoration__size--accent-xl.has-decoration__type--plus-double {
	--decoration-scale: 1.9;
	--base-width: 26rem;
	--base-height: 14rem;
}

/* ==========================================================
   Geometry Families (BASE DIMENSIONS)
   ========================================================== */

/* Square icons */
.has-decoration__type--starburst,
.has-decoration__type--plus,
.has-decoration__type--asterisk,
.has-decoration__type--database,
.has-decoration__type--angle-bracket-open,
.has-decoration__type--angle-bracket-close {
	--base-width: 6rem;
	--base-height: 6rem;
}

/* Tall icons */
.has-decoration__type--curly-bracket-open,
.has-decoration__type--curly-bracket-close,
.has-decoration__type--back-slash,
.has-decoration__type--forward-slash,
.has-decoration__type--square-bracket-open,
.has-decoration__type--square-bracket-close,
.has-decoration__type--round-bracket-open,
.has-decoration__type--round-bracket-close {
	--base-width: 4rem;
	--base-height: 13rem;
}

/* Wide icons */
.has-decoration__type--equals,
.has-decoration__type--plus-double,
.has-decoration__type--document,
.has-decoration__type--ampersand-double,
.has-decoration__type--performance {
	--base-width: 19rem;
	--base-height: 23rem;
}

/* ==========================================================
   Geometry → Mask Mapping (ONE SVG EACH)
   ========================================================== */

.has-decoration__type--curly-bracket-open,
.has-decoration__type--curly-bracket-close {
	--decoration-mask: url(../../../images/svgs/curly-bracket-close.svg);
}

.has-decoration__type--forward-slash,
.has-decoration__type--back-slash {
	--decoration-mask: url(../../../images/svgs/forward-slash.svg);
	--decoration-offset-x: 5%;
	--decoration-offset-y: 10%;
}

.has-decoration__type--plus {
	--decoration-mask: url(../../../images/svgs/plus.svg);
}

.has-decoration__type--starburst {
	--decoration-mask: url(../../../images/svgs/starburst.svg);
}

.has-decoration__type--asterisk {
	--decoration-mask: url(../../../images/svgs/asterisk.svg);
}

.has-decoration__type--angle-bracket-open,
.has-decoration__type--angle-bracket-close {
	--decoration-mask: url(../../../images/svgs/angle-bracket.svg);
}

.has-decoration__type--plus-double {
	--decoration-mask: url(../../../images/svgs/plus-double.svg);
}

.has-decoration__type--ampersand-double {
	--decoration-mask: url(../../../images/svgs/ampersand-double.svg);
}

.has-decoration__type--infinity {
	--decoration-mask: url(../../../images/svgs/infinity.svg);
	--base-width: 26.75rem;
	--base-height: 13.25rem;
}

.has-decoration__type--round-bracket-close,
.has-decoration__type--round-bracket-open {
	--decoration-mask: url(../../../images/svgs/round-bracket.svg);
}

.has-decoration__type--performance {
	--decoration-mask: url(../../../images/svgs/performance.svg);
}

.has-decoration__type--database {
	--decoration-mask: url(../../../images/svgs/database.svg);
}

.has-decoration__position--bottom-left.has-decoration__type--curly-bracket-open,
.has-decoration__position--bottom-left.has-decoration__type--curly-bracket-close {
	--decoration-offset-y: 60%;
}

/* ==========================================================
   Colour Modifiers (THEME ONLY)
   ========================================================== */

.has-decoration__colour--black {
	--decoration-colour: var(--black);
}

.has-decoration__colour--orange {
	--decoration-colour: var(--orange);
}

.has-decoration__colour--red {
	--decoration-colour: var(--primary-red);
}

.has-decoration__colour--white {
	--decoration-colour: var(--white);
}

.has-decoration__colour--peach {
	--decoration-colour: rgba(252, 156, 12, 0.4);
}

/* ==========================================================
   Direction Variants (FLIP ONLY)
   ========================================================== */

.has-decoration__type--angle-bracket-open,
.has-decoration__type--curly-bracket-open,
.has-decoration__type--round-bracket-open,
.has-decoration__type--square-bracket-open,
.has-decoration__type--back-slash {
	--decoration-flip-x: -1;
}

.has-decoration__anchor--content.has-decoration__position--top-left {
	--decoration-offset-x: -5%;
	--decoration-offset-y: -80%;
}

.media-content-block__media .has-decoration__position--top-right {
	--decoration-offset-x: 65%;
	--decoration-offset-y: -110%;
}

@media all and (min-width: 992px) {
	.has-decoration__size--accent-xl.has-decoration__type--starburst,
	.has-decoration__size--accent-xl.has-decoration__type--database,
	.has-decoration__size--accent-xl.has-decoration__type--plus-double {
		--decoration-scale: 3;
		--base-width: 26rem;
		--base-height: 14rem;
	}
}