@use 'src/styles/screen';
@use 'src/styles/variables' as vars;
@use '/src/styles/grid-sizes' as gridSizes;

@mixin intermediateScreens() {
  @media (min-width: vars.$media-breakpoint-desktop-min) and (max-width: 1180px) {
    @content;
  }

  @media (min-width: vars.$media-breakpoint-small-tablet-min) and (max-width: 880px) {
    @content;
  }
}


@mixin templateColumns($title: gridSizes.$title-column-width) {
  grid-template-columns:
                [title] $title
                [status] gridSizes.$status-width
                [beginning-time] gridSizes.$time-width
                [finish-time] minmax(gridSizes.$time-width, 1fr)
                [first-property] minmax(min-content, gridSizes.$time-group-width)
                [second-property] minmax(min-content, 160px);
}

.transition {
  display: grid;
  grid-gap: gridSizes.$gap-medium;
  @include templateColumns;

  @include screen.tablets {
    grid-gap: gridSizes.$gap-small;
    @include templateColumns(gridSizes.$title-column-width-tablets);
  }

  &__first-property {
    grid-area: 1 / 5 / 2 / 6; // fifth column of the first row

    @include intermediateScreens {
      grid-area: 2 / 2 / 3 / 3; // second column of the second row
    }
  }

  &__second-property {
    grid-area: 1 / 6 / 2 / 7; // sixth column of the first row

    @include intermediateScreens {
      grid-area: 2 / 3 / 3 / 4; // third column of the second row
    }
  }

  &__third-property {
    grid-area: 2 / 2 / 3 / 4; // second and third columns of the second row

    @include intermediateScreens {
      grid-area: 2 / 4 / 3 / 6; // fourth and fifth columns of the second row
    }
  }

  &__bag-belt.transition__first-property {
    grid-area: 1 / 5 / 2 / 7; // fifth and sixth columns of the first row
  }
}
