@import (reference) '../../../assets/css/index';

@prefixClass: ~'@{fishd-prefix}-color-picker';

@import 'index/Layout';
@import 'index/Trigger';
@import 'index/Panel';
@import 'index/Preview';
@import 'index/Board';
@import 'index/Ribbon';
@import 'index/Alpha';
@import 'index/Params';
@import 'index/History';
@import 'index/QuickPanel';

.@{prefixClass} {
  &-wrap {
    display: inline-block;
  }
  position: absolute;
  left: -9999px;
  top: -9999px;
  z-index: @zindex-popover;
  .effect() {
    animation-duration: 0.3s;
    animation-fill-mode: both;
    transform-origin: 0 0;
    /* stylelint-disable-next-line */
    display: block !important;
  }

  &-arrow {
    background: @popover-bg;
    width: sqrt(@popover-arrow-width * @popover-arrow-width * 2);
    height: sqrt(@popover-arrow-width * @popover-arrow-width * 2);
    transform: rotate(45deg);
    position: absolute;
    display: block;
    border-color: transparent;
    border-style: solid;
    z-index: 1;
  }

  &-placement-topCenter > &-content > &-arrow {
    bottom: -4px;
    box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.07);
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    &.quick {
      bottom: 1px;
    }
  }

  &-placement-topCenter &-quick-panel {
    border-radius: @border-radius-lg;
    box-shadow: @box-shadow-base;
  }
}