.switch:global(.carbon) {
  background-color: rgba(255, 255, 255, 0.75);
  border-radius: 0.25rem;
  width: 4rem;
  height: 2rem;
  line-height: 2rem;
  font-family: "Agate Icons";
  position: relative;
  display: inline-block;
  text-align: left;
  cursor: default;
}
.switch:global(.carbon) .icon {
  background-color: transparent;
  color: white;
  visibility: visible;
  left: 0;
  width: 2rem;
  height: inherit;
  font-size: 4rem;
  line-height: inherit;
  margin: 0;
  position: absolute;
}
:global(.enact-locale-right-to-left) .switch:global(.carbon) .icon {
  left: auto;
  right: 0;
}
.switch:global(.carbon).animated {
  transition: background-color 0.2s;
}
.switch:global(.carbon).animated .icon {
  transition: left 0.2s, right 0.2s, color 0.2s;
}
.switch:global(.carbon).selected {
  background-color: var(--agate-accent-color, #8fd43a);
}
.switch:global(.carbon).selected .icon {
  left: 2rem;
  color: white;
}
:global(.spottable):focus .switch:global(.carbon).selected .icon {
  color: white;
}
:global(.enact-locale-right-to-left) .switch:global(.carbon).selected .icon {
  left: auto;
  right: 2rem;
}
:global(.spottable):focus .switch:global(.carbon).selected {
  background-color: var(--agate-accent-color, #8fd43a);
}
.switch:global(.carbon):global(.spottable):focus .switch {
  background-color: rgba(255, 255, 255, 0.75);
}
.switch:global(.carbon):global(.spottable):focus .switch .icon,
.switch:global(.carbon):global(.spottable):focus .switch.selected .icon {
  color: black;
}
.switch:global(.cobalt) {
  background-color: var(--agate-highlight-color, #fff);
  border-radius: 1rem;
  width: 4rem;
  height: 2rem;
  line-height: 2rem;
  font-family: "Agate Icons";
  position: relative;
  display: inline-block;
  text-align: left;
  cursor: default;
}
.switch:global(.cobalt) .icon {
  background-color: transparent;
  color: var(--agate-accent-color, #8c81ff);
  visibility: visible;
  left: 0;
  width: 2rem;
  height: inherit;
  font-size: 4rem;
  line-height: inherit;
  margin: 0;
  position: absolute;
}
:global(.enact-locale-right-to-left) .switch:global(.cobalt) .icon {
  left: auto;
  right: 0;
}
.switch:global(.cobalt).animated {
  transition: background-color 0.2s;
}
.switch:global(.cobalt).animated .icon {
  transition: left 0.2s, right 0.2s, color 0.2s;
}
.switch:global(.cobalt).selected {
  background-color: var(--agate-accent-color, #8c81ff);
}
.switch:global(.cobalt).selected .icon {
  left: 2rem;
  color: var(--agate-highlight-color, #fff);
}
:global(.spottable):focus .switch:global(.cobalt).selected .icon {
  color: var(--agate-highlight-color, #fff);
}
:global(.enact-locale-right-to-left) .switch:global(.cobalt).selected .icon {
  left: auto;
  right: 2rem;
}
:global(.spottable):focus .switch:global(.cobalt).selected {
  background-color: var(--agate-accent-color, #8c81ff);
}
.switch:global(.cobalt):global(.spottable):focus .switch {
  background-color: var(--agate-highlight-color, #fff);
}
.switch:global(.cobalt):global(.spottable):focus .switch .icon,
.switch:global(.cobalt):global(.spottable):focus .switch.selected .icon {
  color: var(--agate-accent-color, #8c81ff);
}
.switch:global(.cobalt):global(.night) {
  background-color: #373739;
  border-radius: 1rem;
  width: 4rem;
  height: 2rem;
  line-height: 2rem;
  font-family: "Agate Icons";
  position: relative;
  display: inline-block;
  text-align: left;
  cursor: default;
}
.switch:global(.cobalt):global(.night) .icon {
  background-color: transparent;
  color: var(--agate-accent-color, #fc7982);
  visibility: visible;
  left: 0;
  width: 2rem;
  height: inherit;
  font-size: 4rem;
  line-height: inherit;
  margin: 0;
  position: absolute;
}
:global(.enact-locale-right-to-left) .switch:global(.cobalt):global(.night) .icon {
  left: auto;
  right: 0;
}
.switch:global(.cobalt):global(.night).animated {
  transition: background-color 0.2s;
}
.switch:global(.cobalt):global(.night).animated .icon {
  transition: left 0.2s, right 0.2s, color 0.2s;
}
.switch:global(.cobalt):global(.night).selected {
  background-color: var(--agate-accent-color, #fc7982);
}
.switch:global(.cobalt):global(.night).selected .icon {
  left: 2rem;
  color: var(--agate-highlight-color, #fff);
}
:global(.spottable):focus .switch:global(.cobalt):global(.night).selected .icon {
  color: var(--agate-highlight-color, #fff);
}
:global(.enact-locale-right-to-left) .switch:global(.cobalt):global(.night).selected .icon {
  left: auto;
  right: 2rem;
}
:global(.spottable):focus .switch:global(.cobalt):global(.night).selected {
  background-color: var(--agate-accent-color, #fc7982);
}
.switch:global(.cobalt):global(.night):global(.spottable):focus .switch {
  background-color: #373739;
}
.switch:global(.cobalt):global(.night):global(.spottable):focus .switch .icon,
.switch:global(.cobalt):global(.night):global(.spottable):focus .switch.selected .icon {
  color: #7482bf;
}
.switch:global(.copper) {
  background-color: var(--agate-highlight-color, #fff);
  border-radius: 1rem;
  width: 4rem;
  height: 2rem;
  line-height: 2rem;
  font-family: "Agate Icons";
  position: relative;
  display: inline-block;
  text-align: left;
  cursor: default;
}
.switch:global(.copper) .icon {
  background-color: transparent;
  color: var(--agate-accent-color, #a47d66);
  visibility: visible;
  left: 0;
  width: 2rem;
  height: inherit;
  font-size: 4rem;
  line-height: inherit;
  margin: 0;
  position: absolute;
}
:global(.enact-locale-right-to-left) .switch:global(.copper) .icon {
  left: auto;
  right: 0;
}
.switch:global(.copper).animated {
  transition: background-color 0.2s;
}
.switch:global(.copper).animated .icon {
  transition: left 0.2s, right 0.2s, color 0.2s;
}
.switch:global(.copper).selected {
  background-color: var(--agate-accent-color, #a47d66);
}
.switch:global(.copper).selected .icon {
  left: 2rem;
  color: var(--agate-highlight-color, #fff);
}
:global(.spottable):focus .switch:global(.copper).selected .icon {
  color: var(--agate-highlight-color, #fff);
}
:global(.enact-locale-right-to-left) .switch:global(.copper).selected .icon {
  left: auto;
  right: 2rem;
}
:global(.spottable):focus .switch:global(.copper).selected {
  background-color: var(--agate-accent-color, #a47d66);
}
.switch:global(.copper):global(.spottable):focus .switch {
  background-color: var(--agate-highlight-color, #fff);
}
.switch:global(.copper):global(.spottable):focus .switch .icon,
.switch:global(.copper):global(.spottable):focus .switch.selected .icon {
  color: #373739;
}
.switch:global(.copper):global(.night) {
  background-color: #373739;
  border-radius: 1rem;
  width: 4rem;
  height: 2rem;
  line-height: 2rem;
  font-family: "Agate Icons";
  position: relative;
  display: inline-block;
  text-align: left;
  cursor: default;
}
.switch:global(.copper):global(.night) .icon {
  background-color: transparent;
  color: var(--agate-accent-color, #e0b094);
  visibility: visible;
  left: 0;
  width: 2rem;
  height: inherit;
  font-size: 4rem;
  line-height: inherit;
  margin: 0;
  position: absolute;
}
:global(.enact-locale-right-to-left) .switch:global(.copper):global(.night) .icon {
  left: auto;
  right: 0;
}
.switch:global(.copper):global(.night).animated {
  transition: background-color 0.2s;
}
.switch:global(.copper):global(.night).animated .icon {
  transition: left 0.2s, right 0.2s, color 0.2s;
}
.switch:global(.copper):global(.night).selected {
  background-color: var(--agate-accent-color, #e0b094);
}
.switch:global(.copper):global(.night).selected .icon {
  left: 2rem;
  color: var(--agate-highlight-color, #fff);
}
:global(.spottable):focus .switch:global(.copper):global(.night).selected .icon {
  color: var(--agate-highlight-color, #fff);
}
:global(.enact-locale-right-to-left) .switch:global(.copper):global(.night).selected .icon {
  left: auto;
  right: 2rem;
}
:global(.spottable):focus .switch:global(.copper):global(.night).selected {
  background-color: var(--agate-accent-color, #e0b094);
}
.switch:global(.copper):global(.night):global(.spottable):focus .switch {
  background-color: #373739;
}
.switch:global(.copper):global(.night):global(.spottable):focus .switch .icon,
.switch:global(.copper):global(.night):global(.spottable):focus .switch.selected .icon {
  color: var(--agate-accent-color, #e0b094);
}
.switch:global(.electro) {
  background-color: hsla(var(--agate-accent-h, 0), var(--agate-accent-s, 0), var(--agate-accent-l, 0), 0.8);
  border-radius: 1rem;
  width: 4rem;
  height: 2rem;
  line-height: 2rem;
  font-family: "Agate Icons";
  position: relative;
  display: inline-block;
  text-align: left;
  cursor: default;
}
.switch:global(.electro) .icon {
  background-color: transparent;
  color: white;
  visibility: visible;
  left: -0.375rem;
  width: 2rem;
  height: inherit;
  font-size: 5.6rem;
  line-height: inherit;
  margin: 0;
  position: absolute;
}
:global(.enact-locale-right-to-left) .switch:global(.electro) .icon {
  left: auto;
  right: -0.375rem;
}
.switch:global(.electro).animated {
  transition: background-color 0.2s;
}
.switch:global(.electro).animated .icon {
  transition: left 0.2s, right 0.2s, color 0.2s;
}
.switch:global(.electro).selected {
  background-color: var(--agate-highlight-color, #ff8100);
}
.switch:global(.electro).selected .icon {
  left: 1.625rem;
  color: white;
}
:global(.spottable):focus .switch:global(.electro).selected .icon {
  color: white;
}
:global(.enact-locale-right-to-left) .switch:global(.electro).selected .icon {
  left: auto;
  right: 1.625rem;
}
:global(.spottable):focus .switch:global(.electro).selected {
  background-color: var(--agate-highlight-color, #ff8100);
}
.switch:global(.electro):global(.spottable):focus .switch {
  background-color: hsla(var(--agate-accent-h, 0), var(--agate-accent-s, 0), var(--agate-accent-l, 0), 0.8);
}
.switch:global(.electro):global(.spottable):focus .switch .icon,
.switch:global(.electro):global(.spottable):focus .switch.selected .icon {
  color: white;
}
.switch:global(.gallium) {
  background-color: #373737;
  border-radius: 41.625rem;
  width: 2.83333rem;
  height: 1.66667rem;
  line-height: 1.66667rem;
  font-family: "Agate Icons";
  position: relative;
  display: inline-block;
  text-align: left;
  cursor: default;
}
.switch:global(.gallium) .icon {
  background-color: transparent;
  color: #5e5e5e;
  visibility: visible;
  left: -0.375rem;
  width: 1.66667rem;
  height: inherit;
  font-size: 5rem;
  line-height: inherit;
  margin: 0;
  position: absolute;
}
:global(.enact-locale-right-to-left) .switch:global(.gallium) .icon {
  left: auto;
  right: -0.375rem;
}
.switch:global(.gallium).animated {
  transition: background-color 0.2s;
}
.switch:global(.gallium).animated .icon {
  transition: left 0.2s, right 0.2s, color 0.2s;
}
.switch:global(.gallium).selected {
  background-color: var(--agate-accent-color, #8b7efe);
}
.switch:global(.gallium).selected .icon {
  left: 0.79167rem;
  color: #000000;
}
:global(.spottable):focus .switch:global(.gallium).selected .icon {
  color: #000000;
}
:global(.enact-locale-right-to-left) .switch:global(.gallium).selected .icon {
  left: auto;
  right: 0.79167rem;
}
:global(.spottable):focus .switch:global(.gallium).selected {
  background-color: var(--agate-accent-color, #8b7efe);
}
.switch:global(.gallium):global(.spottable):focus .switch {
  background-color: #000000;
}
.switch:global(.gallium):global(.spottable):focus .switch .icon,
.switch:global(.gallium):global(.spottable):focus .switch.selected .icon {
  color: var(--agate-accent-color, #8b7efe);
}
.switch:global(.gallium):global(.night) {
  background-color: #373737;
  border-radius: 41.625rem;
  width: 2.83333rem;
  height: 1.66667rem;
  line-height: 1.66667rem;
  font-family: "Agate Icons";
  position: relative;
  display: inline-block;
  text-align: left;
  cursor: default;
}
.switch:global(.gallium):global(.night) .icon {
  background-color: transparent;
  color: #5e5e5e;
  visibility: visible;
  left: -0.375rem;
  width: 1.66667rem;
  height: inherit;
  font-size: 5rem;
  line-height: inherit;
  margin: 0;
  position: absolute;
}
:global(.enact-locale-right-to-left) .switch:global(.gallium):global(.night) .icon {
  left: auto;
  right: -0.375rem;
}
.switch:global(.gallium):global(.night).animated {
  transition: background-color 0.2s;
}
.switch:global(.gallium):global(.night).animated .icon {
  transition: left 0.2s, right 0.2s, color 0.2s;
}
.switch:global(.gallium):global(.night).selected {
  background-color: var(--agate-accent-color, #8b7efe);
}
.switch:global(.gallium):global(.night).selected .icon {
  left: 0.79167rem;
  color: #ffffff;
}
:global(.spottable):focus .switch:global(.gallium):global(.night).selected .icon {
  color: #ffffff;
}
:global(.enact-locale-right-to-left) .switch:global(.gallium):global(.night).selected .icon {
  left: auto;
  right: 0.79167rem;
}
:global(.spottable):focus .switch:global(.gallium):global(.night).selected {
  background-color: var(--agate-accent-color, #8b7efe);
}
.switch:global(.gallium):global(.night):global(.spottable):focus .switch {
  background-color: #ffffff;
}
.switch:global(.gallium):global(.night):global(.spottable):focus .switch .icon,
.switch:global(.gallium):global(.night):global(.spottable):focus .switch.selected .icon {
  color: var(--agate-accent-color, #8b7efe);
}
.switch:global(.silicon) {
  background-color: #1b1f35;
  border-radius: 41.625rem;
  width: 2.83333rem;
  height: 1.66667rem;
  line-height: 1.66667rem;
  font-family: "Silicon Icons";
  position: relative;
  display: inline-block;
  text-align: left;
  cursor: default;
}
.switch:global(.silicon) .icon {
  background-color: transparent;
  color: #2a2742;
  visibility: visible;
  left: -0.375rem;
  width: 1.66667rem;
  height: inherit;
  font-size: 5rem;
  line-height: inherit;
  margin: 0;
  position: absolute;
}
:global(.enact-locale-right-to-left) .switch:global(.silicon) .icon {
  left: auto;
  right: -0.375rem;
}
.switch:global(.silicon).animated {
  transition: background-color 0.2s;
}
.switch:global(.silicon).animated .icon {
  transition: left 0.2s, right 0.2s, color 0.2s;
}
.switch:global(.silicon).selected {
  background-color: var(--agate-accent-color, #ff2d55);
}
.switch:global(.silicon).selected .icon {
  left: 0.79167rem;
  color: #000000;
}
:global(.spottable):focus .switch:global(.silicon).selected .icon {
  color: #000000;
}
:global(.enact-locale-right-to-left) .switch:global(.silicon).selected .icon {
  left: auto;
  right: 0.79167rem;
}
:global(.spottable):focus .switch:global(.silicon).selected {
  background-color: var(--agate-accent-color, #ff2d55);
}
.switch:global(.silicon):global(.spottable):focus .switch {
  background-color: #000000;
}
.switch:global(.silicon):global(.spottable):focus .switch .icon,
.switch:global(.silicon):global(.spottable):focus .switch.selected .icon {
  color: var(--agate-accent-color, #ff2d55);
}
.switch:global(.silicon):global(.night) {
  background-color: #1b1f35;
  border-radius: 41.625rem;
  width: 2.83333rem;
  height: 1.66667rem;
  line-height: 1.66667rem;
  font-family: "Silicon Icons";
  position: relative;
  display: inline-block;
  text-align: left;
  cursor: default;
}
.switch:global(.silicon):global(.night) .icon {
  background-color: transparent;
  color: #2a2742;
  visibility: visible;
  left: -0.375rem;
  width: 1.66667rem;
  height: inherit;
  font-size: 5rem;
  line-height: inherit;
  margin: 0;
  position: absolute;
}
:global(.enact-locale-right-to-left) .switch:global(.silicon):global(.night) .icon {
  left: auto;
  right: -0.375rem;
}
.switch:global(.silicon):global(.night).animated {
  transition: background-color 0.2s;
}
.switch:global(.silicon):global(.night).animated .icon {
  transition: left 0.2s, right 0.2s, color 0.2s;
}
.switch:global(.silicon):global(.night).selected {
  background-color: var(--agate-accent-color, #ff2d55);
}
.switch:global(.silicon):global(.night).selected .icon {
  left: 0.79167rem;
  color: #ffffff;
}
:global(.spottable):focus .switch:global(.silicon):global(.night).selected .icon {
  color: #ffffff;
}
:global(.enact-locale-right-to-left) .switch:global(.silicon):global(.night).selected .icon {
  left: auto;
  right: 0.79167rem;
}
:global(.spottable):focus .switch:global(.silicon):global(.night).selected {
  background-color: var(--agate-accent-color, #ff2d55);
}
.switch:global(.silicon):global(.night):global(.spottable):focus .switch {
  background-color: #ffffff;
}
.switch:global(.silicon):global(.night):global(.spottable):focus .switch .icon,
.switch:global(.silicon):global(.night):global(.spottable):focus .switch.selected .icon {
  color: var(--agate-accent-color, #ff2d55);
}
.switch:global(.titanium) {
  background-color: #4d4d4d;
  border-radius: 1rem;
  width: 4rem;
  height: 2rem;
  line-height: 2rem;
  font-family: "Agate Icons";
  position: relative;
  display: inline-block;
  text-align: left;
  cursor: default;
}
.switch:global(.titanium) .icon {
  background-color: transparent;
  color: white;
  visibility: visible;
  left: -0.375rem;
  width: 2rem;
  height: inherit;
  font-size: 5.6rem;
  line-height: inherit;
  margin: 0;
  position: absolute;
}
:global(.enact-locale-right-to-left) .switch:global(.titanium) .icon {
  left: auto;
  right: -0.375rem;
}
.switch:global(.titanium).animated {
  transition: background-color 0.2s;
}
.switch:global(.titanium).animated .icon {
  transition: left 0.2s, right 0.2s, color 0.2s;
}
.switch:global(.titanium).selected {
  background-color: var(--agate-accent-color, rgba(0, 0, 0, 0.1));
}
.switch:global(.titanium).selected .icon {
  left: 1.625rem;
  color: white;
}
:global(.spottable):focus .switch:global(.titanium).selected .icon {
  color: white;
}
:global(.enact-locale-right-to-left) .switch:global(.titanium).selected .icon {
  left: auto;
  right: 1.625rem;
}
:global(.spottable):focus .switch:global(.titanium).selected {
  background-color: var(--agate-accent-color, rgba(0, 0, 0, 0.1));
}
.switch:global(.titanium):global(.spottable):focus .switch {
  background-color: #4d4d4d;
}
.switch:global(.titanium):global(.spottable):focus .switch .icon,
.switch:global(.titanium):global(.spottable):focus .switch.selected .icon {
  color: #4d4d4d;
}
