
// @require core/widget/widget.scss

/* SLIDER */

.slider {

  @extend %widget;
  @include margin-x ( $slider-handler-width / 2 ); //FIXME: This makes `.multiple > .slider * n` ugly
  display: flex;
  align-items: center;
  height: $slider-handler-height;
  cursor: pointer;

  /* INPUT */

  input {
    display: none !important;
  }

  /* BAR */

  &-bar {
    @include color ( $slider-bar-color, $slider-bar-color-force, $slider-bar-color-basic );
    // @include margin-x ( $slider-handler-width / 2 );
    position: relative;
    overflow: hidden;
    height: $slider-bar-height;
    border-radius: $slider-bar-border-radius;
    width: 100%;
    transform: translateZ(0); // Otherwise the border radius is not always respected
  }

  /* HIGHLIGHT */

  &-highlight {
    @include color ( $slider-highlight-color, $slider-highlight-color-force, $slider-highlight-color-basic );
    @include fill ();
    position: absolute;
    right: 100%;
  }

  /* HANDLER */

  &-handler {
    @include center-absolute ( false, $slider-handler-height );
    @include color ( $slider-handler-color, $slider-handler-color-force, $slider-handler-color-basic );
    @include z-depth ( $slider-handler-z-depth, $slider-handler-z-depth-force, $slider-handler-z-depth-basic );
    display: flex;
    align-items: center;
    justify-content: center;
    left: 0;
    margin-left: - $slider-handler-width / 2;
    width: $slider-handler-width;
    height: $slider-handler-height;
    border-radius: $slider-handler-border-radius;
    cursor: move;
    transition: none; // Safari fix
    transition-property: transform, border-radius, box-shadow;
    transition-duration: $slider-animation-duration;
  }

  /* LABEL */

  &-label {
    vertical-align: middle;
    font-size: $slider-label-font-size;
    opacity: 0;
    transition: opacity $slider-animation-duration;
    transform: rotate(-45deg);
  }

  /* ENABLED */

  &:not(.disabled) {

    /* HANDLER */

    .slider-handler {

      &:active, //FIXME: Not working on Firefox
      &.draggable-dragging {

        border-bottom-right-radius: 0;
        opacity: 1;
        transform: translateY(-100% * $SQRT2) rotate(45deg) scale($slider-active-handler-scale);
        box-shadow: $slider-active-handler-box-shadow;

        /* LABEL */

        .slider-label {
          opacity: 1;
        }

      }

    }

  }

}
