$color-wrapper-border: #f7f7f7;
$color-color-border: #5f5f5f;

@mixin effect() {
  display: block;
  animation-duration: 0.3s;
  animation-fill-mode: both;
  transform-origin: 0 0;
}

// mixin color drop trigger
@mixin makeColorTrigger($prefixCls) {
  .#{$prefixCls}-toggle {
    display: inline-block;
    width: 20px;
    height: 20px;
    padding: 2px;
    cursor: pointer;
    border: 1px solid #999;
    border-radius: 2px;
    box-shadow: 0 0 0 2px white inset;
    user-select: none;
  }

  .#{$prefixCls}-swatch {
    position: relative;
    display: inline-block;
    padding: 1px 18px 5px 5px;
    font-size: 12px;
    cursor: pointer;
    background: white;
    border: 1px solid $color-wrapper-border;
    border-radius: 1px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);

    &::after {
      position: absolute;
      top: 2px;
      right: 5px;
      content: '▼';
    }

    &.#{$prefixCls}-swatch-disabled {
      cursor: not-allowed;
      background: #ececec;
    }
  }

  .#{$prefixCls}-color {
    display: inline-block;
    width: 36px;
    height: 14px;
    vertical-align: middle;
    border: 1px solid $color-color-border;
    border-radius: 2px;
  }

  .#{$prefixCls}-bordered {
    display: inline-block;
    width: 36px;
    height: 30px;
    vertical-align: middle;
    border: 1px solid #e8e8e8;
    border-radius: 2px;

    &#{&}-disabled {
      cursor: not-allowed;
      background: #ececec;
    }
  }
}

