/*
 * Provide the height of the sprite and an index value of how far to vertically offset this sprite
 * 0 for the first position (top), 1 below that, 2 below 1, etc.
 * This way, selected/focused states can refer to other sprite indexes easily.
 * 0 for normal/resting
 * 1 for focused
 */
.icon {
  --agate-icon-sprite-count: 1;
}
.icon:global(.carbon) {
  width: 2rem;
  height: 2rem;
  background-position: center calc((var(--agate-icon-sprite-count, 1) - 1) * 2rem * -0);
  background-size: 2rem calc(var(--agate-icon-sprite-count, 1) * 2rem);
  background-repeat: no-repeat;
  margin: 0.5rem;
  font-family: "Agate Icons";
  font-size: 4rem;
  line-height: 2rem;
  text-align: center;
  position: relative;
  color: inherit;
  letter-spacing: inherit;
  text-indent: initial;
}
.icon:global(.carbon).huge {
  background-position: center calc((var(--agate-icon-sprite-count, 1) - 1) * 7.91667rem * -0);
  background-size: 7.91667rem calc(var(--agate-icon-sprite-count, 1) * 7.91667rem);
  width: 7.91667rem;
  height: 7.91667rem;
  font-size: 13.33333rem;
  line-height: 7.91667rem;
}
.icon:global(.carbon).small {
  background-position: center calc((var(--agate-icon-sprite-count, 1) - 1) * 1.5rem * -0);
  background-size: 1.5rem calc(var(--agate-icon-sprite-count, 1) * 1.5rem);
  width: 1.5rem;
  height: 1.5rem;
  font-size: 3rem;
  line-height: 1.5rem;
}
.icon:global(.carbon).smallest {
  background-position: center calc((var(--agate-icon-sprite-count, 1) - 1) * 0.875rem * -0);
  background-size: 0.875rem calc(var(--agate-icon-sprite-count, 1) * 0.875rem);
  width: 0.875rem;
  height: 0.875rem;
  font-size: 1.75rem;
  line-height: 0.875rem;
}
.icon:global(.carbon).dingbat {
  font-family: "LG Display_Dingbat";
  font-size: 2rem;
  line-height: 1.66667rem;
}
.icon:global(.carbon).dingbat.small {
  font-size: 1.5rem;
  line-height: 1.33333rem;
}
.icon:global(.carbon):global(.spottable):focus {
  background-position: center calc((var(--agate-icon-sprite-count, 1) - 1) * 2rem * -1);
}
.icon:global(.carbon):global(.spottable):focus.huge {
  background-position: center calc((var(--agate-icon-sprite-count, 1) - 1) * 7.91667rem * -1);
}
.icon:global(.carbon):global(.spottable):focus.small {
  background-position: center calc((var(--agate-icon-sprite-count, 1) - 1) * 1.5rem * -1);
}
.icon:global(.carbon):global(.spottable):focus.smallest {
  background-position: center calc((var(--agate-icon-sprite-count, 1) - 1) * 0.875rem * -1);
}
.icon:global(.cobalt) {
  width: 2rem;
  height: 2rem;
  background-position: center calc((var(--agate-icon-sprite-count, 1) - 1) * 2rem * -0);
  background-size: 2rem calc(var(--agate-icon-sprite-count, 1) * 2rem);
  background-repeat: no-repeat;
  margin: 0.5rem;
  font-family: "Agate Icons";
  font-size: 4rem;
  line-height: 2rem;
  text-align: center;
  position: relative;
  color: inherit;
  letter-spacing: inherit;
  text-indent: initial;
}
.icon:global(.cobalt).huge {
  background-position: center calc((var(--agate-icon-sprite-count, 1) - 1) * 7.91667rem * -0);
  background-size: 7.91667rem calc(var(--agate-icon-sprite-count, 1) * 7.91667rem);
  width: 7.91667rem;
  height: 7.91667rem;
  font-size: 13.33333rem;
  line-height: 7.91667rem;
}
.icon:global(.cobalt).small {
  background-position: center calc((var(--agate-icon-sprite-count, 1) - 1) * 1.5rem * -0);
  background-size: 1.5rem calc(var(--agate-icon-sprite-count, 1) * 1.5rem);
  width: 1.5rem;
  height: 1.5rem;
  font-size: 3rem;
  line-height: 1.5rem;
}
.icon:global(.cobalt).smallest {
  background-position: center calc((var(--agate-icon-sprite-count, 1) - 1) * 0.875rem * -0);
  background-size: 0.875rem calc(var(--agate-icon-sprite-count, 1) * 0.875rem);
  width: 0.875rem;
  height: 0.875rem;
  font-size: 1.75rem;
  line-height: 0.875rem;
}
.icon:global(.cobalt).dingbat {
  font-family: "LG Display_Dingbat";
  font-size: 2rem;
  line-height: 1.66667rem;
}
.icon:global(.cobalt).dingbat.small {
  font-size: 1.5rem;
  line-height: 1.33333rem;
}
.icon:global(.cobalt):global(.spottable):focus {
  background-position: center calc((var(--agate-icon-sprite-count, 1) - 1) * 2rem * -1);
}
.icon:global(.cobalt):global(.spottable):focus.huge {
  background-position: center calc((var(--agate-icon-sprite-count, 1) - 1) * 7.91667rem * -1);
}
.icon:global(.cobalt):global(.spottable):focus.small {
  background-position: center calc((var(--agate-icon-sprite-count, 1) - 1) * 1.5rem * -1);
}
.icon:global(.cobalt):global(.spottable):focus.smallest {
  background-position: center calc((var(--agate-icon-sprite-count, 1) - 1) * 0.875rem * -1);
}
.icon:global(.cobalt):global(.night) {
  width: 2rem;
  height: 2rem;
  background-position: center calc((var(--agate-icon-sprite-count, 1) - 1) * 2rem * -0);
  background-size: 2rem calc(var(--agate-icon-sprite-count, 1) * 2rem);
  background-repeat: no-repeat;
  margin: 0.5rem;
  font-family: "Agate Icons";
  font-size: 4rem;
  line-height: 2rem;
  text-align: center;
  position: relative;
  color: inherit;
  letter-spacing: inherit;
  text-indent: initial;
}
.icon:global(.cobalt):global(.night).huge {
  background-position: center calc((var(--agate-icon-sprite-count, 1) - 1) * 7.91667rem * -0);
  background-size: 7.91667rem calc(var(--agate-icon-sprite-count, 1) * 7.91667rem);
  width: 7.91667rem;
  height: 7.91667rem;
  font-size: 13.33333rem;
  line-height: 7.91667rem;
}
.icon:global(.cobalt):global(.night).small {
  background-position: center calc((var(--agate-icon-sprite-count, 1) - 1) * 1.5rem * -0);
  background-size: 1.5rem calc(var(--agate-icon-sprite-count, 1) * 1.5rem);
  width: 1.5rem;
  height: 1.5rem;
  font-size: 3rem;
  line-height: 1.5rem;
}
.icon:global(.cobalt):global(.night).smallest {
  background-position: center calc((var(--agate-icon-sprite-count, 1) - 1) * 0.875rem * -0);
  background-size: 0.875rem calc(var(--agate-icon-sprite-count, 1) * 0.875rem);
  width: 0.875rem;
  height: 0.875rem;
  font-size: 1.75rem;
  line-height: 0.875rem;
}
.icon:global(.cobalt):global(.night).dingbat {
  font-family: "LG Display_Dingbat";
  font-size: 2rem;
  line-height: 1.66667rem;
}
.icon:global(.cobalt):global(.night).dingbat.small {
  font-size: 1.5rem;
  line-height: 1.33333rem;
}
.icon:global(.cobalt):global(.night):global(.spottable):focus {
  background-position: center calc((var(--agate-icon-sprite-count, 1) - 1) * 2rem * -1);
}
.icon:global(.cobalt):global(.night):global(.spottable):focus.huge {
  background-position: center calc((var(--agate-icon-sprite-count, 1) - 1) * 7.91667rem * -1);
}
.icon:global(.cobalt):global(.night):global(.spottable):focus.small {
  background-position: center calc((var(--agate-icon-sprite-count, 1) - 1) * 1.5rem * -1);
}
.icon:global(.cobalt):global(.night):global(.spottable):focus.smallest {
  background-position: center calc((var(--agate-icon-sprite-count, 1) - 1) * 0.875rem * -1);
}
.icon:global(.copper) {
  width: 2rem;
  height: 2rem;
  background-position: center calc((var(--agate-icon-sprite-count, 1) - 1) * 2rem * -0);
  background-size: 2rem calc(var(--agate-icon-sprite-count, 1) * 2rem);
  background-repeat: no-repeat;
  margin: 0.5rem;
  font-family: "Agate Icons";
  font-size: 4rem;
  line-height: 2rem;
  text-align: center;
  position: relative;
  color: inherit;
  letter-spacing: inherit;
  text-indent: initial;
}
.icon:global(.copper).huge {
  background-position: center calc((var(--agate-icon-sprite-count, 1) - 1) * 7.91667rem * -0);
  background-size: 7.91667rem calc(var(--agate-icon-sprite-count, 1) * 7.91667rem);
  width: 7.91667rem;
  height: 7.91667rem;
  font-size: 13.33333rem;
  line-height: 7.91667rem;
}
.icon:global(.copper).small {
  background-position: center calc((var(--agate-icon-sprite-count, 1) - 1) * 1.5rem * -0);
  background-size: 1.5rem calc(var(--agate-icon-sprite-count, 1) * 1.5rem);
  width: 1.5rem;
  height: 1.5rem;
  font-size: 3rem;
  line-height: 1.5rem;
}
.icon:global(.copper).smallest {
  background-position: center calc((var(--agate-icon-sprite-count, 1) - 1) * 0.875rem * -0);
  background-size: 0.875rem calc(var(--agate-icon-sprite-count, 1) * 0.875rem);
  width: 0.875rem;
  height: 0.875rem;
  font-size: 1.75rem;
  line-height: 0.875rem;
}
.icon:global(.copper).dingbat {
  font-family: "LG Display_Dingbat";
  font-size: 2rem;
  line-height: 1.66667rem;
}
.icon:global(.copper).dingbat.small {
  font-size: 1.5rem;
  line-height: 1.33333rem;
}
.icon:global(.copper):global(.spottable):focus {
  background-position: center calc((var(--agate-icon-sprite-count, 1) - 1) * 2rem * -1);
}
.icon:global(.copper):global(.spottable):focus.huge {
  background-position: center calc((var(--agate-icon-sprite-count, 1) - 1) * 7.91667rem * -1);
}
.icon:global(.copper):global(.spottable):focus.small {
  background-position: center calc((var(--agate-icon-sprite-count, 1) - 1) * 1.5rem * -1);
}
.icon:global(.copper):global(.spottable):focus.smallest {
  background-position: center calc((var(--agate-icon-sprite-count, 1) - 1) * 0.875rem * -1);
}
.icon:global(.copper):global(.night) {
  width: 2rem;
  height: 2rem;
  background-position: center calc((var(--agate-icon-sprite-count, 1) - 1) * 2rem * -0);
  background-size: 2rem calc(var(--agate-icon-sprite-count, 1) * 2rem);
  background-repeat: no-repeat;
  margin: 0.5rem;
  font-family: "Agate Icons";
  font-size: 4rem;
  line-height: 2rem;
  text-align: center;
  position: relative;
  color: inherit;
  letter-spacing: inherit;
  text-indent: initial;
}
.icon:global(.copper):global(.night).huge {
  background-position: center calc((var(--agate-icon-sprite-count, 1) - 1) * 7.91667rem * -0);
  background-size: 7.91667rem calc(var(--agate-icon-sprite-count, 1) * 7.91667rem);
  width: 7.91667rem;
  height: 7.91667rem;
  font-size: 13.33333rem;
  line-height: 7.91667rem;
}
.icon:global(.copper):global(.night).small {
  background-position: center calc((var(--agate-icon-sprite-count, 1) - 1) * 1.5rem * -0);
  background-size: 1.5rem calc(var(--agate-icon-sprite-count, 1) * 1.5rem);
  width: 1.5rem;
  height: 1.5rem;
  font-size: 3rem;
  line-height: 1.5rem;
}
.icon:global(.copper):global(.night).smallest {
  background-position: center calc((var(--agate-icon-sprite-count, 1) - 1) * 0.875rem * -0);
  background-size: 0.875rem calc(var(--agate-icon-sprite-count, 1) * 0.875rem);
  width: 0.875rem;
  height: 0.875rem;
  font-size: 1.75rem;
  line-height: 0.875rem;
}
.icon:global(.copper):global(.night).dingbat {
  font-family: "LG Display_Dingbat";
  font-size: 2rem;
  line-height: 1.66667rem;
}
.icon:global(.copper):global(.night).dingbat.small {
  font-size: 1.5rem;
  line-height: 1.33333rem;
}
.icon:global(.copper):global(.night):global(.spottable):focus {
  background-position: center calc((var(--agate-icon-sprite-count, 1) - 1) * 2rem * -1);
}
.icon:global(.copper):global(.night):global(.spottable):focus.huge {
  background-position: center calc((var(--agate-icon-sprite-count, 1) - 1) * 7.91667rem * -1);
}
.icon:global(.copper):global(.night):global(.spottable):focus.small {
  background-position: center calc((var(--agate-icon-sprite-count, 1) - 1) * 1.5rem * -1);
}
.icon:global(.copper):global(.night):global(.spottable):focus.smallest {
  background-position: center calc((var(--agate-icon-sprite-count, 1) - 1) * 0.875rem * -1);
}
.icon:global(.electro) {
  width: 2rem;
  height: 2rem;
  background-position: center calc((var(--agate-icon-sprite-count, 1) - 1) * 2rem * -0);
  background-size: 2rem calc(var(--agate-icon-sprite-count, 1) * 2rem);
  background-repeat: no-repeat;
  margin: 0.5rem;
  font-family: "Agate Icons";
  font-size: 4rem;
  line-height: 2rem;
  text-align: center;
  position: relative;
  color: inherit;
  letter-spacing: inherit;
  text-indent: initial;
}
.icon:global(.electro).huge {
  background-position: center calc((var(--agate-icon-sprite-count, 1) - 1) * 7.91667rem * -0);
  background-size: 7.91667rem calc(var(--agate-icon-sprite-count, 1) * 7.91667rem);
  width: 7.91667rem;
  height: 7.91667rem;
  font-size: 13.33333rem;
  line-height: 7.91667rem;
}
.icon:global(.electro).small {
  background-position: center calc((var(--agate-icon-sprite-count, 1) - 1) * 1.5rem * -0);
  background-size: 1.5rem calc(var(--agate-icon-sprite-count, 1) * 1.5rem);
  width: 1.5rem;
  height: 1.5rem;
  font-size: 3rem;
  line-height: 1.5rem;
}
.icon:global(.electro).smallest {
  background-position: center calc((var(--agate-icon-sprite-count, 1) - 1) * 0.875rem * -0);
  background-size: 0.875rem calc(var(--agate-icon-sprite-count, 1) * 0.875rem);
  width: 0.875rem;
  height: 0.875rem;
  font-size: 1.75rem;
  line-height: 0.875rem;
}
.icon:global(.electro).dingbat {
  font-family: "LG Display_Dingbat";
  font-size: 2rem;
  line-height: 1.66667rem;
}
.icon:global(.electro).dingbat.small {
  font-size: 1.5rem;
  line-height: 1.33333rem;
}
.icon:global(.electro):global(.spottable):focus {
  background-position: center calc((var(--agate-icon-sprite-count, 1) - 1) * 2rem * -1);
}
.icon:global(.electro):global(.spottable):focus.huge {
  background-position: center calc((var(--agate-icon-sprite-count, 1) - 1) * 7.91667rem * -1);
}
.icon:global(.electro):global(.spottable):focus.small {
  background-position: center calc((var(--agate-icon-sprite-count, 1) - 1) * 1.5rem * -1);
}
.icon:global(.electro):global(.spottable):focus.smallest {
  background-position: center calc((var(--agate-icon-sprite-count, 1) - 1) * 0.875rem * -1);
}
.icon:global(.gallium) {
  width: 2rem;
  height: 2rem;
  background-position: center calc((var(--agate-icon-sprite-count, 1) - 1) * 2rem * -0);
  background-size: 2rem calc(var(--agate-icon-sprite-count, 1) * 2rem);
  background-repeat: no-repeat;
  margin: 0.5rem;
  font-family: "Agate Icons";
  font-size: 4rem;
  line-height: 2rem;
  text-align: center;
  position: relative;
  color: inherit;
  letter-spacing: inherit;
  text-indent: initial;
}
.icon:global(.gallium).huge {
  background-position: center calc((var(--agate-icon-sprite-count, 1) - 1) * 7.91667rem * -0);
  background-size: 7.91667rem calc(var(--agate-icon-sprite-count, 1) * 7.91667rem);
  width: 7.91667rem;
  height: 7.91667rem;
  font-size: 13.33333rem;
  line-height: 7.91667rem;
}
.icon:global(.gallium).small {
  background-position: center calc((var(--agate-icon-sprite-count, 1) - 1) * 1.16667rem * -0);
  background-size: 1.16667rem calc(var(--agate-icon-sprite-count, 1) * 1.16667rem);
  width: 1.16667rem;
  height: 1.16667rem;
  font-size: 2.33333rem;
  line-height: 1.16667rem;
}
.icon:global(.gallium).smallest {
  background-position: center calc((var(--agate-icon-sprite-count, 1) - 1) * 0.75rem * -0);
  background-size: 0.75rem calc(var(--agate-icon-sprite-count, 1) * 0.75rem);
  width: 0.75rem;
  height: 0.75rem;
  font-size: 1.5rem;
  line-height: 0.75rem;
}
.icon:global(.gallium).dingbat {
  font-family: "LG Display_Dingbat";
  font-size: 2rem;
  line-height: 1.66667rem;
}
.icon:global(.gallium).dingbat.small {
  font-size: 1.16667rem;
  line-height: 1rem;
}
.icon:global(.gallium):global(.spottable):focus {
  background-position: center calc((var(--agate-icon-sprite-count, 1) - 1) * 2rem * -1);
}
.icon:global(.gallium):global(.spottable):focus.huge {
  background-position: center calc((var(--agate-icon-sprite-count, 1) - 1) * 7.91667rem * -1);
}
.icon:global(.gallium):global(.spottable):focus.small {
  background-position: center calc((var(--agate-icon-sprite-count, 1) - 1) * 1.16667rem * -1);
}
.icon:global(.gallium):global(.spottable):focus.smallest {
  background-position: center calc((var(--agate-icon-sprite-count, 1) - 1) * 0.75rem * -1);
}
.icon:global(.gallium):global(.night) {
  width: 2rem;
  height: 2rem;
  background-position: center calc((var(--agate-icon-sprite-count, 1) - 1) * 2rem * -0);
  background-size: 2rem calc(var(--agate-icon-sprite-count, 1) * 2rem);
  background-repeat: no-repeat;
  margin: 0.5rem;
  font-family: "Agate Icons";
  font-size: 4rem;
  line-height: 2rem;
  text-align: center;
  position: relative;
  color: inherit;
  letter-spacing: inherit;
  text-indent: initial;
}
.icon:global(.gallium):global(.night).huge {
  background-position: center calc((var(--agate-icon-sprite-count, 1) - 1) * 7.91667rem * -0);
  background-size: 7.91667rem calc(var(--agate-icon-sprite-count, 1) * 7.91667rem);
  width: 7.91667rem;
  height: 7.91667rem;
  font-size: 13.33333rem;
  line-height: 7.91667rem;
}
.icon:global(.gallium):global(.night).small {
  background-position: center calc((var(--agate-icon-sprite-count, 1) - 1) * 1.16667rem * -0);
  background-size: 1.16667rem calc(var(--agate-icon-sprite-count, 1) * 1.16667rem);
  width: 1.16667rem;
  height: 1.16667rem;
  font-size: 2.33333rem;
  line-height: 1.16667rem;
}
.icon:global(.gallium):global(.night).smallest {
  background-position: center calc((var(--agate-icon-sprite-count, 1) - 1) * 0.75rem * -0);
  background-size: 0.75rem calc(var(--agate-icon-sprite-count, 1) * 0.75rem);
  width: 0.75rem;
  height: 0.75rem;
  font-size: 1.5rem;
  line-height: 0.75rem;
}
.icon:global(.gallium):global(.night).dingbat {
  font-family: "LG Display_Dingbat";
  font-size: 2rem;
  line-height: 1.66667rem;
}
.icon:global(.gallium):global(.night).dingbat.small {
  font-size: 1.16667rem;
  line-height: 1rem;
}
.icon:global(.gallium):global(.night):global(.spottable):focus {
  background-position: center calc((var(--agate-icon-sprite-count, 1) - 1) * 2rem * -1);
}
.icon:global(.gallium):global(.night):global(.spottable):focus.huge {
  background-position: center calc((var(--agate-icon-sprite-count, 1) - 1) * 7.91667rem * -1);
}
.icon:global(.gallium):global(.night):global(.spottable):focus.small {
  background-position: center calc((var(--agate-icon-sprite-count, 1) - 1) * 1.16667rem * -1);
}
.icon:global(.gallium):global(.night):global(.spottable):focus.smallest {
  background-position: center calc((var(--agate-icon-sprite-count, 1) - 1) * 0.75rem * -1);
}
.icon:global(.silicon) {
  width: 2rem;
  height: 2rem;
  background-position: center calc((var(--agate-icon-sprite-count, 1) - 1) * 2rem * -0);
  background-size: 2rem calc(var(--agate-icon-sprite-count, 1) * 2rem);
  background-repeat: no-repeat;
  margin: 0.5rem;
  font-family: "Silicon Icons";
  font-size: 4rem;
  line-height: 2rem;
  text-align: center;
  position: relative;
  color: inherit;
  letter-spacing: inherit;
  text-indent: initial;
}
.icon:global(.silicon).huge {
  background-position: center calc((var(--agate-icon-sprite-count, 1) - 1) * 7.91667rem * -0);
  background-size: 7.91667rem calc(var(--agate-icon-sprite-count, 1) * 7.91667rem);
  width: 7.91667rem;
  height: 7.91667rem;
  font-size: 13.33333rem;
  line-height: 7.91667rem;
}
.icon:global(.silicon).small {
  background-position: center calc((var(--agate-icon-sprite-count, 1) - 1) * 1.25rem * -0);
  background-size: 1.25rem calc(var(--agate-icon-sprite-count, 1) * 1.25rem);
  width: 1.25rem;
  height: 1.25rem;
  font-size: 2.5rem;
  line-height: 1.25rem;
}
.icon:global(.silicon).smallest {
  background-position: center calc((var(--agate-icon-sprite-count, 1) - 1) * 0.75rem * -0);
  background-size: 0.75rem calc(var(--agate-icon-sprite-count, 1) * 0.75rem);
  width: 0.75rem;
  height: 0.75rem;
  font-size: 1.5rem;
  line-height: 0.75rem;
}
.icon:global(.silicon).dingbat {
  font-family: "LG Display_Dingbat";
  font-size: 2rem;
  line-height: 1.66667rem;
}
.icon:global(.silicon).dingbat.small {
  font-size: 1.25rem;
  line-height: 1.08333rem;
}
.icon:global(.silicon):global(.spottable):focus {
  background-position: center calc((var(--agate-icon-sprite-count, 1) - 1) * 2rem * -1);
}
.icon:global(.silicon):global(.spottable):focus.huge {
  background-position: center calc((var(--agate-icon-sprite-count, 1) - 1) * 7.91667rem * -1);
}
.icon:global(.silicon):global(.spottable):focus.small {
  background-position: center calc((var(--agate-icon-sprite-count, 1) - 1) * 1.25rem * -1);
}
.icon:global(.silicon):global(.spottable):focus.smallest {
  background-position: center calc((var(--agate-icon-sprite-count, 1) - 1) * 0.75rem * -1);
}
.icon:global(.silicon):global(.night) {
  width: 2rem;
  height: 2rem;
  background-position: center calc((var(--agate-icon-sprite-count, 1) - 1) * 2rem * -0);
  background-size: 2rem calc(var(--agate-icon-sprite-count, 1) * 2rem);
  background-repeat: no-repeat;
  margin: 0.5rem;
  font-family: "Silicon Icons";
  font-size: 4rem;
  line-height: 2rem;
  text-align: center;
  position: relative;
  color: inherit;
  letter-spacing: inherit;
  text-indent: initial;
}
.icon:global(.silicon):global(.night).huge {
  background-position: center calc((var(--agate-icon-sprite-count, 1) - 1) * 7.91667rem * -0);
  background-size: 7.91667rem calc(var(--agate-icon-sprite-count, 1) * 7.91667rem);
  width: 7.91667rem;
  height: 7.91667rem;
  font-size: 13.33333rem;
  line-height: 7.91667rem;
}
.icon:global(.silicon):global(.night).small {
  background-position: center calc((var(--agate-icon-sprite-count, 1) - 1) * 1.25rem * -0);
  background-size: 1.25rem calc(var(--agate-icon-sprite-count, 1) * 1.25rem);
  width: 1.25rem;
  height: 1.25rem;
  font-size: 2.5rem;
  line-height: 1.25rem;
}
.icon:global(.silicon):global(.night).smallest {
  background-position: center calc((var(--agate-icon-sprite-count, 1) - 1) * 0.75rem * -0);
  background-size: 0.75rem calc(var(--agate-icon-sprite-count, 1) * 0.75rem);
  width: 0.75rem;
  height: 0.75rem;
  font-size: 1.5rem;
  line-height: 0.75rem;
}
.icon:global(.silicon):global(.night).dingbat {
  font-family: "LG Display_Dingbat";
  font-size: 2rem;
  line-height: 1.66667rem;
}
.icon:global(.silicon):global(.night).dingbat.small {
  font-size: 1.25rem;
  line-height: 1.08333rem;
}
.icon:global(.silicon):global(.night):global(.spottable):focus {
  background-position: center calc((var(--agate-icon-sprite-count, 1) - 1) * 2rem * -1);
}
.icon:global(.silicon):global(.night):global(.spottable):focus.huge {
  background-position: center calc((var(--agate-icon-sprite-count, 1) - 1) * 7.91667rem * -1);
}
.icon:global(.silicon):global(.night):global(.spottable):focus.small {
  background-position: center calc((var(--agate-icon-sprite-count, 1) - 1) * 1.25rem * -1);
}
.icon:global(.silicon):global(.night):global(.spottable):focus.smallest {
  background-position: center calc((var(--agate-icon-sprite-count, 1) - 1) * 0.75rem * -1);
}
.icon:global(.titanium) {
  width: 2rem;
  height: 2rem;
  background-position: center calc((var(--agate-icon-sprite-count, 1) - 1) * 2rem * -0);
  background-size: 2rem calc(var(--agate-icon-sprite-count, 1) * 2rem);
  background-repeat: no-repeat;
  margin: 0.5rem;
  font-family: "Agate Icons";
  font-size: 4rem;
  line-height: 2rem;
  text-align: center;
  position: relative;
  color: inherit;
  letter-spacing: inherit;
  text-indent: initial;
}
.icon:global(.titanium).huge {
  background-position: center calc((var(--agate-icon-sprite-count, 1) - 1) * 7.91667rem * -0);
  background-size: 7.91667rem calc(var(--agate-icon-sprite-count, 1) * 7.91667rem);
  width: 7.91667rem;
  height: 7.91667rem;
  font-size: 13.33333rem;
  line-height: 7.91667rem;
}
.icon:global(.titanium).small {
  background-position: center calc((var(--agate-icon-sprite-count, 1) - 1) * 1.5rem * -0);
  background-size: 1.5rem calc(var(--agate-icon-sprite-count, 1) * 1.5rem);
  width: 1.5rem;
  height: 1.5rem;
  font-size: 3rem;
  line-height: 1.5rem;
}
.icon:global(.titanium).smallest {
  background-position: center calc((var(--agate-icon-sprite-count, 1) - 1) * 0.875rem * -0);
  background-size: 0.875rem calc(var(--agate-icon-sprite-count, 1) * 0.875rem);
  width: 0.875rem;
  height: 0.875rem;
  font-size: 1.75rem;
  line-height: 0.875rem;
}
.icon:global(.titanium).dingbat {
  font-family: "LG Display_Dingbat";
  font-size: 2rem;
  line-height: 1.66667rem;
}
.icon:global(.titanium).dingbat.small {
  font-size: 1.5rem;
  line-height: 1.33333rem;
}
.icon:global(.titanium):global(.spottable):focus {
  background-position: center calc((var(--agate-icon-sprite-count, 1) - 1) * 2rem * -1);
}
.icon:global(.titanium):global(.spottable):focus.huge {
  background-position: center calc((var(--agate-icon-sprite-count, 1) - 1) * 7.91667rem * -1);
}
.icon:global(.titanium):global(.spottable):focus.small {
  background-position: center calc((var(--agate-icon-sprite-count, 1) - 1) * 1.5rem * -1);
}
.icon:global(.titanium):global(.spottable):focus.smallest {
  background-position: center calc((var(--agate-icon-sprite-count, 1) - 1) * 0.875rem * -1);
}
:global(.spottable):focus .icon:global(.carbon) {
  background-position: center calc((var(--agate-icon-sprite-count, 1) - 1) * 2rem * -1);
}
:global(.spottable):focus .icon:global(.carbon).huge {
  background-position: center calc((var(--agate-icon-sprite-count, 1) - 1) * 7.91667rem * -1);
}
:global(.spottable):focus .icon:global(.carbon).small {
  background-position: center calc((var(--agate-icon-sprite-count, 1) - 1) * 1.5rem * -1);
}
:global(.spottable):focus .icon:global(.carbon).smallest {
  background-position: center calc((var(--agate-icon-sprite-count, 1) - 1) * 0.875rem * -1);
}
:global(.spottable):focus .icon:global(.cobalt) {
  background-position: center calc((var(--agate-icon-sprite-count, 1) - 1) * 2rem * -1);
}
:global(.spottable):focus .icon:global(.cobalt).huge {
  background-position: center calc((var(--agate-icon-sprite-count, 1) - 1) * 7.91667rem * -1);
}
:global(.spottable):focus .icon:global(.cobalt).small {
  background-position: center calc((var(--agate-icon-sprite-count, 1) - 1) * 1.5rem * -1);
}
:global(.spottable):focus .icon:global(.cobalt).smallest {
  background-position: center calc((var(--agate-icon-sprite-count, 1) - 1) * 0.875rem * -1);
}
:global(.spottable):focus .icon:global(.cobalt):global(.night) {
  background-position: center calc((var(--agate-icon-sprite-count, 1) - 1) * 2rem * -1);
}
:global(.spottable):focus .icon:global(.cobalt):global(.night).huge {
  background-position: center calc((var(--agate-icon-sprite-count, 1) - 1) * 7.91667rem * -1);
}
:global(.spottable):focus .icon:global(.cobalt):global(.night).small {
  background-position: center calc((var(--agate-icon-sprite-count, 1) - 1) * 1.5rem * -1);
}
:global(.spottable):focus .icon:global(.cobalt):global(.night).smallest {
  background-position: center calc((var(--agate-icon-sprite-count, 1) - 1) * 0.875rem * -1);
}
:global(.spottable):focus .icon:global(.copper) {
  background-position: center calc((var(--agate-icon-sprite-count, 1) - 1) * 2rem * -1);
}
:global(.spottable):focus .icon:global(.copper).huge {
  background-position: center calc((var(--agate-icon-sprite-count, 1) - 1) * 7.91667rem * -1);
}
:global(.spottable):focus .icon:global(.copper).small {
  background-position: center calc((var(--agate-icon-sprite-count, 1) - 1) * 1.5rem * -1);
}
:global(.spottable):focus .icon:global(.copper).smallest {
  background-position: center calc((var(--agate-icon-sprite-count, 1) - 1) * 0.875rem * -1);
}
:global(.spottable):focus .icon:global(.copper):global(.night) {
  background-position: center calc((var(--agate-icon-sprite-count, 1) - 1) * 2rem * -1);
}
:global(.spottable):focus .icon:global(.copper):global(.night).huge {
  background-position: center calc((var(--agate-icon-sprite-count, 1) - 1) * 7.91667rem * -1);
}
:global(.spottable):focus .icon:global(.copper):global(.night).small {
  background-position: center calc((var(--agate-icon-sprite-count, 1) - 1) * 1.5rem * -1);
}
:global(.spottable):focus .icon:global(.copper):global(.night).smallest {
  background-position: center calc((var(--agate-icon-sprite-count, 1) - 1) * 0.875rem * -1);
}
:global(.spottable):focus .icon:global(.electro) {
  background-position: center calc((var(--agate-icon-sprite-count, 1) - 1) * 2rem * -1);
}
:global(.spottable):focus .icon:global(.electro).huge {
  background-position: center calc((var(--agate-icon-sprite-count, 1) - 1) * 7.91667rem * -1);
}
:global(.spottable):focus .icon:global(.electro).small {
  background-position: center calc((var(--agate-icon-sprite-count, 1) - 1) * 1.5rem * -1);
}
:global(.spottable):focus .icon:global(.electro).smallest {
  background-position: center calc((var(--agate-icon-sprite-count, 1) - 1) * 0.875rem * -1);
}
:global(.spottable):focus .icon:global(.gallium) {
  background-position: center calc((var(--agate-icon-sprite-count, 1) - 1) * 2rem * -1);
}
:global(.spottable):focus .icon:global(.gallium).huge {
  background-position: center calc((var(--agate-icon-sprite-count, 1) - 1) * 7.91667rem * -1);
}
:global(.spottable):focus .icon:global(.gallium).small {
  background-position: center calc((var(--agate-icon-sprite-count, 1) - 1) * 1.16667rem * -1);
}
:global(.spottable):focus .icon:global(.gallium).smallest {
  background-position: center calc((var(--agate-icon-sprite-count, 1) - 1) * 0.75rem * -1);
}
:global(.spottable):focus .icon:global(.gallium):global(.night) {
  background-position: center calc((var(--agate-icon-sprite-count, 1) - 1) * 2rem * -1);
}
:global(.spottable):focus .icon:global(.gallium):global(.night).huge {
  background-position: center calc((var(--agate-icon-sprite-count, 1) - 1) * 7.91667rem * -1);
}
:global(.spottable):focus .icon:global(.gallium):global(.night).small {
  background-position: center calc((var(--agate-icon-sprite-count, 1) - 1) * 1.16667rem * -1);
}
:global(.spottable):focus .icon:global(.gallium):global(.night).smallest {
  background-position: center calc((var(--agate-icon-sprite-count, 1) - 1) * 0.75rem * -1);
}
:global(.spottable):focus .icon:global(.silicon) {
  background-position: center calc((var(--agate-icon-sprite-count, 1) - 1) * 2rem * -1);
}
:global(.spottable):focus .icon:global(.silicon).huge {
  background-position: center calc((var(--agate-icon-sprite-count, 1) - 1) * 7.91667rem * -1);
}
:global(.spottable):focus .icon:global(.silicon).small {
  background-position: center calc((var(--agate-icon-sprite-count, 1) - 1) * 1.25rem * -1);
}
:global(.spottable):focus .icon:global(.silicon).smallest {
  background-position: center calc((var(--agate-icon-sprite-count, 1) - 1) * 0.75rem * -1);
}
:global(.spottable):focus .icon:global(.silicon):global(.night) {
  background-position: center calc((var(--agate-icon-sprite-count, 1) - 1) * 2rem * -1);
}
:global(.spottable):focus .icon:global(.silicon):global(.night).huge {
  background-position: center calc((var(--agate-icon-sprite-count, 1) - 1) * 7.91667rem * -1);
}
:global(.spottable):focus .icon:global(.silicon):global(.night).small {
  background-position: center calc((var(--agate-icon-sprite-count, 1) - 1) * 1.25rem * -1);
}
:global(.spottable):focus .icon:global(.silicon):global(.night).smallest {
  background-position: center calc((var(--agate-icon-sprite-count, 1) - 1) * 0.75rem * -1);
}
:global(.spottable):focus .icon:global(.titanium) {
  background-position: center calc((var(--agate-icon-sprite-count, 1) - 1) * 2rem * -1);
}
:global(.spottable):focus .icon:global(.titanium).huge {
  background-position: center calc((var(--agate-icon-sprite-count, 1) - 1) * 7.91667rem * -1);
}
:global(.spottable):focus .icon:global(.titanium).small {
  background-position: center calc((var(--agate-icon-sprite-count, 1) - 1) * 1.5rem * -1);
}
:global(.spottable):focus .icon:global(.titanium).smallest {
  background-position: center calc((var(--agate-icon-sprite-count, 1) - 1) * 0.875rem * -1);
}
