/*--------------------------------------------------*/
/*	OVERRIDES
/*--------------------------------------------------*/



/*--------------------------------------------------*/
/*	GENERAL
/*--------------------------------------------------*/

.image-desc {
	overflow: hidden;
	border-radius: 5px;
}

.image-desc label {
	background: var(--color-black-light);
	color: var(--background);

	display: block;
	width: 100%;
	padding: 10px;
}

.image-compare {
	position: relative;
	overflow: hidden;
	width: 100%;
	aspect-ratio: 16/9; /* or whatever your images are */
}

.image-compare .image-desc {
	position: absolute;
	width: 100%;
	height: 100%;
	object-fit: cover;
	top: 0;
	left: 0;
}

/* Top layer (after) is clipped with a diagonal */
.image-compare .image-desc:nth-child(1) label {
	opacity: 0;

	-webkit-box-shadow: 9px 9px 10px #40404010, 0px 0px 5px 1px #40404020;
       -moz-box-shadow: 9px 9px 10px #40404010, 0px 0px 5px 1px #40404020;
        -ms-box-shadow: 9px 9px 10px #40404010, 0px 0px 5px 1px #40404020;
         -o-box-shadow: 9px 9px 10px #40404010, 0px 0px 5px 1px #40404020;
            box-shadow: 9px 9px 10px #40404010, 0px 0px 5px 1px #40404020;
}

/* Bottom layer (before) is clipped at the opposite diagonal */
.image-compare .image-desc:nth-child(2) img {
	clip-path: polygon(
		40%   0%, /* bottom-left starting point */
		20% 100%, /* upper-right slash exit */
		60% 100%, /* lower-right of band */
		80%   0%  /* bottom-left of band */
	);

	clip-path: polygon(
		0%   0%, /* bottom-left starting point */
		0% 100%, /* upper-right slash exit */
		75% 100%, /* lower-right of band */
		55%   0%  /* bottom-left of band */
	);
}
/*

.image-compare .image-desc:nth-child(1) {
	left: 15%;
}

.image-compare .image-desc:nth-child(2) {
	right: 15%;
}
*/

.image-compare .image-desc:nth-child(1) img {
	left: 15%;
}

.image-compare .image-desc:nth-child(2) img {
	right: 15%;
}





/*--------------------------------------------------*/
/*	COLORS
/*--------------------------------------------------*/

/*--- BLACK ---*/
body[theme^="black"] .image-desc.edge label {
	border-left: 12px solid var(--color-black);
}

/*--- GRAY ---*/
body[theme^="gray"] .image-desc.edge label {
	border-left: 12px solid var(--color-gray);
}

/*--- RED ---*/
body[theme^="red"] .image-desc.edge label {
	border-left: 12px solid var(--color-red);
}

/*--- ORANGE ---*/
body[theme^="orange"] .image-desc.edge label {
	border-left: 12px solid var(--color-orange);
}

/*--- YELLOW ---*/
body[theme^="yellow"] .image-desc.edge label {
	border-left: 12px solid var(--color-yellow);
}

/*--- GREEN ---*/
body[theme^="green"] .image-desc.edge label {
	border-left: 12px solid var(--color-green);
}

/*--- TEAL ---*/
body[theme^="teal"] .image-desc.edge label {
	border-left: 12px solid var(--color-teal);
}

/*--- CYAN ---*/
body[theme^="cyan"] .image-desc.edge label {
	border-left: 12px solid var(--color-cyan);
}

/*--- BLUE ---*/
body[theme^="blue"] .image-desc.edge label {
	border-left: 12px solid var(--color-blue);
}

/*--- INDIGO ---*/
body[theme^="indigo"] .image-desc.edge label {
	border-left: 12px solid var(--color-indigo);
}

/*--- PURPLE ---*/
body[theme^="purple"] .image-desc.edge label {
	border-left: 12px solid var(--color-purple);
}

/*--- MAGENTA ---*/
body[theme^="magenta"] .image-desc.edge label {
	border-left: 12px solid var(--color-magenta);
}

/*--- ROSE ---*/
body[theme^="rose"] .image-desc.edge label {
	border-left: 12px solid var(--color-rose);
}