@import "../../styles/themes";

.emulator-output {
  position: relative;
  align-self: center;
}

.emulator-canvas {
  border-style: solid;
  border-width: 0.1rem;
}

.emulator-cartridge,
.emulator-loader {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.emulator-cartridge {
  width: 8rem;
  height: auto;
  opacity: 0;
  transition: opacity 0.25s ease-in-out;

  @nest .drag-over & {
    opacity: 1;
  }
}

@each $theme in $themes {
  .$theme .emulator-canvas {
    border-color: var(--$(theme)-canvas-border-color);
  }
}

@import "../../styles/themes";

.emulator-output {
  position: relative;
  align-self: center;
}

.emulator-canvas {
  border-style: solid;
  border-width: 0.1rem;

  @nest .emulator-output:fullscreen & {
    border-style: none;
    border-width: 0;
  }
}

.emulator-cartridge,
.emulator-loader {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.emulator-cartridge {
  width: 8rem;
  height: auto;
  opacity: 0;
  transition: opacity 0.25s ease-in-out;

  @nest .drag-over & {
    opacity: 1;
  }
}

@each $theme in $themes {
  .$theme .emulator-canvas {
    border-color: var(--$(theme)-canvas-border-color);
  }
}

Hide canvas border when in fullscreen
Hide canvas border when in fullscreen
