/* Styles for NameSetter component when no name is set */
.NameSetter-root {
  position: relative;
  width: 100%;
}

.NameSetter-titleWrapper {
  flex-grow: 1;
  z-index: 50; /* behind dialog which MUI renders with higher z-index */
}

.NameSetter-titleImage {
  position: absolute;
  top: 0;
  left: 0;
  /* width: 100%; */
  height: auto;
  display: block;
}

/* When name is not set, position the dialog 10% from bottom and center it horizontally */
.NameSetter-dialogPaperNoName {
  position: fixed !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  bottom: 10vh !important; /* 10% from bottom of viewport */
  margin: 0 !important;
  max-width: 600px;
  width: min(90%, 600px);
  z-index: 100; /* above the title image */
}

/* Keep the dialog title content centered when overlaying the image */
.NameSetter-dialogTitle {
  text-align: center;
}

/* Ensure the input doesn't stretch full width too much when overlaying */
.NameSetter-nameInput {
  text-align: center;
}
