@top_controls_height: 55px;

.mobile-player_wrapper {
	position: relative;

	z-index: 320;

	display: flex;

	flex-direction: column;

	height: 100%;
	width: 100%;

	margin-bottom: 30px;

	.mobile-player_background {
		position: absolute;

		z-index: 320;

		top: 0;
		left: 0;

		width: 100%;
		height: 100%;

		background-color: rgba(var(--cover_averageValues), 0.4);
	}
}

.mobile-player {
	position: relative;

	display: inline-flex;
	flex-direction: column;

	align-items: flex-start;
	justify-content: center;

	width: 100%;
	height: 100%;

	gap: 10px;

	transition: all 150ms ease-out;

	z-index: 330;

	.service_indicator {
		color: var(--text-color);

		background-color: var(--background-color-accent);
		padding: 7px;
		border-radius: 8px;

		font-size: 0.9rem;
	}

	.mobile-player-cover {
		position: relative;

		z-index: 320;

		margin: auto;

		width: 100%;
		height: 100%;

		min-height: 40vh;
		min-width: 100%;

		border-radius: 24px;

		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;

		transition: all 0.3s ease-in-out;

		img {
			width: 100%;
			height: 100%;

			object-fit: cover;
			object-position: center;
		}
	}

	.mobile-player-header {
		position: relative;

		display: flex;
		flex-direction: row;

		width: 100%;

		.mobile-player-info {
			display: flex;
			flex-direction: column;

			h1,
			h2,
			h3,
			h4,
			h5,
			h6,
			p,
			span {
				margin: 0;
				color: var(--text-color);
			}

			width: 100%;

			.mobile-player-info-title {
				display: flex;
				flex-direction: row;

				align-items: center;

				font-size: 1rem;
				font-weight: 600;

				word-break: break-all;

				font-family: "Space Grotesk", sans-serif;
			}

			.mobile-player-info-subTitle {
				display: flex;
				flex-direction: row;

				align-items: center;
				justify-content: space-between;

				font-size: 0.7rem;
				font-weight: 400;
			}
		}
	}

	.player-controls {
		.ant-btn {
			min-width: 40px !important;
			min-height: 40px !important;
		}

		svg {
			font-size: 1.2rem;
		}

		.playButton {
			min-width: 50px !important;
			min-height: 50px !important;

			svg {
				font-size: 1.6rem;
			}
		}
	}

	.player-seek_bar {
		.progress {
			.MuiSlider-root {
				.MuiSlider-rail {
					height: 7px;
				}

				.MuiSlider-track {
					height: 7px;
				}

				.MuiSlider-thumb {
					width: 5px;
					height: 13px;
					border-radius: 2px;

					background-color: var(--background-color-contrast);
				}
			}
		}
	}
}
