.media {
	display: none;
}

#ToggleMediaContainer {
	display: none;
	position: relative;

	&.available {
		display: inline-block;

		img.on {
			display: none;
		}

		img.off {
			display: block;
		}

		// icon switch is handled by adding/removing the .playing class
		&.playing {
			img.on {
				display: block;
			}

			img.off {
				display: none;
			}

		}


	}

	.volume-slider {
		display: none;
		position: absolute;
		top: 0px;
		transform: translateY(-100%);
		width: 100%;
		background-color: #000;
		text-align: center;

		@media (prefers-color-scheme: dark) {
			background-color: #303030;
		}

		input[type="range"] {
			writing-mode: vertical-lr;
			direction: rtl;
			margin-top: 20px;
			margin-bottom: 20px;
		}

		&.show {
			display: block;
		}
	}



}