.arco-color-picker-points-bar {
  position: relative;
  width: 150px;
  height: 6px;
  margin-right: 16px;
  border-radius: 4px;

  &::before {
    content: '';
    position: relative;
    z-index: -1;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 4px;
    background-image: linear-gradient(
        45deg,
        #404040 25%,
        transparent 0,
        transparent 75%,
        #404040 0
      ),
      linear-gradient(
        45deg,
        #404040 25%,
        transparent 0,
        transparent 75%,
        #404040 0
      );
    background-color: #4a4a4a;
    background-size: 10px 10px;
    background-position: 0 0, 5px 5px;
  }

  .arco-color-picker-points-dot {
    position: absolute;
    top: -2px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    transform: translateX(-50%);
    border: 2px solid #ffffff;
    cursor: pointer;

    &.arco-color-picker-points-dot-active {
      width: 12px;
      height: 12px;
      box-shadow: 0 0 0 3px rgba(36, 145, 247, 0.6);
    }
  }
}