// panel
.colors-picker-panel-container {
  width: 244px;
  border-radius: 4px;
  border: 1px solid var(--color-border-2);
  background: var(--color-bg-1);
  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.25);
  user-select: none;
}

.colors-picker-panel {
  padding: 12px;
}

.colors-picker-control-wrapper {
  margin: 12px 0;
  display: flex;
  gap: 8px;
}

.colors-picker-control-bars {
  flex: 1;

  &:has(:only-child) {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

.colors-picker-input-wrapper {
  display: flex;
  gap: 4px;
  font-size: 12px;
}

.colors-picker-input {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;

  &.colors-picker-input-hex {
    flex: 2.1875;
  }

  .arco-input {
    font-size: 12px;
    padding-left: 0;
    padding-right: 0;
    text-align: center;
  }
}

.colors-picker-input-label {
  margin-top: 4px;
  color: var(--color-text-3);
}

// 色板
.colors-picker-palette {
  position: relative;
  width: 100%;
  height: 150px;
  cursor: pointer;
  background-image: linear-gradient(0deg, #000, transparent),
    linear-gradient(90deg, rgb(255, 255, 255), rgba(255, 255, 255, 0));
  border-radius: 2px;
}

.colors-picker-handler {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: transparent;
  border: 2px solid #fff;
  transform: translate(-50%, -50%);
}

// 色相、透明度的控制条
.colors-picker-control-bar {
  position: relative;
  padding: 0 5px;
  height: 10px;
  border-radius: 5px;
  border: 1px solid #17171a;
  margin: 3px 0;

  .colors-picker-control-bar-inner {
    position: relative;
    height: 100%;
  }

  .colors-picker-handler {
    width: 10px;
    height: 10px;
    top: -1px;
    transform: translateX(-50%);
  }

  &.colors-picker-control-hue {
    background-image: linear-gradient(
      90deg,
      red,
      #ff0 17%,
      #0f0 33%,
      #0ff 50%,
      #00f 67%,
      #f0f 83%,
      red
    );

    .colors-picker-control-bar-inner {
      background-image: linear-gradient(
        90deg,
        red,
        #ff0 17%,
        #0f0 33%,
        #0ff 50%,
        #00f 67%,
        #f0f 83%,
        red
      );
    }
  }

  &.colors-picker-control-alpha {
    background-image: conic-gradient(
      #ccc 0,
      #ccc 90deg,
      #fff 90deg,
      #fff 180deg,
      #ccc 180deg,
      #ccc 270deg,
      #fff 270deg,
      #fff 360deg
    );
    background-size: 6px 6px;
  }
}

.colors-picker-control-alpha {
  margin-top: 7px;
}

.colors-picker-control-bar-right-box {
  position: absolute;
  right: -5px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  top: 0;
  width: 5px;
  height: 8px;
}

// 最近使用
.colors-picker-history {
  border-top: 1px solid var(--color-border-1);
  padding: 12px;
}

.colors-picker-history-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

.colors-picker-history-icon {
  width: 12px;
  height: 12px;
  color: var(--color-text-2);
  transition: transform linear 200ms;

  &.colors-picker-history-collapsed {
    transform: rotate(-90deg);
  }
}

.colors-picker-history-list {
  display: flex;
  flex-wrap: wrap;
  margin-top: 12px;
}

.colors-picker-history-type-title {
  margin-top: 12px;
  color: var(--color-text-2);
}

// 最近使用 - 纯色
.colors-picker-history-pure-wrapper {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}

// 预览颜色
.colors-picker-preview {
  position: relative;
  overflow: hidden;
  width: 28px;
  height: 28px;
  border-radius: 1px;
  background-image: conic-gradient(
    #ccc 0,
    #ccc 90deg,
    #fff 90deg,
    #fff 180deg,
    #ccc 180deg,
    #ccc 270deg,
    #fff 270deg,
    #fff 360deg
  );
  background-size: 8px 8px;

  .colors-picker-preview-color {
    width: 100%;
    height: 100%;
  }

  &.colors-picker-preview-circle {
    border-radius: 50%;
  }

  &.colors-picker-preview-border {
    border: 1px solid #333;
  }

  &.disabled {
    opacity: 0.8;
  }
}

// 多色
.pures-color-picker-trigger {
  position: relative;
  width: 100%;
  height: 28px;
  padding: 7px;
  border: 1px solid var(--color-border-2);
  border-radius: 4px;

  &::before {
    position: absolute;
    content: '';
    top: 7px;
    left: 7px;
    width: calc(100% - 14px);
    height: calc(100% - 14px);
    border-radius: 1px;
    background-image: conic-gradient(
      #ccc 0,
      #ccc 90deg,
      #fff 90deg,
      #fff 180deg,
      #ccc 180deg,
      #ccc 270deg,
      #fff 270deg,
      #fff 360deg
    );
    background-size: 8px 8px;
  }

  .pures-color-picker-trigger-color {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 1px;
  }

  &.disabled {
    background-color: var(--color-fill-1);
    opacity: 0.8;
    cursor: not-allowed;
  }
}

.pures-color-picker-cards {
  display: flex;
  flex-wrap: wrap;
  padding: 6px 11px;
  border-bottom: 1px solid var(--color-border-1);
  gap: 4px;

  .pures-color-picker-card {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    border-radius: 4px;
    border-width: 2px;
    border-style: solid;
    cursor: pointer;
  }

  .pures-color-picker-add {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    border-radius: 4px;
    background-color: rgba(255, 255, 255, 0.08);
    cursor: pointer;
    font-size: 14px;
  }
}

// 取色器
.colors-picker-eye-dropper {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  color: var(--color-text-2);
  cursor: pointer;

  &:hover {
    background: rgb(var(--primary-6));
    color: var(--color-text-1);
  }
}

// 纯色输入框
.pure-color-picker {
  display: flex;
  gap: 8px;

  .pure-color-picker-hex {
    font-size: 12px;
  }

  .pure-color-picker-input-wrap {
    display: flex;
    gap: 8px;
    flex: 2;
  }

  .pure-color-picker-alpha {
    flex: 1;
    flex-shrink: 0;
    font-size: 12px;
  }
}

.pure-color-picker-preview {
  width: 28px;
  height: 28px;
  padding: 7px;
  flex-shrink: 0;
  border-radius: 4px;
  border: 1px solid var(--color-border-2);
  background: var(--color-bg-white);

  &.disabled {
    background-color: var(--color-fill-1);

    .pure-color-picker-preview-inner {
      opacity: 0.8;
    }
  }
}

.pure-color-picker-preview-inner {
  width: 100%;
  height: 100%;
  border-radius: 1px;
  background-image: conic-gradient(
    #ccc 0deg,
    #ccc 90deg,
    #fff 90deg,
    #fff 180deg,
    #ccc 180deg,
    #ccc 270deg,
    #fff 270deg,
    #fff 360deg,
    #ccc 360deg
  );
  background-size: 8px 8px;

  div {
    width: 100%;
    height: 100%;
  }
}

// 多种类型的颜色选择 Tab
.colors-picker-tabs {
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--color-border-1);

  .colors-picker-tab {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    cursor: pointer;

    &.active {
      width: 18px;
      height: 18px;
      border: 1px solid rgb(var(--primary-6));
    }

    &.colors-picker-tab-pure {
      background-color: rgba(180, 183, 193, 0.8);

      &.active {
        background-color: rgba(var(--primary-6), 0.8);
      }
    }

    &.colors-picker-tab-pures {
      background-image: linear-gradient(
        to right,
        rgba(180, 183, 193, 0.8) 0%,
        rgba(180, 183, 193, 0.8) 33.3%,
        rgba(180, 183, 193, 0.6) 33.3%,
        rgba(180, 183, 193, 0.6) 66.6%,
        rgba(180, 183, 193, 0.4) 66.6%,
        rgba(180, 183, 193, 0.4) 100%
      );

      &.active {
        background-image: linear-gradient(
          to right,
          rgba(var(--primary-6), 0.8) 0%,
          rgba(var(--primary-6), 0.8) 33.3%,
          rgba(var(--primary-6), 0.6) 33.3%,
          rgba(var(--primary-6), 0.6) 66.6%,
          rgba(var(--primary-6), 0.4) 66.6%,
          rgba(var(--primary-6), 0.4) 100%
        );
      }
    }

    &.colors-picker-tab-linear {
      background-image: linear-gradient(
        to bottom,
        rgba(180, 183, 193, 1),
        rgba(180, 183, 193, 0.1)
      );

      &.active {
        background-image: linear-gradient(
          to bottom,
          rgba(var(--primary-6), 1),
          rgba(var(--primary-6), 0.1)
        );
      }
    }
  }
}

// 渐变的点控制
.colors-picker-linear-points-bar-wrapper {
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 8px;

  .colors-picker-linear-points-bar {
    position: relative;
    flex: 1;
    height: 8px;
    border-radius: 4px;
    padding: 0 4px;
    background-image: conic-gradient(
      #ccc 0deg,
      #ccc 90deg,
      #fff 90deg,
      #fff 180deg,
      #ccc 180deg,
      #ccc 270deg,
      #fff 270deg,
      #fff 360deg,
      #ccc 360deg
    );
    background-size: 8px 8px;
  }

  .colors-picker-points-bar-prev-half,
  .colors-picker-points-bar-next-half {
    position: absolute;
    width: 4px;
    height: 8px;
    top: 0;
  }

  .colors-picker-points-bar-prev-half {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    left: 0;
  }

  .colors-picker-points-bar-next-half {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    right: 0;
  }

  .colors-picker-linear-points-bar-color {
    width: 100%;
    height: 100%;
    position: relative;
  }

  .colors-picker-linear-point {
    position: absolute;
    top: -1px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid #fff;
    cursor: pointer;
    transform: translateX(-50%);

    &.active {
      box-shadow: 0 0 0 4px rgba(var(--primary-6), 0.6);
    }
  }

  .colors-picker-linear-points-switch {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: var(--color-text-2);
    background: rgba(255, 255, 255, 0.08);
    cursor: pointer;

    &:hover {
      color: var(--color-text-1);
    }
  }
}