@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;
  }

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

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

  &__day-change {
    margin-top: vars.$space-s;
    margin-left: vars.$space-s;
  }

  &__old-time,
  &__scheduled--delayed {
    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%;
    }
  }
}
