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

.time-group {
  display: inline-flex;

  &__times {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  // Angular's time-group renders the 'big' time at size 30 / weight 300
  // (light) and keeps the old scheduled time small + orange + strikethrough
  // (`text size=12 color=orange`). Apply those dimensions directly on the
  // spans so callers don't need to override font-size.
  &__actual,
  &__scheduled {
    font-size: fonts.$font-size-xxl;
    font-weight: fonts.$font-light;
    color: colors.$text-color;
    line-height: 1.15;
  }

  &__actual {
    display: flex;
    align-items: flex-start;
  }

  &__utc {
    margin-top: 2px;
    margin-left: vars.$space-s;
  }

  // Mirrors Angular `day-change-square.component.scss`: a 1px box in
  // $blue-icon with 2px rounding + 10px bold $blue-light text, not a
  // plain `+1` string. Renders as a small chip next to the time.
  &__day-change {
    display: inline-block;
    margin-top: vars.$space-s;
    margin-left: vars.$space-s;
    padding: 0 3px;
    border: 1px solid colors.$blue-icon;
    border-radius: 2px;
    font-size: fonts.$font-size-xs;
    line-height: 11px;
    text-align: center;
    color: colors.$blue-light;
    font-weight: fonts.$font-bold;
  }

  &__old-time,
  &__scheduled--delayed {
    font-size: fonts.$font-size-s;
    font-weight: fonts.$font-regular;
    color: colors.$orange;
    line-height: 1.3;
    text-decoration: line-through;
  }

  &__specifying {
    display: flex;
    align-items: center;
  }

  // Size variants
  &--medium {
    .time-group__day-change {
      margin-top: 3px;
    }
  }

  &--small,
  &--extra-small {
    .time-group__utc {
      margin-top: 0;
      font-size: fonts.$font-size-xs;
      line-height: 13px;
    }

    .time-group__day-change {
      margin-top: 1px;
    }
  }

  // Positioning variants
  &--right {
    justify-content: flex-end;

    .time-group__day-change {
      order: 1;
      margin-right: vars.$space-s;
      margin-left: 0;
    }

    .time-group__times {
      order: 2;
      align-items: flex-end;
    }
  }

  &--day-change-left {
    .time-group__day-change {
      order: 1;
      margin-right: vars.$space-s;
      margin-left: 0;
    }

    .time-group__times {
      order: 2;
    }
  }

  &--day-change-mobile-left {
    @include screen.mobile {
      .time-group__day-change {
        order: 1;
        margin-right: vars.$space-s;
        margin-left: 0;
      }

      .time-group__times {
        order: 2;
      }
    }
  }

  &--day-change-mobile-right {
    @include screen.gt-mobile {
      .time-group__day-change {
        order: 1;
        margin-right: vars.$space-s;
        margin-left: 0;
      }

      .time-group__times {
        order: 2;
      }
    }
  }

  &--mobile-right {
    @include screen.mobile {
      .time-group__day-change {
        order: 1;
        margin-right: vars.$space-s;
        margin-left: 0;
      }

      .time-group__times {
        order: 2;
        align-items: flex-end;
      }
    }
  }

  &--mobile-left {
    @include screen.gt-mobile {
      .time-group__day-change {
        order: 1;
        margin-right: vars.$space-s;
        margin-left: 0;
      }

      .time-group__times {
        order: 2;
        align-items: flex-end;
      }
    }
  }

  &--day-change-absolute {
    position: relative;

    .time-group__day-change {
      position: absolute;
      top: 0;
      left: 100%;
    }
  }

  &--mobile-right.time-group--day-change-absolute {
    @include screen.mobile {
      .time-group__day-change {
        left: auto;
        right: 100%;
      }
    }
  }

  &--right.time-group--day-change-absolute {
    .time-group__day-change {
      left: auto;
      right: 100%;
    }
  }
}
