/* diagonals */
.diagonal {
    position: relative;

	--diagonal-color: #fff;
	--diagonal-origin-x: left;
	--diagonal-origin-y: top;
	--diagonal-translate-x: 0;
	--diagonal-translate-y: 0;

	--diagonal-top: 0;
	--diagonal-bottom: auto;
	--diagonal-left: 0;
	--diagonal-right: auto;
	--diagonal-rotate: 45deg;
}

.diagonal:not(.overflow) {
	overflow: clip;
}

.diagonal::before {
    content: '';
	display: block;
	position: absolute;
	width: 999rem;
	height: .1rem;
	background-color: var(--diagonal-color);
	opacity: var(--opacity);
	translate: var(--diagonal-translate-x) var(--diagonal-translate-y);
	z-index: 3;
	pointer-events: none;

	transform-origin: var(--diagonal-origin-x) var(--diagonal-origin-y);
	rotate: var(--diagonal-rotate);
	top: var(--diagonal-top);
	bottom: var(--diagonal-bottom);
	left: var(--diagonal-left);
	right: var(--diagonal-right);
}

*:has(> .bg-diagonal) {
	position: relative;
}

.bg-diagonal {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	overflow: hidden;
	pointer-events: none;
}

/* diagonal adjustments */
.diagonal-top {
	--diagonal-origin-y: top;
	--diagonal-top: 0;
	--diagonal-bottom: auto;
}

.diagonal-bottom {
	--diagonal-origin-y: bottom;
	--diagonal-top: auto;
	--diagonal-bottom: 0;
}

.diagonal-left {
	--diagonal-origin-x: left;
	--diagonal-left: 0;
	--diagonal-right: auto;
}

.diagonal-right {
	--diagonal-origin-x: right;
	--diagonal-left: auto;
	--diagonal-right: 0;
}

.diagonal-right:not(.diagonal-bottom),
.diagonal-bottom:not(.diagonal-right) {
	--diagonal-rotate: -45deg;
}

.diagonal-right.diagonal-bottom {
	--diagonal-rotate: 45deg;
}

.diagonal.diagonal-flip,
.diagonal-right.diagonal-bottom.diagonal-flip {
	--diagonal-rotate: 135deg;
}

.diagonal-right:not(.diagonal-bottom).diagonal-flip,
.diagonal-bottom:not(.diagonal-right).diagonal-flip {
	--diagonal-rotate: -135deg;
}

.diagonal-x-1\/4:not(.diagonal-right) {
	--diagonal-translate-x: 25vw;
}

.diagonal-x-1\/4.diagonal-right {
	--diagonal-translate-x: -25vw;
}

.diagonal-x-1\/3:not(.diagonal-right) {
	--diagonal-translate-x: 33vw;
}

.diagonal-x-1\/3.diagonal-right {
	--diagonal-translate-x: -33vw;
}

.diagonal-x-1\/2:not(.diagonal-right) {
	--diagonal-translate-x: 50vw;
}

.diagonal-x-1\/2.diagonal-right {
	--diagonal-translate-x: -50vw;
}

.diagonal-x-none:not(.diagonal-right) {
	--diagonal-translate-x: 0;
}

.diagonal-x-none.diagonal-right {
	--diagonal-translate-x: 0;
}

.diagonal-x-right:not(.diagonal-right) {
	--diagonal-origin-x: left;
	--diagonal-left: 33.33%;
	--diagonal-right: auto;
}

.diagonal-x-left.diagonal-right {
	--diagonal-origin-x: right;
	--diagonal-left: auto;
	--diagonal-right: 66.67%;
}

.diagonal-y-1\/2:not(.diagonal-bottom) {
	--diagonal-translate-y: 50%;
}

.diagonal-y-1\/2.diagonal-bottom {
	--diagonal-translate-y: -50%;
}

.diagonal-y-none:not(.diagonal-bottom) {
	--diagonal-translate-y: 0;
}

.diagonal-y-none.diagonal-bottom {
	--diagonal-translate-y: 0;
}

.diagonal-hidden::before {
	display: none;
}

.diagonal-visible::before {
	display: block;
}

.diagonal-light-grey {
	--diagonal-color: var(--color-light-grey);
}

.diagonal-grey {
	--diagonal-color: var(--color-grey);
}

.diagonal-dark-grey {
	--diagonal-color: var(--color-dark-grey);
}

