/* shadow */
/* sizing */
/* spacing */
.semi-colorPicker-colorChooseArea {
  /**
   *  Referrer from https://github.com/web-padawan/vanilla-colorful/blob/5d219ee360ae2f29534864b28ca9e6074233b9ce/src/lib/styles/saturation.css
   */
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
  position: relative;
  flex-grow: 1;
  border-color: transparent;
  border-radius: 8px 8px 0px 0px;
  background-image: linear-gradient(to top, #000, rgba(0, 0, 0, 0)), linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
}
.semi-colorPicker-handle {
  border-radius: var(--semi-border-radius-full);
  border: 2px solid var(--semi-color-white);
  position: absolute;
  box-sizing: border-box;
  cursor: grab;
}
.semi-colorPicker-alphaSlider {
  position: relative;
  cursor: pointer;
  margin-top: 6px;
  border-radius: var(--semi-border-radius-full);
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill-opacity=".05"><rect x="8" width="8" height="8"/><rect y="8" width="8" height="8"/></svg>');
}
.semi-colorPicker-alphaSlider .semi-colorPicker-alphaSliderInner {
  width: 100%;
  height: 100%;
  border-radius: 4px;
}
.semi-colorPicker-alphaSlider .semi-colorPicker-alphaHandle {
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill-opacity=".05"><rect x="8" width="8" height="8"/><rect y="8" width="8" height="8"/></svg>');
  border-radius: var(--semi-border-radius-full);
  border: 2px solid var(--semi-color-white);
  position: absolute;
  box-sizing: border-box;
  cursor: grab;
}
.semi-colorPicker-colorSlider {
  position: relative;
  cursor: pointer;
  margin-top: 6px;
  border-radius: var(--semi-border-radius-full);
  background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
}
.semi-colorPicker-dataPart {
  margin-top: 8px;
  display: flex;
  align-items: center;
}
.semi-colorPicker-dataPart .semi-colorPicker-colorDemoBlock {
  border-radius: 4px;
}
.semi-colorPicker-dataPart .semi-colorPicker-inputGroup {
  margin-left: 4px;
  width: 100%;
  flex: 1;
  flex-wrap: nowrap;
}
.semi-colorPicker-dataPart .semi-colorPicker-inputGroup .semi-colorPicker-colorPickerInput {
  flex: 1;
}
.semi-colorPicker-dataPart .semi-colorPicker-inputGroup .semi-colorPicker-colorPickerInputNumber {
  width: 58px;
}
.semi-colorPicker-dataPart .semi-colorPicker-inputGroup .semi-colorPicker-colorPickerInputNumber .semi-colorPicker-inputNumberSuffix {
  font-size: 14px;
  padding: 4px 4px;
}
.semi-colorPicker-dataPart .semi-colorPicker-formatSelect {
  width: 80px;
}
.semi-colorPicker-popover {
  padding: 8px;
}
.semi-colorPicker-popover-defaultChildren {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  cursor: pointer;
}