@use "../../styles/colors" as colors;
@use "../../styles/screen" as screen;
@use "../../styles/fonts" as fonts;

.station {
  display: flex;
  flex-direction: column;
  font-size: 0;

  &__city {
    max-width: 100%;

    &--bold {
      font-size: fonts.$font-size-m;
      font-weight: fonts.$font-medium;
      color: colors.$text-color;
      line-height: 1.25;
    }
  }

  // Matches Angular's terminal-link: $font-size-s (12px), $light-gray
  // (#657282), 16px line-height, underline. Previous #8a8a8a was a
  // shade too pale and read as disabled text.
  &__terminal {
    font-size: fonts.$font-size-s;
    color: colors.$light-gray;
    text-decoration: underline;
    line-height: 16px;

    // The `--link` variant renders an <a> to the airport's site (SVO,
    // VKO, …). Match Angular's terminal-link blue hover state; the
    // dotted underline keeps it visually distinct from a full-blue
    // CTA without losing its "clickable" affordance.
    &--link {
      color: colors.$blue;
      cursor: pointer;

      &:hover {
        color: colors.$blue--hover;
      }
    }
  }

  &--city-first {
    gap: 2px;
  }

  &__old-city {
    text-decoration: line-through;
  }

  &__terminal {
    @include screen.smTablet {
      max-height: initial;
    }
  }

  &--right {
    align-items: flex-end;

    .station__terminal {
      text-align: right;
    }
  }

  &--mobile-right {
    @include screen.mobile {
      align-items: flex-end;

      .station__terminal {
        text-align: right;
      }
    }
  }

  &--mobile-left {
    @include screen.gt-mobile {
      align-items: flex-end;
    }
  }

  &--center {
    align-items: center;
  }
}
