.cc__color-picker {
  display: flex;
  align-items: center;
  cursor: pointer;
}
.cc__color-picker__slider-container__without-transparency {
  width: 100%;
}
.cc__color-picker__slider-container__with-transparency {
  width: calc(100% - 40px - 10px - 5px);
}
.cc__color-picker__color-square {
  height: 40px;
  width: 40px;
  margin: 10px 10px 0 5px;
  border-radius: 2px;
}
.cc__color-picker__color-square:before {
  content: "";
  background-color: #ffffff;
  background-image: linear-gradient(45deg, #a0a0a0 25%, transparent 25%), linear-gradient(-45deg, #a0a0a0 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #a0a0a0 75%), linear-gradient(-45deg, transparent 75%, #a0a0a0 75%);
  background-position: 0 0, 0 4px, 4px -4px, -4px 0px;
  background-size: 8px 8px;
  background-repeat: repeat;
  width: inherit;
  height: inherit;
  position: absolute;
  border-radius: inherit;
  z-index: -1;
}
.cc__color-picker__color-square:after {
  content: "";
  background-color: inherit;
}
.cc__color-picker__color-circle {
  width: 15px;
  height: 15px;
  border-radius: 100%;
  margin-right: 5px;
}
.cc__color-picker__color-circle:before {
  content: "";
  background-color: #ffffff;
  background-image: linear-gradient(45deg, #a0a0a0 25%, transparent 25%), linear-gradient(-45deg, #a0a0a0 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #a0a0a0 75%), linear-gradient(-45deg, transparent 75%, #a0a0a0 75%);
  background-position: 0 0, 0 4px, 4px -4px, -4px 0px;
  background-size: 8px 8px;
  background-repeat: repeat;
  width: inherit;
  height: inherit;
  position: absolute;
  border-radius: inherit;
  z-index: -1;
}
.cc__color-picker__color-circle:after {
  content: "";
  background-color: inherit;
}
.cc__color-picker__color-link {
  border-bottom-width: 1px;
  border-bottom-style: dashed;
}
.cc__color-picker__bubble-content {
  overflow: hidden;
}