
// @require core/widget/widget.scss

//TODO: Add again icon support

/* SWITCH */

.switch {

  @extend %widget;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  height: $switch-handler-height;
  width: $switch-bar-width + $switch-handler-width;

  /* INPUT */

  input {
    display: none !important;
  }

  /* BAR */

  &-bar {
    @include color ( $switch-bar-color, $switch-bar-color-force, $switch-bar-color-basic );
    width: $switch-bar-width;
    height: $switch-bar-height;
    border-radius: $switch-bar-border-radius;
  }

  /* HANDLER */

  &-handler {

    @include absolute ( 0 false false 0 );
    @include color ( $switch-handler-color, $switch-handler-color-force, $switch-handler-color-basic );
    @include z-depth ( $switch-handler-z-depth, $switch-handler-z-depth-force, $switch-handler-z-depth-basic );
    z-index: 1;
    cursor: move;
    width: $switch-handler-width;
    height: $switch-handler-height;
    border-radius: $switch-handler-border-radius;
    transition: transform $switch-animation-duration;

    /* BEFORE */

    &:before {
      @include fill-absolute ();
      background-color: inherit;
      content: '';
      border-radius: $switch-handler-border-radius;
      z-index: -1;
      opacity: 0;
      transform: scale($switch-handler-before-scale);
      transition: none; // Safari fix
      transition-property: opacity, transform;
      transition-duration: $switch-animation-duration;
    }

    /* DRAGGING */

    &.draggable-dragging {
      transition: none; // Safari fix
    }

  }

  /* ENABLED */

  &:not(.disabled) {

    /* HANDLER */

    .switch-handler {

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

        /* BEFORE */

        &:before {
          opacity: $switch-active-handler-before-opacity;
          transform: scale($switch-active-handler-before-scale);
        }

      }

    }

  }

}