.diagonal-primary {
	--diagonal-color: var(--color-primary);
}

.diagonal-secondary {
	--diagonal-color: var(--color-secondary);
}

.diagonal-light-primary {
	--diagonal-color: var(--color-light-primary);
}

.diagonal-white {
	--diagonal-color: #fff;
}

.diagonal-black {
	--diagonal-color: #000;
}


/* large view */
@media only screen and (max-width: 1539px) {
	.lg\:diagonal-hidden::before {
		display: none;
	}
	
	.lg\:diagonal-visible::before {
		display: block;
	}
	
	.lg\:diagonal-x-1\/4:not(.diagonal-right) {
		--diagonal-translate-x: 25vw;
	}
	
	.lg\:diagonal-x-1\/4.diagonal-right {
		--diagonal-translate-x: -25vw;
	}
	
	.lg\:diagonal-x-1\/3:not(.diagonal-right) {
		--diagonal-translate-x: 33vw;
	}
	
	.lg\:diagonal-x-1\/3.diagonal-right {
		--diagonal-translate-x: -33vw;
	}
	
	.lg\:diagonal-x-1\/2:not(.diagonal-right) {
		--diagonal-translate-x: 50vw;
	}
	
	.lg\:diagonal-x-1\/2.diagonal-right {
		--diagonal-translate-x: -50vw;
	}

	.lg\:diagonal-x-none:not(.diagonal-right) {
		--diagonal-translate-x: 0;
	}
	
	.lg\:diagonal-x-none.diagonal-right {
		--diagonal-translate-x: 0;
	}
	
	.lg\:diagonal-y-1\/2:not(.diagonal-bottom) {
		--diagonal-translate-y: 50%;
	}
	
	.lg\:diagonal-y-1\/2.diagonal-bottom {
		--diagonal-translate-y: -50%;
	}

	.lg\:diagonal-y-none:not(.diagonal-bottom) {
		--diagonal-translate-y: 0;
	}
	
	.lg\:diagonal-y-none.diagonal-bottom {
		--diagonal-translate-y: 0;
	}

	.diagonal-x-right:not(.diagonal-right) {
		--diagonal-origin-x: left;
		--diagonal-left: 40%;
		--diagonal-right: auto;
	}

	.diagonal-x-left.diagonal-right {
		--diagonal-origin-x: right;
		--diagonal-left: auto;
		--diagonal-right: 60%;
	}
}

@media only screen and (max-width: 1279px) {
	.diagonal-x-right:not(.diagonal-right) {
		--diagonal-origin-x: left;
		--diagonal-left: 50%;
		--diagonal-right: auto;
	}

	.diagonal-x-left.diagonal-right {
		--diagonal-origin-x: right;
		--diagonal-left: auto;
		--diagonal-right: 50%;
	}
}

/* tablet view */
@media only screen and (max-width: 1023px) {
	.md\:diagonal-hidden::before {
		display: none;
	}
	
	.md\:diagonal-visible::before {
		display: block;
	}

	.md\:diagonal-x-1\/4:not(.diagonal-right) {
		--diagonal-translate-x: 25vw;
	}
	
	.md\:diagonal-x-1\/4.diagonal-right {
		--diagonal-translate-x: -25vw;
	}
	
	.md\:diagonal-x-1\/3:not(.diagonal-right) {
		--diagonal-translate-x: 33vw;
	}
	
	.md\:diagonal-x-1\/3.diagonal-right {
		--diagonal-translate-x: -33vw;
	}
	
	.md\:diagonal-x-1\/2:not(.diagonal-right) {
		--diagonal-translate-x: 50vw;
	}
	
	.md\:diagonal-x-1\/2.diagonal-right {
		--diagonal-translate-x: -50vw;
	}

	.md\:diagonal-x-none:not(.diagonal-right) {
		--diagonal-translate-x: 0;
	}
	
	.md\:diagonal-x-none.diagonal-right {
		--diagonal-translate-x: 0;
	}
	
	.md\:diagonal-y-1\/2:not(.diagonal-bottom) {
		--diagonal-translate-y: 50%;
	}
	
	.md\:diagonal-y-1\/2.diagonal-bottom {
		--diagonal-translate-y: -50%;
	}

	.md\:diagonal-y-none:not(.diagonal-bottom) {
		--diagonal-translate-y: 0;
	}
	
	.md\:diagonal-y-none.diagonal-bottom {
		--diagonal-translate-y: 0;
	}

}

