@enact/sandstone/Item/Item.module.css

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

.item {
  font-size: 1.25rem;
  padding: 0.125rem 1rem;
  font-weight: 600;
  line-height: 1.3em;
  height: 3.25rem;
  display: flex;
  position: relative;
  color: inherit;
  margin: 0 0.75rem 0.625rem 0.75rem;
}
.item .selected {
  /* Available for customization */
}
:global(.enact-locale-km) .item {
  line-height: 1.5em;
}
:global(.enact-locale-si) .item {
  line-height: 1.5em;
}
:global(.enact-locale-th) .item {
  line-height: 1.5em;
}
:global(.enact-locale-vi) .item {
  line-height: 1.5em;
}
.item .bg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: 0.25rem;
}
.item .slotAfter,
.item .slotBefore {
  line-height: 0;
}
.item .slotAfter > *,
.item .slotBefore > * {
  vertical-align: middle;
}
.item .slotAfter > *:first-child,
.item .slotBefore > *:first-child {
  margin-inline-start: 0;
}
.item .slotAfter > *:last-child,
.item .slotBefore > *:last-child {
  margin-inline-end: 0;
}
.item .slotAfter {
  margin-inline-start: 1.125rem;
}
.item .slotBefore {
  margin-inline-end: 1.125rem;
}
.item.hasLabel {
  height: 5rem;
}
.item.hasLabel .itemContent.labelAfter .content,
.item.hasLabel .itemContent.labelBelow .content {
  order: 1;
}
.item.hasLabel .itemContent.labelAfter .label,
.item.hasLabel .itemContent.labelBelow .label {
  order: 2;
}
.item.hasLabel .itemContent.labelAbove .content,
.item.hasLabel .itemContent.labelBefore .content {
  order: 2;
}
.item.hasLabel .itemContent.labelAbove .label,
.item.hasLabel .itemContent.labelBefore .label {
  order: 1;
}
.item.inline {
  display: inline-flex;
  max-width: 10rem;
}
.item.inline .content,
.item.inline .itemContent {
  flex-shrink: 1;
  overflow: auto;
}
.item.centered .itemContent {
  max-width: fit-content;
}
.item .label {
  font-size: 1rem;
  font-weight: inherit;
  line-height: 1.3em;
}
:global(.enact-locale-km) .item .label {
  line-height: 1.5em;
}
:global(.enact-locale-si) .item .label {
  line-height: 1.5em;
}
:global(.enact-locale-th) .item .label {
  line-height: 1.5em;
}
:global(.enact-locale-vi) .item .label {
  line-height: 1.5em;
}
.item:global(.largeText) {
  font-size: 1.5rem;
  line-height: 1.3em;
}
:global(.enact-locale-km) .item:global(.largeText) {
  line-height: 1.5em;
}
:global(.enact-locale-si) .item:global(.largeText) {
  line-height: 1.5em;
}
:global(.enact-locale-th) .item:global(.largeText) {
  line-height: 1.5em;
}
:global(.enact-locale-vi) .item:global(.largeText) {
  line-height: 1.5em;
}
.item:global(.largeText) .label {
  font-size: 1.125rem;
}
.item.large {
  /* Needed to prevent global class being added in the DOM */
}
.item.small {
  font-size: 1.25rem;
  font-weight: 600;
  height: 2.625rem;
  line-height: 1.3em;
}
:global(.enact-locale-km) .item.small {
  line-height: 1.5em;
}
:global(.enact-locale-si) .item.small {
  line-height: 1.5em;
}
:global(.enact-locale-th) .item.small {
  line-height: 1.5em;
}
:global(.enact-locale-vi) .item.small {
  line-height: 1.5em;
}
.item.small.hasLabel {
  height: 4.375rem;
}
.item.small .label {
  font-size: 1rem;
  font-weight: inherit;
  line-height: 1.3em;
}
:global(.enact-locale-km) .item.small {
  font-size: 1.25rem;
}
:global(.enact-locale-si) .item.small {
  font-size: 1.25rem;
}
:global(.enact-locale-th) .item.small {
  font-size: 1.25rem;
}
:global(.enact-locale-vi) .item.small {
  font-size: 1.25rem;
}
.item.small:global(.largeText) {
  font-size: 1.5rem;
  line-height: 1.3em;
}
:global(.enact-locale-km) .item.small:global(.largeText) {
  line-height: 1.5em;
}
:global(.enact-locale-si) .item.small:global(.largeText) {
  line-height: 1.5em;
}
:global(.enact-locale-th) .item.small:global(.largeText) {
  line-height: 1.5em;
}
:global(.enact-locale-vi) .item.small:global(.largeText) {
  line-height: 1.5em;
}
:global(.enact-locale-ja) .item {
  line-break: strict;
}
.item:global(.neutral) .bg {
  opacity: 0;
  background-color: rgb(var(--sand-focus-bg-color-rgb, 230, 230, 230));
  will-change: box-shadow;
}
.item:global(.neutral) .label {
  color: var(--sand-text-sub-color, #abaeb3);
}
:global(.spotlight-input-key) .item:global(.neutral):global(.spottable):focus,
:global(.spotlight-input-mouse) .item:global(.neutral):global(.spottable):focus {
  color: rgb(var(--sand-component-focus-text-color-rgb, 76, 80, 89));
}
:global(.spotlight-input-key) .item:global(.neutral):global(.spottable):focus .bg,
:global(.spotlight-input-mouse) .item:global(.neutral):global(.spottable):focus .bg {
  opacity: 1;
  background-color: rgb(var(--sand-focus-bg-color-rgb, 230, 230, 230));
  box-shadow: 0 0.75rem 0.75rem rgb(var(--sand-shadow-color-rgb, 0, 0, 0), 30%);
  background: 'undefined';
}
:global(.spotlight-input-key) .item:global(.neutral):global(.spottable):focus .label,
:global(.spotlight-input-mouse) .item:global(.neutral):global(.spottable):focus .label {
  color: inherit;
}
:global(.spotlight-input-touch) .item:global(.neutral):global(.spottable):active {
  color: rgb(var(--sand-component-focus-text-color-rgb, 76, 80, 89));
}
:global(.spotlight-input-touch) .item:global(.neutral):global(.spottable):active .bg {
  opacity: 1;
  background-color: rgb(var(--sand-focus-bg-color-rgb, 230, 230, 230));
  box-shadow: 0 0.75rem 0.75rem rgb(var(--sand-shadow-color-rgb, 0, 0, 0), 30%);
  background: 'undefined';
}
:global(.spotlight-input-touch) .item:global(.neutral):global(.spottable):active .label {
  color: inherit;
}
.item:global(.neutral)[disabled] {
  opacity: 1;
}
.item:global(.neutral)[disabled] .slotBefore,
.item:global(.neutral)[disabled] .itemContent,
.item:global(.neutral)[disabled] .slotAfter {
  opacity: 0.28;
}
:global(.spotlight-input-key) .item:global(.neutral)[disabled]:global(.spottable):focus .bg,
:global(.spotlight-input-mouse) .item:global(.neutral)[disabled]:global(.spottable):focus .bg {
  opacity: 0.585;
  background-color: var(--sand-item-disabled-focus-bg-color, #e6e6e6);
}
:global(.spotlight-input-key) .item:global(.neutral)[disabled]:global(.spottable):focus .slotBefore,
:global(.spotlight-input-mouse) .item:global(.neutral)[disabled]:global(.spottable):focus .slotBefore,
:global(.spotlight-input-key) .item:global(.neutral)[disabled]:global(.spottable):focus .itemContent,
:global(.spotlight-input-mouse) .item:global(.neutral)[disabled]:global(.spottable):focus .itemContent,
:global(.spotlight-input-key) .item:global(.neutral)[disabled]:global(.spottable):focus .slotAfter,
:global(.spotlight-input-mouse) .item:global(.neutral)[disabled]:global(.spottable):focus .slotAfter {
  opacity: 0.4;
}
:global(.spotlight-input-touch) .item:global(.neutral)[disabled]:global(.spottable):active .bg {
  opacity: 0.585;
  background-color: var(--sand-item-disabled-focus-bg-color, #e6e6e6);
}
:global(.spotlight-input-touch) .item:global(.neutral)[disabled]:global(.spottable):active .slotBefore,
:global(.spotlight-input-touch) .item:global(.neutral)[disabled]:global(.spottable):active .itemContent,
:global(.spotlight-input-touch) .item:global(.neutral)[disabled]:global(.spottable):active .slotAfter {
  opacity: 0.4;
}
:global(.enact-a11y-high-contrast) .item:global(.neutral):global(.highContrast) .bg {
  opacity: 0;
  background-color: rgb(var(--sand-focus-bg-color-rgb, 230, 230, 230));
  will-change: box-shadow;
}
:global(.enact-a11y-high-contrast) .item:global(.neutral):global(.highContrast) .label {
  color: var(--sand-text-sub-color, #abaeb3);
}
:global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .item:global(.neutral):global(.highContrast):global(.spottable):focus,
:global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .item:global(.neutral):global(.highContrast):global(.spottable):focus {
  color: rgb(var(--sand-component-focus-text-color-rgb, 76, 80, 89));
}
:global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .item:global(.neutral):global(.highContrast):global(.spottable):focus .bg,
:global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .item:global(.neutral):global(.highContrast):global(.spottable):focus .bg {
  opacity: 1;
  background-color: rgb(var(--sand-focus-bg-color-rgb, 230, 230, 230));
  box-shadow: 0 0.75rem 0.75rem rgb(var(--sand-shadow-color-rgb, 0, 0, 0), 30%);
  background: 'undefined';
}
:global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .item:global(.neutral):global(.highContrast):global(.spottable):focus .label,
:global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .item:global(.neutral):global(.highContrast):global(.spottable):focus .label {
  color: inherit;
}
:global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .item:global(.neutral):global(.highContrast):global(.spottable):active {
  color: rgb(var(--sand-component-focus-text-color-rgb, 76, 80, 89));
}
:global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .item:global(.neutral):global(.highContrast):global(.spottable):active .bg {
  opacity: 1;
  background-color: rgb(var(--sand-focus-bg-color-rgb, 230, 230, 230));
  box-shadow: 0 0.75rem 0.75rem rgb(var(--sand-shadow-color-rgb, 0, 0, 0), 30%);
  background: 'undefined';
}
:global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .item:global(.neutral):global(.highContrast):global(.spottable):active .label {
  color: inherit;
}
:global(.enact-a11y-high-contrast) .item:global(.neutral):global(.highContrast)[disabled] {
  opacity: 1;
}
:global(.enact-a11y-high-contrast) .item:global(.neutral):global(.highContrast)[disabled] .slotBefore,
:global(.enact-a11y-high-contrast) .item:global(.neutral):global(.highContrast)[disabled] .itemContent,
:global(.enact-a11y-high-contrast) .item:global(.neutral):global(.highContrast)[disabled] .slotAfter {
  opacity: 0.28;
}
:global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .item:global(.neutral):global(.highContrast)[disabled]:global(.spottable):focus .bg,
:global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .item:global(.neutral):global(.highContrast)[disabled]:global(.spottable):focus .bg {
  opacity: 0.585;
  background-color: var(--sand-item-disabled-focus-bg-color, #e6e6e6);
}
:global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .item:global(.neutral):global(.highContrast)[disabled]:global(.spottable):focus .slotBefore,
:global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .item:global(.neutral):global(.highContrast)[disabled]:global(.spottable):focus .slotBefore,
:global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .item:global(.neutral):global(.highContrast)[disabled]:global(.spottable):focus .itemContent,
:global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .item:global(.neutral):global(.highContrast)[disabled]:global(.spottable):focus .itemContent,
:global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .item:global(.neutral):global(.highContrast)[disabled]:global(.spottable):focus .slotAfter,
:global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .item:global(.neutral):global(.highContrast)[disabled]:global(.spottable):focus .slotAfter {
  opacity: 0.4;
}
:global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .item:global(.neutral):global(.highContrast)[disabled]:global(.spottable):active .bg {
  opacity: 0.585;
  background-color: var(--sand-item-disabled-focus-bg-color, #e6e6e6);
}
:global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .item:global(.neutral):global(.highContrast)[disabled]:global(.spottable):active .slotBefore,
:global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .item:global(.neutral):global(.highContrast)[disabled]:global(.spottable):active .itemContent,
:global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .item:global(.neutral):global(.highContrast)[disabled]:global(.spottable):active .slotAfter {
  opacity: 0.4;
}
.item:global(.light) .bg {
  opacity: 0;
  background-color: rgb(var(--sand-focus-bg-color-rgb, 230, 230, 230));
  will-change: box-shadow;
}
.item:global(.light) .label {
  color: var(--sand-text-sub-color, #2e3239);
}
:global(.spotlight-input-key) .item:global(.light):global(.spottable):focus,
:global(.spotlight-input-mouse) .item:global(.light):global(.spottable):focus {
  color: rgb(var(--sand-component-focus-text-color-rgb, 76, 80, 89));
}
:global(.spotlight-input-key) .item:global(.light):global(.spottable):focus .bg,
:global(.spotlight-input-mouse) .item:global(.light):global(.spottable):focus .bg {
  opacity: 1;
  background-color: rgb(var(--sand-focus-bg-color-rgb, 230, 230, 230));
  box-shadow: 0 0.75rem 0.75rem rgb(var(--sand-shadow-color-rgb, 0, 0, 0), 30%);
  background: 'undefined';
}
:global(.spotlight-input-key) .item:global(.light):global(.spottable):focus .label,
:global(.spotlight-input-mouse) .item:global(.light):global(.spottable):focus .label {
  color: inherit;
}
:global(.spotlight-input-touch) .item:global(.light):global(.spottable):active {
  color: rgb(var(--sand-component-focus-text-color-rgb, 76, 80, 89));
}
:global(.spotlight-input-touch) .item:global(.light):global(.spottable):active .bg {
  opacity: 1;
  background-color: rgb(var(--sand-focus-bg-color-rgb, 230, 230, 230));
  box-shadow: 0 0.75rem 0.75rem rgb(var(--sand-shadow-color-rgb, 0, 0, 0), 30%);
  background: 'undefined';
}
:global(.spotlight-input-touch) .item:global(.light):global(.spottable):active .label {
  color: inherit;
}
.item:global(.light)[disabled] {
  opacity: 1;
}
.item:global(.light)[disabled] .slotBefore,
.item:global(.light)[disabled] .itemContent,
.item:global(.light)[disabled] .slotAfter {
  opacity: 0.28;
}
:global(.spotlight-input-key) .item:global(.light)[disabled]:global(.spottable):focus .bg,
:global(.spotlight-input-mouse) .item:global(.light)[disabled]:global(.spottable):focus .bg {
  opacity: 0.585;
  background-color: var(--sand-item-disabled-focus-bg-color, #989ca2);
}
:global(.spotlight-input-key) .item:global(.light)[disabled]:global(.spottable):focus .slotBefore,
:global(.spotlight-input-mouse) .item:global(.light)[disabled]:global(.spottable):focus .slotBefore,
:global(.spotlight-input-key) .item:global(.light)[disabled]:global(.spottable):focus .itemContent,
:global(.spotlight-input-mouse) .item:global(.light)[disabled]:global(.spottable):focus .itemContent,
:global(.spotlight-input-key) .item:global(.light)[disabled]:global(.spottable):focus .slotAfter,
:global(.spotlight-input-mouse) .item:global(.light)[disabled]:global(.spottable):focus .slotAfter {
  opacity: 0.4;
}
:global(.spotlight-input-touch) .item:global(.light)[disabled]:global(.spottable):active .bg {
  opacity: 0.585;
  background-color: var(--sand-item-disabled-focus-bg-color, #989ca2);
}
:global(.spotlight-input-touch) .item:global(.light)[disabled]:global(.spottable):active .slotBefore,
:global(.spotlight-input-touch) .item:global(.light)[disabled]:global(.spottable):active .itemContent,
:global(.spotlight-input-touch) .item:global(.light)[disabled]:global(.spottable):active .slotAfter {
  opacity: 0.4;
}
.item:global(.game) .bg {
  opacity: 0;
  background-color: var(--sand-focus-bg-color, #6d2fa1);
  will-change: box-shadow;
}
.item:global(.game) .label {
  color: var(--sand-text-sub-color, #abaeb3);
}
:global(.spotlight-input-key) .item:global(.game):global(.spottable):focus,
:global(.spotlight-input-mouse) .item:global(.game):global(.spottable):focus {
  color: rgb(var(--sand-component-focus-text-color-rgb, 230, 230, 230));
}
:global(.spotlight-input-key) .item:global(.game):global(.spottable):focus .bg,
:global(.spotlight-input-mouse) .item:global(.game):global(.spottable):focus .bg {
  opacity: 1;
  background-color: var(--sand-focus-bg-color, #6d2fa1);
  box-shadow: 0 0.75rem 0.75rem rgb(var(--sand-shadow-color-rgb, 0, 0, 0), 30%);
  background: linear-gradient(270deg, rgba(96, 48, 145, 0), #6d2fa1);
}
:global(.spotlight-input-key) .item:global(.game):global(.spottable):focus .label,
:global(.spotlight-input-mouse) .item:global(.game):global(.spottable):focus .label {
  color: #abaeb3;
}
:global(.spotlight-input-touch) .item:global(.game):global(.spottable):active {
  color: rgb(var(--sand-component-focus-text-color-rgb, 230, 230, 230));
}
:global(.spotlight-input-touch) .item:global(.game):global(.spottable):active .bg {
  opacity: 1;
  background-color: var(--sand-focus-bg-color, #6d2fa1);
  box-shadow: 0 0.75rem 0.75rem rgb(var(--sand-shadow-color-rgb, 0, 0, 0), 30%);
  background: linear-gradient(270deg, rgba(96, 48, 145, 0), #6d2fa1);
}
:global(.spotlight-input-touch) .item:global(.game):global(.spottable):active .label {
  color: #abaeb3;
}
.item:global(.game)[disabled] {
  opacity: 1;
}
.item:global(.game)[disabled] .slotBefore,
.item:global(.game)[disabled] .itemContent,
.item:global(.game)[disabled] .slotAfter {
  opacity: 0.28;
}
:global(.spotlight-input-key) .item:global(.game)[disabled]:global(.spottable):focus .bg,
:global(.spotlight-input-mouse) .item:global(.game)[disabled]:global(.spottable):focus .bg {
  opacity: 0.585;
  background-color: var(--sand-item-disabled-focus-bg-color, #e6e6e6);
}
:global(.spotlight-input-key) .item:global(.game)[disabled]:global(.spottable):focus .slotBefore,
:global(.spotlight-input-mouse) .item:global(.game)[disabled]:global(.spottable):focus .slotBefore,
:global(.spotlight-input-key) .item:global(.game)[disabled]:global(.spottable):focus .itemContent,
:global(.spotlight-input-mouse) .item:global(.game)[disabled]:global(.spottable):focus .itemContent,
:global(.spotlight-input-key) .item:global(.game)[disabled]:global(.spottable):focus .slotAfter,
:global(.spotlight-input-mouse) .item:global(.game)[disabled]:global(.spottable):focus .slotAfter {
  opacity: 0.4;
}
:global(.spotlight-input-touch) .item:global(.game)[disabled]:global(.spottable):active .bg {
  opacity: 0.585;
  background-color: var(--sand-item-disabled-focus-bg-color, #e6e6e6);
}
:global(.spotlight-input-touch) .item:global(.game)[disabled]:global(.spottable):active .slotBefore,
:global(.spotlight-input-touch) .item:global(.game)[disabled]:global(.spottable):active .itemContent,
:global(.spotlight-input-touch) .item:global(.game)[disabled]:global(.spottable):active .slotAfter {
  opacity: 0.4;
}
:global(.green) .item:global(.game) .bg {
  opacity: 0;
  background-color: var(--sand-focus-bg-color, #3ea07d);
  will-change: box-shadow;
}
:global(.green) .item:global(.game) .label {
  color: var(--sand-text-sub-color, #abaeb3);
}
:global(.spotlight-input-key) :global(.green) .item:global(.game):global(.spottable):focus,
:global(.spotlight-input-mouse) :global(.green) .item:global(.game):global(.spottable):focus {
  color: rgb(var(--sand-component-focus-text-color-rgb, 230, 230, 230));
}
:global(.spotlight-input-key) :global(.green) .item:global(.game):global(.spottable):focus .bg,
:global(.spotlight-input-mouse) :global(.green) .item:global(.game):global(.spottable):focus .bg {
  opacity: 1;
  background-color: var(--sand-focus-bg-color, #3ea07d);
  box-shadow: 0 0.75rem 0.75rem rgb(var(--sand-shadow-color-rgb, 0, 0, 0), 30%);
  background: linear-gradient(270deg, rgba(0, 255, 188, 0), rgba(0, 255, 194, 0.47));
}
:global(.spotlight-input-key) :global(.green) .item:global(.game):global(.spottable):focus .label,
:global(.spotlight-input-mouse) :global(.green) .item:global(.game):global(.spottable):focus .label {
  color: #abaeb3;
}
:global(.spotlight-input-touch) :global(.green) .item:global(.game):global(.spottable):active {
  color: rgb(var(--sand-component-focus-text-color-rgb, 230, 230, 230));
}
:global(.spotlight-input-touch) :global(.green) .item:global(.game):global(.spottable):active .bg {
  opacity: 1;
  background-color: var(--sand-focus-bg-color, #3ea07d);
  box-shadow: 0 0.75rem 0.75rem rgb(var(--sand-shadow-color-rgb, 0, 0, 0), 30%);
  background: linear-gradient(270deg, rgba(0, 255, 188, 0), rgba(0, 255, 194, 0.47));
}
:global(.spotlight-input-touch) :global(.green) .item:global(.game):global(.spottable):active .label {
  color: #abaeb3;
}
:global(.green) .item:global(.game)[disabled] {
  opacity: 1;
}
:global(.green) .item:global(.game)[disabled] .slotBefore,
:global(.green) .item:global(.game)[disabled] .itemContent,
:global(.green) .item:global(.game)[disabled] .slotAfter {
  opacity: 0.28;
}
:global(.spotlight-input-key) :global(.green) .item:global(.game)[disabled]:global(.spottable):focus .bg,
:global(.spotlight-input-mouse) :global(.green) .item:global(.game)[disabled]:global(.spottable):focus .bg {
  opacity: 0.585;
  background-color: var(--sand-item-disabled-focus-bg-color, #e6e6e6);
}
:global(.spotlight-input-key) :global(.green) .item:global(.game)[disabled]:global(.spottable):focus .slotBefore,
:global(.spotlight-input-mouse) :global(.green) .item:global(.game)[disabled]:global(.spottable):focus .slotBefore,
:global(.spotlight-input-key) :global(.green) .item:global(.game)[disabled]:global(.spottable):focus .itemContent,
:global(.spotlight-input-mouse) :global(.green) .item:global(.game)[disabled]:global(.spottable):focus .itemContent,
:global(.spotlight-input-key) :global(.green) .item:global(.game)[disabled]:global(.spottable):focus .slotAfter,
:global(.spotlight-input-mouse) :global(.green) .item:global(.game)[disabled]:global(.spottable):focus .slotAfter {
  opacity: 0.4;
}
:global(.spotlight-input-touch) :global(.green) .item:global(.game)[disabled]:global(.spottable):active .bg {
  opacity: 0.585;
  background-color: var(--sand-item-disabled-focus-bg-color, #e6e6e6);
}
:global(.spotlight-input-touch) :global(.green) .item:global(.game)[disabled]:global(.spottable):active .slotBefore,
:global(.spotlight-input-touch) :global(.green) .item:global(.game)[disabled]:global(.spottable):active .itemContent,
:global(.spotlight-input-touch) :global(.green) .item:global(.game)[disabled]:global(.spottable):active .slotAfter {
  opacity: 0.4;
}
:global(.orange) .item:global(.game) .bg {
  opacity: 0;
  background-color: var(--sand-focus-bg-color, #b85f23);
  will-change: box-shadow;
}
:global(.orange) .item:global(.game) .label {
  color: var(--sand-text-sub-color, #abaeb3);
}
:global(.spotlight-input-key) :global(.orange) .item:global(.game):global(.spottable):focus,
:global(.spotlight-input-mouse) :global(.orange) .item:global(.game):global(.spottable):focus {
  color: rgb(var(--sand-component-focus-text-color-rgb, 230, 230, 230));
}
:global(.spotlight-input-key) :global(.orange) .item:global(.game):global(.spottable):focus .bg,
:global(.spotlight-input-mouse) :global(.orange) .item:global(.game):global(.spottable):focus .bg {
  opacity: 1;
  background-color: var(--sand-focus-bg-color, #b85f23);
  box-shadow: 0 0.75rem 0.75rem rgb(var(--sand-shadow-color-rgb, 0, 0, 0), 30%);
  background: linear-gradient(270deg, rgba(86, 41, 7, 0), #a85c37);
}
:global(.spotlight-input-key) :global(.orange) .item:global(.game):global(.spottable):focus .label,
:global(.spotlight-input-mouse) :global(.orange) .item:global(.game):global(.spottable):focus .label {
  color: #abaeb3;
}
:global(.spotlight-input-touch) :global(.orange) .item:global(.game):global(.spottable):active {
  color: rgb(var(--sand-component-focus-text-color-rgb, 230, 230, 230));
}
:global(.spotlight-input-touch) :global(.orange) .item:global(.game):global(.spottable):active .bg {
  opacity: 1;
  background-color: var(--sand-focus-bg-color, #b85f23);
  box-shadow: 0 0.75rem 0.75rem rgb(var(--sand-shadow-color-rgb, 0, 0, 0), 30%);
  background: linear-gradient(270deg, rgba(86, 41, 7, 0), #a85c37);
}
:global(.spotlight-input-touch) :global(.orange) .item:global(.game):global(.spottable):active .label {
  color: #abaeb3;
}
:global(.orange) .item:global(.game)[disabled] {
  opacity: 1;
}
:global(.orange) .item:global(.game)[disabled] .slotBefore,
:global(.orange) .item:global(.game)[disabled] .itemContent,
:global(.orange) .item:global(.game)[disabled] .slotAfter {
  opacity: 0.28;
}
:global(.spotlight-input-key) :global(.orange) .item:global(.game)[disabled]:global(.spottable):focus .bg,
:global(.spotlight-input-mouse) :global(.orange) .item:global(.game)[disabled]:global(.spottable):focus .bg {
  opacity: 0.585;
  background-color: var(--sand-item-disabled-focus-bg-color, #e6e6e6);
}
:global(.spotlight-input-key) :global(.orange) .item:global(.game)[disabled]:global(.spottable):focus .slotBefore,
:global(.spotlight-input-mouse) :global(.orange) .item:global(.game)[disabled]:global(.spottable):focus .slotBefore,
:global(.spotlight-input-key) :global(.orange) .item:global(.game)[disabled]:global(.spottable):focus .itemContent,
:global(.spotlight-input-mouse) :global(.orange) .item:global(.game)[disabled]:global(.spottable):focus .itemContent,
:global(.spotlight-input-key) :global(.orange) .item:global(.game)[disabled]:global(.spottable):focus .slotAfter,
:global(.spotlight-input-mouse) :global(.orange) .item:global(.game)[disabled]:global(.spottable):focus .slotAfter {
  opacity: 0.4;
}
:global(.spotlight-input-touch) :global(.orange) .item:global(.game)[disabled]:global(.spottable):active .bg {
  opacity: 0.585;
  background-color: var(--sand-item-disabled-focus-bg-color, #e6e6e6);
}
:global(.spotlight-input-touch) :global(.orange) .item:global(.game)[disabled]:global(.spottable):active .slotBefore,
:global(.spotlight-input-touch) :global(.orange) .item:global(.game)[disabled]:global(.spottable):active .itemContent,
:global(.spotlight-input-touch) :global(.orange) .item:global(.game)[disabled]:global(.spottable):active .slotAfter {
  opacity: 0.4;
}