.toggleButton:global(.carbon)::after {
  top: auto;
  right: 1.375rem;
  bottom: 0.375rem;
  left: 1.375rem;
  position: absolute;
  height: 0.16667rem;
  width: auto;
  background-color: black;
  border-color: var(--agate-accent-color, #8fd43a);
  border-width: 1px;
  border-style: solid;
  border-radius: 416.625rem;
  transform: none;
}
.toggleButton:global(.carbon).underline::after {
  content: "";
}
.toggleButton:global(.carbon).selected::after {
  background-color: var(--agate-highlight-color, #6abe0b);
  border-color: var(--agate-accent-color, #8fd43a);
}
.toggleButton:global(.carbon):global(.spottable):focus::after {
  background-color: black;
  border-color: #fff;
}
.toggleButton:global(.carbon):global(.spottable):focus.selected::after {
  background-color: var(--agate-highlight-color, #6abe0b);
  border-color: #fff;
}
.toggleButton:global(.carbon)[disabled]::after {
  background-color: #262626;
  border-color: #6c6c6c;
}
.toggleButton:global(.carbon)[disabled].selected::after {
  background-color: #262626;
  border-color: #6c6c6c;
}
.toggleButton:global(.cobalt)::after {
  top: auto;
  right: 0.875rem;
  bottom: 0.375rem;
  left: 0.875rem;
  position: absolute;
  height: 0.25rem;
  width: auto;
  background-color: transparent;
  border-color: transparent;
  border-width: 1px;
  border-style: solid;
  border-radius: 416.625rem;
  transform: none;
}
.toggleButton:global(.cobalt).underline::after {
  content: "";
}
.toggleButton:global(.cobalt).selected::after {
  background-color: transparent;
  border-color: transparent;
}
.toggleButton:global(.cobalt):global(.spottable):focus::after {
  background-color: transparent;
  border-color: transparent;
}
.toggleButton:global(.cobalt):global(.spottable):focus.selected::after {
  background-color: transparent;
  border-color: transparent;
}
.toggleButton:global(.cobalt)[disabled]::after {
  background-color: transparent;
  border-color: transparent;
}
.toggleButton:global(.cobalt)[disabled].selected::after {
  background-color: transparent;
  border-color: transparent;
}
.toggleButton:global(.cobalt):global(.night)::after {
  top: auto;
  right: 0.875rem;
  bottom: 0.375rem;
  left: 0.875rem;
  position: absolute;
  height: 0.25rem;
  width: auto;
  background-color: transparent;
  border-color: transparent;
  border-width: 1px;
  border-style: solid;
  border-radius: 416.625rem;
  transform: none;
}
.toggleButton:global(.cobalt):global(.night).underline::after {
  content: "";
}
.toggleButton:global(.cobalt):global(.night).selected::after {
  background-color: transparent;
  border-color: transparent;
}
.toggleButton:global(.cobalt):global(.night):global(.spottable):focus::after {
  background-color: transparent;
  border-color: transparent;
}
.toggleButton:global(.cobalt):global(.night):global(.spottable):focus.selected::after {
  background-color: transparent;
  border-color: transparent;
}
.toggleButton:global(.cobalt):global(.night)[disabled]::after {
  background-color: transparent;
  border-color: transparent;
}
.toggleButton:global(.cobalt):global(.night)[disabled].selected::after {
  background-color: transparent;
  border-color: transparent;
}
.toggleButton:global(.copper)::after {
  top: auto;
  right: 0.875rem;
  bottom: 0.375rem;
  left: 0.875rem;
  position: absolute;
  height: 0.25rem;
  width: auto;
  background-color: transparent;
  border-color: transparent;
  border-width: 1px;
  border-style: solid;
  border-radius: inherit;
  transform: none;
}
.toggleButton:global(.copper).underline::after {
  content: "";
}
.toggleButton:global(.copper).selected::after {
  background-color: transparent;
  border-color: transparent;
}
.toggleButton:global(.copper):global(.spottable):focus::after {
  background-color: transparent;
  border-color: transparent;
}
.toggleButton:global(.copper):global(.spottable):focus.selected::after {
  background-color: transparent;
  border-color: transparent;
}
.toggleButton:global(.copper)[disabled]::after {
  background-color: transparent;
  border-color: transparent;
}
.toggleButton:global(.copper)[disabled].selected::after {
  background-color: transparent;
  border-color: transparent;
}
.toggleButton:global(.copper):global(.night)::after {
  top: auto;
  right: 0.875rem;
  bottom: 0.375rem;
  left: 0.875rem;
  position: absolute;
  height: 0.25rem;
  width: auto;
  background-color: transparent;
  border-color: transparent;
  border-width: 1px;
  border-style: solid;
  border-radius: inherit;
  transform: none;
}
.toggleButton:global(.copper):global(.night).underline::after {
  content: "";
}
.toggleButton:global(.copper):global(.night).selected::after {
  background-color: transparent;
  border-color: transparent;
}
.toggleButton:global(.copper):global(.night):global(.spottable):focus::after {
  background-color: transparent;
  border-color: transparent;
}
.toggleButton:global(.copper):global(.night):global(.spottable):focus.selected::after {
  background-color: transparent;
  border-color: transparent;
}
.toggleButton:global(.copper):global(.night)[disabled]::after {
  background-color: transparent;
  border-color: transparent;
}
.toggleButton:global(.copper):global(.night)[disabled].selected::after {
  background-color: transparent;
  border-color: transparent;
}
.toggleButton:global(.electro)::after {
  top: auto;
  right: 1.375rem;
  bottom: 0.375rem;
  left: 1.375rem;
  position: absolute;
  height: 0.25rem;
  width: auto;
  background-color: rgba(0, 0, 0, 0.3);
  border-color: var(--agate-accent-color, #0359f0);
  border-width: 1px;
  border-style: solid;
  border-radius: 0;
  transform: translateX(-0.25rem) skewX(-20deg);
}
.toggleButton:global(.electro).underline::after {
  content: "";
}
.toggleButton:global(.electro).selected::after {
  background-color: var(--agate-highlight-color, #ff8100);
  border-color: var(--agate-accent-color, #0359f0);
}
.toggleButton:global(.electro):global(.spottable):focus::after {
  background-color: rgba(0, 0, 0, 0.3);
  border-color: hsl( calc( var(--agate-accent-h, 218) - 27), calc( var(--agate-accent-s, 98%) - 1%), calc( var(--agate-accent-l, 48%) + 17%) );
}
.toggleButton:global(.electro):global(.spottable):focus.selected::after {
  background-color: var(--agate-highlight-color, #ff8100);
  border-color: hsl( calc( var(--agate-accent-h, 218) - 27), calc( var(--agate-accent-s, 98%) - 1%), calc( var(--agate-accent-l, 48%) + 17%) );
}
.toggleButton:global(.electro)[disabled]::after {
  background-color: #262626;
  border-color: #4d4d4d;
}
.toggleButton:global(.electro)[disabled].selected::after {
  background-color: #262626;
  border-color: #4d4d4d;
}
.toggleButton:global(.gallium)::after {
  top: auto;
  right: 1.375rem;
  bottom: 0.375rem;
  left: 1.375rem;
  position: absolute;
  height: 0.16667rem;
  width: auto;
  background-color: #000000;
  border-color: transparent;
  border-width: 1px;
  border-style: solid;
  border-radius: 0.25rem;
  transform: none;
}
.toggleButton:global(.gallium).underline::after {
  content: "";
}
.toggleButton:global(.gallium).selected::after {
  background-color: var(--agate-highlight-color, #c6c0fe);
  border-color: var(--agate-accent-color, #8b7efe);
}
.toggleButton:global(.gallium):global(.spottable):focus::after {
  background-color: #000000;
  border-color: #ffffff;
}
.toggleButton:global(.gallium):global(.spottable):focus.selected::after {
  background-color: var(--agate-highlight-color, #c6c0fe);
  border-color: #ffffff;
}
.toggleButton:global(.gallium)[disabled]::after {
  background-color: #373737;
  border-color: #6c6c6c;
}
.toggleButton:global(.gallium)[disabled].selected::after {
  background-color: #373737;
  border-color: #6c6c6c;
}
.toggleButton:global(.gallium):global(.night)::after {
  top: auto;
  right: 1.375rem;
  bottom: 0.375rem;
  left: 1.375rem;
  position: absolute;
  height: 0.16667rem;
  width: auto;
  background-color: #000000;
  border-color: transparent;
  border-width: 1px;
  border-style: solid;
  border-radius: 0.25rem;
  transform: none;
}
.toggleButton:global(.gallium):global(.night).underline::after {
  content: "";
}
.toggleButton:global(.gallium):global(.night).selected::after {
  background-color: var(--agate-highlight-color, #c6c0fe);
  border-color: var(--agate-accent-color, #8b7efe);
}
.toggleButton:global(.gallium):global(.night):global(.spottable):focus::after {
  background-color: #000000;
  border-color: #ffffff;
}
.toggleButton:global(.gallium):global(.night):global(.spottable):focus.selected::after {
  background-color: var(--agate-highlight-color, #c6c0fe);
  border-color: #ffffff;
}
.toggleButton:global(.gallium):global(.night)[disabled]::after {
  background-color: #373737;
  border-color: #6c6c6c;
}
.toggleButton:global(.gallium):global(.night)[disabled].selected::after {
  background-color: #373737;
  border-color: #6c6c6c;
}
.toggleButton:global(.silicon)::after {
  top: 50%;
  right: auto;
  bottom: auto;
  left: auto;
  position: absolute;
  height: 0.625rem;
  width: 0.625rem;
  background-color: #777777;
  border-color: transparent;
  border-width: 0;
  border-style: solid;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.toggleButton:global(.silicon).underline::after {
  content: "";
}
.toggleButton:global(.silicon).selected::after {
  background-color: var(--agate-accent-color, #ff2d55);
  border-color: transparent;
}
.toggleButton:global(.silicon):global(.spottable):focus::after {
  background-color: #777777;
  border-color: transparent;
}
.toggleButton:global(.silicon):global(.spottable):focus.selected::after {
  background-color: var(--agate-accent-color, #ff2d55);
  border-color: transparent;
}
.toggleButton:global(.silicon)[disabled]::after {
  background-color: #777777;
  border-color: transparent;
}
.toggleButton:global(.silicon)[disabled].selected::after {
  background-color: var(--agate-accent-color, #ff2d55);
  border-color: transparent;
}
.toggleButton:global(.silicon):global(.night)::after {
  top: 50%;
  right: auto;
  bottom: auto;
  left: auto;
  position: absolute;
  height: 0.625rem;
  width: 0.625rem;
  background-color: #777777;
  border-color: transparent;
  border-width: 0;
  border-style: solid;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.toggleButton:global(.silicon):global(.night).underline::after {
  content: "";
}
.toggleButton:global(.silicon):global(.night).selected::after {
  background-color: var(--agate-accent-color, #ff2d55);
  border-color: transparent;
}
.toggleButton:global(.silicon):global(.night):global(.spottable):focus::after {
  background-color: #777777;
  border-color: transparent;
}
.toggleButton:global(.silicon):global(.night):global(.spottable):focus.selected::after {
  background-color: var(--agate-accent-color, #ff2d55);
  border-color: transparent;
}
.toggleButton:global(.silicon):global(.night)[disabled]::after {
  background-color: #777777;
  border-color: transparent;
}
.toggleButton:global(.silicon):global(.night)[disabled].selected::after {
  background-color: var(--agate-accent-color, #ff2d55);
  border-color: transparent;
}
.toggleButton:global(.titanium)::after {
  top: auto;
  right: 0.875rem;
  bottom: 0.375rem;
  left: 0.875rem;
  position: absolute;
  height: 0.25rem;
  width: auto;
  background-color: #a6a6a6;
  border-color: transparent;
  border-width: 1px;
  border-style: solid;
  border-radius: 416.625rem;
  transform: none;
}
.toggleButton:global(.titanium).underline::after {
  content: "";
}
.toggleButton:global(.titanium).selected::after {
  background-color: var(--agate-highlight-color, #2a48ca);
  border-color: var(--agate-highlight-color, #2a48ca);
}
.toggleButton:global(.titanium):global(.spottable):focus::after {
  background-color: #a6a6a6;
  border-color: #ededed;
}
.toggleButton:global(.titanium):global(.spottable):focus.selected::after {
  background-color: #fff;
  border-color: #ededed;
}
.toggleButton:global(.titanium)[disabled]::after {
  background-color: #262626;
  border-color: #6c6c6c;
}
.toggleButton:global(.titanium)[disabled].selected::after {
  background-color: #262626;
  border-color: #6c6c6c;
}
.button:global(.carbon) {
  min-width: 3.5rem;
}
.button:global(.carbon) .bg {
  background-color: transparent;
}
.button:global(.carbon) .client {
  color: rgba(255, 255, 255, 0.75);
  padding-left: 1px;
}
.button:global(.carbon).selected .bg {
  background-color: var(--agate-accent-color, #8fd43a);
}
.button:global(.carbon).selected .client {
  color: #262626;
}
.button:global(.carbon).huge {
  min-width: 10.41667rem;
}
.button:global(.carbon).small {
  min-width: 2.5rem;
}
.button:global(.carbon).smallest {
  min-width: 2rem;
}
.button:global(.carbon).iconOnly,
.button:global(.carbon).iconOnly.huge,
.button:global(.carbon).iconOnly.small,
.button:global(.carbon).iconOnly.smallest {
  padding: inherit;
}
.button:global(.cobalt) {
  min-width: 3.5rem;
}
.button:global(.cobalt) .bg {
  background-color: #fff;
}
.button:global(.cobalt) .client {
  color: var(--agate-accent-color, #8c81ff);
  padding-left: 0.125rem;
}
.button:global(.cobalt).selected .bg {
  background-color: var(--agate-accent-color, #8c81ff);
}
.button:global(.cobalt).selected .client {
  color: #fff;
}
.button:global(.cobalt).huge {
  min-width: 10.41667rem;
}
.button:global(.cobalt).small {
  min-width: 2.5rem;
}
.button:global(.cobalt).smallest {
  min-width: 2rem;
}
.button:global(.cobalt).iconOnly,
.button:global(.cobalt).iconOnly.huge,
.button:global(.cobalt).iconOnly.small,
.button:global(.cobalt).iconOnly.smallest {
  padding: inherit;
}
.button:global(.cobalt):global(.night) {
  min-width: 3.5rem;
}
.button:global(.cobalt):global(.night) .bg {
  background-color: #7482bf;
}
.button:global(.cobalt):global(.night) .client {
  color: var(--agate-highlight-color, #fff);
  padding-left: 0.125rem;
}
.button:global(.cobalt):global(.night).selected .bg {
  background-color: var(--agate-accent-color, #fc7982);
}
.button:global(.cobalt):global(.night).selected .client {
  color: var(--agate-highlight-color, #fff);
}
.button:global(.cobalt):global(.night).huge {
  min-width: 10.41667rem;
}
.button:global(.cobalt):global(.night).small {
  min-width: 2.5rem;
}
.button:global(.cobalt):global(.night).smallest {
  min-width: 2rem;
}
.button:global(.cobalt):global(.night).iconOnly,
.button:global(.cobalt):global(.night).iconOnly.huge,
.button:global(.cobalt):global(.night).iconOnly.small,
.button:global(.cobalt):global(.night).iconOnly.smallest {
  padding: inherit;
}
.button:global(.copper) {
  min-width: 3.5rem;
}
.button:global(.copper) .bg {
  background-color: #fff;
}
.button:global(.copper) .client {
  color: #373739;
  padding-left: 0.125rem;
}
.button:global(.copper).selected .bg {
  background-color: var(--agate-accent-color, #a47d66);
}
.button:global(.copper).selected .client {
  color: #fff;
}
.button:global(.copper).huge {
  min-width: 10.41667rem;
}
.button:global(.copper).small {
  min-width: 2.5rem;
}
.button:global(.copper).smallest {
  min-width: 2rem;
}
.button:global(.copper).iconOnly,
.button:global(.copper).iconOnly.huge,
.button:global(.copper).iconOnly.small,
.button:global(.copper).iconOnly.smallest {
  padding: inherit;
}
.button:global(.copper):global(.night) {
  min-width: 3.5rem;
}
.button:global(.copper):global(.night) .bg {
  background-color: #424242;
}
.button:global(.copper):global(.night) .client {
  color: var(--agate-accent-color, #e0b094);
  padding-left: 0.125rem;
}
.button:global(.copper):global(.night).selected .bg {
  background-color: var(--agate-accent-color, #e0b094);
}
.button:global(.copper):global(.night).selected .client {
  color: white;
}
.button:global(.copper):global(.night).huge {
  min-width: 10.41667rem;
}
.button:global(.copper):global(.night).small {
  min-width: 2.5rem;
}
.button:global(.copper):global(.night).smallest {
  min-width: 2rem;
}
.button:global(.copper):global(.night).iconOnly,
.button:global(.copper):global(.night).iconOnly.huge,
.button:global(.copper):global(.night).iconOnly.small,
.button:global(.copper):global(.night).iconOnly.smallest {
  padding: inherit;
}
.button:global(.electro) {
  min-width: 3.5rem;
}
.button:global(.electro) .bg {
  background-color: var(--agate-accent-color, #0359f0);
}
.button:global(.electro) .client {
  color: white;
  padding-left: 0;
}
.button:global(.electro).selected .bg {
  background-color: hsl( calc( var(--agate-accent-h, 218) - 27), calc( var(--agate-accent-s, 98%) - 1%), calc( var(--agate-accent-l, 48%) + 17%) );
}
.button:global(.electro).selected .client {
  color: hsla(var(--agate-accent-h, 0), var(--agate-accent-s, 0), var(--agate-accent-l, 0), 0.8);
}
.button:global(.electro).huge {
  min-width: 10.41667rem;
}
.button:global(.electro).small {
  min-width: 2.5rem;
}
.button:global(.electro).smallest {
  min-width: 2rem;
}
.button:global(.electro).iconOnly,
.button:global(.electro).iconOnly.huge,
.button:global(.electro).iconOnly.small,
.button:global(.electro).iconOnly.smallest {
  padding: inherit;
}
.button:global(.gallium) {
  min-width: 3.5rem;
}
.button:global(.gallium) .bg {
  background-color: #5e5e5e;
}
.button:global(.gallium) .client {
  color: #ffffff;
  padding-left: 0.125rem;
}
.button:global(.gallium).selected .bg {
  background-color: #5e5e5e;
}
.button:global(.gallium).selected .client {
  color: #ffffff;
}
.button:global(.gallium).huge {
  min-width: 10.41667rem;
}
.button:global(.gallium).small {
  min-width: 2rem;
}
.button:global(.gallium).smallest {
  min-width: 1.25rem;
}
.button:global(.gallium).iconOnly,
.button:global(.gallium).iconOnly.huge,
.button:global(.gallium).iconOnly.small,
.button:global(.gallium).iconOnly.smallest {
  padding: inherit;
}
.button:global(.gallium):global(.night) {
  min-width: 3.5rem;
}
.button:global(.gallium):global(.night) .bg {
  background-color: #5e5e5e;
}
.button:global(.gallium):global(.night) .client {
  color: #ffffff;
  padding-left: 0.125rem;
}
.button:global(.gallium):global(.night).selected .bg {
  background-color: #5e5e5e;
}
.button:global(.gallium):global(.night).selected .client {
  color: #ffffff;
}
.button:global(.gallium):global(.night).huge {
  min-width: 10.41667rem;
}
.button:global(.gallium):global(.night).small {
  min-width: 2rem;
}
.button:global(.gallium):global(.night).smallest {
  min-width: 1.25rem;
}
.button:global(.gallium):global(.night).iconOnly,
.button:global(.gallium):global(.night).iconOnly.huge,
.button:global(.gallium):global(.night).iconOnly.small,
.button:global(.gallium):global(.night).iconOnly.smallest {
  padding: inherit;
}
.button:global(.silicon) {
  min-width: 7.5rem;
}
.button:global(.silicon) .bg {
  background-color: #ffffff;
}
.button:global(.silicon) .client {
  color: #000000;
  padding-left: 1rem;
}
.button:global(.silicon).selected .bg {
  background-color: #ffffff;
}
.button:global(.silicon).selected .client {
  color: #000000;
}
.button:global(.silicon).huge {
  min-width: 15rem;
}
.button:global(.silicon).small {
  min-width: 6rem;
}
.button:global(.silicon).smallest {
  min-width: 4.5rem;
}
.button:global(.silicon).iconOnly,
.button:global(.silicon).iconOnly.huge,
.button:global(.silicon).iconOnly.small,
.button:global(.silicon).iconOnly.smallest {
  padding: 0 1.125rem;
}
.button:global(.silicon):global(.night) {
  min-width: 7.5rem;
}
.button:global(.silicon):global(.night) .bg {
  background-color: #eeeeee;
}
.button:global(.silicon):global(.night) .client {
  color: #000000;
  padding-left: 1rem;
}
.button:global(.silicon):global(.night).selected .bg {
  background-color: #eeeeee;
}
.button:global(.silicon):global(.night).selected .client {
  color: #000000;
}
.button:global(.silicon):global(.night).huge {
  min-width: 15rem;
}
.button:global(.silicon):global(.night).small {
  min-width: 6rem;
}
.button:global(.silicon):global(.night).smallest {
  min-width: 4.5rem;
}
.button:global(.silicon):global(.night).iconOnly,
.button:global(.silicon):global(.night).iconOnly.huge,
.button:global(.silicon):global(.night).iconOnly.small,
.button:global(.silicon):global(.night).iconOnly.smallest {
  padding: 0 1.125rem;
}
.button:global(.titanium) {
  min-width: 3.5rem;
}
.button:global(.titanium) .bg {
  background-color: rgba(255, 255, 255, 0.5);
}
.button:global(.titanium) .client {
  color: #4d4d4d;
  padding-left: 0.125rem;
}
.button:global(.titanium).selected .bg {
  background-color: var(--agate-accent-color, rgba(0, 0, 0, 0.1));
}
.button:global(.titanium).selected .client {
  color: #262626;
}
.button:global(.titanium).huge {
  min-width: 10.41667rem;
}
.button:global(.titanium).small {
  min-width: 2.5rem;
}
.button:global(.titanium).smallest {
  min-width: 2rem;
}
.button:global(.titanium).iconOnly,
.button:global(.titanium).iconOnly.huge,
.button:global(.titanium).iconOnly.small,
.button:global(.titanium).iconOnly.smallest {
  padding: inherit;
}
