@use 'src/styles/screen' as *;
@use 'src/styles/variables' as *;


@mixin right-to-left() {
  .time-group__day-change {
    order: 1;

    margin-right: $space-s;
    margin-left: 0;
  }

  .time-group__times {
    order: 2;
  }
}

@mixin right-layout {
  @include right-to-left;

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

.time-group--right {
  justify-content: flex-end;
}

.time-group--day-change-left {
  @include right-to-left;
}

.time-group--day-change-mobile-left {
  @include mobile {
    @include right-to-left;
  }
}

.time-group--day-change-mobile-right {
  @include gt-mobile {
    @include right-to-left;
  }
}

.time-group--right {
  @include right-layout;
}

.time-group--mobile-right {
  @include mobile {
    @include right-layout;
  }
}

.time-group--mobile-left {
  @include gt-mobile {
    @include right-layout;
  }
}

.time-group--day-change-absolute {
  position: relative;

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

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

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