.player {
	align-items: center;
	background: $background-white;
	bottom: 0;
	box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.04), 0 -5px 6px 0 rgba(0, 0, 0, 0.05);
	display: flex;
	flex-direction: row;
	font-weight: 400;
	height: $player-height;
	justify-content: space-between;
	padding: 0 2em;
	width: 100%;
	z-index: 9999;

	.left {
		align-items: center;
		display: flex;
		flex-direction: row;

		> * {
			margin-right: 1.5em;
		}
	}

	.right {
		align-items: center;
		display: flex;
		justify-content: space-between;

		> * {
			margin-left: 1.5em;
		}
	}

	.middle {
		align-items: center;
		-webkit-app-region: no-drag;
		border-right: 2px solid $foreground-mediumgray;
		display: flex;
		flex-grow: 1;
		height: 100%;
		justify-content: center;
		position: relative;

		.sub-right {
			align-items: flex-end;
			display: flex;
			flex-direction: column;
			margin-right: 1em;

			> * {
				margin-bottom: 1em;

				&:last-child {
					margin-bottom: 0;
				}
			}
		}
	}

	.speed {
		color: $foreground-darkgray;
		font-size: 1.2em;
		font-weight: 200;
		text-transform: uppercase;
	}

	.media {
		margin: auto;
		text-align: center;

		.info {
			.episode,
			.date {
				color: $foreground-darkgray;
				font-size: 11px;
				font-weight: 600;
				text-transform: uppercase;
			}

			.episode::after {
				color: $foreground-darkgray;
				content: '\2022';
				font-weight: 200;
				padding: 0 6px 0 6px;
			}
		}
	}

	.ellipsis-menu {
		color: $foreground-green;
	}

	.play {
		position: relative;
	}

	.like,
	.speed,
	.rewind,
	.play,
	.pause,
	.forward,
	.volume,
	.next {
		cursor: pointer;
		display: flex;
	}

	.progress-bar {
		background-image: linear-gradient(
			-180deg,
			rgba(255, 255, 255, 0.05) 0%,
			rgba(0, 0, 0, 0.05) 100%
		);
		background-position: left;
		background-repeat: no-repeat;
		border-right: 2px solid $foreground-mediumgray;
		bottom: 0;
		left: 0;
		position: absolute;
		top: 0;
	}

	.progress-bar-click-catcher {
		cursor: col-resize;
		height: 100%;
		position: absolute;
		width: 100%;
		z-index: 10003;
	}

	.rc-slider {
		height: 10px;
		position: relative;
		width: 150px;

		.rc-slider-track,
		.rc-slider-rail {
			border-radius: 10000px;
			cursor: pointer;
			height: 100%;
			position: absolute;
			width: 100%;
		}

		.rc-slider-rail {
			background-color: $background-lightgray;
			z-index: 10002;
		}

		.rc-slider-track {
			background-color: $foreground-darkgray;
			z-index: 10003;
		}
	}
}
