@import 'theme.scss';

.playbar {
	width: 100%;
	height: 75px;
	background-color: $play-bar-background-color;
	opacity: 0.9;
	position: fixed;
	bottom: 0;

	.invisible-media-progress {
		width: 100%;
		height: 14px;
		background-color: transparent;
		position: absolute;
		transform: translateY(-50%);
		padding-top: 7px;
		
		.media-progress {
			width: 100%;
			height: 3px;
			background-color: $controls-click-color;
			
			.media-progress-solid {
				position: relative;
				height: 3px;
				background: linear-gradient(90deg, $play-grad-start, $play-grad-end);
			}
		}

		.media-progress-solid::before {
			content: "";
			position: absolute;
			height: 3px;
			width: 100%;
			background: linear-gradient(90deg, $play-grad-start, $play-grad-end);
			z-index: -1;
			filter: blur(3px);
		}
	}

	.media-info {
		font-size: 16;
		margin-left: 10px;

		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		display: grid;
		grid-template-columns: 50px 1fr;

		.media-info-img {
			width: 50px;
		}

		.media-info-text {
			text-align: left;
			margin-left: 10px;
		}
	}

	.playcontrols {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;

		button {
			.controlbtn {
				color: $text-controls-color;
			}

			.controlbtn:hover {
				color: $controls-hover-color;
			}

			.controlbtn:active {
				color: $controls-click-color;
			}
	
			background-color: transparent;
			border: transparent;
		}
	}

	.playduration {
		position: absolute;
		right: 10px;
		top: 13px;
	}
}