.playerContainer {
	padding: 2rem 3rem;
	width: 26.5rem;
	height: 100vh;
	background: var(--purple-500);
	color: var(--white);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;

	header {
		display: flex;
		align-items: center;
		gap: 1rem;
	}
	strong {
		font-family: Lexend, sans-serif;
		font-weight: 600;
	}

	footer {
		align-self: stretch;

		&.empty .progress {
			opacity: 0.5;
		}
	}
}

.currentEpisode {
	text-align: center;

	img {
		min-width: 5rem;
		border-radius: 1.5rem;
	}

	strong {
		display: block;
		margin-top: 2rem;
		font: 600 1.22rem Lexend, sans-serif;
		line-height: 1.7rem;
	}

	span {
		display: block;
		font-size: 0.95rem;
		margin-top: 1rem;
		opacity: 0.7;
		line-height: 1.6rem;
	}
}

.emptyPlayer {
	width: 100%;
	height: 20rem;
	border: 1.5px dashed var(--purple-300);
	border-radius: 1.5rem;
	background: linear-gradient(
		143.8deg,
		rgba(145, 100, 250, 0.8) 0%,
		rgba(145, 100, 250, 0) 100%
	);
	padding: 4rem;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
}

.progress {
	display: flex;
	align-items: center;
	gap: 1rem;
	font-size: 0.875rem;

	span {
		display: inline-block;
		width: 4rem;
		text-align: center;
	}

	.slider {
		flex: 1;
		.emptySlider {
			width: 100%;
			height: 4px;
			background: var(--purple-300);
		}
	}
}

.buttons {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 2.5rem;
	gap: 1.5rem;

	button {
		background: transparent;
		border: 0;
		font-size: 0;
		transition: filter 0.1s ease-in-out;

		&:disabled {
			cursor: default;
			opacity: 0.5;
		}

		&:hover:not(:disabled) {
			filter: brightness(0.8);
		}

		&.isActive {
			filter: invert(0.35) sepia(1) saturate(3) hue-rotate(100deg);

			&::after {
				content: '';
				width: 5px;
				height: 5px;
				border-radius: 2px;
				background: #04d361;
				filter: brightness(1.9);
				position: absolute;
				left: 40%;
				top: 110%;
			}
		}

		&.isActive:hover {
			filter: brightness(1) invert(0.35) sepia(1) saturate(3) hue-rotate(100deg);
		}

		&.playButton {
			width: 4rem;
			height: 4rem;
			border-radius: 1rem;
			background: var(--purple-400);
			transition: filter 0.2s ease-in-out, background 0.2s ease-in-out;

			&:hover:not(:disabled) {
				filter: brightness(0.95);
			}

			&:active:not(:disabled) {
				background: var(--purple-800);
			}
		}
	}
}

.expandContainer {
	width: 100%;

	display: flex;
	justify-content: flex-end;

	button {
		background: none;
		border: none;

		color: #fff;
		font-size: 1.75rem;
	}
}

@media (max-width: 1024px) {
	.playerContainer {
		flex-direction: row;
		justify-content: flex-start;
		position: fixed;
		bottom: 0;

		width: 100%;
		height: 8rem;
		gap: 1rem;
		padding: 1rem;
		max-height: 90vh;

		.header {
			display: none;
		}

		.footer {
			width: 33rem;
			align-self: center;
		}
	}

	.emptyPlayer {
		width: 100%;
		height: 6rem;
		padding: 1rem;

		strong {
			font-size: 0.8rem;
		}
	}
	.empty {
		justify-content: center;
		width: 100%;
		.buttons {
			margin-top: 1rem;
		}
	}

	.mobilePlayer {
		display: flex;
		flex-direction: row;
		gap: 1rem;
		img {
			max-width: 6rem;
			min-width: 6rem;
			max-height: 6rem;
			border-radius: 1.5rem;
		}

		.currentEpisode {
			display: flex;
			flex-direction: column;
			justify-content: center;
			min-width: 7rem;
			min-height: 5rem;
			.episodeInfo {
				width: 100%;
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				justify-content: space-evenly;

				strong {
					width: 100%;
					font-size: 0.9rem;
					margin-top: 0;

					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				span {
					width: 100%;
					margin-top: 0.1rem;
					font-size: 0.8rem;

					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				.progress {
					display: flex;
					align-items: center;
					width: 100%;
					gap: 1rem;
					font-size: 0.875rem;

					span {
						display: inline-block;
						width: 4rem;
						text-align: center;
					}

					.slider {
						flex: 1;
						.emptySlider {
							width: 100%;
							height: 4px;
							background: var(--purple-300);
						}
					}
				}
			}
		}
	}
	.playing {
		justify-content: center;
		width: 100%;
		.buttons {
			margin-top: 1rem;
		}
	}
}

@media (max-width: 820px) {
	.mobilePlayer {
		.currentEpisode {
			visibility: hidden;
			display: none;
		}
	}
}
