dialog {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--color-background);
  border: 0px;
  border-radius: var(--radius-m);
  margin: 0px;
}

.wizard-back-arrow {
  position: relative;
  top: var(--space-400);
  left: 0px;
  cursor: pointer;
}

.logo {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: var(--space-0);
  width: 100%;
}

.buttons {
  display: flex;
  flex-direction: row;
  width: 100%;
  align-items: center;
  justify-content: space-between;
}
.buttons :not([data-visible]) {
  visibility: hidden;
}
.buttons [data-visible] {
  visibility: visible;
}

.steps {
  opacity: 0.75;
  font-size: var(--text-size-s);
}
.steps > span {
  font-size: var(--text-size-s);
}

.tutorial {
  width: 100%;
  font-size: var(--text-size-xs);
  opacity: 0.75;
  margin-inline: auto;
  text-decoration: underline;
  padding: 0px;
}

.selector {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 480/270;
  height: 100%;
  width: 100%;
  padding: var(--space-0);
  user-select: none;
  cursor: pointer;
  overflow: hidden;
  text-transform: uppercase;
  transition: transform 250ms;
  transform: scale(1);
  overflow: visible;
}
.selector > div {
  position: absolute;
  content: "";
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  background-size: 100% 100%;
  background-image: linear-gradient(to top, var(--black-300), var(--black-300)), var(--map-url);
  z-index: -1;
}
.selector::before {
  position: absolute;
  content: "";
  top: 1px;
  left: 1px;
  right: 1px;
  bottom: 1px;
  transition: filter 250ms;
  background-size: 100% 100%;
  background-image: var(--map-url);
  filter: blur(0px);
  z-index: -2;
}

.selector:hover {
  transform: scale(1.075);
}
.selector:hover::before {
  filter: blur(5px);
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.site-selectors {
  position: absolute;
  top: var(--top);
  left: var(--left);
  bottom: var(--bottom);
  right: var(--right);
  transition: top 250ms, left 250ms, bottom 250ms, right 250ms;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 15px;
  padding: var(--space-0);
  background-size: 100% 100%;
  background-image: linear-gradient(to top, var(--black-300), var(--black-300)), var(--map-url);
}
.site-selectors > * {
  animation: fade-in 250ms 125ms linear both;
}

.back-arrow {
  position: absolute;
  top: var(--space-300);
  left: var(--space-300);
}

.site-selector {
  width: fit-content;
  min-width: 75%;
  font-size: var(--text-size-l);
  background-color: var(--color-layer);
}

.operator-selection-panel {
  width: 100%;
  height: 100%;
}
.operator-selection-panel > div {
  width: 100%;
  height: 100%;
}

.side-select {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
}

.side h3 {
  width: 100%;
  text-align: center;
}

.side-select-icon {
  --icon-color: var(--color-text);
  width: 100%;
  height: 100%;
  border: var(--border-l) solid var(--icon-color);
  cursor: pointer;
  background-color: transparent;
  transform: scale(1);
  transition: border-color 250ms, background-color 250ms, transform 250ms;
}
.side-select-icon:hover {
  --icon-color: var(--color-background);
  background-color: var(--color-text);
  transform: scale(1.1);
}
.side-select-icon * {
  transition: fill 250ms;
}

.operators-select {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-evenly;
  gap: var(--space-300);
}

.operator {
  position: relative;
  text-transform: capitalize;
  transform: scale(1);
  transition: transform 250ms;
}
.operator h3 {
  --text-border-width: var(--border-m);
  --text-border-color: var(--color-text);
  position: absolute;
  top: calc(50% + 75px);
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: var(--color-background);
  text-shadow: calc(-1 * var(--text-border-width)) 0 var(--text-border-color), 0 var(--text-border-width) var(--text-border-color), var(--text-border-width) 0 var(--text-border-color), 0 calc(-1 * var(--text-border-width)) var(--text-border-color);
}
.operator:has(.unselected-operator:hover) {
  cursor: pointer;
  transform: scale(1.1);
}
.operator:has(.operator-icon.loaded > *:hover) {
  cursor: pointer;
  transform: scale(1.1);
}
.operator:has(h3:hover) {
  cursor: pointer;
  transform: scale(1.1);
}

.operator .remove-operator {
  cursor: pointer;
  position: absolute;
  top: 0px;
  right: 0px;
  font-size: var(--heading-size-m);
}

.operator-icon.loaded.unselected-operator {
  width: 150px;
  height: 150px;
  margin: var(--space-400);
  font-size: var(--heading-size-m);
  display: grid;
  place-items: center;
  border: var(--border-l) dashed var(--color-text);
}

x-draw-surface {
  --flooring: #ffff004a;
  --soft-wall: #cbc62c;
  --door: #993120;
  --window: #cb6128;
}