@use "../../../../styles/colors" as colors;
@use "../../../../styles/variables" as vars;
@use "../../../../styles/fonts" as fonts;

.full-route-timeline {
  background: colors.$white;
  border-radius: vars.$border-radius;
  padding: vars.$space-l vars.$space-xl;
  margin-bottom: vars.$space-l;

  @media (max-width: 640px) {
    display: none;
  }
}

.timeline {
  display: flex;
  align-items: center;
  gap: vars.$space-l;

  &__arrow {
    background: transparent;
    border: 1px solid colors.$border;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    cursor: pointer;
    color: colors.$blue;
    font-size: fonts.$font-size-l;

    &:disabled { opacity: 0.3; cursor: not-allowed; }
  }

  &__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: vars.$space-s2;
  }

  &__row {
    display: flex;
    align-items: center;
    gap: vars.$space-s2;

    &--times {
      font-size: fonts.$font-size-xl;
      font-weight: fonts.$font-medium;
      color: colors.$blue-dark;
    }

    &--stations {
      font-size: fonts.$font-size-m;
      color: colors.$light-gray;
    }
  }

  // §4.1.15.5 Маршрут rows 3 & 9: "+X"/"-X" day-change badge on time cells.
  &__time-cell {
    display: inline-flex;
    align-items: baseline;
    gap: 2px;
  }

  &__day-change {
    font-size: fonts.$font-size-s;
    font-weight: fonts.$font-bold;
    color: colors.$orange;
    line-height: 1;
  }
}

.timeline-section {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;

  &__separator {
    flex: 1;
    height: 1px;
    background: colors.$border;
  }

  &__number {
    position: absolute;
    top: -20px;
    background: colors.$blue-icon;
    color: colors.$blue;
    border-radius: 10px;
    padding: 2px 8px;
    font-size: fonts.$font-size-s;
    font-weight: fonts.$font-bold;
  }

  &__duration {
    font-size: fonts.$font-size-s;
    color: colors.$light-gray;
    padding: 0 8px;
    background: colors.$white;

    &--specifying { color: colors.$orange; }
  }
}

.station {
  display: flex;
  flex-direction: column;
  gap: 2px;

  &--right { align-items: flex-end; text-align: right; }
  &--center { align-items: center; text-align: center; }

  &__city { font-size: fonts.$font-size-m; font-weight: fonts.$font-medium; color: colors.$blue-dark; }
  &__code { font-size: fonts.$font-size-s; color: colors.$light-gray; }
  &__terminal { font-size: 11px; color: colors.$light-gray; }

  &--large { .station__city { font-size: fonts.$font-size-xl2; } }
  &--small { .station__city { font-size: fonts.$font-size-s; } }
}

.station-change {
  display: flex;
  align-items: center;
  gap: vars.$space-s2;

  &__arrow { color: colors.$blue; }
  &__city { font-size: fonts.$font-size-s; color: colors.$light-gray; }
  &__code { font-size: fonts.$font-size-m; font-weight: fonts.$font-medium; color: colors.$blue-dark; }
}