/* mobile view */
@media only screen and (max-width: 767px) {
	.sm\:diagonal-hidden::before {
		display: none;
	}
	
	.sm\:diagonal-visible::before {
		display: block;
	}

	.sm\:diagonal-x-1\/4:not(.diagonal-right) {
		--diagonal-translate-x: 25vw;
	}
	
	.sm\:diagonal-x-1\/4.diagonal-right {
		--diagonal-translate-x: -25vw;
	}
	
	.sm\:diagonal-x-1\/3:not(.diagonal-right) {
		--diagonal-translate-x: 33vw;
	}
	
	.sm\:diagonal-x-1\/3.diagonal-right {
		--diagonal-translate-x: -33vw;
	}
	
	.sm\:diagonal-x-1\/2:not(.diagonal-right) {
		--diagonal-translate-x: 50vw;
	}
	
	.sm\:diagonal-x-1\/2.diagonal-right {
		--diagonal-translate-x: -50vw;
	}

	.sm\:diagonal-x-none:not(.diagonal-right) {
		--diagonal-translate-x: 0;
	}
	
	.sm\:diagonal-x-none.diagonal-right {
		--diagonal-translate-x: 0;
	}
	
	.sm\:diagonal-y-1\/2:not(.diagonal-bottom) {
		--diagonal-translate-y: 50%;
	}
	
	.sm\:diagonal-y-1\/2.diagonal-bottom {
		--diagonal-translate-y: -50%;
	}

	.sm\:diagonal-y-none:not(.diagonal-bottom) {
		--diagonal-translate-y: 0;
	}
	
	.sm\:diagonal-y-none.diagonal-bottom {
		--diagonal-translate-y: 0;
	}

	.diagonal-x-right:not(.diagonal-right) {
		--diagonal-origin-x: left;
		--diagonal-left: 0%;
		--diagonal-right: auto;
	}

	.diagonal-x-left.diagonal-right {
		--diagonal-origin-x: right;
		--diagonal-left: auto;
		--diagonal-right: 100%;
	}
}


/* mobile view */
@media only screen and (max-width: 575px) {
	.xs\:diagonal-hidden::before {
		display: none;
	}
	
	.xs\:diagonal-visible::before {
		display: block;
	}

	.xs\:diagonal-x-1\/4:not(.diagonal-right) {
		--diagonal-translate-x: 25vw;
	}
	
	.xs\:diagonal-x-1\/4.diagonal-right {
		--diagonal-translate-x: -25vw;
	}
	
	.xs\:diagonal-x-1\/3:not(.diagonal-right) {
		--diagonal-translate-x: 33vw;
	}
	
	.xs\:diagonal-x-1\/3.diagonal-right {
		--diagonal-translate-x: -33vw;
	}
	
	.xs\:diagonal-x-1\/2:not(.diagonal-right) {
		--diagonal-translate-x: 50vw;
	}
	
	.xs\:diagonal-x-1\/2.diagonal-right {
		--diagonal-translate-x: -50vw;
	}

	.xs\:diagonal-x-none:not(.diagonal-right) {
		--diagonal-translate-x: 0;
	}
	
	.xs\:diagonal-x-none.diagonal-right {
		--diagonal-translate-x: 0;
	}
	
	.xs\:diagonal-y-1\/2:not(.diagonal-bottom) {
		--diagonal-translate-y: 50%;
	}
	
	.xs\:diagonal-y-1\/2.diagonal-bottom {
		--diagonal-translate-y: -50%;
	}

	.xs\:diagonal-y-none:not(.diagonal-bottom) {
		--diagonal-translate-y: 0;
	}
	
	.xs\:diagonal-y-none.diagonal-bottom {
		--diagonal-translate-y: 0;
	}
	
}



/* top left triangle using border */
.triangle {
	position: relative;

	--triangle-color: #fff;
	--triangle-top: 0;
	--triangle-bottom: auto;
	--triangle-left: 0;
	--triangle-right: auto;
	--triangle-size: 14rem;
}

.triangle::after {
	content: '';
	display: block;
	position: absolute;
	width: 0;
	height: 0;
	z-index: 2;
	pointer-events: none;

	border-width: var(--triangle-size) var(--triangle-size) 0 0;
	border-style: solid;
   	border-color: var(--triangle-color) transparent transparent transparent;

	top: var(--triangle-top);
	bottom: var(--triangle-bottom);
	left: var(--triangle-left);
	right: var(--triangle-right);
}

