.button:global(.carbon) .client {
  color: inherit;
}
.button:global(.carbon) .bg {
  background-color: transparent;
}
.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;
}
.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));
}
.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;
}
.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));
}
.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;
}
.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));
}
.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;
}
.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));
}
.button:global(.cobalt) .client {
  color: #373739;
}
.button:global(.cobalt) .bg {
  background-color: var(--agate-highlight-color, #fff);
}
.button:global(.cobalt).horizontal.decrement .bg {
  border-radius: 3.5rem 0 0 3.5rem;
  border: 0 solid transparent;
  background-color: hsla(67, 2%, 22%, 0.6);
  background-image: linear-gradient(to top, transparent, rgba(0, 0, 0, 0.05));
  box-shadow: none;
}
.button:global(.cobalt).horizontal.decrement:global(.spottable):focus .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: hsla(67, 2%, 22%, 0.6);
  background-image: linear-gradient(to top, transparent, rgba(0, 0, 0, 0.05));
  box-shadow: none;
}
.button:global(.cobalt).horizontal.increment:global(.spottable):focus .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: hsla(67, 2%, 22%, 0.6);
  background-image: linear-gradient(to top, transparent, rgba(0, 0, 0, 0.05));
  box-shadow: none;
}
.button:global(.cobalt).vertical.decrement:global(.spottable):focus .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: hsla(67, 2%, 22%, 0.6);
  background-image: linear-gradient(to top, transparent, rgba(0, 0, 0, 0.05));
  box-shadow: none;
}
.button:global(.cobalt).vertical.increment:global(.spottable):focus .bg {
  background-color: var(--agate-highlight-color, #fff);
  background-image: none;
}
.button:global(.cobalt):global(.night) .client {
  color: #373739;
}
.button:global(.cobalt):global(.night) .bg {
  background-color: #7482bf;
}
.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;
}
.button:global(.cobalt):global(.night).horizontal.decrement:global(.spottable):focus .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;
}
.button:global(.cobalt):global(.night).horizontal.increment:global(.spottable):focus .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;
}
.button:global(.cobalt):global(.night).vertical.decrement:global(.spottable):focus .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;
}
.button:global(.cobalt):global(.night).vertical.increment:global(.spottable):focus .bg {
  background-color: var(--agate-highlight-color, #fff);
  background-image: none;
}
.button:global(.copper) .client {
  color: #373739;
}
.button:global(.copper) .bg {
  background-color: var(--agate-highlight-color, #fff);
}
.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;
}
.button:global(.copper).horizontal.decrement:global(.spottable):focus .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;
}
.button:global(.copper).horizontal.increment:global(.spottable):focus .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;
}
.button:global(.copper).vertical.decrement:global(.spottable):focus .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;
}
.button:global(.copper).vertical.increment:global(.spottable):focus .bg {
  background-color: var(--agate-highlight-color, #fff);
  background-image: none;
}
.button:global(.copper):global(.night) .client {
  color: #373739;
}
.button:global(.copper):global(.night) .bg {
  background-color: #424242;
}
.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;
}
.button:global(.copper):global(.night).horizontal.decrement:global(.spottable):focus .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;
}
.button:global(.copper):global(.night).horizontal.increment:global(.spottable):focus .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;
}
.button:global(.copper):global(.night).vertical.decrement:global(.spottable):focus .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;
}
.button:global(.copper):global(.night).vertical.increment:global(.spottable):focus .bg {
  background-color: var(--agate-highlight-color, #fff);
  background-image: none;
}
.button:global(.electro) .client {
  color: inherit;
}
.button:global(.electro) .bg {
  background-color: var(--agate-accent-color, #0359f0);
}
.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);
}
.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);
}
.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);
}
.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);
}
.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);
}
.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);
}
.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);
}
.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);
}
.button:global(.gallium) .client {
  color: inherit;
}
.button:global(.gallium) .bg {
  background-color: #5e5e5e;
}
.button:global(.gallium).horizontal.decrement .bg {
  border-radius: 0.25rem;
  border: 0.125rem solid transparent;
  background-color: #5e5e5e;
  background-image: none;
  box-shadow: none;
}
.button:global(.gallium).horizontal.decrement:global(.spottable):focus .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;
}
.button:global(.gallium).horizontal.increment:global(.spottable):focus .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;
}
.button:global(.gallium).vertical.decrement:global(.spottable):focus .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;
}
.button:global(.gallium).vertical.increment:global(.spottable):focus .bg {
  background-color: var(--agate-accent-color, #8b7efe);
  background-image: none;
}
.button:global(.gallium):global(.night) .client {
  color: inherit;
}
.button:global(.gallium):global(.night) .bg {
  background-color: #5e5e5e;
}
.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;
}
.button:global(.gallium):global(.night).horizontal.decrement:global(.spottable):focus .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;
}
.button:global(.gallium):global(.night).horizontal.increment:global(.spottable):focus .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;
}
.button:global(.gallium):global(.night).vertical.decrement:global(.spottable):focus .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;
}
.button:global(.gallium):global(.night).vertical.increment:global(.spottable):focus .bg {
  background-color: var(--agate-accent-color, #8b7efe);
  background-image: none;
}
.button:global(.silicon) .client {
  color: #000000;
}
.button:global(.silicon) .bg {
  background-color: #ffffff;
}
.button:global(.silicon).horizontal.decrement .bg {
  border-radius: 1.5625rem;
  border: 0.125rem solid rgba(0, 0, 0, 0.5);
  background-color: #ffffff;
  background-image: none;
  box-shadow: none;
}
.button:global(.silicon).horizontal.decrement:global(.spottable):focus .bg {
  background-color: transparent;
  background-image: linear-gradient(to right, #9e00d8, #ba0088, #f1304f);
}
.button:global(.silicon).horizontal.increment .bg {
  border-radius: 1.5625rem;
  border: 0.125rem solid rgba(0, 0, 0, 0.5);
  background-color: #ffffff;
  background-image: none;
  box-shadow: none;
}
.button:global(.silicon).horizontal.increment:global(.spottable):focus .bg {
  background-color: transparent;
  background-image: linear-gradient(to right, #9e00d8, #ba0088, #f1304f);
}
.button:global(.silicon).vertical.decrement .bg {
  border-radius: 1.5625rem;
  border: 0.125rem solid rgba(0, 0, 0, 0.5);
  background-color: #ffffff;
  background-image: none;
  box-shadow: none;
}
.button:global(.silicon).vertical.decrement:global(.spottable):focus .bg {
  background-color: transparent;
  background-image: linear-gradient(to right, #9e00d8, #ba0088, #f1304f);
}
.button:global(.silicon).vertical.increment .bg {
  border-radius: 1.5625rem;
  border: 0.125rem solid rgba(0, 0, 0, 0.5);
  background-color: #ffffff;
  background-image: none;
  box-shadow: none;
}
.button:global(.silicon).vertical.increment:global(.spottable):focus .bg {
  background-color: transparent;
  background-image: linear-gradient(to right, #9e00d8, #ba0088, #f1304f);
}
.button:global(.silicon):global(.night) .client {
  color: #000000;
}
.button:global(.silicon):global(.night) .bg {
  background-color: #eeeeee;
}
.button:global(.silicon):global(.night).horizontal.decrement .bg {
  border-radius: 1.5625rem;
  border: 0.125rem solid transparent;
  background-color: #eeeeee;
  background-image: none;
  box-shadow: none;
}
.button:global(.silicon):global(.night).horizontal.decrement:global(.spottable):focus .bg {
  background-color: transparent;
  background-image: linear-gradient(to right, #9e00d8, #ba0088, #f1304f);
}
.button:global(.silicon):global(.night).horizontal.increment .bg {
  border-radius: 1.5625rem;
  border: 0.125rem solid transparent;
  background-color: #eeeeee;
  background-image: none;
  box-shadow: none;
}
.button:global(.silicon):global(.night).horizontal.increment:global(.spottable):focus .bg {
  background-color: transparent;
  background-image: linear-gradient(to right, #9e00d8, #ba0088, #f1304f);
}
.button:global(.silicon):global(.night).vertical.decrement .bg {
  border-radius: 1.5625rem;
  border: 0.125rem solid transparent;
  background-color: #eeeeee;
  background-image: none;
  box-shadow: none;
}
.button:global(.silicon):global(.night).vertical.decrement:global(.spottable):focus .bg {
  background-color: transparent;
  background-image: linear-gradient(to right, #9e00d8, #ba0088, #f1304f);
}
.button:global(.silicon):global(.night).vertical.increment .bg {
  border-radius: 1.5625rem;
  border: 0.125rem solid transparent;
  background-color: #eeeeee;
  background-image: none;
  box-shadow: none;
}
.button:global(.silicon):global(.night).vertical.increment:global(.spottable):focus .bg {
  background-color: transparent;
  background-image: linear-gradient(to right, #9e00d8, #ba0088, #f1304f);
}
.button:global(.titanium) .client {
  color: inherit;
}
.button:global(.titanium) .bg {
  background-color: rgba(255, 255, 255, 0.5);
}
.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;
}
.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);
}
.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;
}
.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);
}
.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;
}
.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);
}
.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;
}
.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);
}
