// MediaSlider.module.less
//
@import "~@enact/sandstone/styles/variables.less";
@import "~@enact/sandstone/styles/skin.less";

@sand-mediaplayer-slider-tap-area: 70px;
@sand-mediaplayer-slider-height: 6px;
@sand-mediaplayer-slider-knob-size: 24px;
@sand-video-player-padding-side: 42px;

.sliderFrame {
	@knob-transform-active: @sand-translate-center scale(1);
	@knob-transform-resting: @sand-translate-center scale(@sand-mediaplayer-slider-knob-resting-state-scale);
	@slider-padding-v: ((@sand-mediaplayer-slider-tap-area - @sand-mediaplayer-slider-height) / 2);
	@slider-padding-h: @sand-mediaplayer-slider-knob-size;
	margin-left: 130px;
	margin-right: 130px;
	flex: 1 0 auto;

	&.hidden {
		will-change: opacity;
		opacity: 0;
	}

	.mediaSlider {
		margin: 0 @slider-padding-h;
		padding: @slider-padding-v 0;
		height: @sand-mediaplayer-slider-height;
		// Add a tap area that extends to the edges of the screen, to make the slider more accessible
		&::before {
			content: "";
			position: absolute;
			.position(0, -(@sand-video-player-padding-side));
		}

		// Grow the knob when the Slider gets spotted
		.focus({
			&.active,
			&.pressed {
				.knob::before {
					transform: @knob-transform-active;
					opacity: 1;
				}
			}
		});

		.spottable({
			&.pressed {
				.knob::before {
					transform: @knob-transform-active;
					opacity: 1;
				}
			}
		});
	}

	// 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);

		//-webkit-transition: -webkit-transform @slide-transition-function 0.2s;
		//transition:                 transform @slide-transition-function 0.2s;

		&::before {
			width: @sand-mediaplayer-slider-knob-size;
			height: @sand-mediaplayer-slider-knob-size;
			border-width: 0;
			border-radius: @sand-mediaplayer-slider-knob-size;
			transform: @knob-transform-resting;
			opacity: 0;
			will-change: transform, opacity;
			-webkit-transition: -webkit-transform @activate-transition-function 0.2s, opacity ease 0.2s;
			transition:                 transform @activate-transition-function 0.2s, opacity ease 0.2s;
		}
	}

	&.scrubbing {
		.knob {
			display: block;
		}
	}
}

.applySkins({
	.sliderFrame {
		.slider {
			.bar {
				background-color: @sand-mediaslider-bar-bg-color;
			}

			.fill {
				background-color: @sand-mediaslider-fill-bg-color;
			}

			.knob {
				&::before {
					background-color: @sand-mediaplayer-slider-knob-color;
				}
			}

			.focus({
				.bar {
					background-color: @sand-mediaslider-bar-bg-color;
				}

				.fill {
					background-color: @sand-mediaslider-fill-bg-color;
				}

				.disabled({
					.bar {
						opacity: @sand-mediaslider-disabled-bar-opacity;
					}
				});
			});

			.disabled({
				.bar {
					opacity: @sand-mediaslider-disabled-bar-opacity;
				}
			});
		}
	}
});