.triangle-hidden::after {
	display: none;
}

.triangle-visible::after {
	display: block;
}

.triangle-top {
	--triangle-top: 0;
	--triangle-bottom: auto;
}

.triangle-bottom {
	--triangle-top: auto;
	--triangle-bottom: 0;
}

.triangle-left {
	--triangle-left: 0;
	--triangle-right: auto;
}

.triangle-right {
	--triangle-left: auto;
	--triangle-right: 0;
}

.triangle-right:not(.triangle-bottom)::after {
	border-width: 0 var(--triangle-size) var(--triangle-size) 0;
   	border-color: transparent var(--triangle-color) transparent transparent;
}

.triangle-right.triangle-bottom::after {
	border-width: 0 0 var(--triangle-size) var(--triangle-size);
   	border-color: transparent transparent var(--triangle-color) transparent;
}

.triangle-bottom:not(.triangle-right)::after {
	border-width: var(--triangle-size) 0 0 var(--triangle-size);
   	border-color: transparent transparent transparent var(--triangle-color);
}

.triangle-1 {
	--triangle-size: 2rem;
}

.triangle-2 {
	--triangle-size: 6rem;
}

.triangle-3 {
	--triangle-size: 10rem;
}

.triangle-4 {
	--triangle-size: 14rem;
}

.triangle-auto {
	--triangle-size: 14rem;
}

.triangle-light-grey {
	--triangle-color: var(--color-light-grey);
}

.triangle-grey {
	--triangle-color: var(--color-grey);
}

.triangle-dark-grey {
	--triangle-color: var(--color-dark-grey);
}

.triangle-primary {
	--triangle-color: var(--color-primary);
}

.triangle-secondary {
	--triangle-color: var(--color-secondary);
}

.triangle-light-primary {
	--triangle-color: var(--color-light-primary);
}

.triangle-white {
	--triangle-color: #fff;
}

.triangle-black {
	--triangle-color: #000;
}


/* large view */
@media only screen and (max-width: 1539px) {
	.lg\:triangle-hidden::after {
		display: none;
	}
	
	.lg\:triangle-visible::after {
		display: block;
	}

	.lg\:triangle-1 {
		--triangle-size: 2rem;
	}
	
	.lg\:triangle-2 {
		--triangle-size: 6rem;
	}
	
	.lg\:triangle-3 {
		--triangle-size: 10rem;
	}
	
	.lg\:triangle-4 {
		--triangle-size: 14rem;
	}

	.triangle-auto {
		--triangle-size: 10rem;
	}
}

/* tablet view */
@media only screen and (max-width: 1023px) {
	.md\:triangle-hidden::after {
		display: none;
	}
	
	.md\:triangle-visible::after {
		display: block;
	}

	.triangle-auto {
		--triangle-size: 6rem;
	}

	.md\:triangle-1 {
		--triangle-size: 2rem;
	}
	
	.md\:triangle-2 {
		--triangle-size: 6rem;
	}
	
	.md\:triangle-3 {
		--triangle-size: 10rem;
	}
	
	.md\:triangle-4 {
		--triangle-size: 14rem;
	}
}

/* mobile view */
@media only screen and (max-width: 767px) {
	.sm\:triangle-hidden::after {
		display: none;
	}
	
	.sm\:triangle-visible::after {
		display: block;
	}

	.triangle-auto {
		--triangle-size: 6em;
	}

	.sm\:triangle-1 {
		--triangle-size: 2rem;
	}
	
	.sm\:triangle-2 {
		--triangle-size: 6rem;
	}
	
	.sm\:triangle-3 {
		--triangle-size: 10rem;
	}
	
	.sm\:triangle-4 {
		--triangle-size: 14rem;
	}
}


/* mobile view */
@media only screen and (max-width: 575px) {
	.xs\:triangle-hidden::after {
		display: none;
	}
	
	.xs\:triangle-visible::after {
		display: block;
	}

	.xs\:triangle-1 {
		--triangle-size: 2rem;
	}
	
	.xs\:triangle-2 {
		--triangle-size: 6rem;
	}
	
	.xs\:triangle-3 {
		--triangle-size: 10rem;
	}
	
	.xs\:triangle-4 {
		--triangle-size: 14rem;
	}
}