@mixin makeColorPanel($prefixCls) {
  $panelPrefixCls: #{$prefixCls}-panel;

  @include makeColorTrigger($prefixCls);

  .#{$prefixCls} {
    position: absolute;
    top: -9999px;
    left: -9999px;
    z-index: 1000;

    &-wrap {
      display: inline-block;
    }

    &-animate {
      @include effect();

      opacity: 0;
      animation-name: colorPickerSlideUpIn;
      animation-play-state: running;
      animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
    }
  }

  // layout
  .#{$panelPrefixCls}-inner {
    position: relative;
    padding-bottom: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 1px 5px #ccc;
  }

  .#{$panelPrefixCls}-wrap {
    position: relative;
    width: 100%;
    height: 30px;
    margin: 5px 0 0;

    &-preview {
      position: absolute;
      right: 8px;
    }

    &-ribbon {
      position: absolute;
      top: 0;
      right: 43px;
      left: 8px;
      height: 30px;
    }

    &-alpha {
      position: absolute;
      right: 43px;
      bottom: 0;
      left: 8px;
      height: (30px - 5px) / 2;
    }
  }

  .#{$panelPrefixCls}-wrap-has-alpha {
    .#{$panelPrefixCls}-wrap-ribbon {
      height: (30px - 5px) / 2;
    }
  }

  // panel
  .#{$panelPrefixCls} {
    z-index: 9;
    display: inline-block;
    background-color: white;
    border-radius: 4px;
    outline: none;
    box-sizing: border-box;
    user-select: none;

    * {
      box-sizing: border-box;
    }

    &-open {
      display: block;
    }

    &-close {
      display: none;
    }
  }

  // preview
  .#{$panelPrefixCls}-preview {
    width: 30px;
    height: 30px;
    overflow: hidden;
    background-image: url('data:image/png;base64,R0lGODdhCgAKAPAAAOXl5f///ywAAAAACgAKAEACEIQdqXt9GxyETrI279OIgwIAOw==');
    border-radius: 2px;

    span {
      box-shadow: 0 0 2px gray inset;
    }

    span,
    input[type='color'] {
      position: absolute;
      display: block;
      width: 30px;
      height: 100%;
      border-radius: 2px;
    }

    input[type='color'] {
      opacity: 0;
    }
  }

  // board
  .#{$panelPrefixCls}-board {
    position: relative;
    margin: 8px 8px 0;
    font-size: 0;
    user-select: none;

    span {
      position: absolute;
      top: -999px;
      left: -999px;
      z-index: 2;
      width: 9px;
      height: 9px;
      margin: -4px 0 0 -4px;
      border: 1px solid white;
      border-radius: 10px;
      box-shadow: 0 0 1px rgba(120, 120, 120, 0.7);
    }

    &-hsv {
      position: relative;
      z-index: 1;
      width: 200px;
      height: 150px;
      border-radius: 2px;
    }

    &-value {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 2;
      width: 100%;
      height: 100%;
      background: linear-gradient(to bottom, transparent 0%, black 100%);
      background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9InJnYigwLDAsMCkiIHN0b3Atb3BhY2l0eT0iMCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2xlc3NoYXQtZ2VuZXJhdGVkKSIgLz48L3N2Zz4=');
      background-size: 100% 100%;
      border-radius: 2px;
    }

    &-saturation {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
      width: 100%;
      height: 100%;
      background: linear-gradient(to right, whitefff 0%, transparent 100%);
      background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0icmdiKDAsMCwwKSIgc3RvcC1vcGFjaXR5PSIwIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2xlc3NoYXQtZ2VuZXJhdGVkKSIgLz48L3N2Zz4=');
      background-size: 100% 100%;
      border-radius: 2px;
    }

    &-handler {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 3;
      width: 100%;
      height: 100%;
      cursor: crosshair;
      border-radius: 2px;
      box-shadow: 0 0 2px grey inset;
      user-select: none;
    }
  }

  // Ribbon
  .#{$panelPrefixCls}-ribbon {
    position: relative;
    height: 100%;
    background: linear-gradient(to right, red 0%, #f90 10%, #cdff00 20%, #35ff00 30%, #0f6 40%, #00fffd 50%, #06f 60%, #3200ff 70%, #cd00ff 80%, #f09 90%, red 100%);
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNmZjAwMDAiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMTAlIiBzdG9wLWNvbG9yPSIjZmY5OTAwIiBzdG9wLW9wYWNpdHk9IjEiLz48c3RvcCBvZmZzZXQ9IjIwJSIgc3RvcC1jb2xvcj0iI2NkZmYwMCIgc3RvcC1vcGFjaXR5PSIxIi8+PHN0b3Agb2Zmc2V0PSIzMCUiIHN0b3AtY29sb3I9IiMzNWZmMDAiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iNDAlIiBzdG9wLWNvbG9yPSIjMDBmZjY2IiBzdG9wLW9wYWNpdHk9IjEiLz48c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzAwZmZmZCIgc3RvcC1vcGFjaXR5PSIxIi8+PHN0b3Agb2Zmc2V0PSI2MCUiIHN0b3AtY29sb3I9IiMwMDY2ZmYiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iNzAlIiBzdG9wLWNvbG9yPSIjMzIwMGZmIiBzdG9wLW9wYWNpdHk9IjEiLz48c3RvcCBvZmZzZXQ9IjgwJSIgc3RvcC1jb2xvcj0iI2NkMDBmZiIgc3RvcC1vcGFjaXR5PSIxIi8+PHN0b3Agb2Zmc2V0PSI5MCUiIHN0b3AtY29sb3I9IiNmZjAwOTkiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmMDAwMCIgc3RvcC1vcGFjaXR5PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2xlc3NoYXQtZ2VuZXJhdGVkKSIgLz48L3N2Zz4=');
    background-size: 100% 100%;
    border-radius: 2px;
    box-shadow: 0 0 2px grey inset;


    span {
      position: absolute;
      top: 0;
      width: 4px;
      height: 100%;
      padding: 1px 0;
      margin-left: -2px;
      background-color: white;
      border: 1px solid black;
      border-radius: 3px;
    }

    &-handler {
      position: absolute;
      left: -2%;
      width: 104%;
      height: 100%;
      cursor: pointer;
    }
  }

  // alpha
  .#{$panelPrefixCls}-alpha {
    position: relative;
    width: 100%;
    height: 100%;
    background-image: url('data:image/png;base64,R0lGODdhCgAKAPAAAOXl5f///ywAAAAACgAKAEACEIQdqXt9GxyETrI279OIgwIAOw==');
    background-repeat: repeat;
    border-radius: 2px;
    user-select: none;

    &-bg {
      position: absolute;
      width: 100%;
      height: 100%;
      border-radius: 2px;
      box-shadow: 0 0 2px grey inset;
    }

    span {
      position: absolute;
      top: 0;
      width: 4px;
      height: 100%;
      padding: 1px 0;
      margin-left: -2px;
      background-color: white;
      border: 1px solid black;
      border-radius: 3px;
    }

    &-handler {
      position: absolute;
      left: -2%;
      width: 104%;
      height: 100%;
      cursor: pointer;
    }
  }

  // params
  .#{$panelPrefixCls}-params {
    font-size: 12px;

    &-input {
      padding: 2px 8px;
      overflow: hidden;
    }

    input {
      float: left;
      padding: 1px;
      margin: 0;
      font-family: 'Helvetica Neue', 'Helvetica', sans-serif;
      text-align: center;
      border: 1px solid #cacaca;
      border-radius: 2px;
      user-select: text;
    }

    &-hex {
      width: 52px;
    }

    input[type='number'] {
      width: 44px;
      margin-left: 5px;
      -moz-appearance: textfield;

      &::-webkit-inner-spin-button {
        -webkit-appearance: none;
      }
    }

    &-lable {
      height: 22px;
      padding: 2px 8px;
      line-height: 18px;
      user-select: none;

      label {
        float: left;
        text-align: center;
      }

      &-hex {
        width: 52px;
      }

      &-number,
      &-alpha {
        width: 44px;
        margin-left: 5px;
        text-transform: uppercase;
      }

      &-number:hover {
        cursor: pointer;
        background-color: #eee;
        border-radius: 2px;
        box-shadow: 0 0 0 1px #ccc inset;
      }
    }
  }

  .#{$panelPrefixCls}-params-has-alpha {
    input[type='number'] {
      width: 32px;
    }

    .#{$panelPrefixCls}-params-lable {
      &-number,
      &-alpha {
        width: 32px;
      }
    }
  }
}

@keyframes colorPickerSlideUpIn {
  0% {
    opacity: 0;
    transform-origin: 0% 0%;
    transform: scaleY(0);
  }

  100% {
    opacity: 1;
    transform-origin: 0% 0%;
    transform: scaleY(1);
  }
}

@keyframes colorPickerSlideUpOut {
  0% {
    opacity: 1;
    transform-origin: 0% 0%;
    transform: scaleY(1);
  }

  100% {
    opacity: 0;
    transform-origin: 0% 0%;
    transform: scaleY(0);
  }
}

@keyframes colorPickerSlideDownIn {
  0% {
    opacity: 0;
    transform-origin: 100% 100%;
    transform: scaleY(0);
  }

  100% {
    opacity: 1;
    transform-origin: 100% 100%;
    transform: scaleY(1);
  }
}

@keyframes colorPickerSlideDownOut {
  0% {
    opacity: 1;
    transform-origin: 100% 100%;
    transform: scaleY(1);
  }

  100% {
    opacity: 0;
    transform-origin: 100% 100%;
    transform: scaleY(0);
  }
}