@enact/limestone 1.3.0

package/Button/Button.module.css

@@ -0,0 +1,2518 @@
+.button {
+  font-family: "Limestone";
+  font-size: var(--primitive-font-size-60);
+  font-style: normal;
+  font-weight: var(--primitive-font-weight-semibold);
+  font-kerning: normal;
+  line-height: 2.5rem;
+  height: 2.75rem;
+  min-width: 6.25rem;
+  max-width: 25rem;
+  padding: 0 1.25rem;
+  margin: 0.75rem;
+  text-align: center;
+  vertical-align: middle;
+  --button-height: 2.75rem;
+}
+:global(.enact-locale-non-latin) .button {
+  font-family: "Limestone";
+}
+:global(.enact-locale-non-latin) .button {
+  font-family: "Limestone";
+  font-size: var(--primitive-font-size-54);
+  font-style: normal;
+  font-weight: var(--primitive-font-weight-bold);
+}
+.button:global(.largeText) {
+  font-size: var(--primitive-font-size-96);
+  height: 4rem;
+  min-width: 4rem;
+  line-height: 3.75rem;
+  --button-height: 4rem;
+}
+.button.focusStatic {
+  /* Defined to prevent global export */
+}
+.button.focusExpand {
+  margin: 0.75rem;
+}
+.button.centered .marquee {
+  flex-grow: 0;
+}
+.button .client {
+  padding: 0.125rem 0;
+  border-radius: inherit;
+}
+.button .icon {
+  flex-shrink: 0;
+  margin-left: 0;
+  margin-right: 0.5rem;
+}
+:global(.enact-locale-right-to-left) .button .icon {
+  margin-left: 0.5rem;
+  margin-right: 0;
+}
+.button.iconAfter .client {
+  flex-direction: row-reverse;
+}
+.button.iconAfter .icon {
+  margin-left: 0.5rem;
+  margin-right: 0;
+}
+:global(.enact-locale-right-to-left) .button.iconAfter .icon {
+  margin-left: 0;
+  margin-right: 0.5rem;
+}
+.button.red,
+.button.green,
+.button.yellow,
+.button.blue {
+  padding-left: 0.75rem;
+  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.75rem;
+}
+.button.red .client::before,
+.button.green .client::before,
+.button.yellow .client::before,
+.button.blue .client::before {
+  content: "";
+  position: absolute;
+  bottom: var(--primitive-spacing-12);
+  left: 50%;
+  width: 1.25rem;
+  height: 0.25rem;
+  border-radius: var(--semantic-radius-full);
+  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.75rem;
+  padding-inline-start: var(--primitive-spacing-24);
+}
+.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: calc((1.75rem + 1.25rem) / 2 * -1);
+  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: calc((1.75rem + 1.25rem) / 2 * -1);
+}
+.button .marquee {
+  flex-grow: 1;
+}
+.button.centered:not(.hasColor) .marquee {
+  flex-grow: 0;
+}
+.button:not(.hasIcon):not(.hasColor) .marquee {
+  text-align: inherit;
+}
+.button.minWidth {
+  min-width: 17.5rem;
+}
+.button.small {
+  font-family: "Limestone";
+  font-size: var(--primitive-font-size-54);
+  font-style: normal;
+  font-weight: var(--primitive-font-weight-semibold);
+  font-kerning: normal;
+  line-height: 2rem;
+  height: 2.25rem;
+  min-width: 5.5rem;
+  max-width: 21.25rem;
+  margin: var(--primitive-spacing-24);
+  padding-left: 1.25rem;
+  padding-right: 1.25rem;
+  --button-height: 2.25rem;
+}
+:global(.enact-locale-non-latin) .button.small {
+  font-family: "Limestone";
+}
+:global(.enact-locale-non-latin) .button.small {
+  font-family: "Limestone";
+  font-size: var(--primitive-font-size-48);
+  font-style: normal;
+  font-weight: var(--primitive-font-weight-bold);
+}
+.button.small.focusExpand {
+  margin: var(--primitive-spacing-24);
+}
+.button.small.minWidth {
+  min-width: 15rem;
+}
+.button.small .icon {
+  margin-left: 0;
+  margin-right: 0.5rem;
+}
+:global(.enact-locale-right-to-left) .button.small .icon {
+  margin-left: 0.5rem;
+  margin-right: 0;
+}
+.button.small.iconAfter .icon {
+  margin-left: 0.5rem;
+  margin-right: 0;
+}
+:global(.enact-locale-right-to-left) .button.small.iconAfter .icon {
+  margin-left: 0;
+  margin-right: 0.5rem;
+}
+.button.small.red,
+.button.small.green,
+.button.small.yellow,
+.button.small.blue {
+  padding-left: 0.625rem;
+  padding-right: 1.25rem;
+}
+: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: 1.25rem;
+  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: var(--primitive-spacing-12);
+  width: 1.0625rem;
+  height: 0.1875rem;
+}
+.button.small.red.minWidth .client,
+.button.small.green.minWidth .client,
+.button.small.yellow.minWidth .client,
+.button.small.blue.minWidth .client {
+  margin-inline-start: 1.5rem;
+}
+.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: calc((1.5rem + 1.0625rem) / 2 * -1);
+  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: calc((1.5rem + 1.0625rem) / 2 * -1);
+}
+.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.5rem;
+}
+.button.small:global(.largeText) {
+  font-size: var(--primitive-font-size-72);
+  height: 3rem;
+  min-width: 3rem;
+  line-height: 2.75rem;
+  --button-height: 3rem;
+}
+.button.small:global(.largeText).minWidth {
+  min-width: 15rem;
+}
+.button.iconOnly {
+  min-width: 2.75rem;
+}
+.button.iconOnly:global(.largeText) {
+  min-width: 4rem;
+}
+.button.iconOnly .client {
+  padding: 0;
+}
+.button.iconOnly .client .marquee {
+  display: none;
+}
+.button.iconOnly.large {
+  padding: 0 0.5rem;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+:global(.enact-locale-right-to-left) .button.iconOnly.large {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+.button.iconOnly.small {
+  min-width: 2.25rem;
+  padding: 0 0.375rem;
+  padding-left: 0.375rem;
+  padding-right: 0.375rem;
+}
+:global(.enact-locale-right-to-left) .button.iconOnly.small {
+  padding-left: 0.375rem;
+  padding-right: 0.375rem;
+}
+.button.iconOnly.small:global(.largeText) {
+  min-width: 3rem;
+}
+.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.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 var(--primitive-spacing-24);
+}
+.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: var(--semantic-radius-button);
+}
+.button:global(.neutral)::before {
+  content: "";
+  position: absolute;
+  top: -0.375rem;
+  right: -0.375rem;
+  bottom: -0.375rem;
+  left: -0.375rem;
+  border-radius: var(--semantic-radius-button);
+}
+.button:global(.neutral),
+:global(.enact-a11y-high-contrast) .button:global(.neutral) {
+  color: var(--semantic-color-on-surface-main);
+}
+.button:global(.neutral) .bg {
+  opacity: 0;
+  background-color: var(--semantic-color-surface-default-focused);
+  will-change: box-shadow, transform, filter;
+  background-color: var(--semantic-color-surface-default);
+  transition: transform 200ms ease-out;
+  border-width: '';
+  border-style: none;
+  border-color: var(--semantic-color-stroke-button-outline);
+  border-radius: var(--semantic-radius-button);
+}
+.button:global(.neutral).bordered .bg {
+  background-color: color(from var(--semantic-color-surface-default) srgb r g b / 0.5);
+  border: 0.125rem solid var(--semantic-color-stroke-button-outline);
+}
+.button:global(.neutral).bordered .client {
+  color: var(--semantic-color-on-surface-main);
+}
+.button:global(.neutral).opaque {
+  color: var(--semantic-color-on-surface-main);
+}
+.button:global(.neutral).opaque .bg {
+  opacity: 1;
+}
+.button:global(.neutral).opaque .icon {
+  color: var(--semantic-color-on-surface-main);
+}
+.button:global(.neutral).transparent {
+  color: var(--semantic-color-on-background-main);
+}
+.button:global(.neutral).transparent .bg {
+  opacity: 0;
+}
+.button:global(.neutral).transparent.shadowed .client {
+  text-shadow: 0.125rem 0.25rem 0.25rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
+}
+.button:global(.neutral).transparent .icon {
+  color: var(--semantic-color-on-background-main);
+}
+.button:global(.neutral).red .client::before {
+  background-color: #ff6d78;
+}
+.button:global(.neutral).green .client::before {
+  background-color: #93d371;
+}
+.button:global(.neutral).yellow .client::before {
+  background-color: #ffc600;
+}
+.button:global(.neutral).blue .client::before {
+  background-color: #0084ff;
+}
+.button:global(.neutral).small::before {
+  content: "";
+  position: absolute;
+  top: -0.625rem;
+  right: -0.625rem;
+  bottom: -0.625rem;
+  left: -0.625rem;
+  border-radius: var(--semantic-radius-button);
+}
+.button:global(.neutral).iconOnly .bg {
+  border: '';
+  border-radius: '';
+}
+.button:global(.neutral).roundBorder .bg {
+  border-radius: calc(var(--button-height) / 2);
+}
+.button:global(.neutral).selected .bg {
+  background-color: var(--semantic-color-surface-default-selected);
+  filter: none;
+}
+.button:global(.neutral).selected .client {
+  color: var(--semantic-color-on-surface-main-selected);
+}
+.button:global(.neutral).selected .icon {
+  color: var(--semantic-color-on-surface-main-selected);
+}
+.button:global(.neutral).selected.bordered .bg {
+  background-color: color(from var(--semantic-color-surface-default-selected) srgb r g b / 0.5);
+  filter: none;
+  border: 0.125rem solid var(--semantic-color-stroke-main-selected);
+}
+.button:global(.neutral).selected.bordered .client {
+  color: var(--semantic-color-on-surface-main-selected);
+}
+.button:global(.neutral).selected.opaque .bg {
+  opacity: 1;
+}
+.button:global(.neutral).selected.transparent .bg {
+  background-color: var(--semantic-color-surface-default-selected);
+  filter: none;
+  opacity: 1;
+}
+.button:global(.neutral).selected.transparent .client {
+  color: var(--semantic-color-on-surface-main-selected);
+}
+.button:global(.neutral).selected.transparent .icon {
+  color: var(--semantic-color-on-surface-main-selected);
+}
+: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.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
+  background-color: var(--semantic-color-surface-default-focused);
+  filter: none;
+}
+:global(.spotlight-input-key) .button:global(.neutral):global(.spottable):focus .client,
+:global(.spotlight-input-mouse) .button:global(.neutral):global(.spottable):focus .client {
+  color: var(--semantic-color-on-surface-main-focused);
+}
+:global(.spotlight-input-key) .button:global(.neutral):global(.spottable):focus .icon,
+:global(.spotlight-input-mouse) .button:global(.neutral):global(.spottable):focus .icon {
+  color: var(--semantic-color-on-surface-main-focused);
+}
+:global(.spotlight-input-key) .button:global(.neutral):global(.spottable):focus.bordered .bg,
+:global(.spotlight-input-mouse) .button:global(.neutral):global(.spottable):focus.bordered .bg {
+  opacity: 1;
+  box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
+  background-color: var(--semantic-color-surface-default-focused);
+  filter: none;
+}
+:global(.spotlight-input-key) .button:global(.neutral):global(.spottable):focus.bordered .client,
+:global(.spotlight-input-mouse) .button:global(.neutral):global(.spottable):focus.bordered .client {
+  color: var(--semantic-color-on-surface-main-focused);
+}
+:global(.spotlight-input-key) .button:global(.neutral):global(.spottable):focus.transparent .bg,
+:global(.spotlight-input-mouse) .button:global(.neutral):global(.spottable):focus.transparent .bg {
+  opacity: 1;
+  box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
+  background-color: var(--semantic-color-surface-default-focused);
+  filter: none;
+}
+:global(.spotlight-input-key) .button:global(.neutral):global(.spottable):focus.transparent .client,
+:global(.spotlight-input-mouse) .button:global(.neutral):global(.spottable):focus.transparent .client {
+  color: var(--semantic-color-on-surface-main-focused);
+}
+:global(.spotlight-input-key) .button:global(.neutral):global(.spottable):focus.transparent .icon,
+:global(.spotlight-input-mouse) .button:global(.neutral):global(.spottable):focus.transparent .icon {
+  color: var(--semantic-color-on-surface-main-focused);
+}
+: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.1);
+}
+: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 .bg {
+  opacity: 1;
+  box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
+  background-color: var(--semantic-color-surface-default-focused);
+  filter: none;
+}
+:global(.spotlight-input-touch) .button:global(.neutral):global(.spottable):active .client {
+  color: var(--semantic-color-on-surface-main-focused);
+}
+:global(.spotlight-input-touch) .button:global(.neutral):global(.spottable):active .icon {
+  color: var(--semantic-color-on-surface-main-focused);
+}
+:global(.spotlight-input-touch) .button:global(.neutral):global(.spottable):active.bordered .bg {
+  opacity: 1;
+  box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
+  background-color: var(--semantic-color-surface-default-focused);
+  filter: none;
+}
+:global(.spotlight-input-touch) .button:global(.neutral):global(.spottable):active.bordered .client {
+  color: var(--semantic-color-on-surface-main-focused);
+}
+:global(.spotlight-input-touch) .button:global(.neutral):global(.spottable):active.transparent .bg {
+  opacity: 1;
+  box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
+  background-color: var(--semantic-color-surface-default-focused);
+  filter: none;
+}
+:global(.spotlight-input-touch) .button:global(.neutral):global(.spottable):active.transparent .client {
+  color: var(--semantic-color-on-surface-main-focused);
+}
+:global(.spotlight-input-touch) .button:global(.neutral):global(.spottable):active.transparent .icon {
+  color: var(--semantic-color-on-surface-main-focused);
+}
+: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.1);
+}
+: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);
+}
+:global(.spotlight-input-key) :global(.noAnimation) .button:global(.neutral):global(.spottable):focus .bg,
+:global(.spotlight-input-mouse) :global(.noAnimation) .button:global(.neutral):global(.spottable):focus .bg {
+  opacity: 1;
+  box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
+  background-color: var(--semantic-color-surface-default-focused);
+  filter: none;
+  box-shadow: none;
+}
+:global(.spotlight-input-key) :global(.noAnimation) .button:global(.neutral):global(.spottable):focus.bordered .bg,
+:global(.spotlight-input-mouse) :global(.noAnimation) .button:global(.neutral):global(.spottable):focus.bordered .bg {
+  opacity: 1;
+  box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
+  background-color: var(--semantic-color-surface-default-focused);
+  filter: none;
+  box-shadow: none;
+}
+:global(.spotlight-input-key) :global(.noAnimation) .button:global(.neutral):global(.spottable):focus.transparent .bg,
+:global(.spotlight-input-mouse) :global(.noAnimation) .button:global(.neutral):global(.spottable):focus.transparent .bg {
+  opacity: 1;
+  box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
+  background-color: var(--semantic-color-surface-default-focused);
+  filter: none;
+  box-shadow: none;
+}
+:global(.spotlight-input-key) :global(.noAnimation) .button:global(.neutral):global(.spottable):focus.focusExpand .bg,
+:global(.spotlight-input-mouse) :global(.noAnimation) .button:global(.neutral):global(.spottable):focus.focusExpand .bg {
+  transform: none;
+}
+:global(.spotlight-input-key) :global(.noAnimation) .button:global(.neutral):global(.spottable):focus.focusExpand.small .bg,
+:global(.spotlight-input-mouse) :global(.noAnimation) .button:global(.neutral):global(.spottable):focus.focusExpand.small .bg {
+  transform: none;
+}
+:global(.spotlight-input-key) :global(.noAnimation) .button:global(.neutral):global(.spottable):focus.focusExpand.pressed .bg,
+:global(.spotlight-input-mouse) :global(.noAnimation) .button:global(.neutral):global(.spottable):focus.focusExpand.pressed .bg,
+:global(.spotlight-input-key) :global(.noAnimation) .button:global(.neutral):global(.spottable):focus.focusExpand:active .bg,
+:global(.spotlight-input-mouse) :global(.noAnimation) .button:global(.neutral):global(.spottable):focus.focusExpand:active .bg {
+  transform: none;
+}
+:global(.spotlight-input-key) :global(.noAnimation) .button:global(.neutral):global(.spottable):focus.focusExpand.pressed.small .bg,
+:global(.spotlight-input-mouse) :global(.noAnimation) .button:global(.neutral):global(.spottable):focus.focusExpand.pressed.small .bg,
+:global(.spotlight-input-key) :global(.noAnimation) .button:global(.neutral):global(.spottable):focus.focusExpand:active.small .bg,
+:global(.spotlight-input-mouse) :global(.noAnimation) .button:global(.neutral):global(.spottable):focus.focusExpand:active.small .bg {
+  transform: none;
+}
+:global(.spotlight-input-touch) :global(.noAnimation) .button:global(.neutral):global(.spottable):active .bg {
+  opacity: 1;
+  box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
+  background-color: var(--semantic-color-surface-default-focused);
+  filter: none;
+  box-shadow: none;
+}
+:global(.spotlight-input-touch) :global(.noAnimation) .button:global(.neutral):global(.spottable):active.bordered .bg {
+  opacity: 1;
+  box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
+  background-color: var(--semantic-color-surface-default-focused);
+  filter: none;
+  box-shadow: none;
+}
+:global(.spotlight-input-touch) :global(.noAnimation) .button:global(.neutral):global(.spottable):active.transparent .bg {
+  opacity: 1;
+  box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
+  background-color: var(--semantic-color-surface-default-focused);
+  filter: none;
+  box-shadow: none;
+}
+:global(.spotlight-input-touch) :global(.noAnimation) .button:global(.neutral):global(.spottable):active.focusExpand .bg {
+  transform: none;
+}
+:global(.spotlight-input-touch) :global(.noAnimation) .button:global(.neutral):global(.spottable):active.focusExpand.small .bg {
+  transform: none;
+}
+:global(.spotlight-input-touch) :global(.noAnimation) .button:global(.neutral):global(.spottable):active.focusExpand.pressed .bg,
+:global(.spotlight-input-touch) :global(.noAnimation) .button:global(.neutral):global(.spottable):active.focusExpand:active .bg {
+  transform: none;
+}
+:global(.spotlight-input-touch) :global(.noAnimation) .button:global(.neutral):global(.spottable):active.focusExpand.pressed.small .bg,
+:global(.spotlight-input-touch) :global(.noAnimation) .button:global(.neutral):global(.spottable):active.focusExpand:active.small .bg {
+  transform: none;
+}
+.button:global(.neutral)[disabled] {
+  opacity: 1;
+}
+.button:global(.neutral)[disabled] .client {
+  opacity: 0.3;
+}
+.button:global(.neutral)[disabled].opaque .bg {
+  opacity: 0.3;
+}
+.button:global(.neutral)[disabled].bordered .bg {
+  background-color: color(from var(--semantic-color-surface-default) srgb r g b / 0.5);
+}
+.button:global(.neutral)[disabled].transparent.selected .bg {
+  opacity: 0.3;
+}
+.button:global(.neutral)[disabled].bordered.selected .bg {
+  background-color: color(from var(--semantic-color-surface-default-selected) srgb r g b / 0.5);
+  filter: none;
+}
+:global(.spotlight-input-key) .button:global(.neutral)[disabled]:global(.spottable):focus .bg,
+:global(.spotlight-input-mouse) .button:global(.neutral)[disabled]:global(.spottable):focus .bg {
+  background-color: var(--semantic-color-surface-default-disabled-focused);
+}
+:global(.spotlight-input-key) .button:global(.neutral)[disabled]:global(.spottable):focus.bordered .bg,
+:global(.spotlight-input-mouse) .button:global(.neutral)[disabled]:global(.spottable):focus.bordered .bg {
+  border: 0.125rem solid var(--semantic-color-surface-default-disabled-focused);
+}
+: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 {
+  background-color: var(--semantic-color-surface-default-disabled-focused);
+}
+:global(.spotlight-input-touch) .button:global(.neutral)[disabled]:global(.spottable):active.bordered .bg {
+  border: 0.125rem solid var(--semantic-color-surface-default-disabled-focused);
+}
+: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: var(--semantic-radius-button);
+}
+:global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast)::before {
+  content: "";
+  position: absolute;
+  top: -0.375rem;
+  right: -0.375rem;
+  bottom: -0.375rem;
+  left: -0.375rem;
+  border-radius: var(--semantic-radius-button);
+}
+: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: var(--semantic-color-on-surface-main);
+}
+:global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast) .bg {
+  opacity: 0;
+  background-color: var(--semantic-color-surface-default-focused);
+  will-change: box-shadow, transform, filter;
+  background-color: var(--semantic-color-surface-default);
+  transition: transform 200ms ease-out;
+  border-width: '';
+  border-style: none;
+  border-color: var(--semantic-color-stroke-button-outline);
+  border-radius: var(--semantic-radius-button);
+}
+:global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast).bordered .bg {
+  background-color: color(from var(--semantic-color-surface-default) srgb r g b / 0.5);
+  border: 0.125rem solid var(--semantic-color-stroke-button-outline);
+}
+:global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast).bordered .client {
+  color: var(--semantic-color-on-surface-main);
+}
+:global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast).opaque {
+  color: var(--semantic-color-on-surface-main);
+}
+:global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast).opaque .bg {
+  opacity: 1;
+}
+:global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast).opaque .icon {
+  color: var(--semantic-color-on-surface-main);
+}
+:global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast).transparent {
+  color: var(--semantic-color-on-background-main);
+}
+: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 color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
+}
+:global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast).transparent .icon {
+  color: var(--semantic-color-on-background-main);
+}
+:global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast).red .client::before {
+  background-color: #ff6d78;
+}
+:global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast).green .client::before {
+  background-color: #93d371;
+}
+:global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast).yellow .client::before {
+  background-color: #ffc600;
+}
+:global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast).blue .client::before {
+  background-color: #0084ff;
+}
+: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: var(--semantic-radius-button);
+}
+: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 .bg {
+  background-color: var(--semantic-color-surface-default-selected);
+  filter: none;
+}
+:global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast).selected .client {
+  color: var(--semantic-color-on-surface-main-selected);
+}
+:global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast).selected .icon {
+  color: var(--semantic-color-on-surface-main-selected);
+}
+:global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast).selected.bordered .bg {
+  background-color: color(from var(--semantic-color-surface-default-selected) srgb r g b / 0.5);
+  filter: none;
+  border: 0.125rem solid var(--semantic-color-stroke-main-selected);
+}
+:global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast).selected.bordered .client {
+  color: var(--semantic-color-on-surface-main-selected);
+}
+: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 {
+  background-color: var(--semantic-color-surface-default-selected);
+  filter: none;
+  opacity: 1;
+}
+:global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast).selected.transparent .client {
+  color: var(--semantic-color-on-surface-main-selected);
+}
+:global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast).selected.transparent .icon {
+  color: var(--semantic-color-on-surface-main-selected);
+}
+: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.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
+  background-color: var(--semantic-color-surface-default-focused);
+  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 {
+  color: var(--semantic-color-on-surface-main-focused);
+}
+:global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast):global(.spottable):focus .icon,
+:global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast):global(.spottable):focus .icon {
+  color: var(--semantic-color-on-surface-main-focused);
+}
+:global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast):global(.spottable):focus.bordered .bg,
+:global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast):global(.spottable):focus.bordered .bg {
+  opacity: 1;
+  box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
+  background-color: var(--semantic-color-surface-default-focused);
+  filter: none;
+}
+:global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast):global(.spottable):focus.bordered .client,
+:global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast):global(.spottable):focus.bordered .client {
+  color: var(--semantic-color-on-surface-main-focused);
+}
+:global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast):global(.spottable):focus.transparent .bg,
+:global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast):global(.spottable):focus.transparent .bg {
+  opacity: 1;
+  box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
+  background-color: var(--semantic-color-surface-default-focused);
+  filter: none;
+}
+:global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast):global(.spottable):focus.transparent .client,
+:global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast):global(.spottable):focus.transparent .client {
+  color: var(--semantic-color-on-surface-main-focused);
+}
+:global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast):global(.spottable):focus.transparent .icon,
+:global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast):global(.spottable):focus.transparent .icon {
+  color: var(--semantic-color-on-surface-main-focused);
+}
+: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.1);
+}
+: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 .bg {
+  opacity: 1;
+  box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
+  background-color: var(--semantic-color-surface-default-focused);
+  filter: none;
+}
+:global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast):global(.spottable):active .client {
+  color: var(--semantic-color-on-surface-main-focused);
+}
+:global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast):global(.spottable):active .icon {
+  color: var(--semantic-color-on-surface-main-focused);
+}
+:global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast):global(.spottable):active.bordered .bg {
+  opacity: 1;
+  box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
+  background-color: var(--semantic-color-surface-default-focused);
+  filter: none;
+}
+:global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast):global(.spottable):active.bordered .client {
+  color: var(--semantic-color-on-surface-main-focused);
+}
+:global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast):global(.spottable):active.transparent .bg {
+  opacity: 1;
+  box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
+  background-color: var(--semantic-color-surface-default-focused);
+  filter: none;
+}
+:global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast):global(.spottable):active.transparent .client {
+  color: var(--semantic-color-on-surface-main-focused);
+}
+:global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast):global(.spottable):active.transparent .icon {
+  color: var(--semantic-color-on-surface-main-focused);
+}
+: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.1);
+}
+: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(.spotlight-input-key) :global(.noAnimation) :global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast):global(.spottable):focus .bg,
+:global(.spotlight-input-mouse) :global(.noAnimation) :global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast):global(.spottable):focus .bg {
+  opacity: 1;
+  box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
+  background-color: var(--semantic-color-surface-default-focused);
+  filter: none;
+  box-shadow: none;
+}
+:global(.spotlight-input-key) :global(.noAnimation) :global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast):global(.spottable):focus.bordered .bg,
+:global(.spotlight-input-mouse) :global(.noAnimation) :global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast):global(.spottable):focus.bordered .bg {
+  opacity: 1;
+  box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
+  background-color: var(--semantic-color-surface-default-focused);
+  filter: none;
+  box-shadow: none;
+}
+:global(.spotlight-input-key) :global(.noAnimation) :global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast):global(.spottable):focus.transparent .bg,
+:global(.spotlight-input-mouse) :global(.noAnimation) :global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast):global(.spottable):focus.transparent .bg {
+  opacity: 1;
+  box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
+  background-color: var(--semantic-color-surface-default-focused);
+  filter: none;
+  box-shadow: none;
+}
+:global(.spotlight-input-key) :global(.noAnimation) :global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast):global(.spottable):focus.focusExpand .bg,
+:global(.spotlight-input-mouse) :global(.noAnimation) :global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast):global(.spottable):focus.focusExpand .bg {
+  transform: none;
+}
+:global(.spotlight-input-key) :global(.noAnimation) :global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast):global(.spottable):focus.focusExpand.small .bg,
+:global(.spotlight-input-mouse) :global(.noAnimation) :global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast):global(.spottable):focus.focusExpand.small .bg {
+  transform: none;
+}
+:global(.spotlight-input-key) :global(.noAnimation) :global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast):global(.spottable):focus.focusExpand.pressed .bg,
+:global(.spotlight-input-mouse) :global(.noAnimation) :global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast):global(.spottable):focus.focusExpand.pressed .bg,
+:global(.spotlight-input-key) :global(.noAnimation) :global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast):global(.spottable):focus.focusExpand:active .bg,
+:global(.spotlight-input-mouse) :global(.noAnimation) :global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast):global(.spottable):focus.focusExpand:active .bg {
+  transform: none;
+}
+:global(.spotlight-input-key) :global(.noAnimation) :global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast):global(.spottable):focus.focusExpand.pressed.small .bg,
+:global(.spotlight-input-mouse) :global(.noAnimation) :global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast):global(.spottable):focus.focusExpand.pressed.small .bg,
+:global(.spotlight-input-key) :global(.noAnimation) :global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast):global(.spottable):focus.focusExpand:active.small .bg,
+:global(.spotlight-input-mouse) :global(.noAnimation) :global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast):global(.spottable):focus.focusExpand:active.small .bg {
+  transform: none;
+}
+:global(.spotlight-input-touch) :global(.noAnimation) :global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast):global(.spottable):active .bg {
+  opacity: 1;
+  box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
+  background-color: var(--semantic-color-surface-default-focused);
+  filter: none;
+  box-shadow: none;
+}
+:global(.spotlight-input-touch) :global(.noAnimation) :global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast):global(.spottable):active.bordered .bg {
+  opacity: 1;
+  box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
+  background-color: var(--semantic-color-surface-default-focused);
+  filter: none;
+  box-shadow: none;
+}
+:global(.spotlight-input-touch) :global(.noAnimation) :global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast):global(.spottable):active.transparent .bg {
+  opacity: 1;
+  box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
+  background-color: var(--semantic-color-surface-default-focused);
+  filter: none;
+  box-shadow: none;
+}
+:global(.spotlight-input-touch) :global(.noAnimation) :global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast):global(.spottable):active.focusExpand .bg {
+  transform: none;
+}
+:global(.spotlight-input-touch) :global(.noAnimation) :global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast):global(.spottable):active.focusExpand.small .bg {
+  transform: none;
+}
+:global(.spotlight-input-touch) :global(.noAnimation) :global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast):global(.spottable):active.focusExpand.pressed .bg,
+:global(.spotlight-input-touch) :global(.noAnimation) :global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast):global(.spottable):active.focusExpand:active .bg {
+  transform: none;
+}
+:global(.spotlight-input-touch) :global(.noAnimation) :global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast):global(.spottable):active.focusExpand.pressed.small .bg,
+:global(.spotlight-input-touch) :global(.noAnimation) :global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast):global(.spottable):active.focusExpand:active.small .bg {
+  transform: none;
+}
+: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.3;
+}
+:global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast)[disabled].opaque .bg {
+  opacity: 0.3;
+}
+:global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast)[disabled].bordered .bg {
+  background-color: color(from var(--semantic-color-surface-default) srgb r g b / 0.5);
+}
+:global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast)[disabled].transparent.selected .bg {
+  opacity: 0.3;
+}
+:global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast)[disabled].bordered.selected .bg {
+  background-color: color(from var(--semantic-color-surface-default-selected) srgb r g b / 0.5);
+  filter: none;
+}
+: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 {
+  background-color: var(--semantic-color-surface-default-disabled-focused);
+}
+:global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast)[disabled]:global(.spottable):focus.bordered .bg,
+:global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast)[disabled]:global(.spottable):focus.bordered .bg {
+  border: 0.125rem solid var(--semantic-color-surface-default-disabled-focused);
+}
+: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 {
+  background-color: var(--semantic-color-surface-default-disabled-focused);
+}
+:global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast)[disabled]:global(.spottable):active.bordered .bg {
+  border: 0.125rem solid var(--semantic-color-surface-default-disabled-focused);
+}
+: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: var(--semantic-radius-button);
+}
+.button:global(.light)::before {
+  content: "";
+  position: absolute;
+  top: -0.375rem;
+  right: -0.375rem;
+  bottom: -0.375rem;
+  left: -0.375rem;
+  border-radius: var(--semantic-radius-button);
+}
+.button:global(.light),
+:global(.enact-a11y-high-contrast) .button:global(.light) {
+  color: var(--semantic-color-on-surface-main);
+}
+.button:global(.light) .bg {
+  opacity: 0;
+  background-color: var(--semantic-color-surface-default-focused);
+  will-change: box-shadow, transform, filter;
+  background-color: var(--semantic-color-surface-default);
+  transition: transform 200ms ease-out;
+  border-width: '';
+  border-style: none;
+  border-color: var(--semantic-color-stroke-button-outline);
+  border-radius: var(--semantic-radius-button);
+}
+.button:global(.light).bordered .bg {
+  background-color: color(from var(--semantic-color-surface-default) srgb r g b / 0.5);
+  border: 0.125rem solid var(--semantic-color-stroke-button-outline);
+}
+.button:global(.light).bordered .client {
+  color: var(--semantic-color-on-surface-main);
+}
+.button:global(.light).opaque {
+  color: var(--semantic-color-on-surface-main);
+}
+.button:global(.light).opaque .bg {
+  opacity: 1;
+}
+.button:global(.light).opaque .icon {
+  color: var(--semantic-color-on-surface-main);
+}
+.button:global(.light).transparent {
+  color: var(--semantic-color-on-background-main);
+}
+.button:global(.light).transparent .bg {
+  opacity: 0;
+}
+.button:global(.light).transparent.shadowed .client {
+  text-shadow: 0.125rem 0.25rem 0.25rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
+}
+.button:global(.light).transparent .icon {
+  color: var(--semantic-color-on-background-main);
+}
+.button:global(.light).red .client::before {
+  background-color: #ff6d78;
+}
+.button:global(.light).green .client::before {
+  background-color: #93d371;
+}
+.button:global(.light).yellow .client::before {
+  background-color: #ffc600;
+}
+.button:global(.light).blue .client::before {
+  background-color: #0084ff;
+}
+.button:global(.light).small::before {
+  content: "";
+  position: absolute;
+  top: -0.625rem;
+  right: -0.625rem;
+  bottom: -0.625rem;
+  left: -0.625rem;
+  border-radius: var(--semantic-radius-button);
+}
+.button:global(.light).iconOnly .bg {
+  border: '';
+  border-radius: '';
+}
+.button:global(.light).roundBorder .bg {
+  border-radius: calc(var(--button-height) / 2);
+}
+.button:global(.light).selected .bg {
+  background-color: var(--semantic-color-surface-default-selected);
+  filter: none;
+}
+.button:global(.light).selected .client {
+  color: var(--semantic-color-on-surface-main-selected);
+}
+.button:global(.light).selected .icon {
+  color: var(--semantic-color-on-surface-main-selected);
+}
+.button:global(.light).selected.bordered .bg {
+  background-color: color(from var(--semantic-color-surface-default-selected) srgb r g b / 0.5);
+  filter: none;
+  border: 0.125rem solid var(--semantic-color-stroke-main-selected);
+}
+.button:global(.light).selected.bordered .client {
+  color: var(--semantic-color-on-surface-main-selected);
+}
+.button:global(.light).selected.opaque .bg {
+  opacity: 1;
+}
+.button:global(.light).selected.transparent .bg {
+  background-color: var(--semantic-color-surface-default-selected);
+  filter: none;
+  opacity: 1;
+}
+.button:global(.light).selected.transparent .client {
+  color: var(--semantic-color-on-surface-main-selected);
+}
+.button:global(.light).selected.transparent .icon {
+  color: var(--semantic-color-on-surface-main-selected);
+}
+: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.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
+  background-color: var(--semantic-color-surface-default-focused);
+  filter: none;
+}
+:global(.spotlight-input-key) .button:global(.light):global(.spottable):focus .client,
+:global(.spotlight-input-mouse) .button:global(.light):global(.spottable):focus .client {
+  color: var(--semantic-color-on-surface-main-focused);
+}
+:global(.spotlight-input-key) .button:global(.light):global(.spottable):focus .icon,
+:global(.spotlight-input-mouse) .button:global(.light):global(.spottable):focus .icon {
+  color: var(--semantic-color-on-surface-main-focused);
+}
+:global(.spotlight-input-key) .button:global(.light):global(.spottable):focus.bordered .bg,
+:global(.spotlight-input-mouse) .button:global(.light):global(.spottable):focus.bordered .bg {
+  opacity: 1;
+  box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
+  background-color: var(--semantic-color-surface-default-focused);
+  filter: none;
+}
+:global(.spotlight-input-key) .button:global(.light):global(.spottable):focus.bordered .client,
+:global(.spotlight-input-mouse) .button:global(.light):global(.spottable):focus.bordered .client {
+  color: var(--semantic-color-on-surface-main-focused);
+}
+:global(.spotlight-input-key) .button:global(.light):global(.spottable):focus.transparent .bg,
+:global(.spotlight-input-mouse) .button:global(.light):global(.spottable):focus.transparent .bg {
+  opacity: 1;
+  box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
+  background-color: var(--semantic-color-surface-default-focused);
+  filter: none;
+}
+:global(.spotlight-input-key) .button:global(.light):global(.spottable):focus.transparent .client,
+:global(.spotlight-input-mouse) .button:global(.light):global(.spottable):focus.transparent .client {
+  color: var(--semantic-color-on-surface-main-focused);
+}
+:global(.spotlight-input-key) .button:global(.light):global(.spottable):focus.transparent .icon,
+:global(.spotlight-input-mouse) .button:global(.light):global(.spottable):focus.transparent .icon {
+  color: var(--semantic-color-on-surface-main-focused);
+}
+: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.1);
+}
+: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 .bg {
+  opacity: 1;
+  box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
+  background-color: var(--semantic-color-surface-default-focused);
+  filter: none;
+}
+:global(.spotlight-input-touch) .button:global(.light):global(.spottable):active .client {
+  color: var(--semantic-color-on-surface-main-focused);
+}
+:global(.spotlight-input-touch) .button:global(.light):global(.spottable):active .icon {
+  color: var(--semantic-color-on-surface-main-focused);
+}
+:global(.spotlight-input-touch) .button:global(.light):global(.spottable):active.bordered .bg {
+  opacity: 1;
+  box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
+  background-color: var(--semantic-color-surface-default-focused);
+  filter: none;
+}
+:global(.spotlight-input-touch) .button:global(.light):global(.spottable):active.bordered .client {
+  color: var(--semantic-color-on-surface-main-focused);
+}
+:global(.spotlight-input-touch) .button:global(.light):global(.spottable):active.transparent .bg {
+  opacity: 1;
+  box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
+  background-color: var(--semantic-color-surface-default-focused);
+  filter: none;
+}
+:global(.spotlight-input-touch) .button:global(.light):global(.spottable):active.transparent .client {
+  color: var(--semantic-color-on-surface-main-focused);
+}
+:global(.spotlight-input-touch) .button:global(.light):global(.spottable):active.transparent .icon {
+  color: var(--semantic-color-on-surface-main-focused);
+}
+: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.1);
+}
+: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);
+}
+:global(.spotlight-input-key) :global(.noAnimation) .button:global(.light):global(.spottable):focus .bg,
+:global(.spotlight-input-mouse) :global(.noAnimation) .button:global(.light):global(.spottable):focus .bg {
+  opacity: 1;
+  box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
+  background-color: var(--semantic-color-surface-default-focused);
+  filter: none;
+  box-shadow: none;
+}
+:global(.spotlight-input-key) :global(.noAnimation) .button:global(.light):global(.spottable):focus.bordered .bg,
+:global(.spotlight-input-mouse) :global(.noAnimation) .button:global(.light):global(.spottable):focus.bordered .bg {
+  opacity: 1;
+  box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
+  background-color: var(--semantic-color-surface-default-focused);
+  filter: none;
+  box-shadow: none;
+}
+:global(.spotlight-input-key) :global(.noAnimation) .button:global(.light):global(.spottable):focus.transparent .bg,
+:global(.spotlight-input-mouse) :global(.noAnimation) .button:global(.light):global(.spottable):focus.transparent .bg {
+  opacity: 1;
+  box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
+  background-color: var(--semantic-color-surface-default-focused);
+  filter: none;
+  box-shadow: none;
+}
+:global(.spotlight-input-key) :global(.noAnimation) .button:global(.light):global(.spottable):focus.focusExpand .bg,
+:global(.spotlight-input-mouse) :global(.noAnimation) .button:global(.light):global(.spottable):focus.focusExpand .bg {
+  transform: none;
+}
+:global(.spotlight-input-key) :global(.noAnimation) .button:global(.light):global(.spottable):focus.focusExpand.small .bg,
+:global(.spotlight-input-mouse) :global(.noAnimation) .button:global(.light):global(.spottable):focus.focusExpand.small .bg {
+  transform: none;
+}
+:global(.spotlight-input-key) :global(.noAnimation) .button:global(.light):global(.spottable):focus.focusExpand.pressed .bg,
+:global(.spotlight-input-mouse) :global(.noAnimation) .button:global(.light):global(.spottable):focus.focusExpand.pressed .bg,
+:global(.spotlight-input-key) :global(.noAnimation) .button:global(.light):global(.spottable):focus.focusExpand:active .bg,
+:global(.spotlight-input-mouse) :global(.noAnimation) .button:global(.light):global(.spottable):focus.focusExpand:active .bg {
+  transform: none;
+}
+:global(.spotlight-input-key) :global(.noAnimation) .button:global(.light):global(.spottable):focus.focusExpand.pressed.small .bg,
+:global(.spotlight-input-mouse) :global(.noAnimation) .button:global(.light):global(.spottable):focus.focusExpand.pressed.small .bg,
+:global(.spotlight-input-key) :global(.noAnimation) .button:global(.light):global(.spottable):focus.focusExpand:active.small .bg,
+:global(.spotlight-input-mouse) :global(.noAnimation) .button:global(.light):global(.spottable):focus.focusExpand:active.small .bg {
+  transform: none;
+}
+:global(.spotlight-input-touch) :global(.noAnimation) .button:global(.light):global(.spottable):active .bg {
+  opacity: 1;
+  box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
+  background-color: var(--semantic-color-surface-default-focused);
+  filter: none;
+  box-shadow: none;
+}
+:global(.spotlight-input-touch) :global(.noAnimation) .button:global(.light):global(.spottable):active.bordered .bg {
+  opacity: 1;
+  box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
+  background-color: var(--semantic-color-surface-default-focused);
+  filter: none;
+  box-shadow: none;
+}
+:global(.spotlight-input-touch) :global(.noAnimation) .button:global(.light):global(.spottable):active.transparent .bg {
+  opacity: 1;
+  box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
+  background-color: var(--semantic-color-surface-default-focused);
+  filter: none;
+  box-shadow: none;
+}
+:global(.spotlight-input-touch) :global(.noAnimation) .button:global(.light):global(.spottable):active.focusExpand .bg {
+  transform: none;
+}
+:global(.spotlight-input-touch) :global(.noAnimation) .button:global(.light):global(.spottable):active.focusExpand.small .bg {
+  transform: none;
+}
+:global(.spotlight-input-touch) :global(.noAnimation) .button:global(.light):global(.spottable):active.focusExpand.pressed .bg,
+:global(.spotlight-input-touch) :global(.noAnimation) .button:global(.light):global(.spottable):active.focusExpand:active .bg {
+  transform: none;
+}
+:global(.spotlight-input-touch) :global(.noAnimation) .button:global(.light):global(.spottable):active.focusExpand.pressed.small .bg,
+:global(.spotlight-input-touch) :global(.noAnimation) .button:global(.light):global(.spottable):active.focusExpand:active.small .bg {
+  transform: none;
+}
+.button:global(.light)[disabled] {
+  opacity: 1;
+}
+.button:global(.light)[disabled] .client {
+  opacity: 0.3;
+}
+.button:global(.light)[disabled].opaque .bg {
+  opacity: 0.3;
+}
+.button:global(.light)[disabled].bordered .bg {
+  background-color: color(from var(--semantic-color-surface-default) srgb r g b / 0.5);
+}
+.button:global(.light)[disabled].transparent.selected .bg {
+  opacity: 0.3;
+}
+.button:global(.light)[disabled].bordered.selected .bg {
+  background-color: color(from var(--semantic-color-surface-default-selected) srgb r g b / 0.5);
+  filter: none;
+}
+:global(.spotlight-input-key) .button:global(.light)[disabled]:global(.spottable):focus .bg,
+:global(.spotlight-input-mouse) .button:global(.light)[disabled]:global(.spottable):focus .bg {
+  background-color: var(--semantic-color-surface-default-disabled-focused);
+}
+:global(.spotlight-input-key) .button:global(.light)[disabled]:global(.spottable):focus.bordered .bg,
+:global(.spotlight-input-mouse) .button:global(.light)[disabled]:global(.spottable):focus.bordered .bg {
+  border: 0.125rem solid var(--semantic-color-surface-default-disabled-focused);
+}
+: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 {
+  background-color: var(--semantic-color-surface-default-disabled-focused);
+}
+:global(.spotlight-input-touch) .button:global(.light)[disabled]:global(.spottable):active.bordered .bg {
+  border: 0.125rem solid var(--semantic-color-surface-default-disabled-focused);
+}
+:global(.spotlight-input-touch) .button:global(.light)[disabled]:global(.spottable):active .client {
+  opacity: 0.4;
+}
+.button:global(.game) {
+  --semantic-color-surface-default: #2d224c;
+  --semantic-color-surface-default-focused: #6d2fa1;
+  --semantic-color-on-surface-main-focused: #e6e6e6;
+  border-radius: 0;
+}
+.button:global(.game)::before {
+  content: "";
+  position: absolute;
+  top: -0.375rem;
+  right: -0.375rem;
+  bottom: -0.375rem;
+  left: -0.375rem;
+  border-radius: 0;
+}
+.button:global(.game),
+:global(.enact-a11y-high-contrast) .button:global(.game) {
+  color: var(--semantic-color-on-surface-main);
+}
+.button:global(.game) .bg {
+  opacity: 0;
+  background-color: var(--semantic-color-surface-default-focused);
+  will-change: box-shadow, transform, filter;
+  background-color: var(--semantic-color-surface-default);
+  transition: transform 200ms ease-out;
+  border-width: 0.125rem;
+  border-style: solid;
+  border-color: var(--semantic-color-stroke-button-outline);
+  border-radius: 0;
+}
+.button:global(.game).bordered .bg {
+  background-color: color(from var(--semantic-color-surface-default) srgb r g b / 0.5);
+  border: 0.125rem solid var(--semantic-color-stroke-button-outline);
+}
+.button:global(.game).bordered .client {
+  color: var(--semantic-color-on-surface-main);
+}
+.button:global(.game).opaque {
+  color: var(--semantic-color-on-surface-main);
+}
+.button:global(.game).opaque .bg {
+  opacity: 1;
+}
+.button:global(.game).opaque .icon {
+  color: var(--semantic-color-on-surface-main);
+}
+.button:global(.game).transparent {
+  color: var(--semantic-color-on-background-main);
+}
+.button:global(.game).transparent .bg {
+  opacity: 0;
+}
+.button:global(.game).transparent.shadowed .client {
+  text-shadow: 0.125rem 0.25rem 0.25rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
+}
+.button:global(.game).transparent .icon {
+  color: var(--semantic-color-on-background-main);
+}
+.button:global(.game).red .client::before {
+  background-color: #ff6d78;
+}
+.button:global(.game).green .client::before {
+  background-color: #93d371;
+}
+.button:global(.game).yellow .client::before {
+  background-color: #ffc600;
+}
+.button:global(.game).blue .client::before {
+  background-color: #0084ff;
+}
+.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: var(--primitive-radius-12);
+}
+.button:global(.game).roundBorder .bg {
+  border-radius: calc(var(--button-height) / 2);
+}
+.button:global(.game).selected .bg {
+  background-color: var(--semantic-color-surface-default-selected);
+  filter: none;
+}
+.button:global(.game).selected .client {
+  color: var(--semantic-color-on-surface-main-selected);
+}
+.button:global(.game).selected .icon {
+  color: var(--semantic-color-on-surface-main-selected);
+}
+.button:global(.game).selected.bordered .bg {
+  background-color: color(from var(--semantic-color-surface-default-selected) srgb r g b / 0.5);
+  filter: none;
+  border: 0.125rem solid var(--semantic-color-stroke-main-selected);
+}
+.button:global(.game).selected.bordered .client {
+  color: var(--semantic-color-on-surface-main-selected);
+}
+.button:global(.game).selected.opaque .bg {
+  opacity: 1;
+}
+.button:global(.game).selected.transparent .bg {
+  background-color: var(--semantic-color-surface-default-selected);
+  filter: none;
+  opacity: 1;
+}
+.button:global(.game).selected.transparent .client {
+  color: var(--semantic-color-on-surface-main-selected);
+}
+.button:global(.game).selected.transparent .icon {
+  color: var(--semantic-color-on-surface-main-selected);
+}
+: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.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
+  background-color: var(--semantic-color-surface-default-focused);
+  filter: none;
+}
+:global(.spotlight-input-key) .button:global(.game):global(.spottable):focus .client,
+:global(.spotlight-input-mouse) .button:global(.game):global(.spottable):focus .client {
+  color: var(--semantic-color-on-surface-main-focused);
+}
+:global(.spotlight-input-key) .button:global(.game):global(.spottable):focus .icon,
+:global(.spotlight-input-mouse) .button:global(.game):global(.spottable):focus .icon {
+  color: var(--semantic-color-on-surface-main-focused);
+}
+:global(.spotlight-input-key) .button:global(.game):global(.spottable):focus.bordered .bg,
+:global(.spotlight-input-mouse) .button:global(.game):global(.spottable):focus.bordered .bg {
+  opacity: 1;
+  box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
+  background-color: var(--semantic-color-surface-default-focused);
+  filter: none;
+}
+:global(.spotlight-input-key) .button:global(.game):global(.spottable):focus.bordered .client,
+:global(.spotlight-input-mouse) .button:global(.game):global(.spottable):focus.bordered .client {
+  color: var(--semantic-color-on-surface-main-focused);
+}
+:global(.spotlight-input-key) .button:global(.game):global(.spottable):focus.transparent .bg,
+:global(.spotlight-input-mouse) .button:global(.game):global(.spottable):focus.transparent .bg {
+  opacity: 1;
+  box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
+  background-color: var(--semantic-color-surface-default-focused);
+  filter: none;
+}
+:global(.spotlight-input-key) .button:global(.game):global(.spottable):focus.transparent .client,
+:global(.spotlight-input-mouse) .button:global(.game):global(.spottable):focus.transparent .client {
+  color: var(--semantic-color-on-surface-main-focused);
+}
+:global(.spotlight-input-key) .button:global(.game):global(.spottable):focus.transparent .icon,
+:global(.spotlight-input-mouse) .button:global(.game):global(.spottable):focus.transparent .icon {
+  color: var(--semantic-color-on-surface-main-focused);
+}
+: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: '';
+}
+: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.1);
+}
+: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 .bg {
+  opacity: 1;
+  box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
+  background-color: var(--semantic-color-surface-default-focused);
+  filter: none;
+}
+:global(.spotlight-input-touch) .button:global(.game):global(.spottable):active .client {
+  color: var(--semantic-color-on-surface-main-focused);
+}
+:global(.spotlight-input-touch) .button:global(.game):global(.spottable):active .icon {
+  color: var(--semantic-color-on-surface-main-focused);
+}
+:global(.spotlight-input-touch) .button:global(.game):global(.spottable):active.bordered .bg {
+  opacity: 1;
+  box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
+  background-color: var(--semantic-color-surface-default-focused);
+  filter: none;
+}
+:global(.spotlight-input-touch) .button:global(.game):global(.spottable):active.bordered .client {
+  color: var(--semantic-color-on-surface-main-focused);
+}
+:global(.spotlight-input-touch) .button:global(.game):global(.spottable):active.transparent .bg {
+  opacity: 1;
+  box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
+  background-color: var(--semantic-color-surface-default-focused);
+  filter: none;
+}
+:global(.spotlight-input-touch) .button:global(.game):global(.spottable):active.transparent .client {
+  color: var(--semantic-color-on-surface-main-focused);
+}
+:global(.spotlight-input-touch) .button:global(.game):global(.spottable):active.transparent .icon {
+  color: var(--semantic-color-on-surface-main-focused);
+}
+: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: '';
+}
+:global(.spotlight-input-touch) .button:global(.game):global(.spottable):active.focusExpand .bg {
+  transform: scale(1.1);
+}
+: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);
+}
+:global(.spotlight-input-key) :global(.noAnimation) .button:global(.game):global(.spottable):focus .bg,
+:global(.spotlight-input-mouse) :global(.noAnimation) .button:global(.game):global(.spottable):focus .bg {
+  opacity: 1;
+  box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
+  background-color: var(--semantic-color-surface-default-focused);
+  filter: none;
+  box-shadow: none;
+}
+:global(.spotlight-input-key) :global(.noAnimation) .button:global(.game):global(.spottable):focus.bordered .bg,
+:global(.spotlight-input-mouse) :global(.noAnimation) .button:global(.game):global(.spottable):focus.bordered .bg {
+  opacity: 1;
+  box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
+  background-color: var(--semantic-color-surface-default-focused);
+  filter: none;
+  box-shadow: none;
+}
+:global(.spotlight-input-key) :global(.noAnimation) .button:global(.game):global(.spottable):focus.transparent .bg,
+:global(.spotlight-input-mouse) :global(.noAnimation) .button:global(.game):global(.spottable):focus.transparent .bg {
+  opacity: 1;
+  box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
+  background-color: var(--semantic-color-surface-default-focused);
+  filter: none;
+  box-shadow: none;
+}
+:global(.spotlight-input-key) :global(.noAnimation) .button:global(.game):global(.spottable):focus.focusExpand .bg,
+:global(.spotlight-input-mouse) :global(.noAnimation) .button:global(.game):global(.spottable):focus.focusExpand .bg {
+  transform: none;
+}
+:global(.spotlight-input-key) :global(.noAnimation) .button:global(.game):global(.spottable):focus.focusExpand.small .bg,
+:global(.spotlight-input-mouse) :global(.noAnimation) .button:global(.game):global(.spottable):focus.focusExpand.small .bg {
+  transform: none;
+}
+:global(.spotlight-input-key) :global(.noAnimation) .button:global(.game):global(.spottable):focus.focusExpand.pressed .bg,
+:global(.spotlight-input-mouse) :global(.noAnimation) .button:global(.game):global(.spottable):focus.focusExpand.pressed .bg,
+:global(.spotlight-input-key) :global(.noAnimation) .button:global(.game):global(.spottable):focus.focusExpand:active .bg,
+:global(.spotlight-input-mouse) :global(.noAnimation) .button:global(.game):global(.spottable):focus.focusExpand:active .bg {
+  transform: none;
+}
+:global(.spotlight-input-key) :global(.noAnimation) .button:global(.game):global(.spottable):focus.focusExpand.pressed.small .bg,
+:global(.spotlight-input-mouse) :global(.noAnimation) .button:global(.game):global(.spottable):focus.focusExpand.pressed.small .bg,
+:global(.spotlight-input-key) :global(.noAnimation) .button:global(.game):global(.spottable):focus.focusExpand:active.small .bg,
+:global(.spotlight-input-mouse) :global(.noAnimation) .button:global(.game):global(.spottable):focus.focusExpand:active.small .bg {
+  transform: none;
+}
+:global(.spotlight-input-touch) :global(.noAnimation) .button:global(.game):global(.spottable):active .bg {
+  opacity: 1;
+  box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
+  background-color: var(--semantic-color-surface-default-focused);
+  filter: none;
+  box-shadow: none;
+}
+:global(.spotlight-input-touch) :global(.noAnimation) .button:global(.game):global(.spottable):active.bordered .bg {
+  opacity: 1;
+  box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
+  background-color: var(--semantic-color-surface-default-focused);
+  filter: none;
+  box-shadow: none;
+}
+:global(.spotlight-input-touch) :global(.noAnimation) .button:global(.game):global(.spottable):active.transparent .bg {
+  opacity: 1;
+  box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
+  background-color: var(--semantic-color-surface-default-focused);
+  filter: none;
+  box-shadow: none;
+}
+:global(.spotlight-input-touch) :global(.noAnimation) .button:global(.game):global(.spottable):active.focusExpand .bg {
+  transform: none;
+}
+:global(.spotlight-input-touch) :global(.noAnimation) .button:global(.game):global(.spottable):active.focusExpand.small .bg {
+  transform: none;
+}
+:global(.spotlight-input-touch) :global(.noAnimation) .button:global(.game):global(.spottable):active.focusExpand.pressed .bg,
+:global(.spotlight-input-touch) :global(.noAnimation) .button:global(.game):global(.spottable):active.focusExpand:active .bg {
+  transform: none;
+}
+:global(.spotlight-input-touch) :global(.noAnimation) .button:global(.game):global(.spottable):active.focusExpand.pressed.small .bg,
+:global(.spotlight-input-touch) :global(.noAnimation) .button:global(.game):global(.spottable):active.focusExpand:active.small .bg {
+  transform: none;
+}
+.button:global(.game)[disabled] {
+  opacity: 1;
+}
+.button:global(.game)[disabled] .client {
+  opacity: 0.3;
+}
+.button:global(.game)[disabled].opaque .bg {
+  opacity: 0.3;
+}
+.button:global(.game)[disabled].bordered .bg {
+  background-color: color(from var(--semantic-color-surface-default) srgb r g b / 0.5);
+}
+.button:global(.game)[disabled].transparent.selected .bg {
+  opacity: 0.3;
+}
+.button:global(.game)[disabled].bordered.selected .bg {
+  background-color: color(from var(--semantic-color-surface-default-selected) srgb r g b / 0.5);
+  filter: none;
+}
+:global(.spotlight-input-key) .button:global(.game)[disabled]:global(.spottable):focus .bg,
+:global(.spotlight-input-mouse) .button:global(.game)[disabled]:global(.spottable):focus .bg {
+  background-color: var(--semantic-color-surface-default-disabled-focused);
+}
+:global(.spotlight-input-key) .button:global(.game)[disabled]:global(.spottable):focus.bordered .bg,
+:global(.spotlight-input-mouse) .button:global(.game)[disabled]:global(.spottable):focus.bordered .bg {
+  border: 0.125rem solid var(--semantic-color-surface-default-disabled-focused);
+}
+: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 {
+  background-color: var(--semantic-color-surface-default-disabled-focused);
+}
+:global(.spotlight-input-touch) .button:global(.game)[disabled]:global(.spottable):active.bordered .bg {
+  border: 0.125rem solid var(--semantic-color-surface-default-disabled-focused);
+}
+:global(.spotlight-input-touch) .button:global(.game)[disabled]:global(.spottable):active .client {
+  opacity: 0.4;
+}
+:global(.green) .button:global(.game) {
+  --semantic-color-surface-default: #1F2C24;
+  --semantic-color-surface-default-focused: #3ea07d;
+  border-radius: 0;
+}
+:global(.green) .button:global(.game)::before {
+  content: "";
+  position: absolute;
+  top: -0.375rem;
+  right: -0.375rem;
+  bottom: -0.375rem;
+  left: -0.375rem;
+  border-radius: 0;
+}
+:global(.green) .button:global(.game),
+:global(.enact-a11y-high-contrast) :global(.green) .button:global(.game) {
+  color: var(--semantic-color-on-surface-main);
+}
+:global(.green) .button:global(.game) .bg {
+  opacity: 0;
+  background-color: var(--semantic-color-surface-default-focused);
+  will-change: box-shadow, transform, filter;
+  background-color: var(--semantic-color-surface-default);
+  transition: transform 200ms ease-out;
+  border-width: 0.125rem;
+  border-style: solid;
+  border-color: var(--semantic-color-stroke-button-outline);
+  border-radius: 0;
+}
+:global(.green) .button:global(.game).bordered .bg {
+  background-color: color(from var(--semantic-color-surface-default) srgb r g b / 0.5);
+  border: 0.125rem solid var(--semantic-color-stroke-button-outline);
+}
+:global(.green) .button:global(.game).bordered .client {
+  color: var(--semantic-color-on-surface-main);
+}
+:global(.green) .button:global(.game).opaque {
+  color: var(--semantic-color-on-surface-main);
+}
+:global(.green) .button:global(.game).opaque .bg {
+  opacity: 1;
+}
+:global(.green) .button:global(.game).opaque .icon {
+  color: var(--semantic-color-on-surface-main);
+}
+:global(.green) .button:global(.game).transparent {
+  color: var(--semantic-color-on-background-main);
+}
+: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 color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
+}
+:global(.green) .button:global(.game).transparent .icon {
+  color: var(--semantic-color-on-background-main);
+}
+:global(.green) .button:global(.game).red .client::before {
+  background-color: #ff6d78;
+}
+:global(.green) .button:global(.game).green .client::before {
+  background-color: #93d371;
+}
+:global(.green) .button:global(.game).yellow .client::before {
+  background-color: #ffc600;
+}
+:global(.green) .button:global(.game).blue .client::before {
+  background-color: #0084ff;
+}
+: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: var(--primitive-radius-12);
+}
+:global(.green) .button:global(.game).roundBorder .bg {
+  border-radius: calc(var(--button-height) / 2);
+}
+:global(.green) .button:global(.game).selected .bg {
+  background-color: var(--semantic-color-surface-default-selected);
+  filter: none;
+}
+:global(.green) .button:global(.game).selected .client {
+  color: var(--semantic-color-on-surface-main-selected);
+}
+:global(.green) .button:global(.game).selected .icon {
+  color: var(--semantic-color-on-surface-main-selected);
+}
+:global(.green) .button:global(.game).selected.bordered .bg {
+  background-color: color(from var(--semantic-color-surface-default-selected) srgb r g b / 0.5);
+  filter: none;
+  border: 0.125rem solid var(--semantic-color-stroke-main-selected);
+}
+:global(.green) .button:global(.game).selected.bordered .client {
+  color: var(--semantic-color-on-surface-main-selected);
+}
+:global(.green) .button:global(.game).selected.opaque .bg {
+  opacity: 1;
+}
+:global(.green) .button:global(.game).selected.transparent .bg {
+  background-color: var(--semantic-color-surface-default-selected);
+  filter: none;
+  opacity: 1;
+}
+:global(.green) .button:global(.game).selected.transparent .client {
+  color: var(--semantic-color-on-surface-main-selected);
+}
+:global(.green) .button:global(.game).selected.transparent .icon {
+  color: var(--semantic-color-on-surface-main-selected);
+}
+: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.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
+  background-color: var(--semantic-color-surface-default-focused);
+  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 {
+  color: var(--semantic-color-on-surface-main-focused);
+}
+:global(.spotlight-input-key) :global(.green) .button:global(.game):global(.spottable):focus .icon,
+:global(.spotlight-input-mouse) :global(.green) .button:global(.game):global(.spottable):focus .icon {
+  color: var(--semantic-color-on-surface-main-focused);
+}
+:global(.spotlight-input-key) :global(.green) .button:global(.game):global(.spottable):focus.bordered .bg,
+:global(.spotlight-input-mouse) :global(.green) .button:global(.game):global(.spottable):focus.bordered .bg {
+  opacity: 1;
+  box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
+  background-color: var(--semantic-color-surface-default-focused);
+  filter: none;
+}
+:global(.spotlight-input-key) :global(.green) .button:global(.game):global(.spottable):focus.bordered .client,
+:global(.spotlight-input-mouse) :global(.green) .button:global(.game):global(.spottable):focus.bordered .client {
+  color: var(--semantic-color-on-surface-main-focused);
+}
+:global(.spotlight-input-key) :global(.green) .button:global(.game):global(.spottable):focus.transparent .bg,
+:global(.spotlight-input-mouse) :global(.green) .button:global(.game):global(.spottable):focus.transparent .bg {
+  opacity: 1;
+  box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
+  background-color: var(--semantic-color-surface-default-focused);
+  filter: none;
+}
+:global(.spotlight-input-key) :global(.green) .button:global(.game):global(.spottable):focus.transparent .client,
+:global(.spotlight-input-mouse) :global(.green) .button:global(.game):global(.spottable):focus.transparent .client {
+  color: var(--semantic-color-on-surface-main-focused);
+}
+:global(.spotlight-input-key) :global(.green) .button:global(.game):global(.spottable):focus.transparent .icon,
+:global(.spotlight-input-mouse) :global(.green) .button:global(.game):global(.spottable):focus.transparent .icon {
+  color: var(--semantic-color-on-surface-main-focused);
+}
+: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: '';
+}
+: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.1);
+}
+: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 .bg {
+  opacity: 1;
+  box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
+  background-color: var(--semantic-color-surface-default-focused);
+  filter: none;
+}
+:global(.spotlight-input-touch) :global(.green) .button:global(.game):global(.spottable):active .client {
+  color: var(--semantic-color-on-surface-main-focused);
+}
+:global(.spotlight-input-touch) :global(.green) .button:global(.game):global(.spottable):active .icon {
+  color: var(--semantic-color-on-surface-main-focused);
+}
+:global(.spotlight-input-touch) :global(.green) .button:global(.game):global(.spottable):active.bordered .bg {
+  opacity: 1;
+  box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
+  background-color: var(--semantic-color-surface-default-focused);
+  filter: none;
+}
+:global(.spotlight-input-touch) :global(.green) .button:global(.game):global(.spottable):active.bordered .client {
+  color: var(--semantic-color-on-surface-main-focused);
+}
+:global(.spotlight-input-touch) :global(.green) .button:global(.game):global(.spottable):active.transparent .bg {
+  opacity: 1;
+  box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
+  background-color: var(--semantic-color-surface-default-focused);
+  filter: none;
+}
+:global(.spotlight-input-touch) :global(.green) .button:global(.game):global(.spottable):active.transparent .client {
+  color: var(--semantic-color-on-surface-main-focused);
+}
+:global(.spotlight-input-touch) :global(.green) .button:global(.game):global(.spottable):active.transparent .icon {
+  color: var(--semantic-color-on-surface-main-focused);
+}
+: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: '';
+}
+:global(.spotlight-input-touch) :global(.green) .button:global(.game):global(.spottable):active.focusExpand .bg {
+  transform: scale(1.1);
+}
+: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(.spotlight-input-key) :global(.noAnimation) :global(.green) .button:global(.game):global(.spottable):focus .bg,
+:global(.spotlight-input-mouse) :global(.noAnimation) :global(.green) .button:global(.game):global(.spottable):focus .bg {
+  opacity: 1;
+  box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
+  background-color: var(--semantic-color-surface-default-focused);
+  filter: none;
+  box-shadow: none;
+}
+:global(.spotlight-input-key) :global(.noAnimation) :global(.green) .button:global(.game):global(.spottable):focus.bordered .bg,
+:global(.spotlight-input-mouse) :global(.noAnimation) :global(.green) .button:global(.game):global(.spottable):focus.bordered .bg {
+  opacity: 1;
+  box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
+  background-color: var(--semantic-color-surface-default-focused);
+  filter: none;
+  box-shadow: none;
+}
+:global(.spotlight-input-key) :global(.noAnimation) :global(.green) .button:global(.game):global(.spottable):focus.transparent .bg,
+:global(.spotlight-input-mouse) :global(.noAnimation) :global(.green) .button:global(.game):global(.spottable):focus.transparent .bg {
+  opacity: 1;
+  box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
+  background-color: var(--semantic-color-surface-default-focused);
+  filter: none;
+  box-shadow: none;
+}
+:global(.spotlight-input-key) :global(.noAnimation) :global(.green) .button:global(.game):global(.spottable):focus.focusExpand .bg,
+:global(.spotlight-input-mouse) :global(.noAnimation) :global(.green) .button:global(.game):global(.spottable):focus.focusExpand .bg {
+  transform: none;
+}
+:global(.spotlight-input-key) :global(.noAnimation) :global(.green) .button:global(.game):global(.spottable):focus.focusExpand.small .bg,
+:global(.spotlight-input-mouse) :global(.noAnimation) :global(.green) .button:global(.game):global(.spottable):focus.focusExpand.small .bg {
+  transform: none;
+}
+:global(.spotlight-input-key) :global(.noAnimation) :global(.green) .button:global(.game):global(.spottable):focus.focusExpand.pressed .bg,
+:global(.spotlight-input-mouse) :global(.noAnimation) :global(.green) .button:global(.game):global(.spottable):focus.focusExpand.pressed .bg,
+:global(.spotlight-input-key) :global(.noAnimation) :global(.green) .button:global(.game):global(.spottable):focus.focusExpand:active .bg,
+:global(.spotlight-input-mouse) :global(.noAnimation) :global(.green) .button:global(.game):global(.spottable):focus.focusExpand:active .bg {
+  transform: none;
+}
+:global(.spotlight-input-key) :global(.noAnimation) :global(.green) .button:global(.game):global(.spottable):focus.focusExpand.pressed.small .bg,
+:global(.spotlight-input-mouse) :global(.noAnimation) :global(.green) .button:global(.game):global(.spottable):focus.focusExpand.pressed.small .bg,
+:global(.spotlight-input-key) :global(.noAnimation) :global(.green) .button:global(.game):global(.spottable):focus.focusExpand:active.small .bg,
+:global(.spotlight-input-mouse) :global(.noAnimation) :global(.green) .button:global(.game):global(.spottable):focus.focusExpand:active.small .bg {
+  transform: none;
+}
+:global(.spotlight-input-touch) :global(.noAnimation) :global(.green) .button:global(.game):global(.spottable):active .bg {
+  opacity: 1;
+  box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
+  background-color: var(--semantic-color-surface-default-focused);
+  filter: none;
+  box-shadow: none;
+}
+:global(.spotlight-input-touch) :global(.noAnimation) :global(.green) .button:global(.game):global(.spottable):active.bordered .bg {
+  opacity: 1;
+  box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
+  background-color: var(--semantic-color-surface-default-focused);
+  filter: none;
+  box-shadow: none;
+}
+:global(.spotlight-input-touch) :global(.noAnimation) :global(.green) .button:global(.game):global(.spottable):active.transparent .bg {
+  opacity: 1;
+  box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
+  background-color: var(--semantic-color-surface-default-focused);
+  filter: none;
+  box-shadow: none;
+}
+:global(.spotlight-input-touch) :global(.noAnimation) :global(.green) .button:global(.game):global(.spottable):active.focusExpand .bg {
+  transform: none;
+}
+:global(.spotlight-input-touch) :global(.noAnimation) :global(.green) .button:global(.game):global(.spottable):active.focusExpand.small .bg {
+  transform: none;
+}
+:global(.spotlight-input-touch) :global(.noAnimation) :global(.green) .button:global(.game):global(.spottable):active.focusExpand.pressed .bg,
+:global(.spotlight-input-touch) :global(.noAnimation) :global(.green) .button:global(.game):global(.spottable):active.focusExpand:active .bg {
+  transform: none;
+}
+:global(.spotlight-input-touch) :global(.noAnimation) :global(.green) .button:global(.game):global(.spottable):active.focusExpand.pressed.small .bg,
+:global(.spotlight-input-touch) :global(.noAnimation) :global(.green) .button:global(.game):global(.spottable):active.focusExpand:active.small .bg {
+  transform: none;
+}
+:global(.green) .button:global(.game)[disabled] {
+  opacity: 1;
+}
+:global(.green) .button:global(.game)[disabled] .client {
+  opacity: 0.3;
+}
+:global(.green) .button:global(.game)[disabled].opaque .bg {
+  opacity: 0.3;
+}
+:global(.green) .button:global(.game)[disabled].bordered .bg {
+  background-color: color(from var(--semantic-color-surface-default) srgb r g b / 0.5);
+}
+:global(.green) .button:global(.game)[disabled].transparent.selected .bg {
+  opacity: 0.3;
+}
+:global(.green) .button:global(.game)[disabled].bordered.selected .bg {
+  background-color: color(from var(--semantic-color-surface-default-selected) srgb r g b / 0.5);
+  filter: none;
+}
+: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 {
+  background-color: var(--semantic-color-surface-default-disabled-focused);
+}
+:global(.spotlight-input-key) :global(.green) .button:global(.game)[disabled]:global(.spottable):focus.bordered .bg,
+:global(.spotlight-input-mouse) :global(.green) .button:global(.game)[disabled]:global(.spottable):focus.bordered .bg {
+  border: 0.125rem solid var(--semantic-color-surface-default-disabled-focused);
+}
+: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 {
+  background-color: var(--semantic-color-surface-default-disabled-focused);
+}
+:global(.spotlight-input-touch) :global(.green) .button:global(.game)[disabled]:global(.spottable):active.bordered .bg {
+  border: 0.125rem solid var(--semantic-color-surface-default-disabled-focused);
+}
+:global(.spotlight-input-touch) :global(.green) .button:global(.game)[disabled]:global(.spottable):active .client {
+  opacity: 0.4;
+}
+:global(.orange) .button:global(.game) {
+  --semantic-color-surface-default: #422923;
+  --semantic-color-surface-default-focused: #b85f23;
+  border-radius: 0;
+}
+:global(.orange) .button:global(.game)::before {
+  content: "";
+  position: absolute;
+  top: -0.375rem;
+  right: -0.375rem;
+  bottom: -0.375rem;
+  left: -0.375rem;
+  border-radius: 0;
+}
+:global(.orange) .button:global(.game),
+:global(.enact-a11y-high-contrast) :global(.orange) .button:global(.game) {
+  color: var(--semantic-color-on-surface-main);
+}
+:global(.orange) .button:global(.game) .bg {
+  opacity: 0;
+  background-color: var(--semantic-color-surface-default-focused);
+  will-change: box-shadow, transform, filter;
+  background-color: var(--semantic-color-surface-default);
+  transition: transform 200ms ease-out;
+  border-width: 0.125rem;
+  border-style: solid;
+  border-color: var(--semantic-color-stroke-button-outline);
+  border-radius: 0;
+}
+:global(.orange) .button:global(.game).bordered .bg {
+  background-color: color(from var(--semantic-color-surface-default) srgb r g b / 0.5);
+  border: 0.125rem solid var(--semantic-color-stroke-button-outline);
+}
+:global(.orange) .button:global(.game).bordered .client {
+  color: var(--semantic-color-on-surface-main);
+}
+:global(.orange) .button:global(.game).opaque {
+  color: var(--semantic-color-on-surface-main);
+}
+:global(.orange) .button:global(.game).opaque .bg {
+  opacity: 1;
+}
+:global(.orange) .button:global(.game).opaque .icon {
+  color: var(--semantic-color-on-surface-main);
+}
+:global(.orange) .button:global(.game).transparent {
+  color: var(--semantic-color-on-background-main);
+}
+:global(.orange) .button:global(.game).transparent .bg {
+  opacity: 0;
+}
+:global(.orange) .button:global(.game).transparent.shadowed .client {
+  text-shadow: 0.125rem 0.25rem 0.25rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
+}
+:global(.orange) .button:global(.game).transparent .icon {
+  color: var(--semantic-color-on-background-main);
+}
+:global(.orange) .button:global(.game).red .client::before {
+  background-color: #ff6d78;
+}
+:global(.orange) .button:global(.game).green .client::before {
+  background-color: #93d371;
+}
+:global(.orange) .button:global(.game).yellow .client::before {
+  background-color: #ffc600;
+}
+:global(.orange) .button:global(.game).blue .client::before {
+  background-color: #0084ff;
+}
+:global(.orange) .button:global(.game).small::before {
+  content: "";
+  position: absolute;
+  top: -0.625rem;
+  right: -0.625rem;
+  bottom: -0.625rem;
+  left: -0.625rem;
+  border-radius: 0;
+}
+:global(.orange) .button:global(.game).iconOnly .bg {
+  border: 0.125rem;
+  border-radius: var(--primitive-radius-12);
+}
+:global(.orange) .button:global(.game).roundBorder .bg {
+  border-radius: calc(var(--button-height) / 2);
+}
+:global(.orange) .button:global(.game).selected .bg {
+  background-color: var(--semantic-color-surface-default-selected);
+  filter: none;
+}
+:global(.orange) .button:global(.game).selected .client {
+  color: var(--semantic-color-on-surface-main-selected);
+}
+:global(.orange) .button:global(.game).selected .icon {
+  color: var(--semantic-color-on-surface-main-selected);
+}
+:global(.orange) .button:global(.game).selected.bordered .bg {
+  background-color: color(from var(--semantic-color-surface-default-selected) srgb r g b / 0.5);
+  filter: none;
+  border: 0.125rem solid var(--semantic-color-stroke-main-selected);
+}
+:global(.orange) .button:global(.game).selected.bordered .client {
+  color: var(--semantic-color-on-surface-main-selected);
+}
+:global(.orange) .button:global(.game).selected.opaque .bg {
+  opacity: 1;
+}
+:global(.orange) .button:global(.game).selected.transparent .bg {
+  background-color: var(--semantic-color-surface-default-selected);
+  filter: none;
+  opacity: 1;
+}
+:global(.orange) .button:global(.game).selected.transparent .client {
+  color: var(--semantic-color-on-surface-main-selected);
+}
+:global(.orange) .button:global(.game).selected.transparent .icon {
+  color: var(--semantic-color-on-surface-main-selected);
+}
+:global(.spotlight-input-key) :global(.orange) .button:global(.game):global(.spottable):focus .bg,
+:global(.spotlight-input-mouse) :global(.orange) .button:global(.game):global(.spottable):focus .bg {
+  opacity: 1;
+  box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
+  background-color: var(--semantic-color-surface-default-focused);
+  filter: none;
+}
+:global(.spotlight-input-key) :global(.orange) .button:global(.game):global(.spottable):focus .client,
+:global(.spotlight-input-mouse) :global(.orange) .button:global(.game):global(.spottable):focus .client {
+  color: var(--semantic-color-on-surface-main-focused);
+}
+:global(.spotlight-input-key) :global(.orange) .button:global(.game):global(.spottable):focus .icon,
+:global(.spotlight-input-mouse) :global(.orange) .button:global(.game):global(.spottable):focus .icon {
+  color: var(--semantic-color-on-surface-main-focused);
+}
+:global(.spotlight-input-key) :global(.orange) .button:global(.game):global(.spottable):focus.bordered .bg,
+:global(.spotlight-input-mouse) :global(.orange) .button:global(.game):global(.spottable):focus.bordered .bg {
+  opacity: 1;
+  box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
+  background-color: var(--semantic-color-surface-default-focused);
+  filter: none;
+}
+:global(.spotlight-input-key) :global(.orange) .button:global(.game):global(.spottable):focus.bordered .client,
+:global(.spotlight-input-mouse) :global(.orange) .button:global(.game):global(.spottable):focus.bordered .client {
+  color: var(--semantic-color-on-surface-main-focused);
+}
+:global(.spotlight-input-key) :global(.orange) .button:global(.game):global(.spottable):focus.transparent .bg,
+:global(.spotlight-input-mouse) :global(.orange) .button:global(.game):global(.spottable):focus.transparent .bg {
+  opacity: 1;
+  box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
+  background-color: var(--semantic-color-surface-default-focused);
+  filter: none;
+}
+:global(.spotlight-input-key) :global(.orange) .button:global(.game):global(.spottable):focus.transparent .client,
+:global(.spotlight-input-mouse) :global(.orange) .button:global(.game):global(.spottable):focus.transparent .client {
+  color: var(--semantic-color-on-surface-main-focused);
+}
+:global(.spotlight-input-key) :global(.orange) .button:global(.game):global(.spottable):focus.transparent .icon,
+:global(.spotlight-input-mouse) :global(.orange) .button:global(.game):global(.spottable):focus.transparent .icon {
+  color: var(--semantic-color-on-surface-main-focused);
+}
+:global(.spotlight-input-key) :global(.orange) .button:global(.game):global(.spottable):focus .client,
+:global(.spotlight-input-mouse) :global(.orange) .button:global(.game):global(.spottable):focus .client {
+  text-shadow: none;
+}
+:global(.spotlight-input-key) :global(.orange) .button:global(.game):global(.spottable):focus.iconOnly .bg,
+:global(.spotlight-input-mouse) :global(.orange) .button:global(.game):global(.spottable):focus.iconOnly .bg {
+  background-color: '';
+}
+:global(.spotlight-input-key) :global(.orange) .button:global(.game):global(.spottable):focus.focusExpand .bg,
+:global(.spotlight-input-mouse) :global(.orange) .button:global(.game):global(.spottable):focus.focusExpand .bg {
+  transform: scale(1.1);
+}
+:global(.spotlight-input-key) :global(.orange) .button:global(.game):global(.spottable):focus.focusExpand.small .bg,
+:global(.spotlight-input-mouse) :global(.orange) .button:global(.game):global(.spottable):focus.focusExpand.small .bg {
+  transform: scale(1.1);
+}
+:global(.spotlight-input-touch) :global(.orange) .button:global(.game):global(.spottable):active .bg {
+  opacity: 1;
+  box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
+  background-color: var(--semantic-color-surface-default-focused);
+  filter: none;
+}
+:global(.spotlight-input-touch) :global(.orange) .button:global(.game):global(.spottable):active .client {
+  color: var(--semantic-color-on-surface-main-focused);
+}
+:global(.spotlight-input-touch) :global(.orange) .button:global(.game):global(.spottable):active .icon {
+  color: var(--semantic-color-on-surface-main-focused);
+}
+:global(.spotlight-input-touch) :global(.orange) .button:global(.game):global(.spottable):active.bordered .bg {
+  opacity: 1;
+  box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
+  background-color: var(--semantic-color-surface-default-focused);
+  filter: none;
+}
+:global(.spotlight-input-touch) :global(.orange) .button:global(.game):global(.spottable):active.bordered .client {
+  color: var(--semantic-color-on-surface-main-focused);
+}
+:global(.spotlight-input-touch) :global(.orange) .button:global(.game):global(.spottable):active.transparent .bg {
+  opacity: 1;
+  box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
+  background-color: var(--semantic-color-surface-default-focused);
+  filter: none;
+}
+:global(.spotlight-input-touch) :global(.orange) .button:global(.game):global(.spottable):active.transparent .client {
+  color: var(--semantic-color-on-surface-main-focused);
+}
+:global(.spotlight-input-touch) :global(.orange) .button:global(.game):global(.spottable):active.transparent .icon {
+  color: var(--semantic-color-on-surface-main-focused);
+}
+:global(.spotlight-input-touch) :global(.orange) .button:global(.game):global(.spottable):active .client {
+  text-shadow: none;
+}
+:global(.spotlight-input-touch) :global(.orange) .button:global(.game):global(.spottable):active.iconOnly .bg {
+  background-color: '';
+}
+:global(.spotlight-input-touch) :global(.orange) .button:global(.game):global(.spottable):active.focusExpand .bg {
+  transform: scale(1.1);
+}
+:global(.spotlight-input-touch) :global(.orange) .button:global(.game):global(.spottable):active.focusExpand.small .bg {
+  transform: scale(1.1);
+}
+:global(.spotlight-input-key) :global(.orange) .button:global(.game):not([disabled]):global(.spottable):focus,
+:global(.spotlight-input-mouse) :global(.orange) .button:global(.game):not([disabled]):global(.spottable):focus {
+  z-index: 1;
+}
+:global(.spotlight-input-key) :global(.orange) .button:global(.game):not([disabled]):global(.spottable):focus.focusExpand.pressed .bg,
+:global(.spotlight-input-mouse) :global(.orange) .button:global(.game):not([disabled]):global(.spottable):focus.focusExpand.pressed .bg,
+:global(.spotlight-input-key) :global(.orange) .button:global(.game):not([disabled]):global(.spottable):focus.focusExpand:active .bg,
+:global(.spotlight-input-mouse) :global(.orange) .button:global(.game):not([disabled]):global(.spottable):focus.focusExpand:active .bg {
+  transform: scale(1.02);
+}
+:global(.spotlight-input-key) :global(.orange) .button:global(.game):not([disabled]):global(.spottable):focus.focusExpand.pressed.small .bg,
+:global(.spotlight-input-mouse) :global(.orange) .button:global(.game):not([disabled]):global(.spottable):focus.focusExpand.pressed.small .bg,
+:global(.spotlight-input-key) :global(.orange) .button:global(.game):not([disabled]):global(.spottable):focus.focusExpand:active.small .bg,
+:global(.spotlight-input-mouse) :global(.orange) .button:global(.game):not([disabled]):global(.spottable):focus.focusExpand:active.small .bg {
+  transform: scale(1.04);
+}
+:global(.spotlight-input-touch) :global(.orange) .button:global(.game):not([disabled]):global(.spottable):active {
+  z-index: 1;
+}
+:global(.spotlight-input-touch) :global(.orange) .button:global(.game):not([disabled]):global(.spottable):active.focusExpand.pressed .bg,
+:global(.spotlight-input-touch) :global(.orange) .button:global(.game):not([disabled]):global(.spottable):active.focusExpand:active .bg {
+  transform: scale(1.02);
+}
+:global(.spotlight-input-touch) :global(.orange) .button:global(.game):not([disabled]):global(.spottable):active.focusExpand.pressed.small .bg,
+:global(.spotlight-input-touch) :global(.orange) .button:global(.game):not([disabled]):global(.spottable):active.focusExpand:active.small .bg {
+  transform: scale(1.04);
+}
+:global(.spotlight-input-key) :global(.noAnimation) :global(.orange) .button:global(.game):global(.spottable):focus .bg,
+:global(.spotlight-input-mouse) :global(.noAnimation) :global(.orange) .button:global(.game):global(.spottable):focus .bg {
+  opacity: 1;
+  box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
+  background-color: var(--semantic-color-surface-default-focused);
+  filter: none;
+  box-shadow: none;
+}
+:global(.spotlight-input-key) :global(.noAnimation) :global(.orange) .button:global(.game):global(.spottable):focus.bordered .bg,
+:global(.spotlight-input-mouse) :global(.noAnimation) :global(.orange) .button:global(.game):global(.spottable):focus.bordered .bg {
+  opacity: 1;
+  box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
+  background-color: var(--semantic-color-surface-default-focused);
+  filter: none;
+  box-shadow: none;
+}
+:global(.spotlight-input-key) :global(.noAnimation) :global(.orange) .button:global(.game):global(.spottable):focus.transparent .bg,
+:global(.spotlight-input-mouse) :global(.noAnimation) :global(.orange) .button:global(.game):global(.spottable):focus.transparent .bg {
+  opacity: 1;
+  box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
+  background-color: var(--semantic-color-surface-default-focused);
+  filter: none;
+  box-shadow: none;
+}
+:global(.spotlight-input-key) :global(.noAnimation) :global(.orange) .button:global(.game):global(.spottable):focus.focusExpand .bg,
+:global(.spotlight-input-mouse) :global(.noAnimation) :global(.orange) .button:global(.game):global(.spottable):focus.focusExpand .bg {
+  transform: none;
+}
+:global(.spotlight-input-key) :global(.noAnimation) :global(.orange) .button:global(.game):global(.spottable):focus.focusExpand.small .bg,
+:global(.spotlight-input-mouse) :global(.noAnimation) :global(.orange) .button:global(.game):global(.spottable):focus.focusExpand.small .bg {
+  transform: none;
+}
+:global(.spotlight-input-key) :global(.noAnimation) :global(.orange) .button:global(.game):global(.spottable):focus.focusExpand.pressed .bg,
+:global(.spotlight-input-mouse) :global(.noAnimation) :global(.orange) .button:global(.game):global(.spottable):focus.focusExpand.pressed .bg,
+:global(.spotlight-input-key) :global(.noAnimation) :global(.orange) .button:global(.game):global(.spottable):focus.focusExpand:active .bg,
+:global(.spotlight-input-mouse) :global(.noAnimation) :global(.orange) .button:global(.game):global(.spottable):focus.focusExpand:active .bg {
+  transform: none;
+}
+:global(.spotlight-input-key) :global(.noAnimation) :global(.orange) .button:global(.game):global(.spottable):focus.focusExpand.pressed.small .bg,
+:global(.spotlight-input-mouse) :global(.noAnimation) :global(.orange) .button:global(.game):global(.spottable):focus.focusExpand.pressed.small .bg,
+:global(.spotlight-input-key) :global(.noAnimation) :global(.orange) .button:global(.game):global(.spottable):focus.focusExpand:active.small .bg,
+:global(.spotlight-input-mouse) :global(.noAnimation) :global(.orange) .button:global(.game):global(.spottable):focus.focusExpand:active.small .bg {
+  transform: none;
+}
+:global(.spotlight-input-touch) :global(.noAnimation) :global(.orange) .button:global(.game):global(.spottable):active .bg {
+  opacity: 1;
+  box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
+  background-color: var(--semantic-color-surface-default-focused);
+  filter: none;
+  box-shadow: none;
+}
+:global(.spotlight-input-touch) :global(.noAnimation) :global(.orange) .button:global(.game):global(.spottable):active.bordered .bg {
+  opacity: 1;
+  box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
+  background-color: var(--semantic-color-surface-default-focused);
+  filter: none;
+  box-shadow: none;
+}
+:global(.spotlight-input-touch) :global(.noAnimation) :global(.orange) .button:global(.game):global(.spottable):active.transparent .bg {
+  opacity: 1;
+  box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
+  background-color: var(--semantic-color-surface-default-focused);
+  filter: none;
+  box-shadow: none;
+}
+:global(.spotlight-input-touch) :global(.noAnimation) :global(.orange) .button:global(.game):global(.spottable):active.focusExpand .bg {
+  transform: none;
+}
+:global(.spotlight-input-touch) :global(.noAnimation) :global(.orange) .button:global(.game):global(.spottable):active.focusExpand.small .bg {
+  transform: none;
+}
+:global(.spotlight-input-touch) :global(.noAnimation) :global(.orange) .button:global(.game):global(.spottable):active.focusExpand.pressed .bg,
+:global(.spotlight-input-touch) :global(.noAnimation) :global(.orange) .button:global(.game):global(.spottable):active.focusExpand:active .bg {
+  transform: none;
+}
+:global(.spotlight-input-touch) :global(.noAnimation) :global(.orange) .button:global(.game):global(.spottable):active.focusExpand.pressed.small .bg,
+:global(.spotlight-input-touch) :global(.noAnimation) :global(.orange) .button:global(.game):global(.spottable):active.focusExpand:active.small .bg {
+  transform: none;
+}
+:global(.orange) .button:global(.game)[disabled] {
+  opacity: 1;
+}
+:global(.orange) .button:global(.game)[disabled] .client {
+  opacity: 0.3;
+}
+:global(.orange) .button:global(.game)[disabled].opaque .bg {
+  opacity: 0.3;
+}
+:global(.orange) .button:global(.game)[disabled].bordered .bg {
+  background-color: color(from var(--semantic-color-surface-default) srgb r g b / 0.5);
+}
+:global(.orange) .button:global(.game)[disabled].transparent.selected .bg {
+  opacity: 0.3;
+}
+:global(.orange) .button:global(.game)[disabled].bordered.selected .bg {
+  background-color: color(from var(--semantic-color-surface-default-selected) srgb r g b / 0.5);
+  filter: none;
+}
+:global(.spotlight-input-key) :global(.orange) .button:global(.game)[disabled]:global(.spottable):focus .bg,
+:global(.spotlight-input-mouse) :global(.orange) .button:global(.game)[disabled]:global(.spottable):focus .bg {
+  background-color: var(--semantic-color-surface-default-disabled-focused);
+}
+:global(.spotlight-input-key) :global(.orange) .button:global(.game)[disabled]:global(.spottable):focus.bordered .bg,
+:global(.spotlight-input-mouse) :global(.orange) .button:global(.game)[disabled]:global(.spottable):focus.bordered .bg {
+  border: 0.125rem solid var(--semantic-color-surface-default-disabled-focused);
+}
+:global(.spotlight-input-key) :global(.orange) .button:global(.game)[disabled]:global(.spottable):focus .client,
+:global(.spotlight-input-mouse) :global(.orange) .button:global(.game)[disabled]:global(.spottable):focus .client {
+  opacity: 0.4;
+}
+:global(.spotlight-input-touch) :global(.orange) .button:global(.game)[disabled]:global(.spottable):active .bg {
+  background-color: var(--semantic-color-surface-default-disabled-focused);
+}
+:global(.spotlight-input-touch) :global(.orange) .button:global(.game)[disabled]:global(.spottable):active.bordered .bg {
+  border: 0.125rem solid var(--semantic-color-surface-default-disabled-focused);
+}
+:global(.spotlight-input-touch) :global(.orange) .button:global(.game)[disabled]:global(.spottable):active .client {
+  opacity: 0.4;
+}