@import 'settings';

// Deprecated, use new 4/4/8 grid instead.
// CSS grid implementation of columns for all screens sizes
@mixin vf-grid-column($col) {
  @supports (display: grid) {
    grid-column-end: span #{$col};

    //nesting
    @if $col > 1 {
      & .row {
        grid-template-columns: repeat($col, minmax(0, 1fr));
      }
    }
  }
}

@mixin vf-grid-column-reordering($label, $col-count, $reset: false) {
  @for $i from 1 through $col-count {
    .row [class*='#{$grid-column-prefix}'].#{$grid-column-prefix}start-#{$label}-#{$i} {
      @if $reset {
        grid-column-start: initial;
      } @else {
        grid-column-start: #{$i};
      }
    }

    .#{$grid-column-prefix}order-#{$label}-#{$i} {
      @if $reset {
        order: initial;
      } @else {
        order: #{$i};
      }
    }
  }
}

@mixin vf-p-grid {
  // FIXME: this should be removed from framework SCSS
  // (see https://github.com/canonical/vanilla-framework/issues/3199)
  .grid-demo .col,
  .grid-demo [class*='#{$grid-column-prefix}'] {
    background: $colors--theme--background-negative-default;
    margin-bottom: $spv--small;
  }

  .row {
    @extend %vf-row;
  }

  // mobile grid

  // by default medium and large screen col classes should span full width on mobile (to match block level element behaviour)
  %span-full-grid-on-mobile {
    grid-column: auto / span $grid-columns-small;
  }

  @for $i from 1 through $grid-columns-medium {
    .#{$grid-medium-col-prefix}#{$i} {
      @extend %span-full-grid-on-mobile;
      @extend %display-block;
    }
  }

  @for $i from 1 through $grid-columns {
    .#{$grid-large-col-prefix}#{$i} {
      @extend %span-full-grid-on-mobile;
      @extend %display-block;
    }
  }

  // col-small-X classes define grid for small screen
  @for $i from $grid-columns-small through 1 {
    .#{$grid-small-col-prefix}#{$i} {
      @extend %display-block;
      @include vf-grid-column($i);

      width: 100%;
    }
  }

  // tablet grid

  // on medium/tablet screens, small and large grid class names span full width (to match block level element behaviour)
  %span-full-grid-on-tablet {
    @media (min-width: $threshold-4-6-col) {
      grid-column: auto / span $grid-columns-medium;
    }
  }

  @for $i from 1 through $grid-columns-small {
    .#{$grid-small-col-prefix}#{$i} {
      @extend %span-full-grid-on-tablet;
    }
  }

  @for $i from 1 through $grid-columns {
    .#{$grid-large-col-prefix}#{$i} {
      @extend %span-full-grid-on-tablet;
    }
  }

  // col-medium-X classes define grid for medium screens
  @media (min-width: $threshold-4-6-col) {
    @for $i from $grid-columns-medium through 1 {
      .#{$grid-medium-col-prefix}#{$i} {
        @include vf-grid-column($i);

        width: 100%;
      }
    }
  }

  // desktop grid

  // on desktop screens small and medium grid class names span full width (to match block level element behaviour)
  %span-full-grid-on-desktop {
    @media (min-width: $threshold-6-12-col) {
      grid-column: auto / span $grid-columns;
    }
  }

  @for $i from 1 through $grid-columns-small {
    .#{$grid-small-col-prefix}#{$i} {
      @extend %span-full-grid-on-desktop;
    }
  }

  @for $i from 1 through $grid-columns-medium {
    .#{$grid-medium-col-prefix}#{$i} {
      @extend %span-full-grid-on-desktop;
    }
  }

  // col-X class names define grid on large/desktop screens
  @media (min-width: $threshold-6-12-col) {
    @for $i from $grid-columns through 1 {
      // set col-* to span respective number of columns on desktop
      .#{$grid-large-col-prefix}#{$i} {
        // on smaller screens let them display full width one under another
        @include vf-grid-column($i);
      }
    }
  }

  // column reordering
  $offsets: (
    (small, 0, $threshold-4-6-col, $grid-columns-small),
    (medium, $threshold-4-6-col, $threshold-6-12-col, $grid-columns-medium),
    (large, $threshold-6-12-col, false, $grid-columns)
  );

  @each $label, $breakpoint-min, $breakpoint-reset, $col-count in $offsets {
    @if $breakpoint-min == 0 {
      @include vf-grid-column-reordering($label, $col-count);
    } @else {
      @media (min-width: #{$breakpoint-min}) {
        @include vf-grid-column-reordering($label, $col-count);
      }
    }

    @if $breakpoint-reset {
      @media (min-width: #{$breakpoint-reset}) {
        @include vf-grid-column-reordering($label, $col-count, $reset: true);
      }
    }
  }

  // variants

  // deprecated, will be removed in v5
  .row.is-bordered {
    position: relative;

    &::before {
      background: $colors--theme--border-low-contrast;
      content: '';
      height: 1px;
      left: map-get($grid-margin-widths, small);
      position: absolute;
      right: map-get($grid-margin-widths, small);

      @media (min-width: $threshold-4-6-col) {
        left: map-get($grid-margin-widths, default);
        right: map-get($grid-margin-widths, default);
      }

      @media (min-width: $threshold-6-12-col) {
        left: map-get($grid-margin-widths, default);
        right: map-get($grid-margin-widths, default);
      }
    }
  }

  // Common grid patterns
  $col-50-medium: calc($grid-columns-medium / 2);

  $col-25: calc($grid-columns / 4);
  $col-50: calc($grid-columns / 2);
  $col-75: calc(($grid-columns / 4) * 3);

  // 50/50 split on medium and large screens
  .row--50-50 {
    @extend %vf-row;

    > .col {
      @include vf-grid-column($grid-columns-small);

      @media (min-width: $threshold-4-6-col) {
        @include vf-grid-column($col-50-medium);
      }

      @media (min-width: $threshold-6-12-col) {
        @include vf-grid-column($col-50);
      }
    }
  }

  // 25/75 split on medium and large screens
  .row--25-75 {
    @extend %vf-row;

    > .col {
      @include vf-grid-column($grid-columns-small);

      @media (min-width: $threshold-4-6-col) {
        &:nth-of-type(1) {
          @include vf-grid-column(2);
        }

        &:nth-of-type(2) {
          @include vf-grid-column(4);
        }

        // if there is only one column, use the whole width
        &:only-of-type {
          @include vf-grid-column(6);
        }
      }

      @media (min-width: $threshold-6-12-col) {
        &:nth-of-type(1) {
          @include vf-grid-column($col-25);
        }

        &:nth-of-type(2) {
          @include vf-grid-column($col-75);
        }

        // if there is only one column we offset it to the right
        &:only-of-type {
          grid-column-start: calc($col-25 + 1);
          @include vf-grid-column($col-75);
        }
      }
    }
  }

  // 50/50 split just on medium screens
  .row--50-50-on-medium {
    @extend %vf-row;

    > .col {
      @media ($threshold-4-6-col <= width < $threshold-6-12-col) {
        @include vf-grid-column($col-50-medium);
      }
    }
  }

  .row--25-75-on-medium {
    @extend %vf-row;

    > .col {
      @media ($threshold-4-6-col <= width < $threshold-6-12-col) {
        &:nth-of-type(1) {
          @include vf-grid-column(2);
        }

        &:nth-of-type(2) {
          @include vf-grid-column(4);
        }

        // if there is only one column, use the whole width
        &:only-of-type {
          @include vf-grid-column(6);
        }
      }
    }
  }

  // 50/50 split just on large screens
  .row--50-50-on-large {
    @extend %vf-row;

    > .col {
      @media (min-width: $threshold-6-12-col) {
        @include vf-grid-column($col-50);
      }
    }
  }

  .row--25-75-on-large {
    @extend %vf-row;

    > .col {
      @media (min-width: $threshold-6-12-col) {
        &:nth-of-type(1) {
          @include vf-grid-column($col-25);
        }

        &:nth-of-type(2) {
          @include vf-grid-column($col-75);
        }

        // if there is only one column we offset it to the right
        &:only-of-type {
          grid-column-start: calc($col-25 + 1);
          @include vf-grid-column($col-75);
        }
      }
    }
  }

  // 75/25 split on medium and large screens
  .row--75-25 {
    @extend %vf-row;

    > .col {
      @include vf-grid-column($grid-columns-small);

      @media (min-width: $threshold-4-6-col) {
        &:nth-of-type(1) {
          @include vf-grid-column(4);
        }

        &:nth-of-type(2) {
          @include vf-grid-column(2);
        }

        // if there is only one column, use the whole width
        &:only-of-type {
          @include vf-grid-column(6);
        }
      }

      @media (min-width: $threshold-6-12-col) {
        &:nth-of-type(1) {
          @include vf-grid-column($col-75);
        }

        &:nth-of-type(2) {
          @include vf-grid-column($col-25);
        }
      }
    }
  }

  .row--75-25-on-medium {
    @extend %vf-row;

    > .col {
      @media ($threshold-4-6-col <= width < $threshold-6-12-col) {
        &:nth-of-type(1) {
          @include vf-grid-column(4);
        }

        &:nth-of-type(2) {
          @include vf-grid-column(2);
        }

        // if there is only one column, use the whole width
        &:only-of-type {
          @include vf-grid-column(6);
        }
      }
    }
  }

  .row--75-25-on-large {
    @extend %vf-row;

    > .col {
      @media (min-width: $threshold-6-12-col) {
        &:nth-of-type(1) {
          @include vf-grid-column($col-75);
        }

        &:nth-of-type(2) {
          @include vf-grid-column($col-25);
        }
      }
    }
  }

  .row--25-25-50 {
    @extend %vf-row;

    > .col {
      @include vf-grid-column($grid-columns-small);

      @media (min-width: $threshold-4-6-col) {
        &:nth-of-type(-n + 2) {
          @include vf-grid-column($col-50-medium);
        }

        &:nth-of-type(3) {
          @include vf-grid-column($grid-columns-medium);
        }
      }

      @media (min-width: $threshold-6-12-col) {
        &:nth-of-type(1),
        &:nth-of-type(2) {
          @include vf-grid-column($col-25);
        }

        &:nth-of-type(3) {
          @include vf-grid-column($col-50);
        }
      }
    }
  }

  .row--25-25-25-25 {
    @extend %vf-row;

    > .col {
      @include vf-grid-column($grid-columns-small);

      @media (min-width: $threshold-4-6-col) {
        @include vf-grid-column($col-50-medium);
      }

      @media (min-width: $threshold-6-12-col) {
        @include vf-grid-column($col-25);
      }
    }
  }
}