@width: 200px;
@more-color-width: 220px;
.color-picker-container {
  width: @width;
  padding: 10px;
  color: #000;
  font-size: 13px;
  border-radius: 4px;
  box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.05);
  .none-color-container {
    border: 1px solid #eee;
    border-radius: 4px;
    padding: 2px 0;
    margin-bottom: 10px;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    &:hover {
      background-color: #f6f6f6;
    }
  }
  .color-list-title {
    margin-bottom: 5px;
  }
  .color-list-container {
    display: flex;
    flex-wrap: wrap;
    min-height: 20px;
    .color-item-content {
      width: 18px;
      height: 18px;
      margin: 2px;
      border: 1px solid #f3f3f3;
      border-radius: 2px;
      cursor: pointer;
      &:hover {
        box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.1);
        transform: scale(1.06);
      }
      &:active {
        box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.1);
        transform: scale(1);
      }
      &:nth-child(8) {
        margin-right: 0;
      }
    }
  }
  .recommend-color-container {
    padding-bottom: 10px;
  }
  .recent-color-container {
    padding-bottom: 10px;
  }
  .tool-row-container {
    position: relative;
    margin: 6px 0;
    &:last-child {
      margin-bottom: 0;
    }
    .tool-row-content {
      display: flex;
      align-items: center;
      height: 25px;
    }
    .tool-row-icon {
      margin-right: 8px;
    }
    .tool-row-arrow {
      margin-right: 4px;
      margin-left: auto;
    }
  }
  .pipette-color {
    cursor: pointer;
    &:hover {
      background-color: #f6f6f6;
    }
  }
  .more-color {
    position: relative;
    cursor: default;
    &:hover {
      background-color: #f6f6f6;
      .more-color-panel-container {
        display: block;
        visibility: visible;
      }
    }
    .more-color-panel-container {
      position: absolute;
      bottom: -10px;
      left: @width - 20;
      padding-left: 20px;
      background-color: transparent;
      border: none;
      // display: none;
      visibility: hidden;
      transition: all 0.4s;
      .sketch-picker {
        box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.03) !important;
        .flexbox-fix:nth-child(4) {
          display: none !important;
        }
      }
    }
    .more-color-panel-left {
      left: -@more-color-width - 20;
      padding-right: 20px;
      padding-left: 0;
    }
  }
}