@enact/sandstone/Sprite/Sprite.module.css

Large-screen/TV support library for Enact, containing a variety of UI components.

.sprite {
  display: inline-block;
  overflow: hidden;
  position: relative;
  height: var(--sand-sprite-height);
  width: var(--sand-sprite-width);
}
.sprite .image {
  margin: 0;
  position: absolute;
  top: calc(var(--sand-sprite-offset-top, 0) * -1);
  left: calc(var(--sand-sprite-offset-left, 0) * -1);
  background-position: top left;
  height: calc(calc(var(--sand-sprite-height) * var(--sand-sprite-rows)) + var(--sand-sprite-offset-top, 0));
  width: calc(calc(var(--sand-sprite-width) * var(--sand-sprite-columns)) + var(--sand-sprite-offset-left, 0));
  background-size: calc(var(--sand-sprite-width) * var(--sand-sprite-columns)) calc(var(--sand-sprite-height) * var(--sand-sprite-rows));
  will-change: transform;
}
:global(.debug.sprites) .sprite {
  outline: 1px dashed orange;
  overflow: visible;
}
:global(.debug.sprites) .sprite .image {
  outline: 1px dashed cyan;
}
:global(.spotlight-input-key)  :global(.spottable):focus .sprite .image,
:global(.spotlight-input-mouse)  :global(.spottable):focus .sprite .image {
  filter: invert(0.8);
}
:global(.spotlight-input-touch)  :global(.spottable):active .sprite .image {
  filter: invert(0.8);
}