@import url("../../css/game.css");

#lockedDoor {
  position: absolute;

  height: 230px;
  --s-w: 140px;
  --o-w: calc(var(--s-w) * 2);

  border: 4px solid black;
}
.shut {
  background-image: url("assets/door1.png");
  background-size: 100% 100%;
  width: var(--s-w);
}
.open {
  --right: rgb(61, 34, 33);
  --left: rgb(26, 10, 19);
  background: linear-gradient(90deg, var(--left) 0%, var(--left) 50%, var(--right) 51%, var(--right) 100%);
  width: var(--o-w);
}
.open::after {
  content: "DUDD";
  color: white;
  position: absolute;
  top: 5px;
  left: 5px;
  z-index: 10;
}

#exit {
  width: 80px;
  position: absolute;
}

#switchboard {
  background-color: rgb(14, 14, 15);
  width: 220px;
  height: 100px;
  position: absolute;
  border-radius: 10px;
}
#switchboard::after {
  --height: 10%;

  content: '';
  background-color: rgb(44, 44, 44);
  width: 40%;
  height: var(--height);
  position: absolute;
  top: calc(-1 * var(--height));
  left: 10%;
}
#switchboard > h2 {
  color: red;
  user-select: none;
  text-align: center;
}
#switchboard > div {
  display: flex;
  gap: 10px;
  padding: 10px;
  width: 100%;
  height: 100%;

  background-image: url("assets/sb.png");
  background-size: contain;
}

#map {
  background-color: rgb(64, 66, 68);
}

.switchboardSlot {
  /* background-color: aquamarine; */

  box-sizing:border-box;
  width: 37px;
  height: 40px;
  position: unset;

  display: flex;
  align-items: center;
  justify-content: center;

  top: 19px;
  left: 11px;
}

.switchboardSlot > .item {
  cursor: pointer;
  width: 55px;
}

.item {
  width: 70px;
}

.switch {
  width: 60px;
}