.map-show {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  background: var(--base00);

  .map-section {
    flex: 1 1 auto;
    background: var(--base3);

    .scroll-wrapper {
      height: calc(100vh - 7.75rem);
    }
  }

  .system-section {
    flex: 1 1 30rem;
    background: var(--base3);
    height: calc(100vh - 2.125rem);

    .lookup {
      padding: 1rem 1rem 0;
    }
  }

  .scroll-wrapper {
    padding-bottom: 2rem;
    overflow-y: auto;

    &::-webkit-scrollbar, &::-webkit-scrollbar-button {
      width: 0.125rem;
      height: 0.25rem;
    }

    &::-webkit-scrollbar-track, &::-webkit-scrollbar-track-piece {
      background: transparent;
    }

    &::-webkit-scrollbar-thumb {
      background: var(--base00);
    }
  }
}

@supports not selector(::-webkit-scrollbar) {
  .scroll-wrapper {
    scrollbar-width: thin;
    scrollbar-color: var(--base00) transparent;
  }
}

.map-doorbell {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  justify-content: center;
  align-items: center;
  padding: 4rem 1rem 4rem;
  height: calc(100vh - 3rem);

  .message {
    text-align: center;
  }

  button {
    appearance: none;
    text-align: center;
    background: var(--base03);
    color: var(--base3);
    padding: 1rem 2rem;
    cursor: pointer;
  }
}

.undo {
  display: none;
}