.horizontalLayout {
	/* --info-size-fract: 0.85fr; */
	/* --player-size-fract: 1fr; */
	width: 100%;
	height: 100%;

	position: relative;
	display: grid;
	grid-template-rows: [drag-area] minmax(30px, 0.45fr) [thumb] auto [cover] auto [music-info] 3fr [buttom-controls] 0fr 0.3fr;
	grid-template-columns: [info-side] 0.45fr [player-side] 0.55fr [side-controls] 0fr;
	gap: 8px;
	transition: 0.5s ease-in-out;
	left: 0%;

	--hide-lyric-left: 61.111111%;

	&.hideLyric {
		/* percentage(calc((1 - var(--info-size-fract) / (var(--info-size-fract) + var(--player-size-fract))) / 2)) */
		/* left: var(--hide-lyric-left); */

		.lyric {
			transition: opacity 0.25s cubic-bezier(0.5, 0, 0.5, 1), transform 0.5s
				cubic-bezier(0.5, 0, 0.5, 1);
			opacity: 0;
			pointer-events: none;
		}

		.thumb,
		.cover,
		.controls {
			left: var(--hide-lyric-left);
		}
	}

	--horizontal-layout-max-width: min(50vh, 38vw);

	@media screen and (max-height: 1000px) {
		--horizontal-layout-max-width: min(45vh, 38vw);
	}

	@media screen and (max-height: 768px) {
		font-size: 0.8em;
		gap: 2px;
		grid-template-rows: [drag-area] minmax(30px, 0.45fr) [thumb] auto [cover] auto [music-info] 3fr [buttom-controls] 0fr 0.2fr;
	}
}

.thumb {
	grid-column: info-side;
	grid-row: thumb;
	justify-self: center;
	margin: 2vh;

	mix-blend-mode: plus-lighter;

	position: relative;
}

.cover {
	aspect-ratio: 1 / 1;
	grid-column: info-side;
	grid-row: cover;
	align-self: center;
	justify-self: center;
	width: var(--horizontal-layout-max-width);
	height: var(--horizontal-layout-max-width);

	position: relative;
}

.controls {
	grid-column: info-side;
	grid-row: music-info;
	justify-self: center;

	mix-blend-mode: plus-lighter;
	min-width: 0;
	min-height: 0;
	width: var(--horizontal-layout-max-width);

	display: flex;
	flex-direction: column;
	justify-content: space-between;

	position: relative;

	margin-top: calc(-8px + 1.75em); /* 计算一下该有的间距 没懂为啥整个加个gap8px */
}

.lyric {
	box-sizing: border-box;
	grid-column: player-side;
	grid-row: 2 / 5;
	width: 100%;
	height: 100%;
	transition: opacity 0.5s 0.25s cubic-bezier(0.5, 0, 0.5, 1);
	padding-right: 15%;

	mask-image: linear-gradient(transparent, black 10%, black 90%, transparent);

	mix-blend-mode: plus-lighter;
	contain: paint;

	@media screen and (max-width: 1600px), (max-height: 1000px) {
		padding-right: 8%;
	}
}

.bottomControls {
	grid-column: 1 / 4;
	grid-row: buttom-controls;
	mix-blend-mode: plus-lighter;

	display: flex;
	flex-direction: row-reverse;
	gap: 4em;
	padding-right: 4em;
	padding-left: 4em;

	@media screen and (max-width: 1600px), (max-height: 1000px) {
		gap: 2em;
		padding-right: 2em;
		padding-left: 2em;
	}
}
