:root {
	--cut-card-transition: all 0.5s ease-in-out;
}

.content-cut {
	display: flex;
	width: 100%;
	margin-top: calc(var(--nav-bar-height) - 1em);
	height: var(--content-height);
	min-height: calc(80vw * 0.5);
	padding: 0 5em;
	justify-content: center;
	align-items: center;
	z-index: auto;
}

.cut-selection {
	margin-left: auto;
	margin-right: clamp(1em, 10%, 10em);
	display: flex;
	width: 50%;
	align-items: center;
}

.cut-selection > svg {
	z-index: 2;
	object-fit: contain;
	width: 100%;
}

.cut-selection > svg > path:hover[id] {
	fill: var(--text-color-orange);
	opacity: 0.7;
}

.cut-selection > svg > path.selected-cut {
	fill: var(--text-color-orange);
}

.cut-selected-card {
	margin-left: auto;
	margin-right: max(1%, 1em);
	position: relative;
	display: flex;
	flex-direction: column;
	max-height: 75%;
	aspect-ratio: 30/42;
	width: max(20em, 30vw);
	border-radius: 0.35em;
	background: #fff;
	box-shadow: 4px 4px 30px 2px rgba(0, 0, 0, 0.25);
}

.cut-card {
	position: absolute;
	opacity: 0%;
	top: 5em;
	left: 5em;
	user-select: none;
	z-index: -1;
	background-color: inherit;
}

.cut-card.selected-cut {
	top: 0;
	left: 0;
	opacity: 100%;
	position: absolute;
	height: 100%;
	z-index: 2;
	user-select: unset;
	transition: var(--cut-card-transition);
	transition-property: opacity, top, left;
	border-radius: 0.35em;
	overflow: hidden;
}

.cut-selected-card-backdrop {
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: -1;
	user-select: none;
}

.cut-selected-card-backdrop > img:nth-child(1) {
	position: absolute;
	top: -3em;
	right: -5em;
	width: 20em;
	transform: rotate(225deg);
}

.cut-selected-card-backdrop > img:nth-child(2) {
	position: absolute;
	bottom: 0.5em;
	left: -8em;
	width: 20em;
	transform: rotate(110deg) scaleX(-1);
}

.cut-selected-card-img {
	width: 100%;
	height: 30%;
	user-select: none;
}

.cut-selected-card-img img {
	height: 100%;
	width: 100%;
	object-fit: cover;
}

.cut-selected-info {
	padding: 0 max(10%, 1em);
	padding-top: 1em;
	padding-bottom: 1.5em;
	display: flex;
	width: 100%;
	max-height: 100%;
	flex-grow: 1;
	flex-direction: column;
	gap: 1em;
}

.cut-selected-header {
	font-size: 2.25em;
	color: var(--text-color-orange);
}

.cut-selected-stats {
	display: flex;
	flex-direction: column;
	gap: 0.5em;
}

.cut-stat-price {
	display: flex;
	align-items: center;
}

.cut-stat-and-value {
	display: flex;
	width: max-content;
	justify-content: center;
	align-items: center;
	gap: 0.5em;
	font-size: 1em;
}

.cut-stat-bar {
	margin-left: auto;
	position: relative;
	content: '';
	width: clamp(3em, 30%, 100%);
	height: 1em;
	border-radius: 1em;
	background: var(--breed-card-bar-bg);
}

.stat-bar-percent {
	position: absolute;
	top: 0;
	left: 0;
	content: '';
	width: 100%;
	height: 100%;
	border-radius: 1em;
	background: linear-gradient(
		90deg,
		rgba(255, 183, 128, 1) 0%,
		rgba(255, 85, 85, 1) 100%
	);
}

.cut-selected-text {
	flex: 1;
	overflow-y: auto;
	display: flex;
	max-height: 100%;
	font-size: 100%;

	color: var(--text-color-heavy-black);
}

@media (max-width: 600px) {
	.content-cut {
		padding-top: 10em;
		padding-bottom: 10em;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		height: auto;
		gap: 5em;
	}

	.cut-selection {
		margin: 0 0;
		width: 85%;
	}

	.cut-selected-card {
		margin: 0 0;
		aspect-ratio: 30/42;
		width: 90%;
		font-size: 3vw;
		max-height: none;
	}

	.cut-selected-card-backdrop {
		font-size: 2vw;
	}

	.cut-selected-card-backdrop > img:nth-child(2) {
		top: -3em;
		left: -4em;
		bottom: auto;
	}

	.cut-selected-card-img {
		height: 13em;
	}

	.cut-selected-header {
		margin-bottom: -0.2em;
	}

	.cut-stat-and-value {
		gap: 0.2em;
		font-size: 1em;
	}

	.cut-stat-and-value > .stat-name {
		transform: none;
	}

	.cut-stat-bar {
		width: 5em;
	}
}