.nes-ui-modal {
  padding: 4px;
  border-width: $border-size;
  display: block;
  width: 80vw;

  > :last-child {
    margin-bottom: 0;
  }

  &.nes-ui-is-rounded {
    @include pixel-borders(
      $corner-size: 1,
      $border-size: $border-size,
      $border-color: 'color-black-absolute',
      $border-inset-color: false
    );
  }

  .nes-ui-modal-content {
    margin: 8px;
    margin-top: 8px;
    margin-bottom: 8px;
  }

  color: $base-color;
  background-color: var(--color-white-absolute);
  border-color: $background-color;

  &:not(.nes-ui-is-rounded)::before {
    position: absolute;
    top: -$border-size * 2;
    right: -$border-size * 2;
    bottom: -$border-size * 2;
    left: -$border-size * 2;
    z-index: -1;
    content: '';
    border: var(--border-size) solid var(--color-white-absolute);
  }
  border-radius: none;
  z-index: 10000;
  top: 100px;
  position: fixed;
} 

.nes-ui-dark-mode {
  .nes-ui-modal {
    border-color: var(--color-white-absolute);
    color: $background-color;
    background-color: $base-color;
    border-color: $background-color;

    &.nes-ui-is-rounded {
      @include pixel-borders(
        $corner-size: 1,
        $border-size: $border-size,
        $border-color: 'color-white-absolute',
        $border-inset-color: false
      );
    }

    &:not(.nes-ui-is-rounded)::before {
      position: absolute;
      top: -$border-size * 2;
      right: -$border-size * 2;
      bottom: -$border-size * 2;
      left: -$border-size * 2;
      z-index: -1; 
      content: '';
      border: var(--border-size) solid var(--color-white-absolute);
    }
  }
}

.nes-ui-modal-backdrop {
  z-index: 9999;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0,0,0,0.5);
}