.connection-prompt {
  h2 {
    text-align: center;
    margin: 0 0 1rem;
  }

  .from-to {
    margin-bottom: 1rem;
    align-items: center;

    .arrow {
      width: 2rem;

      svg {
        width: 2rem;
        height: 2rem;
        fill: currentColor;
        transform: rotate(-45deg);
      }
    }

    .from, .to {
      flex-grow: 1;
      text-align: center;
      font-weight: bold;
      flex-basis: calc(50% - 1.5rem);
    }
  }

  .button, .button:link {
    background: var(--bg);
    color: var(--font);
    margin-bottom: 0.5rem;

    &:hover {
      background: var(--alt-bg);
      color: var(--floating);
    }

    .map-name {
      flex: 0 0 2rem;
    }
    .sig-id {
      flex: 0 0 5rem;
    }
    .leads-to {
      flex: 0 1 100%;
    }
  }

  .cancel {
    margin-top: 1rem;
  }
}