.colorPicker {
  display: inline-block;
  vertical-align: inherit;
}
.colorPicker .transitionContainer {
  position: absolute;
  display: inline-block;
  z-index: 1;
  pointer-events: none;
  min-width: 13rem;
}
.colorPicker .transitionContainer.openTransitionContainer {
  pointer-events: inherit;
}
.colorPicker .group {
  display: block;
}
.colorPicker .sliders {
  display: none;
}
.colorPicker.extended .sliders {
  display: block;
}
.colorPicker:global(.carbon) .transitionContainer {
  width: calc(100% - 3.5rem - 2*12px);
}
.colorPicker:global(.carbon) .palette {
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 3.5rem;
  box-shadow: none;
  margin: 0;
}
.colorPicker:global(.carbon) .palette .swatch {
  margin: 0.5rem;
}
.colorPicker:global(.carbon) .palette .sliders {
  padding: 0.5rem 0.5rem 1rem 0.5rem;
}
.colorPicker:global(.cobalt) .transitionContainer {
  width: calc(100% - 3.5rem - 2*12px);
}
.colorPicker:global(.cobalt) .palette {
  background-color: #ededed;
  border-radius: 1.75rem;
  box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.3);
  margin: 0.25rem;
}
.colorPicker:global(.cobalt) .palette .swatch {
  margin: 0.5rem;
}
.colorPicker:global(.cobalt) .palette .sliders {
  padding: 0.5rem 0.5rem 1rem 0.5rem;
}
.colorPicker:global(.cobalt):global(.night) .transitionContainer {
  width: calc(100% - 3.5rem - 2*12px);
}
.colorPicker:global(.cobalt):global(.night) .palette {
  background-color: #44559f;
  border-radius: 1.75rem;
  box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.3);
  margin: 0.25rem;
}
.colorPicker:global(.cobalt):global(.night) .palette .swatch {
  margin: 0.5rem;
}
.colorPicker:global(.cobalt):global(.night) .palette .sliders {
  padding: 0.5rem 0.5rem 1rem 0.5rem;
}
.colorPicker:global(.copper) .transitionContainer {
  width: calc(100% - 3.5rem - 2*12px);
}
.colorPicker:global(.copper) .palette {
  background-color: #ededed;
  border-radius: 1.75rem;
  box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.3);
  margin: 0.25rem;
}
.colorPicker:global(.copper) .palette .swatch {
  margin: 0.5rem;
}
.colorPicker:global(.copper) .palette .sliders {
  padding: 0.5rem 0.5rem 1rem 0.5rem;
}
.colorPicker:global(.copper):global(.night) .transitionContainer {
  width: calc(100% - 3.5rem - 2*12px);
}
.colorPicker:global(.copper):global(.night) .palette {
  background-color: #373739;
  border-radius: 1.75rem;
  box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.3);
  margin: 0.25rem;
}
.colorPicker:global(.copper):global(.night) .palette .swatch {
  margin: 0.5rem;
}
.colorPicker:global(.copper):global(.night) .palette .sliders {
  padding: 0.5rem 0.5rem 1rem 0.5rem;
}
.colorPicker:global(.electro) .transitionContainer {
  width: calc(100% - 3.5rem - 2*12px);
}
.colorPicker:global(.electro) .palette {
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 0.75rem;
  box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.3);
  margin: 0;
}
.colorPicker:global(.electro) .palette .swatch {
  margin: 0.25rem;
}
.colorPicker:global(.electro) .palette .sliders {
  padding: 0.25rem 0.25rem 0.5rem 0.25rem;
}
.colorPicker:global(.gallium) .transitionContainer {
  width: calc(100% - 3.5rem - 2*12px);
}
.colorPicker:global(.gallium) .palette {
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 3.5rem;
  box-shadow: none;
  margin: 0;
}
.colorPicker:global(.gallium) .palette .swatch {
  margin: 0.5rem;
}
.colorPicker:global(.gallium) .palette .sliders {
  padding: 0.5rem 0.5rem 1rem 0.5rem;
}
.colorPicker:global(.gallium):global(.night) .transitionContainer {
  width: calc(100% - 3.5rem - 2*12px);
}
.colorPicker:global(.gallium):global(.night) .palette {
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 3.5rem;
  box-shadow: none;
  margin: 0;
}
.colorPicker:global(.gallium):global(.night) .palette .swatch {
  margin: 0.5rem;
}
.colorPicker:global(.gallium):global(.night) .palette .sliders {
  padding: 0.5rem 0.5rem 1rem 0.5rem;
}
.colorPicker:global(.silicon) .transitionContainer {
  width: calc(100% - 3.125rem - 2*12px);
}
.colorPicker:global(.silicon) .palette {
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 3.125rem;
  box-shadow: none;
  margin: 0;
}
.colorPicker:global(.silicon) .palette .swatch {
  margin: 0.5rem;
}
.colorPicker:global(.silicon) .palette .sliders {
  padding: 0.5rem 0.5rem 1rem 0.5rem;
}
.colorPicker:global(.silicon):global(.night) .transitionContainer {
  width: calc(100% - 3.125rem - 2*12px);
}
.colorPicker:global(.silicon):global(.night) .palette {
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 3.125rem;
  box-shadow: none;
  margin: 0;
}
.colorPicker:global(.silicon):global(.night) .palette .swatch {
  margin: 0.5rem;
}
.colorPicker:global(.silicon):global(.night) .palette .sliders {
  padding: 0.5rem 0.5rem 1rem 0.5rem;
}
.colorPicker:global(.titanium) .transitionContainer {
  width: calc(100% - 3.5rem - 2*12px);
}
.colorPicker:global(.titanium) .palette {
  background-color: #ddd;
  border-radius: 1.75rem;
  box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.3);
  margin: 0.25rem;
}
.colorPicker:global(.titanium) .palette .swatch {
  margin: 0.5rem;
}
.colorPicker:global(.titanium) .palette .sliders {
  padding: 0.5rem 0.5rem 1rem 0.5rem;
}
