/* ==================================================
   MICIOMIX COMPONENTS
   ================================================== */


/* --------------------------------------------------
   MM Frame
   Cornice con angoli concavi
-------------------------------------------------- */

.mm-frame {
	--mm-frame-color: #3a312b;
	--mm-frame-line: 1px;
	--mm-frame-corner-size: 40px;
	--mm-frame-padding: 32px;

	position: relative;
	box-sizing: border-box;
	padding: var(--mm-frame-padding);
}

.mm-frame::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 2;

	background:

		/* Angoli */
		url("../images/miciomix/frame/alto-sx.svg")
			left top /
			var(--mm-frame-corner-size)
			var(--mm-frame-corner-size)
			no-repeat,

		url("../images/miciomix/frame/alto-dx.svg")
			right top /
			var(--mm-frame-corner-size)
			var(--mm-frame-corner-size)
			no-repeat,

		url("../images/miciomix/frame/basso-dx.svg")
			right bottom /
			var(--mm-frame-corner-size)
			var(--mm-frame-corner-size)
			no-repeat,

		url("../images/miciomix/frame/basso-sx.svg")
			left bottom /
			var(--mm-frame-corner-size)
			var(--mm-frame-corner-size)
			no-repeat,

		/* Lato superiore */
		linear-gradient(
			var(--mm-frame-color),
			var(--mm-frame-color)
		)
			left var(--mm-frame-corner-size) top /
			calc(100% - (var(--mm-frame-corner-size) * 2))
			var(--mm-frame-line)
			no-repeat,

		/* Lato inferiore */
		linear-gradient(
			var(--mm-frame-color),
			var(--mm-frame-color)
		)
			left var(--mm-frame-corner-size) bottom /
			calc(100% - (var(--mm-frame-corner-size) * 2))
			var(--mm-frame-line)
			no-repeat,

		/* Lato sinistro */
		linear-gradient(
			var(--mm-frame-color),
			var(--mm-frame-color)
		)
			left top var(--mm-frame-corner-size) /
			var(--mm-frame-line)
			calc(100% - (var(--mm-frame-corner-size) * 2))
			no-repeat,

		/* Lato destro */
		linear-gradient(
			var(--mm-frame-color),
			var(--mm-frame-color)
		)
			right top var(--mm-frame-corner-size) /
			var(--mm-frame-line)
			calc(100% - (var(--mm-frame-corner-size) * 2))
			no-repeat;
}


/* Bordo laterale più marcato */

.mm-frame--strong {
	--mm-frame-line: 2px;
}


/* Cornice più compatta */

.mm-frame--compact {
	--mm-frame-corner-size: 30px;
	--mm-frame-padding: 24px;
}