:root {
  --button-color: #02e4fd;
  --button-color-secondary: #02d0e7;
}

.nes-btn {
  color: black;
  font-weight: bold;
  border: 0;
  position: relative;
  background-color: var(--button-color);
  box-shadow: inset -4px -4px rgba(63, 63, 63, 0.25);
  width: fit-content;
  padding: 1em;
  cursor: pointer;
  border: 3px solid black;
} 

.nes-btn.is-secondary {
  --color: rgb(225, 147, 1);
  background-color: orange;
}

.nes-btn:hover:not(button[disabled]) {
  --color: purple;
  box-shadow: inset -5px -5px rgba(63, 63, 63, 0.25);
  background-color: var(--button-color-secondary);
}

.nes-btn.is-secondary:hover {
  background-color: var(--color) !important;
}

.loading {
  content: "Loading...";
}
/* "cursor" and "cursor-click" icon source: https://nostalgic-css.github.io/NES.css/ */
#phaser-container:hover:not(disabled) {
  cursor: url(../assets/cursor/cursor.png), auto;
}

button:hover:not(disabled) {
  cursor: url(../assets/cursor/cursor-click.png), auto;
}

/* loading icon source: http://www.rw-designer.com/cursor-detail/112959 */
#phaser-container.loading-cursor-frame-0:hover {
  cursor: url(../assets/cursor/loading/frame_0_delay-0.16s.png), auto;
}

#phaser-container.loading-cursor-frame-1:hover {
  cursor: url(../assets/cursor/loading/frame_1_delay-0.16s.png), auto;
}

#phaser-container.loading-cursor-frame-2:hover {
  cursor: url(../assets/cursor/loading/frame_2_delay-0.16s.png), auto;
}

#phaser-container.loading-cursor-frame-3:hover {
  cursor: url(../assets/cursor/loading/frame_3_delay-0.16s.png), auto;
}

#phaser-container.loading-cursor-frame-4:hover {
  cursor: url(../assets/cursor/loading/frame_4_delay-0.16s.png), auto;
}

#phaser-container.loading-cursor-frame-5:hover {
  cursor: url(../assets/cursor/loading/frame_5_delay-0.16s.png), auto;
}

#phaser-container.loading-cursor-frame-6:hover {
  cursor: url(../assets/cursor/loading/frame_6_delay-0.16s.png), auto;
}

#phaser-container.loading-cursor-frame-7:hover {
  cursor: url(../assets/cursor/loading/frame_7_delay-0.16s.png), auto;
}