.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) .sliders {
  color: inherit;
}
.colorPicker:global(.carbon) .sliders .slider .bar {
  background-color: rgba(102, 102, 102, 0.5);
}
.colorPicker:global(.carbon) .sliders .slider .fill {
  background-color: var(--agate-highlight-color, #6abe0b);
}
.colorPicker:global(.carbon) .sliders .slider .knob::before {
  background-color: var(--agate-accent-color, #8fd43a);
}
:global(.spotlight-input-key) .colorPicker:global(.carbon) .sliders .slider:global(.spottable):focus .bar,
:global(.spotlight-input-mouse) .colorPicker:global(.carbon) .sliders .slider:global(.spottable):focus .bar {
  background-color: rgba(102, 102, 102, 0.5);
}
:global(.spotlight-input-touch) .colorPicker:global(.carbon) .sliders .slider:global(.spottable):active .bar {
  background-color: rgba(102, 102, 102, 0.5);
}
.colorPicker:global(.carbon) .palette {
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 3.5rem;
  box-shadow: none;
  margin: 0;
  padding-left: 0.875rem;
  padding-right: 0.5rem;
}
:global(.enact-locale-right-to-left) .colorPicker:global(.carbon) .palette {
  padding-left: 0.5rem;
  padding-right: 0.875rem;
}
.colorPicker:global(.carbon) .palette .swatch {
  margin: 0.5rem;
}
.colorPicker:global(.carbon) .palette .swatch .bg {
  border-color: transparent;
}
.colorPicker:global(.carbon) .palette .swatch .client .icon {
  color: inherit;
}
.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) .sliders {
  color: inherit;
}
.colorPicker:global(.cobalt) .sliders .slider .bar {
  background-color: transparent;
}
.colorPicker:global(.cobalt) .sliders .slider .fill {
  background-color: transparent;
}
.colorPicker:global(.cobalt) .sliders .slider .knob::before {
  background-color: var(--agate-accent-color, #8c81ff);
}
:global(.spotlight-input-key) .colorPicker:global(.cobalt) .sliders .slider:global(.spottable):focus .bar,
:global(.spotlight-input-mouse) .colorPicker:global(.cobalt) .sliders .slider:global(.spottable):focus .bar {
  background-color: transparent;
}
:global(.spotlight-input-touch) .colorPicker:global(.cobalt) .sliders .slider:global(.spottable):active .bar {
  background-color: transparent;
}
.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;
  padding-left: 0;
  padding-right: 0;
}
:global(.enact-locale-right-to-left) .colorPicker:global(.cobalt) .palette {
  padding-left: 0;
  padding-right: 0;
}
.colorPicker:global(.cobalt) .palette .swatch {
  margin: 0.5rem;
}
.colorPicker:global(.cobalt) .palette .swatch .bg {
  border-color: var(--agate-highlight-color, #fff);
}
.colorPicker:global(.cobalt) .palette .swatch .client .icon {
  color: inherit;
}
.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) .sliders {
  color: inherit;
}
.colorPicker:global(.cobalt):global(.night) .sliders .slider .bar {
  background-color: transparent;
}
.colorPicker:global(.cobalt):global(.night) .sliders .slider .fill {
  background-color: transparent;
}
.colorPicker:global(.cobalt):global(.night) .sliders .slider .knob::before {
  background-color: var(--agate-accent-color, #fc7982);
}
:global(.spotlight-input-key) .colorPicker:global(.cobalt):global(.night) .sliders .slider:global(.spottable):focus .bar,
:global(.spotlight-input-mouse) .colorPicker:global(.cobalt):global(.night) .sliders .slider:global(.spottable):focus .bar {
  background-color: transparent;
}
:global(.spotlight-input-touch) .colorPicker:global(.cobalt):global(.night) .sliders .slider:global(.spottable):active .bar {
  background-color: transparent;
}
.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;
  padding-left: 0;
  padding-right: 0;
}
:global(.enact-locale-right-to-left) .colorPicker:global(.cobalt):global(.night) .palette {
  padding-left: 0;
  padding-right: 0;
}
.colorPicker:global(.cobalt):global(.night) .palette .swatch {
  margin: 0.5rem;
}
.colorPicker:global(.cobalt):global(.night) .palette .swatch .bg {
  border-color: #7482bf;
}
.colorPicker:global(.cobalt):global(.night) .palette .swatch .client .icon {
  color: inherit;
}
.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) .sliders {
  color: inherit;
}
.colorPicker:global(.copper) .sliders .slider .bar {
  background-color: transparent;
}
.colorPicker:global(.copper) .sliders .slider .fill {
  background-color: transparent;
}
.colorPicker:global(.copper) .sliders .slider .knob::before {
  background-color: var(--agate-accent-color, #a47d66);
}
:global(.spotlight-input-key) .colorPicker:global(.copper) .sliders .slider:global(.spottable):focus .bar,
:global(.spotlight-input-mouse) .colorPicker:global(.copper) .sliders .slider:global(.spottable):focus .bar {
  background-color: transparent;
}
:global(.spotlight-input-touch) .colorPicker:global(.copper) .sliders .slider:global(.spottable):active .bar {
  background-color: transparent;
}
.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;
  padding-left: 0;
  padding-right: 0;
}
:global(.enact-locale-right-to-left) .colorPicker:global(.copper) .palette {
  padding-left: 0;
  padding-right: 0;
}
.colorPicker:global(.copper) .palette .swatch {
  margin: 0.5rem;
}
.colorPicker:global(.copper) .palette .swatch .bg {
  border-color: var(--agate-highlight-color, #fff);
}
.colorPicker:global(.copper) .palette .swatch .client .icon {
  color: inherit;
}
.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) .sliders {
  color: inherit;
}
.colorPicker:global(.copper):global(.night) .sliders .slider .bar {
  background-color: transparent;
}
.colorPicker:global(.copper):global(.night) .sliders .slider .fill {
  background-color: transparent;
}
.colorPicker:global(.copper):global(.night) .sliders .slider .knob::before {
  background-color: var(--agate-accent-color, #e0b094);
}
:global(.spotlight-input-key) .colorPicker:global(.copper):global(.night) .sliders .slider:global(.spottable):focus .bar,
:global(.spotlight-input-mouse) .colorPicker:global(.copper):global(.night) .sliders .slider:global(.spottable):focus .bar {
  background-color: transparent;
}
:global(.spotlight-input-touch) .colorPicker:global(.copper):global(.night) .sliders .slider:global(.spottable):active .bar {
  background-color: transparent;
}
.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;
  padding-left: 0;
  padding-right: 0;
}
:global(.enact-locale-right-to-left) .colorPicker:global(.copper):global(.night) .palette {
  padding-left: 0;
  padding-right: 0;
}
.colorPicker:global(.copper):global(.night) .palette .swatch {
  margin: 0.5rem;
}
.colorPicker:global(.copper):global(.night) .palette .swatch .bg {
  border-color: #424242;
}
.colorPicker:global(.copper):global(.night) .palette .swatch .client .icon {
  color: inherit;
}
.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) .sliders {
  color: inherit;
}
.colorPicker:global(.electro) .sliders .slider .bar {
  background-color: transparent;
}
.colorPicker:global(.electro) .sliders .slider .fill {
  background-color: var(--agate-accent-color, #0359f0);
}
.colorPicker:global(.electro) .sliders .slider .knob::before {
  background-color: var(--agate-accent-color, #0359f0);
}
:global(.spotlight-input-key) .colorPicker:global(.electro) .sliders .slider:global(.spottable):focus .bar,
:global(.spotlight-input-mouse) .colorPicker:global(.electro) .sliders .slider:global(.spottable):focus .bar {
  background-color: transparent;
}
:global(.spotlight-input-touch) .colorPicker:global(.electro) .sliders .slider:global(.spottable):active .bar {
  background-color: transparent;
}
.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;
  padding-left: 0.875rem;
  padding-right: 0.5rem;
}
:global(.enact-locale-right-to-left) .colorPicker:global(.electro) .palette {
  padding-left: 0.5rem;
  padding-right: 0.875rem;
}
.colorPicker:global(.electro) .palette .swatch {
  margin: 0.25rem;
}
.colorPicker:global(.electro) .palette .swatch .bg {
  border-color: var(--agate-accent-color, #0359f0);
}
.colorPicker:global(.electro) .palette .swatch .client .icon {
  color: inherit;
}
.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) .sliders {
  color: inherit;
}
.colorPicker:global(.gallium) .sliders .slider .bar {
  background-color: rgba(0, 0, 0, 0.1);
}
.colorPicker:global(.gallium) .sliders .slider .fill {
  background-color: #000000;
}
.colorPicker:global(.gallium) .sliders .slider .knob::before {
  background-color: #5e5e5e;
}
:global(.spotlight-input-key) .colorPicker:global(.gallium) .sliders .slider:global(.spottable):focus .bar,
:global(.spotlight-input-mouse) .colorPicker:global(.gallium) .sliders .slider:global(.spottable):focus .bar {
  background-color: rgba(0, 0, 0, 0.1);
}
:global(.spotlight-input-touch) .colorPicker:global(.gallium) .sliders .slider:global(.spottable):active .bar {
  background-color: rgba(0, 0, 0, 0.1);
}
.colorPicker:global(.gallium) .palette {
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 3.5rem;
  box-shadow: none;
  margin: 0;
  padding-left: 0.875rem;
  padding-right: 0.5rem;
}
:global(.enact-locale-right-to-left) .colorPicker:global(.gallium) .palette {
  padding-left: 0.5rem;
  padding-right: 0.875rem;
}
.colorPicker:global(.gallium) .palette .swatch {
  margin: 0.5rem;
}
.colorPicker:global(.gallium) .palette .swatch .bg {
  border-color: #5e5e5e;
}
.colorPicker:global(.gallium) .palette .swatch .client .icon {
  color: inherit;
}
.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) .sliders {
  color: inherit;
}
.colorPicker:global(.gallium):global(.night) .sliders .slider .bar {
  background-color: #373737;
}
.colorPicker:global(.gallium):global(.night) .sliders .slider .fill {
  background-color: #ffffff;
}
.colorPicker:global(.gallium):global(.night) .sliders .slider .knob::before {
  background-color: #5e5e5e;
}
:global(.spotlight-input-key) .colorPicker:global(.gallium):global(.night) .sliders .slider:global(.spottable):focus .bar,
:global(.spotlight-input-mouse) .colorPicker:global(.gallium):global(.night) .sliders .slider:global(.spottable):focus .bar {
  background-color: #373737;
}
:global(.spotlight-input-touch) .colorPicker:global(.gallium):global(.night) .sliders .slider:global(.spottable):active .bar {
  background-color: #373737;
}
.colorPicker:global(.gallium):global(.night) .palette {
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 3.5rem;
  box-shadow: none;
  margin: 0;
  padding-left: 0.875rem;
  padding-right: 0.5rem;
}
:global(.enact-locale-right-to-left) .colorPicker:global(.gallium):global(.night) .palette {
  padding-left: 0.5rem;
  padding-right: 0.875rem;
}
.colorPicker:global(.gallium):global(.night) .palette .swatch {
  margin: 0.5rem;
}
.colorPicker:global(.gallium):global(.night) .palette .swatch .bg {
  border-color: #5e5e5e;
}
.colorPicker:global(.gallium):global(.night) .palette .swatch .client .icon {
  color: inherit;
}
.colorPicker:global(.gallium):global(.night) .palette .sliders {
  padding: 0.5rem 0.5rem 1rem 0.5rem;
}
.colorPicker:global(.silicon) .transitionContainer {
  width: calc(100% - 2.5rem - 2*12px);
}
.colorPicker:global(.silicon) .sliders {
  color: #000000;
}
.colorPicker:global(.silicon) .sliders .slider .bar {
  background-color: rgba(0, 0, 0, 0.5);
}
.colorPicker:global(.silicon) .sliders .slider .fill {
  background-color: #000000;
}
.colorPicker:global(.silicon) .sliders .slider .knob::before {
  background-color: #000000;
}
:global(.spotlight-input-key) .colorPicker:global(.silicon) .sliders .slider:global(.spottable):focus .bar,
:global(.spotlight-input-mouse) .colorPicker:global(.silicon) .sliders .slider:global(.spottable):focus .bar {
  background-color: rgba(0, 0, 0, 0.5);
}
:global(.spotlight-input-touch) .colorPicker:global(.silicon) .sliders .slider:global(.spottable):active .bar {
  background-color: rgba(0, 0, 0, 0.5);
}
.colorPicker:global(.silicon) .palette {
  background-color: rgba(204, 204, 204, 0.95);
  border-radius: 2.5rem;
  box-shadow: none;
  margin: 0;
  padding-left: 0.875rem;
  padding-right: 0.5rem;
}
:global(.enact-locale-right-to-left) .colorPicker:global(.silicon) .palette {
  padding-left: 0.5rem;
  padding-right: 0.875rem;
}
.colorPicker:global(.silicon) .palette .swatch {
  margin: 0.5rem;
}
.colorPicker:global(.silicon) .palette .swatch .bg {
  border-color: #eeeeee;
}
.colorPicker:global(.silicon) .palette .swatch .client .icon {
  color: #000000;
}
.colorPicker:global(.silicon) .palette .sliders {
  padding: 0.5rem 0.5rem 1rem 0.5rem;
}
.colorPicker:global(.silicon):global(.night) .transitionContainer {
  width: calc(100% - 2.5rem - 2*12px);
}
.colorPicker:global(.silicon):global(.night) .sliders {
  color: #000000;
}
.colorPicker:global(.silicon):global(.night) .sliders .slider .bar {
  background-color: rgba(0, 0, 0, 0.5);
}
.colorPicker:global(.silicon):global(.night) .sliders .slider .fill {
  background-color: #000000;
}
.colorPicker:global(.silicon):global(.night) .sliders .slider .knob::before {
  background-color: #000000;
}
:global(.spotlight-input-key) .colorPicker:global(.silicon):global(.night) .sliders .slider:global(.spottable):focus .bar,
:global(.spotlight-input-mouse) .colorPicker:global(.silicon):global(.night) .sliders .slider:global(.spottable):focus .bar {
  background-color: rgba(0, 0, 0, 0.5);
}
:global(.spotlight-input-touch) .colorPicker:global(.silicon):global(.night) .sliders .slider:global(.spottable):active .bar {
  background-color: rgba(0, 0, 0, 0.5);
}
.colorPicker:global(.silicon):global(.night) .palette {
  background-color: rgba(204, 204, 204, 0.95);
  border-radius: 2.5rem;
  box-shadow: none;
  margin: 0;
  padding-left: 0.875rem;
  padding-right: 0.5rem;
}
:global(.enact-locale-right-to-left) .colorPicker:global(.silicon):global(.night) .palette {
  padding-left: 0.5rem;
  padding-right: 0.875rem;
}
.colorPicker:global(.silicon):global(.night) .palette .swatch {
  margin: 0.5rem;
}
.colorPicker:global(.silicon):global(.night) .palette .swatch .bg {
  border-color: #eeeeee;
}
.colorPicker:global(.silicon):global(.night) .palette .swatch .client .icon {
  color: #000000;
}
.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) .sliders {
  color: inherit;
}
.colorPicker:global(.titanium) .sliders .slider .bar {
  background-color: transparent;
}
.colorPicker:global(.titanium) .sliders .slider .fill {
  background-color: transparent;
}
.colorPicker:global(.titanium) .sliders .slider .knob::before {
  background-color: #f7f7f7;
}
:global(.spotlight-input-key) .colorPicker:global(.titanium) .sliders .slider:global(.spottable):focus .bar,
:global(.spotlight-input-mouse) .colorPicker:global(.titanium) .sliders .slider:global(.spottable):focus .bar {
  background-color: transparent;
}
:global(.spotlight-input-touch) .colorPicker:global(.titanium) .sliders .slider:global(.spottable):active .bar {
  background-color: transparent;
}
.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;
  padding-left: 0;
  padding-right: 0;
}
:global(.enact-locale-right-to-left) .colorPicker:global(.titanium) .palette {
  padding-left: 0;
  padding-right: 0;
}
.colorPicker:global(.titanium) .palette .swatch {
  margin: 0.5rem;
}
.colorPicker:global(.titanium) .palette .swatch .bg {
  border-color: rgba(255, 255, 255, 0.5);
}
.colorPicker:global(.titanium) .palette .swatch .client .icon {
  color: inherit;
}
.colorPicker:global(.titanium) .palette .sliders {
  padding: 0.5rem 0.5rem 1rem 0.5rem;
}
