.button:global(.carbon).horizontal .client,
.button:global(.carbon).vertical .client {
  color: inherit;
}
.button:global(.carbon).horizontal .bg,
.button:global(.carbon).vertical .bg {
  background-color: transparent;
}
.button:global(.carbon).horizontal[disabled],
.button:global(.carbon).vertical[disabled] {
  opacity: 0.6;
}
.button:global(.carbon).horizontal[disabled] .bg,
.button:global(.carbon).vertical[disabled] .bg {
  background-color: transparent;
}
.button:global(.carbon).horizontal[disabled] .client,
.button:global(.carbon).vertical[disabled] .client {
  color: inherit;
}
.button:global(.carbon).horizontal.decrement .bg {
  border-radius: 416.625rem;
  border: 1px solid var(--agate-accent-color, #8fd43a);
  background-color: transparent;
  background-image: linear-gradient(to bottom left, transparent, #333);
  box-shadow: none;
}
:global(.spotlight-input-key) .button:global(.carbon).horizontal.decrement:global(.spottable):focus .bg,
:global(.spotlight-input-mouse) .button:global(.carbon).horizontal.decrement:global(.spottable):focus .bg {
  background-color: var(--agate-highlight-color, #6abe0b);
  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));
}
:global(.spotlight-input-touch) .button:global(.carbon).horizontal.decrement:global(.spottable):active .bg {
  background-color: var(--agate-highlight-color, #6abe0b);
  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));
}
.button:global(.carbon).horizontal.increment .bg {
  border-radius: 416.625rem;
  border: 1px solid var(--agate-accent-color, #8fd43a);
  background-color: transparent;
  background-image: linear-gradient(to bottom left, transparent, #333);
  box-shadow: none;
}
:global(.spotlight-input-key) .button:global(.carbon).horizontal.increment:global(.spottable):focus .bg,
:global(.spotlight-input-mouse) .button:global(.carbon).horizontal.increment:global(.spottable):focus .bg {
  background-color: var(--agate-highlight-color, #6abe0b);
  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));
}
:global(.spotlight-input-touch) .button:global(.carbon).horizontal.increment:global(.spottable):active .bg {
  background-color: var(--agate-highlight-color, #6abe0b);
  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));
}
.button:global(.carbon).vertical.decrement .bg {
  border-radius: 416.625rem;
  border: 1px solid var(--agate-accent-color, #8fd43a);
  background-color: transparent;
  background-image: linear-gradient(to bottom left, transparent, #333);
  box-shadow: none;
}
:global(.spotlight-input-key) .button:global(.carbon).vertical.decrement:global(.spottable):focus .bg,
:global(.spotlight-input-mouse) .button:global(.carbon).vertical.decrement:global(.spottable):focus .bg {
  background-color: var(--agate-highlight-color, #6abe0b);
  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));
}
:global(.spotlight-input-touch) .button:global(.carbon).vertical.decrement:global(.spottable):active .bg {
  background-color: var(--agate-highlight-color, #6abe0b);
  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));
}
.button:global(.carbon).vertical.increment .bg {
  border-radius: 416.625rem;
  border: 1px solid var(--agate-accent-color, #8fd43a);
  background-color: transparent;
  background-image: linear-gradient(to bottom left, transparent, #333);
  box-shadow: none;
}
:global(.spotlight-input-key) .button:global(.carbon).vertical.increment:global(.spottable):focus .bg,
:global(.spotlight-input-mouse) .button:global(.carbon).vertical.increment:global(.spottable):focus .bg {
  background-color: var(--agate-highlight-color, #6abe0b);
  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));
}
:global(.spotlight-input-touch) .button:global(.carbon).vertical.increment:global(.spottable):active .bg {
  background-color: var(--agate-highlight-color, #6abe0b);
  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));
}
.button:global(.cobalt).horizontal .client,
.button:global(.cobalt).vertical .client {
  color: #373739;
}
.button:global(.cobalt).horizontal .bg,
.button:global(.cobalt).vertical .bg {
  background-color: var(--agate-highlight-color, #fff);
}
.button:global(.cobalt).horizontal[disabled],
.button:global(.cobalt).vertical[disabled] {
  opacity: 0.6;
}
.button:global(.cobalt).horizontal[disabled] .bg,
.button:global(.cobalt).vertical[disabled] .bg {
  background-color: var(--agate-highlight-color, #fff);
}
.button:global(.cobalt).horizontal[disabled] .client,
.button:global(.cobalt).vertical[disabled] .client {
  color: #373739;
}
.button:global(.cobalt).horizontal.decrement .bg {
  border-radius: 3.5rem 0 0 3.5rem;
  border: 0 solid transparent;
  background-color: #424242;
  background-image: linear-gradient(to top, transparent, rgba(0, 0, 0, 0.05));
  box-shadow: none;
}
:global(.spotlight-input-key) .button:global(.cobalt).horizontal.decrement:global(.spottable):focus .bg,
:global(.spotlight-input-mouse) .button:global(.cobalt).horizontal.decrement:global(.spottable):focus .bg {
  background-color: var(--agate-highlight-color, #fff);
  background-image: none;
}
:global(.spotlight-input-touch) .button:global(.cobalt).horizontal.decrement:global(.spottable):active .bg {
  background-color: var(--agate-highlight-color, #fff);
  background-image: none;
}
.button:global(.cobalt).horizontal.increment .bg {
  border-radius: 0 3.5rem 3.5rem 0;
  border: 0 solid transparent;
  background-color: #424242;
  background-image: linear-gradient(to top, transparent, rgba(0, 0, 0, 0.05));
  box-shadow: none;
}
:global(.spotlight-input-key) .button:global(.cobalt).horizontal.increment:global(.spottable):focus .bg,
:global(.spotlight-input-mouse) .button:global(.cobalt).horizontal.increment:global(.spottable):focus .bg {
  background-color: var(--agate-highlight-color, #fff);
  background-image: none;
}
:global(.spotlight-input-touch) .button:global(.cobalt).horizontal.increment:global(.spottable):active .bg {
  background-color: var(--agate-highlight-color, #fff);
  background-image: none;
}
.button:global(.cobalt).vertical.decrement .bg {
  border-radius: 0;
  border: 0 solid transparent;
  background-color: #424242;
  background-image: linear-gradient(to top, transparent, rgba(0, 0, 0, 0.05));
  box-shadow: none;
}
:global(.spotlight-input-key) .button:global(.cobalt).vertical.decrement:global(.spottable):focus .bg,
:global(.spotlight-input-mouse) .button:global(.cobalt).vertical.decrement:global(.spottable):focus .bg {
  background-color: var(--agate-highlight-color, #fff);
  background-image: none;
}
:global(.spotlight-input-touch) .button:global(.cobalt).vertical.decrement:global(.spottable):active .bg {
  background-color: var(--agate-highlight-color, #fff);
  background-image: none;
}
.button:global(.cobalt).vertical.increment .bg {
  border-radius: 0;
  border: 0 solid transparent;
  background-color: #424242;
  background-image: linear-gradient(to top, transparent, rgba(0, 0, 0, 0.05));
  box-shadow: none;
}
:global(.spotlight-input-key) .button:global(.cobalt).vertical.increment:global(.spottable):focus .bg,
:global(.spotlight-input-mouse) .button:global(.cobalt).vertical.increment:global(.spottable):focus .bg {
  background-color: var(--agate-highlight-color, #fff);
  background-image: none;
}
:global(.spotlight-input-touch) .button:global(.cobalt).vertical.increment:global(.spottable):active .bg {
  background-color: var(--agate-highlight-color, #fff);
  background-image: none;
}
.button:global(.cobalt):global(.night).horizontal .client,
.button:global(.cobalt):global(.night).vertical .client {
  color: #373739;
}
.button:global(.cobalt):global(.night).horizontal .bg,
.button:global(.cobalt):global(.night).vertical .bg {
  background-color: #7482bf;
}
.button:global(.cobalt):global(.night).horizontal[disabled],
.button:global(.cobalt):global(.night).vertical[disabled] {
  opacity: 0.6;
}
.button:global(.cobalt):global(.night).horizontal[disabled] .bg,
.button:global(.cobalt):global(.night).vertical[disabled] .bg {
  background-color: #7482bf;
}
.button:global(.cobalt):global(.night).horizontal[disabled] .client,
.button:global(.cobalt):global(.night).vertical[disabled] .client {
  color: #373739;
}
.button:global(.cobalt):global(.night).horizontal.decrement .bg {
  border-radius: 3.5rem 0 0 3.5rem;
  border: 0 solid transparent;
  background-color: rgba(0, 0, 0, 0.15);
  background-image: linear-gradient(to top, transparent, rgba(0, 0, 0, 0.05));
  box-shadow: none;
}
:global(.spotlight-input-key) .button:global(.cobalt):global(.night).horizontal.decrement:global(.spottable):focus .bg,
:global(.spotlight-input-mouse) .button:global(.cobalt):global(.night).horizontal.decrement:global(.spottable):focus .bg {
  background-color: var(--agate-highlight-color, #fff);
  background-image: none;
}
:global(.spotlight-input-touch) .button:global(.cobalt):global(.night).horizontal.decrement:global(.spottable):active .bg {
  background-color: var(--agate-highlight-color, #fff);
  background-image: none;
}
.button:global(.cobalt):global(.night).horizontal.increment .bg {
  border-radius: 0 3.5rem 3.5rem 0;
  border: 0 solid transparent;
  background-color: rgba(0, 0, 0, 0.15);
  background-image: linear-gradient(to top, transparent, rgba(0, 0, 0, 0.05));
  box-shadow: none;
}
:global(.spotlight-input-key) .button:global(.cobalt):global(.night).horizontal.increment:global(.spottable):focus .bg,
:global(.spotlight-input-mouse) .button:global(.cobalt):global(.night).horizontal.increment:global(.spottable):focus .bg {
  background-color: var(--agate-highlight-color, #fff);
  background-image: none;
}
:global(.spotlight-input-touch) .button:global(.cobalt):global(.night).horizontal.increment:global(.spottable):active .bg {
  background-color: var(--agate-highlight-color, #fff);
  background-image: none;
}
.button:global(.cobalt):global(.night).vertical.decrement .bg {
  border-radius: 0;
  border: 0 solid transparent;
  background-color: rgba(0, 0, 0, 0.15);
  background-image: linear-gradient(to top, transparent, rgba(0, 0, 0, 0.05));
  box-shadow: none;
}
:global(.spotlight-input-key) .button:global(.cobalt):global(.night).vertical.decrement:global(.spottable):focus .bg,
:global(.spotlight-input-mouse) .button:global(.cobalt):global(.night).vertical.decrement:global(.spottable):focus .bg {
  background-color: var(--agate-highlight-color, #fff);
  background-image: none;
}
:global(.spotlight-input-touch) .button:global(.cobalt):global(.night).vertical.decrement:global(.spottable):active .bg {
  background-color: var(--agate-highlight-color, #fff);
  background-image: none;
}
.button:global(.cobalt):global(.night).vertical.increment .bg {
  border-radius: 0;
  border: 0 solid transparent;
  background-color: rgba(0, 0, 0, 0.15);
  background-image: linear-gradient(to top, transparent, rgba(0, 0, 0, 0.05));
  box-shadow: none;
}
:global(.spotlight-input-key) .button:global(.cobalt):global(.night).vertical.increment:global(.spottable):focus .bg,
:global(.spotlight-input-mouse) .button:global(.cobalt):global(.night).vertical.increment:global(.spottable):focus .bg {
  background-color: var(--agate-highlight-color, #fff);
  background-image: none;
}
:global(.spotlight-input-touch) .button:global(.cobalt):global(.night).vertical.increment:global(.spottable):active .bg {
  background-color: var(--agate-highlight-color, #fff);
  background-image: none;
}
.button:global(.copper).horizontal .client,
.button:global(.copper).vertical .client {
  color: #373739;
}
.button:global(.copper).horizontal .bg,
.button:global(.copper).vertical .bg {
  background-color: var(--agate-highlight-color, #fff);
}
.button:global(.copper).horizontal[disabled],
.button:global(.copper).vertical[disabled] {
  opacity: 0.6;
}
.button:global(.copper).horizontal[disabled] .bg,
.button:global(.copper).vertical[disabled] .bg {
  background-color: var(--agate-highlight-color, #fff);
}
.button:global(.copper).horizontal[disabled] .client,
.button:global(.copper).vertical[disabled] .client {
  color: #373739;
}
.button:global(.copper).horizontal.decrement .bg {
  border-radius: 3.5rem 0 0 3.5rem;
  border: 0 solid transparent;
  background-color: hsl(67, 2%, 32%);
  background-image: linear-gradient(to top, transparent, rgba(0, 0, 0, 0.05));
  box-shadow: none;
}
:global(.spotlight-input-key) .button:global(.copper).horizontal.decrement:global(.spottable):focus .bg,
:global(.spotlight-input-mouse) .button:global(.copper).horizontal.decrement:global(.spottable):focus .bg {
  background-color: var(--agate-highlight-color, #fff);
  background-image: none;
}
:global(.spotlight-input-touch) .button:global(.copper).horizontal.decrement:global(.spottable):active .bg {
  background-color: var(--agate-highlight-color, #fff);
  background-image: none;
}
.button:global(.copper).horizontal.increment .bg {
  border-radius: 0 3.5rem 3.5rem 0;
  border: 0 solid transparent;
  background-color: hsl(67, 2%, 32%);
  background-image: linear-gradient(to top, transparent, rgba(0, 0, 0, 0.05));
  box-shadow: none;
}
:global(.spotlight-input-key) .button:global(.copper).horizontal.increment:global(.spottable):focus .bg,
:global(.spotlight-input-mouse) .button:global(.copper).horizontal.increment:global(.spottable):focus .bg {
  background-color: var(--agate-highlight-color, #fff);
  background-image: none;
}
:global(.spotlight-input-touch) .button:global(.copper).horizontal.increment:global(.spottable):active .bg {
  background-color: var(--agate-highlight-color, #fff);
  background-image: none;
}
.button:global(.copper).vertical.decrement .bg {
  border-radius: 0;
  border: 0 solid transparent;
  background-color: hsl(67, 2%, 32%);
  background-image: linear-gradient(to top, transparent, rgba(0, 0, 0, 0.05));
  box-shadow: none;
}
:global(.spotlight-input-key) .button:global(.copper).vertical.decrement:global(.spottable):focus .bg,
:global(.spotlight-input-mouse) .button:global(.copper).vertical.decrement:global(.spottable):focus .bg {
  background-color: var(--agate-highlight-color, #fff);
  background-image: none;
}
:global(.spotlight-input-touch) .button:global(.copper).vertical.decrement:global(.spottable):active .bg {
  background-color: var(--agate-highlight-color, #fff);
  background-image: none;
}
.button:global(.copper).vertical.increment .bg {
  border-radius: 0;
  border: 0 solid transparent;
  background-color: hsl(67, 2%, 32%);
  background-image: linear-gradient(to top, transparent, rgba(0, 0, 0, 0.05));
  box-shadow: none;
}
:global(.spotlight-input-key) .button:global(.copper).vertical.increment:global(.spottable):focus .bg,
:global(.spotlight-input-mouse) .button:global(.copper).vertical.increment:global(.spottable):focus .bg {
  background-color: var(--agate-highlight-color, #fff);
  background-image: none;
}
:global(.spotlight-input-touch) .button:global(.copper).vertical.increment:global(.spottable):active .bg {
  background-color: var(--agate-highlight-color, #fff);
  background-image: none;
}
.button:global(.copper):global(.night).horizontal .client,
.button:global(.copper):global(.night).vertical .client {
  color: #373739;
}
.button:global(.copper):global(.night).horizontal .bg,
.button:global(.copper):global(.night).vertical .bg {
  background-color: #424242;
}
.button:global(.copper):global(.night).horizontal[disabled],
.button:global(.copper):global(.night).vertical[disabled] {
  opacity: 0.6;
}
.button:global(.copper):global(.night).horizontal[disabled] .bg,
.button:global(.copper):global(.night).vertical[disabled] .bg {
  background-color: #424242;
}
.button:global(.copper):global(.night).horizontal[disabled] .client,
.button:global(.copper):global(.night).vertical[disabled] .client {
  color: #373739;
}
.button:global(.copper):global(.night).horizontal.decrement .bg {
  border-radius: 3.5rem 0 0 3.5rem;
  border: 0 solid transparent;
  background-color: hsl(67, 2%, 32%);
  background-image: linear-gradient(to top, transparent, rgba(0, 0, 0, 0.05));
  box-shadow: none;
}
:global(.spotlight-input-key) .button:global(.copper):global(.night).horizontal.decrement:global(.spottable):focus .bg,
:global(.spotlight-input-mouse) .button:global(.copper):global(.night).horizontal.decrement:global(.spottable):focus .bg {
  background-color: var(--agate-highlight-color, #fff);
  background-image: none;
}
:global(.spotlight-input-touch) .button:global(.copper):global(.night).horizontal.decrement:global(.spottable):active .bg {
  background-color: var(--agate-highlight-color, #fff);
  background-image: none;
}
.button:global(.copper):global(.night).horizontal.increment .bg {
  border-radius: 0 3.5rem 3.5rem 0;
  border: 0 solid transparent;
  background-color: hsl(67, 2%, 32%);
  background-image: linear-gradient(to top, transparent, rgba(0, 0, 0, 0.05));
  box-shadow: none;
}
:global(.spotlight-input-key) .button:global(.copper):global(.night).horizontal.increment:global(.spottable):focus .bg,
:global(.spotlight-input-mouse) .button:global(.copper):global(.night).horizontal.increment:global(.spottable):focus .bg {
  background-color: var(--agate-highlight-color, #fff);
  background-image: none;
}
:global(.spotlight-input-touch) .button:global(.copper):global(.night).horizontal.increment:global(.spottable):active .bg {
  background-color: var(--agate-highlight-color, #fff);
  background-image: none;
}
.button:global(.copper):global(.night).vertical.decrement .bg {
  border-radius: 0;
  border: 0 solid transparent;
  background-color: hsl(67, 2%, 32%);
  background-image: linear-gradient(to top, transparent, rgba(0, 0, 0, 0.05));
  box-shadow: none;
}
:global(.spotlight-input-key) .button:global(.copper):global(.night).vertical.decrement:global(.spottable):focus .bg,
:global(.spotlight-input-mouse) .button:global(.copper):global(.night).vertical.decrement:global(.spottable):focus .bg {
  background-color: var(--agate-highlight-color, #fff);
  background-image: none;
}
:global(.spotlight-input-touch) .button:global(.copper):global(.night).vertical.decrement:global(.spottable):active .bg {
  background-color: var(--agate-highlight-color, #fff);
  background-image: none;
}
.button:global(.copper):global(.night).vertical.increment .bg {
  border-radius: 0;
  border: 0 solid transparent;
  background-color: hsl(67, 2%, 32%);
  background-image: linear-gradient(to top, transparent, rgba(0, 0, 0, 0.05));
  box-shadow: none;
}
:global(.spotlight-input-key) .button:global(.copper):global(.night).vertical.increment:global(.spottable):focus .bg,
:global(.spotlight-input-mouse) .button:global(.copper):global(.night).vertical.increment:global(.spottable):focus .bg {
  background-color: var(--agate-highlight-color, #fff);
  background-image: none;
}
:global(.spotlight-input-touch) .button:global(.copper):global(.night).vertical.increment:global(.spottable):active .bg {
  background-color: var(--agate-highlight-color, #fff);
  background-image: none;
}
.button:global(.electro).horizontal .client,
.button:global(.electro).vertical .client {
  color: inherit;
}
.button:global(.electro).horizontal .bg,
.button:global(.electro).vertical .bg {
  background-color: var(--agate-accent-color, #0359f0);
}
.button:global(.electro).horizontal[disabled],
.button:global(.electro).vertical[disabled] {
  opacity: 0.6;
}
.button:global(.electro).horizontal[disabled] .bg,
.button:global(.electro).vertical[disabled] .bg {
  background-color: var(--agate-accent-color, #0359f0);
}
.button:global(.electro).horizontal[disabled] .client,
.button:global(.electro).vertical[disabled] .client {
  color: inherit;
}
.button:global(.electro).horizontal.decrement .bg {
  border-radius: 0.75rem;
  border: 0 solid transparent;
  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);
}
:global(.spotlight-input-key) .button:global(.electro).horizontal.decrement:global(.spottable):focus .bg,
:global(.spotlight-input-mouse) .button:global(.electro).horizontal.decrement:global(.spottable):focus .bg {
  background-color: var(--agate-highlight-color, #ff8100);
  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);
}
:global(.spotlight-input-touch) .button:global(.electro).horizontal.decrement:global(.spottable):active .bg {
  background-color: var(--agate-highlight-color, #ff8100);
  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);
}
.button:global(.electro).horizontal.increment .bg {
  border-radius: 0.75rem;
  border: 0 solid transparent;
  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);
}
:global(.spotlight-input-key) .button:global(.electro).horizontal.increment:global(.spottable):focus .bg,
:global(.spotlight-input-mouse) .button:global(.electro).horizontal.increment:global(.spottable):focus .bg {
  background-color: var(--agate-highlight-color, #ff8100);
  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);
}
:global(.spotlight-input-touch) .button:global(.electro).horizontal.increment:global(.spottable):active .bg {
  background-color: var(--agate-highlight-color, #ff8100);
  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);
}
.button:global(.electro).vertical.decrement .bg {
  border-radius: 0.75rem;
  border: 0 solid transparent;
  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);
}
:global(.spotlight-input-key) .button:global(.electro).vertical.decrement:global(.spottable):focus .bg,
:global(.spotlight-input-mouse) .button:global(.electro).vertical.decrement:global(.spottable):focus .bg {
  background-color: var(--agate-highlight-color, #ff8100);
  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);
}
:global(.spotlight-input-touch) .button:global(.electro).vertical.decrement:global(.spottable):active .bg {
  background-color: var(--agate-highlight-color, #ff8100);
  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);
}
.button:global(.electro).vertical.increment .bg {
  border-radius: 0.75rem;
  border: 0 solid transparent;
  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);
}
:global(.spotlight-input-key) .button:global(.electro).vertical.increment:global(.spottable):focus .bg,
:global(.spotlight-input-mouse) .button:global(.electro).vertical.increment:global(.spottable):focus .bg {
  background-color: var(--agate-highlight-color, #ff8100);
  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);
}
:global(.spotlight-input-touch) .button:global(.electro).vertical.increment:global(.spottable):active .bg {
  background-color: var(--agate-highlight-color, #ff8100);
  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);
}
.button:global(.gallium).horizontal .client,
.button:global(.gallium).vertical .client {
  color: inherit;
}
.button:global(.gallium).horizontal .bg,
.button:global(.gallium).vertical .bg {
  background-color: #5e5e5e;
}
.button:global(.gallium).horizontal[disabled],
.button:global(.gallium).vertical[disabled] {
  opacity: 0.6;
}
.button:global(.gallium).horizontal[disabled] .bg,
.button:global(.gallium).vertical[disabled] .bg {
  background-color: #5e5e5e;
}
.button:global(.gallium).horizontal[disabled] .client,
.button:global(.gallium).vertical[disabled] .client {
  color: inherit;
}
.button:global(.gallium).horizontal.decrement .bg {
  border-radius: 0.25rem;
  border: 0.125rem solid transparent;
  background-color: #5e5e5e;
  background-image: none;
  box-shadow: none;
}
:global(.spotlight-input-key) .button:global(.gallium).horizontal.decrement:global(.spottable):focus .bg,
:global(.spotlight-input-mouse) .button:global(.gallium).horizontal.decrement:global(.spottable):focus .bg {
  background-color: var(--agate-accent-color, #8b7efe);
  background-image: none;
}
:global(.spotlight-input-touch) .button:global(.gallium).horizontal.decrement:global(.spottable):active .bg {
  background-color: var(--agate-accent-color, #8b7efe);
  background-image: none;
}
.button:global(.gallium).horizontal.increment .bg {
  border-radius: 0.25rem;
  border: 0.125rem solid transparent;
  background-color: #5e5e5e;
  background-image: none;
  box-shadow: none;
}
:global(.spotlight-input-key) .button:global(.gallium).horizontal.increment:global(.spottable):focus .bg,
:global(.spotlight-input-mouse) .button:global(.gallium).horizontal.increment:global(.spottable):focus .bg {
  background-color: var(--agate-accent-color, #8b7efe);
  background-image: none;
}
:global(.spotlight-input-touch) .button:global(.gallium).horizontal.increment:global(.spottable):active .bg {
  background-color: var(--agate-accent-color, #8b7efe);
  background-image: none;
}
.button:global(.gallium).vertical.decrement .bg {
  border-radius: 0.25rem;
  border: 0.125rem solid transparent;
  background-color: #5e5e5e;
  background-image: none;
  box-shadow: none;
}
:global(.spotlight-input-key) .button:global(.gallium).vertical.decrement:global(.spottable):focus .bg,
:global(.spotlight-input-mouse) .button:global(.gallium).vertical.decrement:global(.spottable):focus .bg {
  background-color: var(--agate-accent-color, #8b7efe);
  background-image: none;
}
:global(.spotlight-input-touch) .button:global(.gallium).vertical.decrement:global(.spottable):active .bg {
  background-color: var(--agate-accent-color, #8b7efe);
  background-image: none;
}
.button:global(.gallium).vertical.increment .bg {
  border-radius: 0.25rem;
  border: 0.125rem solid transparent;
  background-color: #5e5e5e;
  background-image: none;
  box-shadow: none;
}
:global(.spotlight-input-key) .button:global(.gallium).vertical.increment:global(.spottable):focus .bg,
:global(.spotlight-input-mouse) .button:global(.gallium).vertical.increment:global(.spottable):focus .bg {
  background-color: var(--agate-accent-color, #8b7efe);
  background-image: none;
}
:global(.spotlight-input-touch) .button:global(.gallium).vertical.increment:global(.spottable):active .bg {
  background-color: var(--agate-accent-color, #8b7efe);
  background-image: none;
}
.button:global(.gallium):global(.night).horizontal .client,
.button:global(.gallium):global(.night).vertical .client {
  color: inherit;
}
.button:global(.gallium):global(.night).horizontal .bg,
.button:global(.gallium):global(.night).vertical .bg {
  background-color: #5e5e5e;
}
.button:global(.gallium):global(.night).horizontal[disabled],
.button:global(.gallium):global(.night).vertical[disabled] {
  opacity: 0.6;
}
.button:global(.gallium):global(.night).horizontal[disabled] .bg,
.button:global(.gallium):global(.night).vertical[disabled] .bg {
  background-color: #5e5e5e;
}
.button:global(.gallium):global(.night).horizontal[disabled] .client,
.button:global(.gallium):global(.night).vertical[disabled] .client {
  color: inherit;
}
.button:global(.gallium):global(.night).horizontal.decrement .bg {
  border-radius: 0.25rem;
  border: 0.125rem solid transparent;
  background-color: #5e5e5e;
  background-image: none;
  box-shadow: none;
}
:global(.spotlight-input-key) .button:global(.gallium):global(.night).horizontal.decrement:global(.spottable):focus .bg,
:global(.spotlight-input-mouse) .button:global(.gallium):global(.night).horizontal.decrement:global(.spottable):focus .bg {
  background-color: var(--agate-accent-color, #8b7efe);
  background-image: none;
}
:global(.spotlight-input-touch) .button:global(.gallium):global(.night).horizontal.decrement:global(.spottable):active .bg {
  background-color: var(--agate-accent-color, #8b7efe);
  background-image: none;
}
.button:global(.gallium):global(.night).horizontal.increment .bg {
  border-radius: 0.25rem;
  border: 0.125rem solid transparent;
  background-color: #5e5e5e;
  background-image: none;
  box-shadow: none;
}
:global(.spotlight-input-key) .button:global(.gallium):global(.night).horizontal.increment:global(.spottable):focus .bg,
:global(.spotlight-input-mouse) .button:global(.gallium):global(.night).horizontal.increment:global(.spottable):focus .bg {
  background-color: var(--agate-accent-color, #8b7efe);
  background-image: none;
}
:global(.spotlight-input-touch) .button:global(.gallium):global(.night).horizontal.increment:global(.spottable):active .bg {
  background-color: var(--agate-accent-color, #8b7efe);
  background-image: none;
}
.button:global(.gallium):global(.night).vertical.decrement .bg {
  border-radius: 0.25rem;
  border: 0.125rem solid transparent;
  background-color: #5e5e5e;
  background-image: none;
  box-shadow: none;
}
:global(.spotlight-input-key) .button:global(.gallium):global(.night).vertical.decrement:global(.spottable):focus .bg,
:global(.spotlight-input-mouse) .button:global(.gallium):global(.night).vertical.decrement:global(.spottable):focus .bg {
  background-color: var(--agate-accent-color, #8b7efe);
  background-image: none;
}
:global(.spotlight-input-touch) .button:global(.gallium):global(.night).vertical.decrement:global(.spottable):active .bg {
  background-color: var(--agate-accent-color, #8b7efe);
  background-image: none;
}
.button:global(.gallium):global(.night).vertical.increment .bg {
  border-radius: 0.25rem;
  border: 0.125rem solid transparent;
  background-color: #5e5e5e;
  background-image: none;
  box-shadow: none;
}
:global(.spotlight-input-key) .button:global(.gallium):global(.night).vertical.increment:global(.spottable):focus .bg,
:global(.spotlight-input-mouse) .button:global(.gallium):global(.night).vertical.increment:global(.spottable):focus .bg {
  background-color: var(--agate-accent-color, #8b7efe);
  background-image: none;
}
:global(.spotlight-input-touch) .button:global(.gallium):global(.night).vertical.increment:global(.spottable):active .bg {
  background-color: var(--agate-accent-color, #8b7efe);
  background-image: none;
}
.button:global(.silicon).horizontal .client,
.button:global(.silicon).vertical .client {
  color: #000000;
}
.button:global(.silicon).horizontal .bg,
.button:global(.silicon).vertical .bg {
  background-color: #eeeeee;
}
.button:global(.silicon).horizontal[disabled],
.button:global(.silicon).vertical[disabled] {
  opacity: 0.6;
}
.button:global(.silicon).horizontal[disabled] .bg,
.button:global(.silicon).vertical[disabled] .bg {
  background-color: #eeeeee;
}
.button:global(.silicon).horizontal[disabled] .client,
.button:global(.silicon).vertical[disabled] .client {
  color: #000000;
}
.button:global(.silicon).horizontal.decrement .bg {
  border-radius: 1.25rem;
  border: 0.125rem solid transparent;
  background-color: #eeeeee;
  background-image: none;
  box-shadow: none;
}
:global(.spotlight-input-key) .button:global(.silicon).horizontal.decrement:global(.spottable):focus .bg,
:global(.spotlight-input-mouse) .button:global(.silicon).horizontal.decrement:global(.spottable):focus .bg {
  background-color: transparent;
  background-image: linear-gradient(to right, #9e00d8, #f1304f);
}
:global(.spotlight-input-touch) .button:global(.silicon).horizontal.decrement:global(.spottable):active .bg {
  background-color: transparent;
  background-image: linear-gradient(to right, #9e00d8, #f1304f);
}
.button:global(.silicon).horizontal.increment .bg {
  border-radius: 1.25rem;
  border: 0.125rem solid transparent;
  background-color: #eeeeee;
  background-image: none;
  box-shadow: none;
}
:global(.spotlight-input-key) .button:global(.silicon).horizontal.increment:global(.spottable):focus .bg,
:global(.spotlight-input-mouse) .button:global(.silicon).horizontal.increment:global(.spottable):focus .bg {
  background-color: transparent;
  background-image: linear-gradient(to right, #9e00d8, #f1304f);
}
:global(.spotlight-input-touch) .button:global(.silicon).horizontal.increment:global(.spottable):active .bg {
  background-color: transparent;
  background-image: linear-gradient(to right, #9e00d8, #f1304f);
}
.button:global(.silicon).vertical.decrement .bg {
  border-radius: 1.25rem;
  border: 0.125rem solid transparent;
  background-color: #eeeeee;
  background-image: none;
  box-shadow: none;
}
:global(.spotlight-input-key) .button:global(.silicon).vertical.decrement:global(.spottable):focus .bg,
:global(.spotlight-input-mouse) .button:global(.silicon).vertical.decrement:global(.spottable):focus .bg {
  background-color: transparent;
  background-image: linear-gradient(to right, #9e00d8, #f1304f);
}
:global(.spotlight-input-touch) .button:global(.silicon).vertical.decrement:global(.spottable):active .bg {
  background-color: transparent;
  background-image: linear-gradient(to right, #9e00d8, #f1304f);
}
.button:global(.silicon).vertical.increment .bg {
  border-radius: 1.25rem;
  border: 0.125rem solid transparent;
  background-color: #eeeeee;
  background-image: none;
  box-shadow: none;
}
:global(.spotlight-input-key) .button:global(.silicon).vertical.increment:global(.spottable):focus .bg,
:global(.spotlight-input-mouse) .button:global(.silicon).vertical.increment:global(.spottable):focus .bg {
  background-color: transparent;
  background-image: linear-gradient(to right, #9e00d8, #f1304f);
}
:global(.spotlight-input-touch) .button:global(.silicon).vertical.increment:global(.spottable):active .bg {
  background-color: transparent;
  background-image: linear-gradient(to right, #9e00d8, #f1304f);
}
.button:global(.silicon):global(.night).horizontal .client,
.button:global(.silicon):global(.night).vertical .client {
  color: #000000;
}
.button:global(.silicon):global(.night).horizontal .bg,
.button:global(.silicon):global(.night).vertical .bg {
  background-color: #eeeeee;
}
.button:global(.silicon):global(.night).horizontal[disabled],
.button:global(.silicon):global(.night).vertical[disabled] {
  opacity: 0.6;
}
.button:global(.silicon):global(.night).horizontal[disabled] .bg,
.button:global(.silicon):global(.night).vertical[disabled] .bg {
  background-color: #eeeeee;
}
.button:global(.silicon):global(.night).horizontal[disabled] .client,
.button:global(.silicon):global(.night).vertical[disabled] .client {
  color: #000000;
}
.button:global(.silicon):global(.night).horizontal.decrement .bg {
  border-radius: 1.25rem;
  border: 0.125rem solid transparent;
  background-color: #eeeeee;
  background-image: none;
  box-shadow: none;
}
:global(.spotlight-input-key) .button:global(.silicon):global(.night).horizontal.decrement:global(.spottable):focus .bg,
:global(.spotlight-input-mouse) .button:global(.silicon):global(.night).horizontal.decrement:global(.spottable):focus .bg {
  background-color: transparent;
  background-image: linear-gradient(to right, #9e00d8, #f1304f);
}
:global(.spotlight-input-touch) .button:global(.silicon):global(.night).horizontal.decrement:global(.spottable):active .bg {
  background-color: transparent;
  background-image: linear-gradient(to right, #9e00d8, #f1304f);
}
.button:global(.silicon):global(.night).horizontal.increment .bg {
  border-radius: 1.25rem;
  border: 0.125rem solid transparent;
  background-color: #eeeeee;
  background-image: none;
  box-shadow: none;
}
:global(.spotlight-input-key) .button:global(.silicon):global(.night).horizontal.increment:global(.spottable):focus .bg,
:global(.spotlight-input-mouse) .button:global(.silicon):global(.night).horizontal.increment:global(.spottable):focus .bg {
  background-color: transparent;
  background-image: linear-gradient(to right, #9e00d8, #f1304f);
}
:global(.spotlight-input-touch) .button:global(.silicon):global(.night).horizontal.increment:global(.spottable):active .bg {
  background-color: transparent;
  background-image: linear-gradient(to right, #9e00d8, #f1304f);
}
.button:global(.silicon):global(.night).vertical.decrement .bg {
  border-radius: 1.25rem;
  border: 0.125rem solid transparent;
  background-color: #eeeeee;
  background-image: none;
  box-shadow: none;
}
:global(.spotlight-input-key) .button:global(.silicon):global(.night).vertical.decrement:global(.spottable):focus .bg,
:global(.spotlight-input-mouse) .button:global(.silicon):global(.night).vertical.decrement:global(.spottable):focus .bg {
  background-color: transparent;
  background-image: linear-gradient(to right, #9e00d8, #f1304f);
}
:global(.spotlight-input-touch) .button:global(.silicon):global(.night).vertical.decrement:global(.spottable):active .bg {
  background-color: transparent;
  background-image: linear-gradient(to right, #9e00d8, #f1304f);
}
.button:global(.silicon):global(.night).vertical.increment .bg {
  border-radius: 1.25rem;
  border: 0.125rem solid transparent;
  background-color: #eeeeee;
  background-image: none;
  box-shadow: none;
}
:global(.spotlight-input-key) .button:global(.silicon):global(.night).vertical.increment:global(.spottable):focus .bg,
:global(.spotlight-input-mouse) .button:global(.silicon):global(.night).vertical.increment:global(.spottable):focus .bg {
  background-color: transparent;
  background-image: linear-gradient(to right, #9e00d8, #f1304f);
}
:global(.spotlight-input-touch) .button:global(.silicon):global(.night).vertical.increment:global(.spottable):active .bg {
  background-color: transparent;
  background-image: linear-gradient(to right, #9e00d8, #f1304f);
}
.button:global(.titanium).horizontal .client,
.button:global(.titanium).vertical .client {
  color: inherit;
}
.button:global(.titanium).horizontal .bg,
.button:global(.titanium).vertical .bg {
  background-color: rgba(255, 255, 255, 0.5);
}
.button:global(.titanium).horizontal[disabled],
.button:global(.titanium).vertical[disabled] {
  opacity: 0.6;
}
.button:global(.titanium).horizontal[disabled] .bg,
.button:global(.titanium).vertical[disabled] .bg {
  background-color: rgba(255, 255, 255, 0.5);
}
.button:global(.titanium).horizontal[disabled] .client,
.button:global(.titanium).vertical[disabled] .client {
  color: inherit;
}
.button:global(.titanium).horizontal.decrement .bg {
  border-radius: 3.5rem 0 0 3.5rem;
  border: 0 solid transparent;
  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));
  box-shadow: none;
}
:global(.spotlight-input-key) .button:global(.titanium).horizontal.decrement:global(.spottable):focus .bg,
:global(.spotlight-input-mouse) .button:global(.titanium).horizontal.decrement:global(.spottable):focus .bg {
  background-color: var(--agate-highlight-color, #2a48ca);
  background-image: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.15) 14%, transparent);
}
:global(.spotlight-input-touch) .button:global(.titanium).horizontal.decrement:global(.spottable):active .bg {
  background-color: var(--agate-highlight-color, #2a48ca);
  background-image: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.15) 14%, transparent);
}
.button:global(.titanium).horizontal.increment .bg {
  border-radius: 0 3.5rem 3.5rem 0;
  border: 0 solid transparent;
  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));
  box-shadow: none;
}
:global(.spotlight-input-key) .button:global(.titanium).horizontal.increment:global(.spottable):focus .bg,
:global(.spotlight-input-mouse) .button:global(.titanium).horizontal.increment:global(.spottable):focus .bg {
  background-color: var(--agate-highlight-color, #2a48ca);
  background-image: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.15) 14%, transparent);
}
:global(.spotlight-input-touch) .button:global(.titanium).horizontal.increment:global(.spottable):active .bg {
  background-color: var(--agate-highlight-color, #2a48ca);
  background-image: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.15) 14%, transparent);
}
.button:global(.titanium).vertical.decrement .bg {
  border-radius: 0;
  border: 0 solid transparent;
  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));
  box-shadow: none;
}
:global(.spotlight-input-key) .button:global(.titanium).vertical.decrement:global(.spottable):focus .bg,
:global(.spotlight-input-mouse) .button:global(.titanium).vertical.decrement:global(.spottable):focus .bg {
  background-color: var(--agate-highlight-color, #2a48ca);
  background-image: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.15) 14%, transparent);
}
:global(.spotlight-input-touch) .button:global(.titanium).vertical.decrement:global(.spottable):active .bg {
  background-color: var(--agate-highlight-color, #2a48ca);
  background-image: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.15) 14%, transparent);
}
.button:global(.titanium).vertical.increment .bg {
  border-radius: 0;
  border: 0 solid transparent;
  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));
  box-shadow: none;
}
:global(.spotlight-input-key) .button:global(.titanium).vertical.increment:global(.spottable):focus .bg,
:global(.spotlight-input-mouse) .button:global(.titanium).vertical.increment:global(.spottable):focus .bg {
  background-color: var(--agate-highlight-color, #2a48ca);
  background-image: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.15) 14%, transparent);
}
:global(.spotlight-input-touch) .button:global(.titanium).vertical.increment:global(.spottable):active .bg {
  background-color: var(--agate-highlight-color, #2a48ca);
  background-image: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.15) 14%, transparent);
}
