.moon-progress-bar.moon-video-player-transport-slider {
	height: @moon-video-player-transport-slider-height;
	background-color: #323232;
	margin: 0;

	.moon-slider-popup {
		pointer-events: none;
		&.above {
			padding-left: 0px;
		}
	}

	// Knob
	.knob {
		@activate-transition-function: cubic-bezier(0.15, 0.85, 0.6, 1.65);
		@slide-transition-function:    cubic-bezier(0.15, 0.85, 0.53, 1.09);

		position: absolute;
		width: (@moon-video-player-transport-slider-knob-size * 2);
		top: 0;
		height: @moon-video-player-transport-slider-knob-size;
		border-radius: @moon-video-player-transport-slider-knob-size;
		border-top-left-radius: 0;
		border-top-right-radius: 0;
		background-color: #fff;
		display: none;
		-webkit-transform-origin: top;
		transform-origin: top;
		-webkit-transform: translateZ(0) translateX(-50%) scale(0.5);
		transform:         translateZ(0) translateX(-50%) scale(0.5);
		-webkit-transition: -webkit-transform @activate-transition-function 0.2s;
		transition:                 transform @activate-transition-function 0.2s;

		.moon-video-player.spotlight-5way-mode & {
			-webkit-transition: -webkit-transform @activate-transition-function 0.2s, left @slide-transition-function 0.2s;
			transition:                 transform @activate-transition-function 0.2s, left @slide-transition-function 0.2s;
		}

		.moon-taparea( -(@moon-video-player-transport-slider-knob-size) ); // The end result of this should be a knob taparea that's the same height as the slider's tap area
		// This allows the tap area to extend past the edge of the screen, for when the cursor moves
		// past the end of the slider, and into the little gap that separates the edge of the
		// normally square tap area, to the edge of the screen. This code widens the taparea so
		// there's no gap, and the knob still receives the click event.
		&::before {
			left: (-(@moon-video-player-side-padding * 2));
			right: (-(@moon-video-player-side-padding * 2));
		}
	}
	&.visible {
		.knob {
			display: block;
		}
	}
	&.pressed {
		.knob {
			-webkit-transform: translateZ(0) translateX(-50%) scale(0.75);
			transform:         translateZ(0) translateX(-50%) scale(0.75);
		}
	}

	// Status Indicator
	.status-indicator {
		&.moon-slider-popup {
			position: relative;
			display: table;
			left: 0;
			margin: 0 auto;
		}
		> * {
			background-color: @moon-dark-gray; //Todo: check exact color
		}

		.moon-slider-popup-center {
			font-family: @moon-popup-header-font-family;
			font-size: 36px;
			color: @moon-white;
			border-radius: 48px;
			line-height: 48px;
			padding: 0 24px;

			.moon-icon {
				color: inherit;
			}
		}
	}

	// Bar
	.bar-bar {
		height: 100%;
		background-color: @moon-accent;
		position: absolute;
		top: 0;
	}
	.bg-bar {
		height: 100%;
		background-color: @moon-dark-gray;
		position: absolute;
		top: 0;
	}
	.popup-label {
		.moon-large-button-text;
		.font-kerning(none);
		white-space: nowrap;
		vertical-align: top;

		> * {
			display: inline-block;
		}
	}

	// Indicator
	.indicator-wrapper {
		height: @moon-video-player-transport-slider-height;
		line-height: @moon-video-player-transport-slider-height;
		top: 0;
		position: absolute;

		&.start {
			left: @moon-video-player-side-padding;
			text-align: left;
		}
		&.end {
			right: @moon-video-player-side-padding;
			text-align: right;
		}
	}
	// Indicator-bar doesn't appear to be used at all?
	.indicator-bar {
		width: 3px;
		height: 45px;	//need more precious value
		margin-top: 18px;	//need more precious value
		background-color: @moon-indicator-bar-bg-color;	//#ffffff, @moon-white

		&.left {
			float: left;
		}
		&.right {
			float: right;
		}
	}
	.indicator-text {
		font-size: 45px;	//34pt
		font-family: @moon-popup-header-font-family;
		color: @moon-indicator-text-color;	//#ffffff, @moon-white
	}

	// Reassign video-player specific sizing to the slider's tap-area
	&::before {
		top: (@moon-video-player-transport-slider-height / 2) - (@moon-video-player-transport-slider-tap-area / 2);
		right: -@moon-video-player-side-padding;
		bottom: auto;
		left: -@moon-video-player-side-padding;
		height: @moon-video-player-transport-slider-tap-area;
	}
}

.enyo-locale-non-latin .moon-video-player-transport-slider {
	.popup-label {
		.enyo-locale-non-latin .moon-large-button-text;
	}
	.indicator-text {
		font-family: @moon-non-latin-font-family;
	}
}
.enyo-locale-right-to-left .moon-video-player-transport-slider .indicator-text {
	direction: rtl;
}