.icon {
  width: 2rem;
  height: 2rem;
  background-position: center -0.625rem;
  background-size: 3.25rem 6.5rem;
  background-repeat: no-repeat;
  margin: 0.5rem;
  font-family: "Moonstone Icons";
  font-size: 4rem;
  line-height: 2rem;
  text-align: center;
  position: relative;
}
.icon:global(.largeText) {
  font-size: 4.8rem;
  width: 2.4rem;
  height: 2.4rem;
  line-height: 2.4rem;
}
.icon.small {
  background-position: center -0.375rem;
  background-size: 2.25rem 4.5rem;
  width: 1.5rem;
  height: 1.5rem;
  font-size: 3rem;
  line-height: 1.5rem;
}
.icon.small:global(.largeText) {
  font-size: 3.6rem;
  width: 1.8rem;
  height: 1.8rem;
  line-height: 1.8rem;
}
.icon.dingbat {
  font-family: "LG Icons";
  font-size: 2rem;
}
.icon.dingbat.small {
  font-size: 1.5rem;
}
.icon:global(.moonstone) {
  color: inherit;
}
:global(.enact-a11y-high-contrast) .icon:global(.moonstone.highContrast) {
  color: inherit;
}
.icon:global(.moonstone-light) {
  color: inherit;
}
:global(.enact-a11y-high-contrast) .icon:global(.moonstone-light.highContrast) {
  color: inherit;
}
:global(.spotlight-input-key)  :global(.spottable):focus .icon,
:global(.spotlight-input-mouse)  :global(.spottable):focus .icon {
  background-position: center -3.875rem;
}
:global(.spotlight-input-key)  :global(.spottable):focus .icon.small,
:global(.spotlight-input-mouse)  :global(.spottable):focus .icon.small {
  background-position: center -2.625rem;
}
:global(.spotlight-input-key)  :global(.spottable):focus .icon:global(.moonstone),
:global(.spotlight-input-mouse)  :global(.spottable):focus .icon:global(.moonstone) {
  color: inherit;
}
:global(.enact-a11y-high-contrast) :global(.spotlight-input-key)  :global(.spottable):focus .icon:global(.moonstone.highContrast),
:global(.enact-a11y-high-contrast) :global(.spotlight-input-mouse)  :global(.spottable):focus .icon:global(.moonstone.highContrast) {
  color: inherit;
}
:global(.spotlight-input-key)  :global(.spottable):focus .icon:global(.moonstone-light),
:global(.spotlight-input-mouse)  :global(.spottable):focus .icon:global(.moonstone-light) {
  color: inherit;
}
:global(.enact-a11y-high-contrast) :global(.spotlight-input-key)  :global(.spottable):focus .icon:global(.moonstone-light.highContrast),
:global(.enact-a11y-high-contrast) :global(.spotlight-input-mouse)  :global(.spottable):focus .icon:global(.moonstone-light.highContrast) {
  color: inherit;
}
:global(.spotlight-input-touch)  :global(.spottable):active .icon {
  background-position: center -3.875rem;
}
:global(.spotlight-input-touch)  :global(.spottable):active .icon.small {
  background-position: center -2.625rem;
}
:global(.spotlight-input-touch)  :global(.spottable):active .icon:global(.moonstone) {
  color: inherit;
}
:global(.enact-a11y-high-contrast) :global(.spotlight-input-touch)  :global(.spottable):active .icon:global(.moonstone.highContrast) {
  color: inherit;
}
:global(.spotlight-input-touch)  :global(.spottable):active .icon:global(.moonstone-light) {
  color: inherit;
}
:global(.enact-a11y-high-contrast) :global(.spotlight-input-touch)  :global(.spottable):active .icon:global(.moonstone-light.highContrast) {
  color: inherit;
}
:global(.spotlight-input-key) [data-spotlight-container-muted="true"] :global(.spottable):focus .icon,
:global(.spotlight-input-mouse) [data-spotlight-container-muted="true"] :global(.spottable):focus .icon {
  background-position: center -0.625rem;
}
:global(.spotlight-input-key) [data-spotlight-container-muted="true"] :global(.spottable):focus .icon.small,
:global(.spotlight-input-mouse) [data-spotlight-container-muted="true"] :global(.spottable):focus .icon.small {
  background-position: center -0.375rem;
}
:global(.spotlight-input-key) [data-spotlight-container-muted="true"] :global(.spottable):focus .icon:global(.moonstone),
:global(.spotlight-input-mouse) [data-spotlight-container-muted="true"] :global(.spottable):focus .icon:global(.moonstone) {
  color: inherit;
}
:global(.enact-a11y-high-contrast) :global(.spotlight-input-key) [data-spotlight-container-muted="true"] :global(.spottable):focus .icon:global(.moonstone.highContrast),
:global(.enact-a11y-high-contrast) :global(.spotlight-input-mouse) [data-spotlight-container-muted="true"] :global(.spottable):focus .icon:global(.moonstone.highContrast) {
  color: inherit;
}
:global(.spotlight-input-key) [data-spotlight-container-muted="true"] :global(.spottable):focus .icon:global(.moonstone-light),
:global(.spotlight-input-mouse) [data-spotlight-container-muted="true"] :global(.spottable):focus .icon:global(.moonstone-light) {
  color: inherit;
}
:global(.enact-a11y-high-contrast) :global(.spotlight-input-key) [data-spotlight-container-muted="true"] :global(.spottable):focus .icon:global(.moonstone-light.highContrast),
:global(.enact-a11y-high-contrast) :global(.spotlight-input-mouse) [data-spotlight-container-muted="true"] :global(.spottable):focus .icon:global(.moonstone-light.highContrast) {
  color: inherit;
}
:global(.spotlight-input-touch) [data-spotlight-container-muted="true"] :global(.spottable):active .icon {
  background-position: center -0.625rem;
}
:global(.spotlight-input-touch) [data-spotlight-container-muted="true"] :global(.spottable):active .icon.small {
  background-position: center -0.375rem;
}
:global(.spotlight-input-touch) [data-spotlight-container-muted="true"] :global(.spottable):active .icon:global(.moonstone) {
  color: inherit;
}
:global(.enact-a11y-high-contrast) :global(.spotlight-input-touch) [data-spotlight-container-muted="true"] :global(.spottable):active .icon:global(.moonstone.highContrast) {
  color: inherit;
}
:global(.spotlight-input-touch) [data-spotlight-container-muted="true"] :global(.spottable):active .icon:global(.moonstone-light) {
  color: inherit;
}
:global(.enact-a11y-high-contrast) :global(.spotlight-input-touch) [data-spotlight-container-muted="true"] :global(.spottable):active .icon:global(.moonstone-light.highContrast) {
  color: inherit;
}