.a26-mediaplayer-play {
	width: 80px;
	height: 80px;
	border: 0px;
	border-radius: 100%;
	justify-items: center;
	align-items: center;
	background: var(--base-gray);
}

.a26-mediaplayer-play.invisible {
	background: transparent;
}

.a26-mediaplayer-play.invisible:hover {
	border: solid 1px var(--base-gray);
	transition: 0.3s ease;
}

.a26-mediaplayer-button {
	width: 50px;
	height: 50px;
	margin: auto;
	filter: invert(100%) sepia(2%) saturate(1129%) hue-rotate(239deg) brightness(117%) contrast(84%);
	transition: 0.2s ease;
}

.a26-mediaplayer-button:hover {
	width: 55px;
	height: 55px;
	transition: 0.08s ease;
}

.a26-mediaplayer-button:active {
	width: 45px;
	height: 45px;
	transition: 0.1s ease;
}


.a26-mediaplayer-bottom {
	display: flex;
	flex-direction: row;
	position: fixed;
	bottom: 0;
	width: 100vw;
	height: fit-content;
	background: linear-gradient(to top, var(--black), var(--off-gray));
	padding: 12px 40px;
	border-top: var(--off-gray) 1px solid;
	box-shadow: 0 -3px 18px 3px var(--shadow);
	z-index: 2;
	align-items: center;
}

.a26-mediaplayer-metadata {
	display: block;
	color: var(--base-light);
	padding: 0 40px;
	width: fit-content;
}

.a26-mediaplayer-title {
	color: var(--base-light);
	font-weight: 500;
	font-size: 2rem;
	padding: 6px;
}

.a26-mediaplayer-artist {
	color: var(--base-light);
	font-weight: 200;
	font-size: 1.5rem;
	padding: 6px;
}

@media screen and (max-width: 991px) {
	.a26-mediaplayer-bottom {
		padding: 6px;
		box-shadow: 0 -1px 12px 3px var(--shadow);
	}

	.a26-mediaplayer-metadata {
		margin: 0 3px;
		padding: 3px;
	}
}

@media screen and (max-width: 440px) {
	.a26-mediaplayer-bottom {
		padding: 3px;
	}

	.a26-mediaplayer-title {
		font-size: 1rem;
		font-weight: 400;
		line-height: 1.2;
		letter-spacing: -0.22;
		padding: 6px 6px 0 0;
	}

	.a26-mediaplayer-artist {
		font-size: 1rem;
		padding: 0 6px 6px 0;
	}
}

@media (prefers-color-scheme: dark) {
	.a26-mediaplayer-bottom {
		background: linear-gradient(to top, var(--black), var(--base-gray));
	}
}