.color-picker {
  width: 236px;
  height: 254px;
  border: 1px solid black;
  position: absolute;
  box-sizing: border-box;
  background-color: white;
}

.color-picker > .shade-canvas-wrapper {
  width: 232px;
  height: 138px;
  left: 1px;
  top: 1px;
  position: absolute;
  overflow: hidden;
}

.color-picker > .shade-canvas-wrapper > .shade-bubble {
  width: 12px;
  height: 12px;
  position: absolute;
  background-color: #00000000;
  border: 2px solid white;
  box-sizing: border-box;
  border-radius: 6px;
  box-shadow: black 0px 0px 2px 0px;
}

.color-picker > .hue-canvas-wrapper {
  width: 130px;
  height: 12px;
  left: 88px;
  top: 155px;
  position: absolute;
  display: flex;
}

.color-picker > .hue-canvas-wrapper > .hue-bubble {
  width: 16px;
  height: 16px;
  position: absolute;
  background-color: red;
  top: -2px;
  border: 2px solid white;
  box-sizing: border-box;
  border-radius: 8px;
  box-shadow: black 0px 0px 1px 0px;
}

.color-picker > .color-bubble {
  position: absolute;
  width: 32px;
  height: 32px;
  left: 42px;
  top: 146px;
  border-radius: 16px;
  border: 1px solid #00000020;
  box-sizing: border-box;
}

.color-picker > .inp-wrapper {
  position: absolute;
  width: 171px;
  height: 32px;
  left: 24px;
  top: 184px;
}

.color-picker > .inp-wrapper > .color-inp {
  position: absolute;
  width: 53px;
  height: 32px;
  left: 0px;
  top: 0px;
  border: 1px solid #CECECE;
  border-radius: 2px;
  text-align: center;
  font: 15px Arial;
  padding: 0;
  padding-block: 0px;
  padding-inline: 0px;
  box-sizing: border-box;
}

.color-picker > .color-switcher {
  position: absolute;
  width: 200px;
  height: 24px;
  left: 24px;
  top: 221px;
  background-color: #00000000;
}

.color-picker > .color-switcher:hover {
  background-color: #F7F7F7;
}

.color-picker > .color-switcher > .label-wrapper {
  width: 100%;
  height: 100%;
}

.color-picker > .color-switcher > .label-wrapper > .color-label {
  user-select: none;
  position: absolute;
  width: 53px;
  height: 24px;
  left: 0px;
  top: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  font: 15px Arial;
}