@use "scss/colors";
@use "scss/variables";

.container {
  display: flex;
  gap: variables.$spacing-2xl;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.heading {
  color: colors.$dark-blue;

  strong {
    color: colors.$blue;
  }
}

.sourcesTitle,
.destinationsTitle {
  color: colors.$dark-blue-500;
  text-align: center;
  cursor: help;

  // Required to have the title centered (no matter it's length) above the buttons
  // without extending the size of this flex box, which would cause the buttons to be
  // unaligned with the illustration
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  margin-top: -1.5 * variables.$spacing-xl;
}

.sources,
.destinations {
  display: flex;
  width: fit-content;
  flex-direction: column;
  position: relative;

  // Manual spacing/margin to align with the illustration in the center
  gap: 12px;
  margin-top: -7px;
}

.connectors {
  display: flex;
  margin-top: variables.$spacing-2xl;
}

.moreIcon,
.connectorIcon {
  width: 38px;
  height: 38px;
}

.moreIcon {
  color: colors.$blue;
}

.footer {
  display: flex;
  flex-direction: column;
  gap: variables.$spacing-xl;
}

.illustration {
  color: colors.$foreground;
}
