.sliderButton {
  --sliderbutton-item-count: 0;
  --sliderbutton-item-size: calc(100% / var(--sliderbutton-item-count));
  padding: 0 calc(var(--sliderbutton-item-size) / 2);
  box-sizing: border-box;
}
.sliderButton::before {
  content: "";
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  display: none;
}
.sliderButton.pressed::before {
  display: block;
}
.sliderButton .knob {
  position: absolute;
  top: 0;
  height: 100%;
  width: var(--sliderbutton-item-size);
  left: calc(var(--knob-value) * var(--sliderbutton-item-size));
  will-change: left;
  transition: left 200ms ease-in-out;
  box-sizing: border-box;
}
.sliderButton .track {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  text-align: center;
}
.sliderButton:global(.carbon) {
  margin: 0 0.5rem;
  height: 3.5rem;
  border: 0 solid transparent;
  border-radius: 41.625rem;
  background-color: rgba(102, 102, 102, 0.5);
  background-image: linear-gradient(to top, transparent, rgba(0, 0, 0, 0.03));
  background-clip: initial;
  cursor: pointer;
  transform: none;
}
.sliderButton:global(.carbon) .client {
  transform: none;
  color: var(--agate-accent-color, #8fd43a);
}
.sliderButton:global(.carbon) .knob {
  background-color: var(--agate-accent-color, #8fd43a);
  background-image: linear-gradient(to bottom, transparent, rgba(51, 51, 51, 0.5));
  box-shadow: 0 0.125rem 0.375rem 0.125rem rgba(0, 0, 0, 0.3);
  border: 0 solid transparent;
  border-radius: 41.625rem;
  transform: none;
}
.sliderButton:global(.carbon):global(.spottable):focus {
  color: black;
  background-color: rgba(102, 102, 102, 0.5);
  background-image: linear-gradient(to bottom, hsla(var(--agate-accent-h, 0), var(--agate-accent-s, 0), var(--agate-accent-l, 0), 0.5), var(--agate-accent-color, #8fd43a));
}
.sliderButton:global(.carbon):global(.spottable):focus .knob {
  box-shadow: 0 0.125rem 0.375rem 0.125rem rgba(0, 0, 0, 0.3);
}
.sliderButton:global(.cobalt) {
  margin: 0.125rem 1rem;
  height: 3.5rem;
  border: 0 solid transparent;
  border-radius: 41.625rem;
  background-color: hsla(67, 2%, 22%, 0.6);
  background-image: linear-gradient(to top, transparent, rgba(0, 0, 0, 0.05));
  background-clip: initial;
  cursor: pointer;
  transform: none;
}
.sliderButton:global(.cobalt) .client {
  transform: none;
  color: var(--agate-highlight-color, #fff);
}
.sliderButton:global(.cobalt) .knob {
  background-color: var(--agate-accent-color, #8c81ff);
  background-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.1));
  box-shadow: 0 1px 0.125rem 1px rgba(0, 0, 0, 0.3);
  border: 0 solid transparent;
  border-radius: 41.625rem;
  transform: none;
}
.sliderButton:global(.cobalt):global(.spottable):focus {
  color: var(--agate-accent-color, #8c81ff);
  background-color: hsla(67, 2%, 22%, 0.6);
  background-image: linear-gradient(to top, transparent, rgba(0, 0, 0, 0.05));
}
.sliderButton:global(.cobalt):global(.spottable):focus .knob {
  box-shadow: 0 0.125rem 0.375rem 0.125rem rgba(0, 0, 0, 0.3);
}
.sliderButton:global(.cobalt):global(.night) {
  margin: 0.125rem 1rem;
  height: 3.5rem;
  border: 0 solid transparent;
  border-radius: 41.625rem;
  background-color: rgba(0, 0, 0, 0.15);
  background-image: linear-gradient(to top, transparent, rgba(0, 0, 0, 0.05));
  background-clip: initial;
  cursor: pointer;
  transform: none;
}
.sliderButton:global(.cobalt):global(.night) .client {
  transform: none;
  color: var(--agate-highlight-color, #fff);
}
.sliderButton:global(.cobalt):global(.night) .knob {
  background-color: var(--agate-accent-color, #fc7982);
  background-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.1));
  box-shadow: 0 1px 0.125rem 1px rgba(0, 0, 0, 0.3);
  border: 0 solid transparent;
  border-radius: 41.625rem;
  transform: none;
}
.sliderButton:global(.cobalt):global(.night):global(.spottable):focus {
  color: #7482bf;
  background-color: rgba(0, 0, 0, 0.15);
  background-image: linear-gradient(to top, transparent, rgba(0, 0, 0, 0.05));
}
.sliderButton:global(.cobalt):global(.night):global(.spottable):focus .knob {
  box-shadow: 0 0.125rem 0.375rem 0.125rem rgba(0, 0, 0, 0.3);
}
.sliderButton:global(.copper) {
  margin: 0.125rem 1rem;
  height: 3.5rem;
  border: 0 solid transparent;
  border-radius: 41.625rem;
  background-color: hsl(67, 2%, 32%);
  background-image: linear-gradient(to top, transparent, rgba(0, 0, 0, 0.05));
  background-clip: initial;
  cursor: pointer;
  transform: none;
}
.sliderButton:global(.copper) .client {
  transform: none;
  color: var(--agate-highlight-color, #fff);
}
.sliderButton:global(.copper) .knob {
  background-color: var(--agate-accent-color, #a47d66);
  background-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.1));
  box-shadow: 0 1px 0.125rem 1px rgba(0, 0, 0, 0.3);
  border: 0 solid transparent;
  border-radius: 41.625rem;
  transform: none;
}
.sliderButton:global(.copper):global(.spottable):focus {
  color: #373739;
  background-color: hsl(67, 2%, 32%);
  background-image: linear-gradient(to top, transparent, rgba(0, 0, 0, 0.05));
}
.sliderButton:global(.copper):global(.spottable):focus .knob {
  box-shadow: 0 0.125rem 0.375rem 0.125rem rgba(0, 0, 0, 0.3);
}
.sliderButton:global(.copper):global(.night) {
  margin: 0.125rem 1rem;
  height: 3.5rem;
  border: 0 solid transparent;
  border-radius: 41.625rem;
  background-color: hsl(67, 2%, 32%);
  background-image: linear-gradient(to top, transparent, rgba(0, 0, 0, 0.05));
  background-clip: initial;
  cursor: pointer;
  transform: none;
}
.sliderButton:global(.copper):global(.night) .client {
  transform: none;
  color: var(--agate-highlight-color, #fff);
}
.sliderButton:global(.copper):global(.night) .knob {
  background-color: var(--agate-accent-color, #e0b094);
  background-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.1));
  box-shadow: 0 1px 0.125rem 1px rgba(0, 0, 0, 0.3);
  border: 0 solid transparent;
  border-radius: 41.625rem;
  transform: none;
}
.sliderButton:global(.copper):global(.night):global(.spottable):focus {
  color: var(--agate-accent-color, #e0b094);
  background-color: hsl(67, 2%, 32%);
  background-image: linear-gradient(to top, transparent, rgba(0, 0, 0, 0.05));
}
.sliderButton:global(.copper):global(.night):global(.spottable):focus .knob {
  box-shadow: 0 0.125rem 0.375rem 0.125rem rgba(0, 0, 0, 0.3);
}
.sliderButton:global(.electro) {
  margin: 0.125rem 0.875rem;
  height: 3.5rem;
  border: 0 solid transparent;
  border-radius: 0.75rem;
  background-color: var(--agate-accent-color, #0359f0);
  background-image: linear-gradient(to top, transparent, rgba(0, 0, 0, 0.5));
  background-clip: initial;
  cursor: pointer;
  transform: skewX(-20deg);
}
.sliderButton:global(.electro) .client {
  transform: none;
  color: white;
}
.sliderButton:global(.electro) .knob {
  background-color: var(--agate-accent-color, #0359f0);
  background-image: linear-gradient(to bottom right, hsl( calc( var(--agate-accent-h, 218) - 27), calc( var(--agate-accent-s, 98%) - 1%), calc( var(--agate-accent-l, 48%) + 17%) ), transparent);
  box-shadow: 0 0.125rem 0.375rem 0.125rem rgba(0, 0, 0, 0.3);
  border: 0 solid transparent;
  border-radius: 0.75rem;
  transform: none;
}
.sliderButton:global(.electro):global(.spottable):focus {
  color: white;
  background-color: hsla(var(--agate-accent-h, 0), var(--agate-accent-s, 0), var(--agate-accent-l, 0), 0.8);
  background-image: linear-gradient(to top, transparent, rgba(0, 0, 0, 0.5));
}
.sliderButton:global(.electro):global(.spottable):focus .knob {
  box-shadow: 0 0.125rem 0.375rem 0.125rem rgba(0, 0, 0, 0.3);
}
.sliderButton:global(.gallium) {
  margin: 0.25rem 0.5rem 0.75rem 0.5rem;
  height: 3.5rem;
  border: 0.5rem solid transparent;
  border-radius: 0.125rem;
  background-color: rgba(0, 0, 0, 0.1);
  background-image: inherit;
  background-clip: padding-box;
  cursor: pointer;
  transform: none;
}
.sliderButton:global(.gallium) .client {
  transform: none;
  color: #000000;
}
.sliderButton:global(.gallium) .knob {
  background-color: transparent;
  background-image: none;
  box-shadow: 0 0.125rem 0.375rem 0.125rem rgba(0, 0, 0, 0.3);
  border: 0.125rem solid var(--agate-accent-color, #8b7efe);
  border-radius: 0.25rem;
  transform: scale(1.07, 1.4);
}
.sliderButton:global(.gallium):global(.spottable):focus {
  color: var(--agate-accent-color, #8b7efe);
  background-color: rgba(0, 0, 0, 0.1);
  background-image: inherit;
}
.sliderButton:global(.gallium):global(.spottable):focus .knob {
  box-shadow: 0 0.125rem 0.375rem 0.125rem rgba(0, 0, 0, 0.3);
}
.sliderButton:global(.gallium):global(.night) {
  margin: 0.25rem 0.5rem 0.75rem 0.5rem;
  height: 3.5rem;
  border: 0.5rem solid transparent;
  border-radius: 0.125rem;
  background-color: #373737;
  background-image: inherit;
  background-clip: padding-box;
  cursor: pointer;
  transform: none;
}
.sliderButton:global(.gallium):global(.night) .client {
  transform: none;
  color: #ffffff;
}
.sliderButton:global(.gallium):global(.night) .knob {
  background-color: transparent;
  background-image: none;
  box-shadow: 0 0.125rem 0.375rem 0.125rem rgba(0, 0, 0, 0.3);
  border: 0.125rem solid var(--agate-accent-color, #8b7efe);
  border-radius: 0.25rem;
  transform: scale(1.07, 1.4);
}
.sliderButton:global(.gallium):global(.night):global(.spottable):focus {
  color: var(--agate-accent-color, #8b7efe);
  background-color: #373737;
  background-image: inherit;
}
.sliderButton:global(.gallium):global(.night):global(.spottable):focus .knob {
  box-shadow: 0 0.125rem 0.375rem 0.125rem rgba(0, 0, 0, 0.3);
}
.sliderButton:global(.silicon) {
  margin: 0.25rem 0.5rem 0.75rem 0.5rem;
  height: 3.125rem;
  border: 0.5rem solid transparent;
  border-radius: 0.125rem;
  background-color: rgba(0, 0, 0, 0.5);
  background-image: inherit;
  background-clip: padding-box;
  cursor: pointer;
  transform: none;
}
.sliderButton:global(.silicon) .client {
  transform: none;
  color: #000000;
}
.sliderButton:global(.silicon) .knob {
  background-color: transparent;
  background-image: none;
  box-shadow: 0;
  border: 0.125rem solid var(--agate-accent-color, #ff2d55);
  border-radius: 0.25rem;
  transform: scale(1.07, 1.4);
}
.sliderButton:global(.silicon):global(.spottable):focus {
  color: var(--agate-accent-color, #ff2d55);
  background-color: rgba(0, 0, 0, 0.5);
  background-image: inherit;
}
.sliderButton:global(.silicon):global(.spottable):focus .knob {
  box-shadow: 0;
}
.sliderButton:global(.silicon):global(.night) {
  margin: 0.25rem 0.5rem 0.75rem 0.5rem;
  height: 3.125rem;
  border: 0.5rem solid transparent;
  border-radius: 0.125rem;
  background-color: rgba(255, 255, 255, 0.5);
  background-image: inherit;
  background-clip: padding-box;
  cursor: pointer;
  transform: none;
}
.sliderButton:global(.silicon):global(.night) .client {
  transform: none;
  color: #ffffff;
}
.sliderButton:global(.silicon):global(.night) .knob {
  background-color: transparent;
  background-image: none;
  box-shadow: 0;
  border: 0.125rem solid var(--agate-accent-color, #ff2d55);
  border-radius: 0.25rem;
  transform: scale(1.07, 1.4);
}
.sliderButton:global(.silicon):global(.night):global(.spottable):focus {
  color: var(--agate-accent-color, #ff2d55);
  background-color: rgba(255, 255, 255, 0.5);
  background-image: inherit;
}
.sliderButton:global(.silicon):global(.night):global(.spottable):focus .knob {
  box-shadow: 0;
}
.sliderButton:global(.titanium) {
  margin: 0.125rem 1rem;
  height: 3.5rem;
  border: 0 solid transparent;
  border-radius: 41.625rem;
  background-color: var(--agate-accent-color, rgba(0, 0, 0, 0.1));
  background-image: linear-gradient(to top, transparent, rgba(0, 0, 0, 0.05));
  background-clip: initial;
  cursor: pointer;
  transform: none;
}
.sliderButton:global(.titanium) .client {
  transform: none;
  color: #4d4d4d;
}
.sliderButton:global(.titanium) .knob {
  background-color: #f7f7f7;
  background-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.1));
  box-shadow: 0 1px 0.125rem 1px rgba(0, 0, 0, 0.3);
  border: 0 solid transparent;
  border-radius: 41.625rem;
  transform: none;
}
.sliderButton:global(.titanium):global(.spottable):focus {
  color: #4d4d4d;
  background-color: var(--agate-accent-color, rgba(0, 0, 0, 0.1));
  background-image: linear-gradient(to top, transparent, rgba(0, 0, 0, 0.05));
}
.sliderButton:global(.titanium):global(.spottable):focus .knob {
  box-shadow: 0 0.125rem 0.375rem 0.125rem rgba(0, 0, 0, 0.3);
}
