@enact/sandstone/Button/Button.module.css

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

.button {
  font-family: "Sandstone";
  font-size: 1.625rem;
  font-style: normal;
  font-weight: 600;
  font-kerning: normal;
  height: 3rem;
  line-height: 2.75rem;
  min-width: 3rem;
  max-width: 18.75rem;
  padding: 0 1.25rem;
  margin: 0 0.75rem;
  text-align: center;
  vertical-align: middle;
  --button-height: 3rem;
}
:global(.enact-locale-non-latin) .button {
  font-family: "Sandstone";
}
:global(.enact-locale-non-latin) .button {
  font-family: "Sandstone";
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 700;
}
.button:global(.largeText) {
  font-size: 2rem;
  height: 4rem;
  min-width: 4rem;
  line-height: 3.75rem;
  --button-height: 4rem;
}
.button.focusStatic {
  /* Defined to prevent global export */
}
.button.focusExpand {
  margin: 0.125rem 0.75rem;
}
.button .client {
  padding: 0.125rem 0;
  border-radius: inherit;
}
.button .icon {
  flex-shrink: 0;
  margin-left: 0;
  margin-right: 0.625rem;
}
:global(.enact-locale-right-to-left) .button .icon {
  margin-left: 0.625rem;
  margin-right: 0;
}
.button.hasIcon {
  padding: 0 1rem;
}
.button.iconAfter .client {
  flex-direction: row-reverse;
}
.button.iconAfter .icon {
  margin-left: 0.625rem;
  margin-right: 0;
}
:global(.enact-locale-right-to-left) .button.iconAfter .icon {
  margin-left: 0;
  margin-right: 0.625rem;
}
.button.red,
.button.green,
.button.yellow,
.button.blue {
  padding-left: 0.625rem;
  padding-right: 1.25rem;
}
:global(.enact-locale-right-to-left) .button.red,
:global(.enact-locale-right-to-left) .button.green,
:global(.enact-locale-right-to-left) .button.yellow,
:global(.enact-locale-right-to-left) .button.blue {
  padding-left: 1.25rem;
  padding-right: 0.625rem;
}
.button.red .client::before,
.button.green .client::before,
.button.yellow .client::before,
.button.blue .client::before {
  content: "";
  position: absolute;
  bottom: 0.375rem;
  left: 50%;
  width: 1.25rem;
  height: 0.25rem;
  border-radius: 0.125rem;
  transform: translate(-50%, 50%);
}
.button.red.minWidth .icon,
.button.green.minWidth .icon,
.button.yellow.minWidth .icon,
.button.blue.minWidth .icon {
  margin-inline-start: 0;
}
.button.red.minWidth .client,
.button.green.minWidth .client,
.button.yellow.minWidth .client,
.button.blue.minWidth .client {
  margin-inline-start: 1.25rem;
  padding-inline-start: 0.5rem;
}
.button.red.minWidth .client::before,
.button.green.minWidth .client::before,
.button.yellow.minWidth .client::before,
.button.blue.minWidth .client::before {
  bottom: 50%;
  transform: translateY(50%);
  left: -1.25rem;
  right: initial;
}
:global(.enact-locale-right-to-left) .button.red.minWidth .client::before,
:global(.enact-locale-right-to-left) .button.green.minWidth .client::before,
:global(.enact-locale-right-to-left) .button.yellow.minWidth .client::before,
:global(.enact-locale-right-to-left) .button.blue.minWidth .client::before {
  left: initial;
  right: -1.25rem;
}
.button .marquee {
  flex-grow: 1;
}
.button:not(.hasIcon):not(.hasColor) .marquee {
  text-align: inherit;
}
.button.minWidth {
  min-width: 11.25rem;
}
.button.small {
  font-family: "Sandstone";
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 600;
  font-kerning: normal;
  height: 2.25rem;
  min-width: 2.25rem;
  max-width: 18.75rem;
  line-height: 2rem;
  margin: 0 0.75rem;
  padding-left: 1rem;
  padding-right: 1rem;
  --button-height: 2.25rem;
}
:global(.enact-locale-non-latin) .button.small {
  font-family: "Sandstone";
}
:global(.enact-locale-non-latin) .button.small {
  font-family: "Sandstone";
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 700;
}
.button.small.focusExpand {
  margin: 0.125rem 0.75rem;
}
.button.small.minWidth {
  min-width: 6.25rem;
}
.button.small .icon {
  margin-left: 0;
  margin-right: 0.625rem;
}
:global(.enact-locale-right-to-left) .button.small .icon {
  margin-left: 0.625rem;
  margin-right: 0;
}
.button.small.iconAfter .icon {
  margin-left: 0.625rem;
  margin-right: 0;
}
:global(.enact-locale-right-to-left) .button.small.iconAfter .icon {
  margin-left: 0;
  margin-right: 0.625rem;
}
.button.small.red,
.button.small.green,
.button.small.yellow,
.button.small.blue {
  padding-left: 0.625rem;
  padding-right: 1rem;
}
:global(.enact-locale-right-to-left) .button.small.red,
:global(.enact-locale-right-to-left) .button.small.green,
:global(.enact-locale-right-to-left) .button.small.yellow,
:global(.enact-locale-right-to-left) .button.small.blue {
  padding-left: 1rem;
  padding-right: 0.625rem;
}
.button.small.red .client::before,
.button.small.green .client::before,
.button.small.yellow .client::before,
.button.small.blue .client::before {
  bottom: 0.25rem;
  width: 1rem;
  height: 0.25rem;
}
.button.small.red.minWidth .client,
.button.small.green.minWidth .client,
.button.small.yellow.minWidth .client,
.button.small.blue.minWidth .client {
  margin-inline-start: 1rem;
}
.button.small.red.minWidth .client::before,
.button.small.green.minWidth .client::before,
.button.small.yellow.minWidth .client::before,
.button.small.blue.minWidth .client::before {
  bottom: 50%;
  left: -1rem;
  right: initial;
}
:global(.enact-locale-right-to-left) .button.small.red.minWidth .client::before,
:global(.enact-locale-right-to-left) .button.small.green.minWidth .client::before,
:global(.enact-locale-right-to-left) .button.small.yellow.minWidth .client::before,
:global(.enact-locale-right-to-left) .button.small.blue.minWidth .client::before {
  left: initial;
  right: -1rem;
}
.button.small.red.minWidth .icon,
.button.small.green.minWidth .icon,
.button.small.yellow.minWidth .icon,
.button.small.blue.minWidth .icon {
  margin-inline-start: 0;
}
.button.small.red.minWidth.iconAfter .icon,
.button.small.green.minWidth.iconAfter .icon,
.button.small.yellow.minWidth.iconAfter .icon,
.button.small.blue.minWidth.iconAfter .icon {
  margin-inline-start: 0.625rem;
}
.button.small:global(.largeText) {
  font-size: 1.5rem;
  height: 3rem;
  min-width: 3rem;
  line-height: 2.75rem;
  --button-height: 3rem;
}
.button.small:global(.largeText).minWidth {
  min-width: 6.25rem;
}
.button.iconOnly .client {
  padding: 0;
}
.button.iconOnly .client .marquee {
  display: none;
}
.button.iconOnly.iconAfter,
.button.iconOnly.iconBefore,
.button.iconOnly.large,
.button.iconOnly.small {
  padding: 0 0.3125rem;
  padding-left: 0.3125rem;
  padding-right: 0.3125rem;
}
:global(.enact-locale-right-to-left) .button.iconOnly.iconAfter,
:global(.enact-locale-right-to-left) .button.iconOnly.iconBefore,
:global(.enact-locale-right-to-left) .button.iconOnly.large,
:global(.enact-locale-right-to-left) .button.iconOnly.small {
  padding-left: 0.3125rem;
  padding-right: 0.3125rem;
}
.button.iconOnly.iconAfter .icon,
.button.iconOnly.iconBefore .icon,
.button.iconOnly.large .icon,
.button.iconOnly.small .icon {
  margin: 0;
}
.button.iconOnly.iconAfter .icon:global(.largeText),
.button.iconOnly.iconBefore .icon:global(.largeText),
.button.iconOnly.large .icon:global(.largeText),
.button.iconOnly.small .icon:global(.largeText) {
  width: 100%;
}
.button.iconOnly.iconAfter.red .client::before,
.button.iconOnly.iconBefore.red .client::before,
.button.iconOnly.large.red .client::before,
.button.iconOnly.small.red .client::before,
.button.iconOnly.iconAfter.green .client::before,
.button.iconOnly.iconBefore.green .client::before,
.button.iconOnly.large.green .client::before,
.button.iconOnly.small.green .client::before,
.button.iconOnly.iconAfter.yellow .client::before,
.button.iconOnly.iconBefore.yellow .client::before,
.button.iconOnly.large.yellow .client::before,
.button.iconOnly.small.yellow .client::before,
.button.iconOnly.iconAfter.blue .client::before,
.button.iconOnly.iconBefore.blue .client::before,
.button.iconOnly.large.blue .client::before,
.button.iconOnly.small.blue .client::before {
  width: 1.375rem;
  height: 0.1875rem;
}
.button.iconOnly.large {
  padding: 0 0.375rem;
}
.button.iconOnly.red .client::before,
.button.iconOnly.green .client::before,
.button.iconOnly.yellow .client::before,
.button.iconOnly.blue .client::before {
  width: 1.375rem;
  height: 0.1875rem;
}
.button.collapsable.hasIcon:not(.iconOnly) {
  padding-left: 0;
  padding-right: 0;
  transition: min-width 300ms ease-out;
}
.button.collapsable.hasIcon:not(.iconOnly) .icon {
  margin: 0 0.5rem;
}
.button.collapsable.hasIcon:not(.iconOnly) .marquee {
  margin: 0;
  opacity: 1;
  transition: opacity 300ms ease-out;
  will-change: opacity;
}
.button.collapsable.hasIcon:not(.iconOnly).collapsed .marquee {
  opacity: 0;
}
.button:global(.neutral) {
  border-radius: 0.25rem;
}
.button:global(.neutral)::before {
  content: "";
  position: absolute;
  top: -0.25rem;
  right: -0.25rem;
  bottom: -0.25rem;
  left: -0.25rem;
  border-radius: 0.25rem;
}
.button:global(.neutral),
:global(.enact-a11y-high-contrast) .button:global(.neutral) {
  color: rgb(var(--sand-component-text-color-rgb, 230, 230, 230));
}
.button:global(.neutral) .bg {
  opacity: 0;
  background-color: rgb(var(--sand-focus-bg-color-rgb, 230, 230, 230));
  will-change: box-shadow, transform, filter;
  background-color: var(--sand-component-bg-color, #7d848c);
  transition: transform 200ms ease-out;
  border-width: '';
  border-style: none;
  border-color: transparent;
  border-radius: 0.25rem;
}
.button:global(.neutral).opaque {
  color: rgb(var(--sand-component-text-color-rgb, 230, 230, 230));
}
.button:global(.neutral).opaque .bg {
  opacity: 1;
}
.button:global(.neutral).transparent {
  color: rgb(var(--sand-text-color-rgb, 230, 230, 230));
}
.button:global(.neutral).transparent .bg {
  opacity: 0;
}
.button:global(.neutral).transparent.shadowed .client {
  text-shadow: 0.125rem 0.25rem 0.25rem rgb(var(--sand-shadow-color-rgb, 0, 0, 0), 30%);
}
.button:global(.neutral).red .client::before {
  background-color: #e1777e;
}
.button:global(.neutral).green .client::before {
  background-color: #7fd563;
}
.button:global(.neutral).yellow .client::before {
  background-color: #d3b85f;
}
.button:global(.neutral).blue .client::before {
  background-color: #5185c1;
}
.button:global(.neutral).small::before {
  content: "";
  position: absolute;
  top: -0.625rem;
  right: -0.625rem;
  bottom: -0.625rem;
  left: -0.625rem;
  border-radius: 0.25rem;
}
.button:global(.neutral).iconOnly .bg {
  border: '';
  border-radius: '';
}
.button:global(.neutral).roundBorder .bg {
  border-radius: calc(var(--button-height) / 2);
}
.button:global(.neutral).selected {
  color: rgb(var(--sand-component-text-color-rgb, 230, 230, 230));
}
.button:global(.neutral).selected .bg {
  background-color: var(--sand-selected-bg-color, #3e454d);
  filter: none;
}
.button:global(.neutral).selected.opaque .bg {
  opacity: 1;
}
.button:global(.neutral).selected.transparent .bg {
  opacity: 1;
}
:global(.spotlight-input-key) .button:global(.neutral):global(.spottable):focus,
:global(.spotlight-input-mouse) .button:global(.neutral):global(.spottable):focus {
  color: rgb(var(--sand-component-focus-text-color-rgb, 76, 80, 89));
}
:global(.spotlight-input-key) .button:global(.neutral):global(.spottable):focus .bg,
:global(.spotlight-input-mouse) .button:global(.neutral):global(.spottable):focus .bg {
  opacity: 1;
  box-shadow: 0 0.75rem 0.75rem rgb(var(--sand-shadow-color-rgb, 0, 0, 0), 30%);
  background-color: rgb(var(--sand-focus-bg-color-rgb, 230, 230, 230));
  filter: none;
}
:global(.spotlight-input-key) .button:global(.neutral):global(.spottable):focus .client,
:global(.spotlight-input-mouse) .button:global(.neutral):global(.spottable):focus .client {
  text-shadow: none;
}
:global(.spotlight-input-key) .button:global(.neutral):global(.spottable):focus.iconOnly .bg,
:global(.spotlight-input-mouse) .button:global(.neutral):global(.spottable):focus.iconOnly .bg {
  background-color: '';
}
:global(.spotlight-input-key) .button:global(.neutral):global(.spottable):focus.focusExpand .bg,
:global(.spotlight-input-mouse) .button:global(.neutral):global(.spottable):focus.focusExpand .bg {
  transform: scale(1.05);
}
:global(.spotlight-input-key) .button:global(.neutral):global(.spottable):focus.focusExpand.small .bg,
:global(.spotlight-input-mouse) .button:global(.neutral):global(.spottable):focus.focusExpand.small .bg {
  transform: scale(1.1);
}
:global(.spotlight-input-touch) .button:global(.neutral):global(.spottable):active {
  color: rgb(var(--sand-component-focus-text-color-rgb, 76, 80, 89));
}
:global(.spotlight-input-touch) .button:global(.neutral):global(.spottable):active .bg {
  opacity: 1;
  box-shadow: 0 0.75rem 0.75rem rgb(var(--sand-shadow-color-rgb, 0, 0, 0), 30%);
  background-color: rgb(var(--sand-focus-bg-color-rgb, 230, 230, 230));
  filter: none;
}
:global(.spotlight-input-touch) .button:global(.neutral):global(.spottable):active .client {
  text-shadow: none;
}
:global(.spotlight-input-touch) .button:global(.neutral):global(.spottable):active.iconOnly .bg {
  background-color: '';
}
:global(.spotlight-input-touch) .button:global(.neutral):global(.spottable):active.focusExpand .bg {
  transform: scale(1.05);
}
:global(.spotlight-input-touch) .button:global(.neutral):global(.spottable):active.focusExpand.small .bg {
  transform: scale(1.1);
}
:global(.spotlight-input-key) .button:global(.neutral):not([disabled]):global(.spottable):focus,
:global(.spotlight-input-mouse) .button:global(.neutral):not([disabled]):global(.spottable):focus {
  z-index: 1;
}
:global(.spotlight-input-key) .button:global(.neutral):not([disabled]):global(.spottable):focus.focusExpand.pressed .bg,
:global(.spotlight-input-mouse) .button:global(.neutral):not([disabled]):global(.spottable):focus.focusExpand.pressed .bg,
:global(.spotlight-input-key) .button:global(.neutral):not([disabled]):global(.spottable):focus.focusExpand:active .bg,
:global(.spotlight-input-mouse) .button:global(.neutral):not([disabled]):global(.spottable):focus.focusExpand:active .bg {
  transform: scale(1.02);
}
:global(.spotlight-input-key) .button:global(.neutral):not([disabled]):global(.spottable):focus.focusExpand.pressed.small .bg,
:global(.spotlight-input-mouse) .button:global(.neutral):not([disabled]):global(.spottable):focus.focusExpand.pressed.small .bg,
:global(.spotlight-input-key) .button:global(.neutral):not([disabled]):global(.spottable):focus.focusExpand:active.small .bg,
:global(.spotlight-input-mouse) .button:global(.neutral):not([disabled]):global(.spottable):focus.focusExpand:active.small .bg {
  transform: scale(1.04);
}
:global(.spotlight-input-touch) .button:global(.neutral):not([disabled]):global(.spottable):active {
  z-index: 1;
}
:global(.spotlight-input-touch) .button:global(.neutral):not([disabled]):global(.spottable):active.focusExpand.pressed .bg,
:global(.spotlight-input-touch) .button:global(.neutral):not([disabled]):global(.spottable):active.focusExpand:active .bg {
  transform: scale(1.02);
}
:global(.spotlight-input-touch) .button:global(.neutral):not([disabled]):global(.spottable):active.focusExpand.pressed.small .bg,
:global(.spotlight-input-touch) .button:global(.neutral):not([disabled]):global(.spottable):active.focusExpand:active.small .bg {
  transform: scale(1.04);
}
.button:global(.neutral)[disabled] {
  opacity: 1;
}
.button:global(.neutral)[disabled] .client {
  opacity: 0.28;
}
.button:global(.neutral)[disabled].opaque .bg {
  opacity: 0.28;
}
:global(.spotlight-input-key) .button:global(.neutral)[disabled]:global(.spottable):focus .bg,
:global(.spotlight-input-mouse) .button:global(.neutral)[disabled]:global(.spottable):focus .bg {
  opacity: 0.585;
}
:global(.spotlight-input-key) .button:global(.neutral)[disabled]:global(.spottable):focus .client,
:global(.spotlight-input-mouse) .button:global(.neutral)[disabled]:global(.spottable):focus .client {
  opacity: 0.4;
}
:global(.spotlight-input-touch) .button:global(.neutral)[disabled]:global(.spottable):active .bg {
  opacity: 0.585;
}
:global(.spotlight-input-touch) .button:global(.neutral)[disabled]:global(.spottable):active .client {
  opacity: 0.4;
}
:global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast) {
  border-radius: 0.25rem;
}
:global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast)::before {
  content: "";
  position: absolute;
  top: -0.25rem;
  right: -0.25rem;
  bottom: -0.25rem;
  left: -0.25rem;
  border-radius: 0.25rem;
}
:global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast),
:global(.enact-a11y-high-contrast) :global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast) {
  color: rgb(var(--sand-component-text-color-rgb, 230, 230, 230));
}
:global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast) .bg {
  opacity: 0;
  background-color: rgb(var(--sand-focus-bg-color-rgb, 230, 230, 230));
  will-change: box-shadow, transform, filter;
  background-color: var(--sand-component-bg-color, #7d848c);
  transition: transform 200ms ease-out;
  border-width: '';
  border-style: none;
  border-color: transparent;
  border-radius: 0.25rem;
}
:global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast).opaque {
  color: rgb(var(--sand-component-text-color-rgb, 230, 230, 230));
}
:global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast).opaque .bg {
  opacity: 1;
}
:global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast).transparent {
  color: rgb(var(--sand-text-color-rgb, 230, 230, 230));
}
:global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast).transparent .bg {
  opacity: 0;
}
:global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast).transparent.shadowed .client {
  text-shadow: 0.125rem 0.25rem 0.25rem rgb(var(--sand-shadow-color-rgb, 0, 0, 0), 30%);
}
:global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast).red .client::before {
  background-color: #e1777e;
}
:global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast).green .client::before {
  background-color: #7fd563;
}
:global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast).yellow .client::before {
  background-color: #d3b85f;
}
:global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast).blue .client::before {
  background-color: #5185c1;
}
:global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast).small::before {
  content: "";
  position: absolute;
  top: -0.625rem;
  right: -0.625rem;
  bottom: -0.625rem;
  left: -0.625rem;
  border-radius: 0.25rem;
}
:global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast).iconOnly .bg {
  border: '';
  border-radius: '';
}
:global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast).roundBorder .bg {
  border-radius: calc(var(--button-height) / 2);
}
:global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast).selected {
  color: rgb(var(--sand-component-text-color-rgb, 230, 230, 230));
}
:global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast).selected .bg {
  background-color: var(--sand-selected-bg-color, #3e454d);
  filter: none;
}
:global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast).selected.opaque .bg {
  opacity: 1;
}
:global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast).selected.transparent .bg {
  opacity: 1;
}
:global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast):global(.spottable):focus,
:global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .button: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) .button:global(.neutral):global(.highContrast):global(.spottable):focus .bg,
:global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast):global(.spottable):focus .bg {
  opacity: 1;
  box-shadow: 0 0.75rem 0.75rem rgb(var(--sand-shadow-color-rgb, 0, 0, 0), 30%);
  background-color: rgb(var(--sand-focus-bg-color-rgb, 230, 230, 230));
  filter: none;
}
:global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast):global(.spottable):focus .client,
:global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast):global(.spottable):focus .client {
  text-shadow: none;
}
:global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast):global(.spottable):focus.iconOnly .bg,
:global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast):global(.spottable):focus.iconOnly .bg {
  background-color: '';
}
:global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast):global(.spottable):focus.focusExpand .bg,
:global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast):global(.spottable):focus.focusExpand .bg {
  transform: scale(1.05);
}
:global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast):global(.spottable):focus.focusExpand.small .bg,
:global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast):global(.spottable):focus.focusExpand.small .bg {
  transform: scale(1.1);
}
:global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .button: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) .button:global(.neutral):global(.highContrast):global(.spottable):active .bg {
  opacity: 1;
  box-shadow: 0 0.75rem 0.75rem rgb(var(--sand-shadow-color-rgb, 0, 0, 0), 30%);
  background-color: rgb(var(--sand-focus-bg-color-rgb, 230, 230, 230));
  filter: none;
}
:global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast):global(.spottable):active .client {
  text-shadow: none;
}
:global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast):global(.spottable):active.iconOnly .bg {
  background-color: '';
}
:global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast):global(.spottable):active.focusExpand .bg {
  transform: scale(1.05);
}
:global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast):global(.spottable):active.focusExpand.small .bg {
  transform: scale(1.1);
}
:global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast):not([disabled]):global(.spottable):focus,
:global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast):not([disabled]):global(.spottable):focus {
  z-index: 1;
}
:global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast):not([disabled]):global(.spottable):focus.focusExpand.pressed .bg,
:global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast):not([disabled]):global(.spottable):focus.focusExpand.pressed .bg,
:global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast):not([disabled]):global(.spottable):focus.focusExpand:active .bg,
:global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast):not([disabled]):global(.spottable):focus.focusExpand:active .bg {
  transform: scale(1.02);
}
:global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast):not([disabled]):global(.spottable):focus.focusExpand.pressed.small .bg,
:global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast):not([disabled]):global(.spottable):focus.focusExpand.pressed.small .bg,
:global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast):not([disabled]):global(.spottable):focus.focusExpand:active.small .bg,
:global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast):not([disabled]):global(.spottable):focus.focusExpand:active.small .bg {
  transform: scale(1.04);
}
:global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast):not([disabled]):global(.spottable):active {
  z-index: 1;
}
:global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast):not([disabled]):global(.spottable):active.focusExpand.pressed .bg,
:global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast):not([disabled]):global(.spottable):active.focusExpand:active .bg {
  transform: scale(1.02);
}
:global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast):not([disabled]):global(.spottable):active.focusExpand.pressed.small .bg,
:global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast):not([disabled]):global(.spottable):active.focusExpand:active.small .bg {
  transform: scale(1.04);
}
:global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast)[disabled] {
  opacity: 1;
}
:global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast)[disabled] .client {
  opacity: 0.28;
}
:global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast)[disabled].opaque .bg {
  opacity: 0.28;
}
:global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast)[disabled]:global(.spottable):focus .bg,
:global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast)[disabled]:global(.spottable):focus .bg {
  opacity: 0.585;
}
:global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast)[disabled]:global(.spottable):focus .client,
:global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast)[disabled]:global(.spottable):focus .client {
  opacity: 0.4;
}
:global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast)[disabled]:global(.spottable):active .bg {
  opacity: 0.585;
}
:global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast)[disabled]:global(.spottable):active .client {
  opacity: 0.4;
}
.button:global(.light) {
  border-radius: 0.25rem;
}
.button:global(.light)::before {
  content: "";
  position: absolute;
  top: -0.25rem;
  right: -0.25rem;
  bottom: -0.25rem;
  left: -0.25rem;
  border-radius: 0.25rem;
}
.button:global(.light),
:global(.enact-a11y-high-contrast) .button:global(.light) {
  color: rgb(var(--sand-component-text-color-rgb, 230, 230, 230));
}
.button:global(.light) .bg {
  opacity: 0;
  background-color: rgb(var(--sand-focus-bg-color-rgb, 230, 230, 230));
  will-change: box-shadow, transform, filter;
  background-color: var(--sand-component-bg-color, #7d848c);
  transition: transform 200ms ease-out;
  border-width: '';
  border-style: none;
  border-color: transparent;
  border-radius: 0.25rem;
}
.button:global(.light).opaque {
  color: rgb(var(--sand-component-text-color-rgb, 230, 230, 230));
}
.button:global(.light).opaque .bg {
  opacity: 1;
}
.button:global(.light).transparent {
  color: rgb(var(--sand-text-color-rgb, 46, 50, 57));
}
.button:global(.light).transparent .bg {
  opacity: 0;
}
.button:global(.light).transparent.shadowed .client {
  text-shadow: 0.125rem 0.25rem 0.25rem rgb(var(--sand-shadow-color-rgb, 0, 0, 0), 30%);
}
.button:global(.light).red .client::before {
  background-color: #e1777e;
}
.button:global(.light).green .client::before {
  background-color: #7fd563;
}
.button:global(.light).yellow .client::before {
  background-color: #d3b85f;
}
.button:global(.light).blue .client::before {
  background-color: #5185c1;
}
.button:global(.light).small::before {
  content: "";
  position: absolute;
  top: -0.625rem;
  right: -0.625rem;
  bottom: -0.625rem;
  left: -0.625rem;
  border-radius: 0.25rem;
}
.button:global(.light).iconOnly .bg {
  border: '';
  border-radius: '';
}
.button:global(.light).roundBorder .bg {
  border-radius: calc(var(--button-height) / 2);
}
.button:global(.light).selected {
  color: rgb(var(--sand-component-text-color-rgb, 230, 230, 230));
}
.button:global(.light).selected .bg {
  background-color: var(--sand-selected-bg-color, #3e454d);
  filter: none;
}
.button:global(.light).selected.opaque .bg {
  opacity: 1;
}
.button:global(.light).selected.transparent .bg {
  opacity: 1;
}
:global(.spotlight-input-key) .button:global(.light):global(.spottable):focus,
:global(.spotlight-input-mouse) .button:global(.light):global(.spottable):focus {
  color: rgb(var(--sand-component-focus-text-color-rgb, 76, 80, 89));
}
:global(.spotlight-input-key) .button:global(.light):global(.spottable):focus .bg,
:global(.spotlight-input-mouse) .button:global(.light):global(.spottable):focus .bg {
  opacity: 1;
  box-shadow: 0 0.75rem 0.75rem rgb(var(--sand-shadow-color-rgb, 0, 0, 0), 30%);
  background-color: rgb(var(--sand-focus-bg-color-rgb, 230, 230, 230));
  filter: none;
}
:global(.spotlight-input-key) .button:global(.light):global(.spottable):focus .client,
:global(.spotlight-input-mouse) .button:global(.light):global(.spottable):focus .client {
  text-shadow: none;
}
:global(.spotlight-input-key) .button:global(.light):global(.spottable):focus.iconOnly .bg,
:global(.spotlight-input-mouse) .button:global(.light):global(.spottable):focus.iconOnly .bg {
  background-color: '';
}
:global(.spotlight-input-key) .button:global(.light):global(.spottable):focus.focusExpand .bg,
:global(.spotlight-input-mouse) .button:global(.light):global(.spottable):focus.focusExpand .bg {
  transform: scale(1.05);
}
:global(.spotlight-input-key) .button:global(.light):global(.spottable):focus.focusExpand.small .bg,
:global(.spotlight-input-mouse) .button:global(.light):global(.spottable):focus.focusExpand.small .bg {
  transform: scale(1.1);
}
:global(.spotlight-input-touch) .button:global(.light):global(.spottable):active {
  color: rgb(var(--sand-component-focus-text-color-rgb, 76, 80, 89));
}
:global(.spotlight-input-touch) .button:global(.light):global(.spottable):active .bg {
  opacity: 1;
  box-shadow: 0 0.75rem 0.75rem rgb(var(--sand-shadow-color-rgb, 0, 0, 0), 30%);
  background-color: rgb(var(--sand-focus-bg-color-rgb, 230, 230, 230));
  filter: none;
}
:global(.spotlight-input-touch) .button:global(.light):global(.spottable):active .client {
  text-shadow: none;
}
:global(.spotlight-input-touch) .button:global(.light):global(.spottable):active.iconOnly .bg {
  background-color: '';
}
:global(.spotlight-input-touch) .button:global(.light):global(.spottable):active.focusExpand .bg {
  transform: scale(1.05);
}
:global(.spotlight-input-touch) .button:global(.light):global(.spottable):active.focusExpand.small .bg {
  transform: scale(1.1);
}
:global(.spotlight-input-key) .button:global(.light):not([disabled]):global(.spottable):focus,
:global(.spotlight-input-mouse) .button:global(.light):not([disabled]):global(.spottable):focus {
  z-index: 1;
}
:global(.spotlight-input-key) .button:global(.light):not([disabled]):global(.spottable):focus.focusExpand.pressed .bg,
:global(.spotlight-input-mouse) .button:global(.light):not([disabled]):global(.spottable):focus.focusExpand.pressed .bg,
:global(.spotlight-input-key) .button:global(.light):not([disabled]):global(.spottable):focus.focusExpand:active .bg,
:global(.spotlight-input-mouse) .button:global(.light):not([disabled]):global(.spottable):focus.focusExpand:active .bg {
  transform: scale(1.02);
}
:global(.spotlight-input-key) .button:global(.light):not([disabled]):global(.spottable):focus.focusExpand.pressed.small .bg,
:global(.spotlight-input-mouse) .button:global(.light):not([disabled]):global(.spottable):focus.focusExpand.pressed.small .bg,
:global(.spotlight-input-key) .button:global(.light):not([disabled]):global(.spottable):focus.focusExpand:active.small .bg,
:global(.spotlight-input-mouse) .button:global(.light):not([disabled]):global(.spottable):focus.focusExpand:active.small .bg {
  transform: scale(1.04);
}
:global(.spotlight-input-touch) .button:global(.light):not([disabled]):global(.spottable):active {
  z-index: 1;
}
:global(.spotlight-input-touch) .button:global(.light):not([disabled]):global(.spottable):active.focusExpand.pressed .bg,
:global(.spotlight-input-touch) .button:global(.light):not([disabled]):global(.spottable):active.focusExpand:active .bg {
  transform: scale(1.02);
}
:global(.spotlight-input-touch) .button:global(.light):not([disabled]):global(.spottable):active.focusExpand.pressed.small .bg,
:global(.spotlight-input-touch) .button:global(.light):not([disabled]):global(.spottable):active.focusExpand:active.small .bg {
  transform: scale(1.04);
}
.button:global(.light)[disabled] {
  opacity: 1;
}
.button:global(.light)[disabled] .client {
  opacity: 0.28;
}
.button:global(.light)[disabled].opaque .bg {
  opacity: 0.28;
}
:global(.spotlight-input-key) .button:global(.light)[disabled]:global(.spottable):focus .bg,
:global(.spotlight-input-mouse) .button:global(.light)[disabled]:global(.spottable):focus .bg {
  opacity: 0.585;
}
:global(.spotlight-input-key) .button:global(.light)[disabled]:global(.spottable):focus .client,
:global(.spotlight-input-mouse) .button:global(.light)[disabled]:global(.spottable):focus .client {
  opacity: 0.4;
}
:global(.spotlight-input-touch) .button:global(.light)[disabled]:global(.spottable):active .bg {
  opacity: 0.585;
}
:global(.spotlight-input-touch) .button:global(.light)[disabled]:global(.spottable):active .client {
  opacity: 0.4;
}
.button:global(.game) {
  border-radius: 0;
}
.button:global(.game)::before {
  content: "";
  position: absolute;
  top: -0.25rem;
  right: -0.25rem;
  bottom: -0.25rem;
  left: -0.25rem;
  border-radius: 0;
}
.button:global(.game),
:global(.enact-a11y-high-contrast) .button:global(.game) {
  color: rgb(var(--sand-component-text-color-rgb, 230, 230, 230));
}
.button:global(.game) .bg {
  opacity: 0;
  background-color: var(--sand-focus-bg-color, #6d2fa1);
  will-change: box-shadow, transform, filter;
  background-color: var(--sand-component-bg-color, #2d224c);
  transition: transform 200ms ease-out;
  border-width: 0.125rem;
  border-style: solid;
  border-color: rgba(162, 115, 200, 0.5);
  border-radius: 0;
}
.button:global(.game).opaque {
  color: rgb(var(--sand-component-text-color-rgb, 230, 230, 230));
}
.button:global(.game).opaque .bg {
  opacity: 1;
}
.button:global(.game).transparent {
  color: rgb(var(--sand-text-color-rgb, 230, 230, 230));
}
.button:global(.game).transparent .bg {
  opacity: 0;
}
.button:global(.game).transparent.shadowed .client {
  text-shadow: 0.125rem 0.25rem 0.25rem rgb(var(--sand-shadow-color-rgb, 0, 0, 0), 30%);
}
.button:global(.game).red .client::before {
  background-color: #e1777e;
}
.button:global(.game).green .client::before {
  background-color: #7fd563;
}
.button:global(.game).yellow .client::before {
  background-color: #d3b85f;
}
.button:global(.game).blue .client::before {
  background-color: #5185c1;
}
.button:global(.game).small::before {
  content: "";
  position: absolute;
  top: -0.625rem;
  right: -0.625rem;
  bottom: -0.625rem;
  left: -0.625rem;
  border-radius: 0;
}
.button:global(.game).iconOnly .bg {
  border: 0.125rem;
  border-radius: 0.25rem;
}
.button:global(.game).roundBorder .bg {
  border-radius: calc(var(--button-height) / 2);
}
.button:global(.game).selected {
  color: rgb(var(--sand-component-text-color-rgb, 230, 230, 230));
}
.button:global(.game).selected .bg {
  background-color: var(--sand-selected-bg-color, #3e454d);
  filter: none;
}
.button:global(.game).selected.opaque .bg {
  opacity: 1;
}
.button:global(.game).selected.transparent .bg {
  opacity: 1;
}
:global(.spotlight-input-key) .button:global(.game):global(.spottable):focus,
:global(.spotlight-input-mouse) .button:global(.game):global(.spottable):focus {
  color: rgb(var(--sand-component-focus-text-color-rgb, 230, 230, 230));
}
:global(.spotlight-input-key) .button:global(.game):global(.spottable):focus .bg,
:global(.spotlight-input-mouse) .button:global(.game):global(.spottable):focus .bg {
  opacity: 1;
  box-shadow: 0 0.75rem 0.75rem rgb(var(--sand-shadow-color-rgb, 0, 0, 0), 30%);
  background-color: var(--sand-focus-bg-color, #6d2fa1);
  filter: none;
}
:global(.spotlight-input-key) .button:global(.game):global(.spottable):focus .client,
:global(.spotlight-input-mouse) .button:global(.game):global(.spottable):focus .client {
  text-shadow: none;
}
:global(.spotlight-input-key) .button:global(.game):global(.spottable):focus.iconOnly .bg,
:global(.spotlight-input-mouse) .button:global(.game):global(.spottable):focus.iconOnly .bg {
  background-color: rgba(139, 49, 215, 0.5);
}
:global(.spotlight-input-key) .button:global(.game):global(.spottable):focus.focusExpand .bg,
:global(.spotlight-input-mouse) .button:global(.game):global(.spottable):focus.focusExpand .bg {
  transform: scale(1.05);
}
:global(.spotlight-input-key) .button:global(.game):global(.spottable):focus.focusExpand.small .bg,
:global(.spotlight-input-mouse) .button:global(.game):global(.spottable):focus.focusExpand.small .bg {
  transform: scale(1.1);
}
:global(.spotlight-input-touch) .button:global(.game):global(.spottable):active {
  color: rgb(var(--sand-component-focus-text-color-rgb, 230, 230, 230));
}
:global(.spotlight-input-touch) .button:global(.game):global(.spottable):active .bg {
  opacity: 1;
  box-shadow: 0 0.75rem 0.75rem rgb(var(--sand-shadow-color-rgb, 0, 0, 0), 30%);
  background-color: var(--sand-focus-bg-color, #6d2fa1);
  filter: none;
}
:global(.spotlight-input-touch) .button:global(.game):global(.spottable):active .client {
  text-shadow: none;
}
:global(.spotlight-input-touch) .button:global(.game):global(.spottable):active.iconOnly .bg {
  background-color: rgba(139, 49, 215, 0.5);
}
:global(.spotlight-input-touch) .button:global(.game):global(.spottable):active.focusExpand .bg {
  transform: scale(1.05);
}
:global(.spotlight-input-touch) .button:global(.game):global(.spottable):active.focusExpand.small .bg {
  transform: scale(1.1);
}
:global(.spotlight-input-key) .button:global(.game):not([disabled]):global(.spottable):focus,
:global(.spotlight-input-mouse) .button:global(.game):not([disabled]):global(.spottable):focus {
  z-index: 1;
}
:global(.spotlight-input-key) .button:global(.game):not([disabled]):global(.spottable):focus.focusExpand.pressed .bg,
:global(.spotlight-input-mouse) .button:global(.game):not([disabled]):global(.spottable):focus.focusExpand.pressed .bg,
:global(.spotlight-input-key) .button:global(.game):not([disabled]):global(.spottable):focus.focusExpand:active .bg,
:global(.spotlight-input-mouse) .button:global(.game):not([disabled]):global(.spottable):focus.focusExpand:active .bg {
  transform: scale(1.02);
}
:global(.spotlight-input-key) .button:global(.game):not([disabled]):global(.spottable):focus.focusExpand.pressed.small .bg,
:global(.spotlight-input-mouse) .button:global(.game):not([disabled]):global(.spottable):focus.focusExpand.pressed.small .bg,
:global(.spotlight-input-key) .button:global(.game):not([disabled]):global(.spottable):focus.focusExpand:active.small .bg,
:global(.spotlight-input-mouse) .button:global(.game):not([disabled]):global(.spottable):focus.focusExpand:active.small .bg {
  transform: scale(1.04);
}
:global(.spotlight-input-touch) .button:global(.game):not([disabled]):global(.spottable):active {
  z-index: 1;
}
:global(.spotlight-input-touch) .button:global(.game):not([disabled]):global(.spottable):active.focusExpand.pressed .bg,
:global(.spotlight-input-touch) .button:global(.game):not([disabled]):global(.spottable):active.focusExpand:active .bg {
  transform: scale(1.02);
}
:global(.spotlight-input-touch) .button:global(.game):not([disabled]):global(.spottable):active.focusExpand.pressed.small .bg,
:global(.spotlight-input-touch) .button:global(.game):not([disabled]):global(.spottable):active.focusExpand:active.small .bg {
  transform: scale(1.04);
}
.button:global(.game)[disabled] {
  opacity: 1;
}
.button:global(.game)[disabled] .client {
  opacity: 0.28;
}
.button:global(.game)[disabled].opaque .bg {
  opacity: 0.28;
}
:global(.spotlight-input-key) .button:global(.game)[disabled]:global(.spottable):focus .bg,
:global(.spotlight-input-mouse) .button:global(.game)[disabled]:global(.spottable):focus .bg {
  opacity: 0.585;
}
:global(.spotlight-input-key) .button:global(.game)[disabled]:global(.spottable):focus .client,
:global(.spotlight-input-mouse) .button:global(.game)[disabled]:global(.spottable):focus .client {
  opacity: 0.4;
}
:global(.spotlight-input-touch) .button:global(.game)[disabled]:global(.spottable):active .bg {
  opacity: 0.585;
}
:global(.spotlight-input-touch) .button:global(.game)[disabled]:global(.spottable):active .client {
  opacity: 0.4;
}
:global(.green) .button:global(.game) {
  border-radius: 0;
}
:global(.green) .button:global(.game)::before {
  content: "";
  position: absolute;
  top: -0.25rem;
  right: -0.25rem;
  bottom: -0.25rem;
  left: -0.25rem;
  border-radius: 0;
}
:global(.green) .button:global(.game),
:global(.enact-a11y-high-contrast) :global(.green) .button:global(.game) {
  color: rgb(var(--sand-component-text-color-rgb, 230, 230, 230));
}
:global(.green) .button:global(.game) .bg {
  opacity: 0;
  background-color: var(--sand-focus-bg-color, #3ea07d);
  will-change: box-shadow, transform, filter;
  background-color: var(--sand-component-bg-color, #1F2C24);
  transition: transform 200ms ease-out;
  border-width: 0.125rem;
  border-style: solid;
  border-color: rgba(0, 255, 194, 0.5);
  border-radius: 0;
}
:global(.green) .button:global(.game).opaque {
  color: rgb(var(--sand-component-text-color-rgb, 230, 230, 230));
}
:global(.green) .button:global(.game).opaque .bg {
  opacity: 1;
}
:global(.green) .button:global(.game).transparent {
  color: rgb(var(--sand-text-color-rgb, 230, 230, 230));
}
:global(.green) .button:global(.game).transparent .bg {
  opacity: 0;
}
:global(.green) .button:global(.game).transparent.shadowed .client {
  text-shadow: 0.125rem 0.25rem 0.25rem rgb(var(--sand-shadow-color-rgb, 0, 0, 0), 30%);
}
:global(.green) .button:global(.game).red .client::before {
  background-color: #e1777e;
}
:global(.green) .button:global(.game).green .client::before {
  background-color: #7fd563;
}
:global(.green) .button:global(.game).yellow .client::before {
  background-color: #d3b85f;
}
:global(.green) .button:global(.game).blue .client::before {
  background-color: #5185c1;
}
:global(.green) .button:global(.game).small::before {
  content: "";
  position: absolute;
  top: -0.625rem;
  right: -0.625rem;
  bottom: -0.625rem;
  left: -0.625rem;
  border-radius: 0;
}
:global(.green) .button:global(.game).iconOnly .bg {
  border: 0.125rem;
  border-radius: 0.25rem;
}
:global(.green) .button:global(.game).roundBorder .bg {
  border-radius: calc(var(--button-height) / 2);
}
:global(.green) .button:global(.game).selected {
  color: rgb(var(--sand-component-text-color-rgb, 230, 230, 230));
}
:global(.green) .button:global(.game).selected .bg {
  background-color: var(--sand-selected-bg-color, #3e454d);
  filter: none;
}
:global(.green) .button:global(.game).selected.opaque .bg {
  opacity: 1;
}
:global(.green) .button:global(.game).selected.transparent .bg {
  opacity: 1;
}
:global(.spotlight-input-key) :global(.green) .button:global(.game):global(.spottable):focus,
:global(.spotlight-input-mouse) :global(.green) .button:global(.game):global(.spottable):focus {
  color: rgb(var(--sand-component-focus-text-color-rgb, 230, 230, 230));
}
:global(.spotlight-input-key) :global(.green) .button:global(.game):global(.spottable):focus .bg,
:global(.spotlight-input-mouse) :global(.green) .button:global(.game):global(.spottable):focus .bg {
  opacity: 1;
  box-shadow: 0 0.75rem 0.75rem rgb(var(--sand-shadow-color-rgb, 0, 0, 0), 30%);
  background-color: var(--sand-focus-bg-color, #3ea07d);
  filter: none;
}
:global(.spotlight-input-key) :global(.green) .button:global(.game):global(.spottable):focus .client,
:global(.spotlight-input-mouse) :global(.green) .button:global(.game):global(.spottable):focus .client {
  text-shadow: none;
}
:global(.spotlight-input-key) :global(.green) .button:global(.game):global(.spottable):focus.iconOnly .bg,
:global(.spotlight-input-mouse) :global(.green) .button:global(.game):global(.spottable):focus.iconOnly .bg {
  background-color: rgba(69, 193, 148, 0.5);
}
:global(.spotlight-input-key) :global(.green) .button:global(.game):global(.spottable):focus.focusExpand .bg,
:global(.spotlight-input-mouse) :global(.green) .button:global(.game):global(.spottable):focus.focusExpand .bg {
  transform: scale(1.05);
}
:global(.spotlight-input-key) :global(.green) .button:global(.game):global(.spottable):focus.focusExpand.small .bg,
:global(.spotlight-input-mouse) :global(.green) .button:global(.game):global(.spottable):focus.focusExpand.small .bg {
  transform: scale(1.1);
}
:global(.spotlight-input-touch) :global(.green) .button:global(.game):global(.spottable):active {
  color: rgb(var(--sand-component-focus-text-color-rgb, 230, 230, 230));
}
:global(.spotlight-input-touch) :global(.green) .button:global(.game):global(.spottable):active .bg {
  opacity: 1;
  box-shadow: 0 0.75rem 0.75rem rgb(var(--sand-shadow-color-rgb, 0, 0, 0), 30%);
  background-color: var(--sand-focus-bg-color, #3ea07d);
  filter: none;
}
:global(.spotlight-input-touch) :global(.green) .button:global(.game):global(.spottable):active .client {
  text-shadow: none;
}
:global(.spotlight-input-touch) :global(.green) .button:global(.game):global(.spottable):active.iconOnly .bg {
  background-color: rgba(69, 193, 148, 0.5);
}
:global(.spotlight-input-touch) :global(.green) .button:global(.game):global(.spottable):active.focusExpand .bg {
  transform: scale(1.05);
}
:global(.spotlight-input-touch) :global(.green) .button:global(.game):global(.spottable):active.focusExpand.small .bg {
  transform: scale(1.1);
}
:global(.spotlight-input-key) :global(.green) .button:global(.game):not([disabled]):global(.spottable):focus,
:global(.spotlight-input-mouse) :global(.green) .button:global(.game):not([disabled]):global(.spottable):focus {
  z-index: 1;
}
:global(.spotlight-input-key) :global(.green) .button:global(.game):not([disabled]):global(.spottable):focus.focusExpand.pressed .bg,
:global(.spotlight-input-mouse) :global(.green) .button:global(.game):not([disabled]):global(.spottable):focus.focusExpand.pressed .bg,
:global(.spotlight-input-key) :global(.green) .button:global(.game):not([disabled]):global(.spottable):focus.focusExpand:active .bg,
:global(.spotlight-input-mouse) :global(.green) .button:global(.game):not([disabled]):global(.spottable):focus.focusExpand:active .bg {
  transform: scale(1.02);
}
:global(.spotlight-input-key) :global(.green) .button:global(.game):not([disabled]):global(.spottable):focus.focusExpand.pressed.small .bg,
:global(.spotlight-input-mouse) :global(.green) .button:global(.game):not([disabled]):global(.spottable):focus.focusExpand.pressed.small .bg,
:global(.spotlight-input-key) :global(.green) .button:global(.game):not([disabled]):global(.spottable):focus.focusExpand:active.small .bg,
:global(.spotlight-input-mouse) :global(.green) .button:global(.game):not([disabled]):global(.spottable):focus.focusExpand:active.small .bg {
  transform: scale(1.04);
}
:global(.spotlight-input-touch) :global(.green) .button:global(.game):not([disabled]):global(.spottable):active {
  z-index: 1;
}
:global(.spotlight-input-touch) :global(.green) .button:global(.game):not([disabled]):global(.spottable):active.focusExpand.pressed .bg,
:global(.spotlight-input-touch) :global(.green) .button:global(.game):not([disabled]):global(.spottable):active.focusExpand:active .bg {
  transform: scale(1.02);
}
:global(.spotlight-input-touch) :global(.green) .button:global(.game):not([disabled]):global(.spottable):active.focusExpand.pressed.small .bg,
:global(.spotlight-input-touch) :global(.green) .button:global(.game):not([disabled]):global(.spottable):active.focusExpand:active.small .bg {
  transform: scale(1.04);
}
:global(.green) .button:global(.game)[disabled] {
  opacity: 1;
}
:global(.green) .button:global(.game)[disabled] .client {
  opacity: 0.28;
}
:global(.green) .button:global(.game)[disabled].opaque .bg {
  opacity: 0.28;
}
:global(.spotlight-input-key) :global(.green) .button:global(.game)[disabled]:global(.spottable):focus .bg,
:global(.spotlight-input-mouse) :global(.green) .button:global(.game)[disabled]:global(.spottable):focus .bg {
  opacity: 0.585;
}
:global(.spotlight-input-key) :global(.green) .button:global(.game)[disabled]:global(.spottable):focus .client,
:global(.spotlight-input-mouse) :global(.green) .button:global(.game)[disabled]:global(.spottable):focus .client {
  opacity: 0.4;
}
:global(.spotlight-input-touch) :global(.green) .button:global(.game)[disabled]:global(.spottable):active .bg {
  opacity: 0.585;
}
:global(.spotlight-input-touch) :global(.green) .button:global(.game)[disabled]:global(.spottable):active .client {
  opacity: 0.4;
}
:global(.orange) .button:global(.game) {
  border-radius: 0;
}
:global(.orange) .button:global(.game)::before {