@import '../../style/themes/index';

@color-picker-prefix-cls: ~'@{x6-prefix}-color-picker';

.@{color-picker-prefix-cls} {
  display: block;
  padding: 4px;
  background: #fafafa;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3;

  &-overlay {
    &.ant-popover-placement-bottom,
    &.ant-popover-placement-bottomLeft,
    &.ant-popover-placement-bottomRight {
      padding-top: 0;
    }

    .ant-popover-arrow {
      display: none;
    }

    .ant-popover-inner-content {
      padding: 0;
      background: transparent;

      .sketch-picker {
        box-shadow: #e9e9e9 0 0 0 1px, rgba(0, 0, 0, 0.1) 0 8px 16px !important;
      }
    }
  }

  &-block {
    height: 16px;
    border: 1px solid #787878;
    border-radius: 2px;
    transition: all 0.3;
  }

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