
// @require core/widget/widget.scss

/* COLORPICKER */

.colorpicker {

  @extend %widget;
  display: flex;

  /* INPUT */

  input {
    display: none !important;
  }

  /* HANDLER */

  &-handler {
    @if z-depth-exists( $colorpicker-handler-z-depth ) {
      box-shadow: map-get( $z-depths, $colorpicker-handler-z-depth ), $colorpicker-handler-shadow;
    } @else {
      box-shadow: $colorpicker-handler-shadow;
    }
    position: absolute;
    z-index: 2;
    cursor: move;
    border-width: $colorpicker-handler-border-width;
    border-style: $colorpicker-handler-border-style;
    border-color: $colorpicker-handler-border-color;
    background-color: $colorpicker-handler-bg-color;
  }

  /* SATURATION & BRIGHTNESS / HUE */

  &-sb,
  &-hue {
    position: relative;
    cursor: pointer;
    border-width: $colorpicker-wrp-border-width;
    border-style: $colorpicker-wrp-border-style;
    border-color: $colorpicker-wrp-border-color;
  }

  /* SATURATION & BRIGHTNESS */

  &-sb {

    @include dimension ( $colorpicker-sb-wrp-size );
    background-color: red;

    /* BEFORE / AFTER */

    &:before,
    &:after {
      @include fill-absolute ();
      content: '';
    }

    /* BEFORE */

    &:before {
      @include gradient-x ( white, transparent );
    }

    /* AFTER */

    &:after {
      @include gradient-y ( transparent, black );
      z-index: 1;
    }

    /* HANDLER */

    .colorpicker-handler {
      width: $colorpicker-handler-sb-height;
      height: $colorpicker-handler-sb-width;
      margin: ( - $colorpicker-handler-sb-height / 2 ) 0 0 ( - $colorpicker-handler-sb-width / 2 );
      border-radius: $colorpicker-handler-sb-border-radius;
    }

  }

  /* HUE */

  &-hue {

    width: $colorpicker-hue-wrp-width;
    height: $colorpicker-hue-wrp-height;
    margin-left: $gutter;

    /* BEFORE */

    &:before {
      @include fill-absolute ();
      content: '';
      background: linear-gradient(to bottom, red 0%, fuchsia ( 100% / 6 ), blue ( 100% / 6 * 2 ), aqua 50%, lime ( 100% / 6 * 4 ), yellow ( 100% / 6 * 5 ), red 100%);
    }

    /* HANDLER */

    .colorpicker-handler {
      width: $colorpicker-handler-hue-width;
      height: $colorpicker-handler-hue-height;
      margin-top: - ( $colorpicker-handler-hue-height / 2 );
      border-radius: $colorpicker-handler-hue-border-radius;
    }

  }

}
