// 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;
  width: 1540px;
  height: 6px;

  &.videoVertical {
    width: 324px;
  }
  &.hidden {
    /* will-change: opacity; // WebOS TV 메모리 최적화를 위해 주석 처리 */
    opacity: 0;
  }

  .mediaSlider {
    margin: 0 @slider-padding-h;
    padding: @slider-padding-v 0;
    height: @sand-mediaplayer-slider-height;
    right: 154px;
    // 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: 50%;
      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;
    }
  }
  &::focus {
    background-color: red;
  }
}

.applySkins({
	.sliderFrame {
		.slider {
			.bar {
				background-color: #fff;
			}

			.fill {
				background-color: #c70850;
			}

			.knob {
				&::before {
					width: 24px;
					height: 24px;
					background-color: #fff;


				}
			}

			.focus({
				.bar {
					background-color: #fff;
				}

				.fill {
					background-color: #c70850;
				}

				.disabled({
					.bar {
						opacity: @sand-mediaslider-disabled-bar-opacity;
					}
        .Knob {
          background-color: #fff;
        }
				});
			});

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