.nowPlayingBar {
	transition: transform 0.2s ease;

	&.hide {
		transform: translateY(calc(100% + var(--space-3)));
		pointer-events: none;
	}
}

.playlistCard {
	border-radius: var(--radius-4);
	border: solid 1px var(--gray-6);
	backdrop-filter: blur(5vh) brightness(0.5);
	transition: transform 0.2s ease;
	max-width: 400px;
	max-height: 50vh;
	width: 100%;
}

.playBar {
	padding: var(--space-3);
	padding-left: calc(var(--space-3) + env(safe-area-inset-left));
	padding-right: calc(var(--space-3) + env(safe-area-inset-right));
	padding-bottom: calc(var(--space-6) + env(safe-area-inset-bottom));
	/* border-radius: var(--radius-4); */
	transition: transform 0.2s ease;
	margin: auto;
	max-width: 800px;
}

.playBar > * {
	min-width: 0;
	overflow: hidden;
}

.coverButton {
	--cover-button-size: 75px;

	flex: 0;
	width: var(--cover-button-size);
	height: var(--cover-button-size);
	min-width: var(--cover-button-size);
	min-height: var(--cover-button-size);
	border-radius: 6px;
	overflow: hidden;
	cursor: pointer;
	border: none;
	background-position: center;
	background-size: cover;
	padding: 0;
	display: block;

	.lyricIconButton {
		position: absolute;
		display: flex;
		justify-content: center;
		align-items: center;
		width: var(--cover-button-size);
		height: var(--cover-button-size);
		margin-top: calc(var(--cover-button-size) / -2);
		opacity: 0;
		transition: opacity 0.2s ease, transform 0.2s ease;
		pointer-events: none;
	}

	&:hover {
		.lyricIconButton {
			opacity: 1;
			transform: scale(0.9);
		}

		&::before {
			background-color: #0004;
			backdrop-filter: blur(4px);
		}
	}

	&:active {
		.lyricIconButton {
			opacity: 0.75;
			transform: scale(0.85);
		}

		&::before {
			background-color: #0006;
		}
	}

	&::before {
		pointer-events: none;
		border-radius: 6px;
		box-shadow: inset 0 0 0 1px #504e4e25;
		content: "";
		display: block;
		position: absolute;
		width: var(--cover-button-size);
		height: var(--cover-button-size);
		margin-top: calc(var(--cover-button-size) / -2);
		transition: background-color 0.2s ease, backdrop-filter 0.2s ease;
		background: rgba(100, 100, 100, 0.1);
	}
}
