@import "../page-layout-base";
//
// Priority Content Inset Left (4-8-4-4)
//
// Source ordered layout for content prioritization. Note these layouts take
// full account of any comibination of active regions - the layout adapts to
// whatever subset of regions are active at any one time.
// ---------------------------------------------------------------------------
//
// Actual Source Order:
//
//  - first
//  - second
//  - third
//  - fourth
//
// Appearance:
//
//  -------------------------------------------------------
//  |  fourth (4)    |             first (8)               |
//  |                ---------------------------------------
//  |                |    second (4)   |     third (4)     |
//  -------------------------------------------------------
//  Key: region-name (grid columns)


.fourcol-source-ordered-inset-left {
  // Region first and second or third are active.
  .hr--1-2,
  .hr--1-3 {
    .l-r {
      &:first-child {
        @include span(8 of 12);
      }

      &:last-child {
        @include span(4 of 12 last);
      }
    }
  }


  // Region second and third are active.
  .hr--2-3 {
    .l-r {
      @include span(6 of 12);

      &:last-child {
        @include last;
      }
    }
  }


  // Fourth and first, second or third are active.
  .hr--1-4,
  .hr--2-4,
  .hr--3-4 {
    .l-r {
      &:first-child {
        @include push(4 of 12);
        @include span(8 of 12);
      }

      &:last-child {
        @include pull(12 of 12);
        @include span(4 of 12);
      }
    }
  }


  // First, second and third are active.
  .hr--1-2-3 {
    .l-r {
      &:nth-child(2),
      &:last-child {
        @include span(6 of 12);
      }

      &:last-child {
        @include last;
      }
    }
  }


  // First and fourth plus second or third are active.
  .hr--1-2-4,
  .hr--1-3-4 {
    .l-r {
      &:first-child {
        @include span(last 8);
      }

      &:nth-child(2) {
        clear: $flow-to;
        @include span(8 at 5 isolate);
      }

      &:last-child {
        width: span(4);
      }
    }
  }


  // Second, third and forth are active.
  .hr--2-3-4 {
    .l-r {
      &:first-child {
        @include push(3 of 12);
        @include span(5 of 12);
      }

      &:nth-child(2) {
        @include span(4 of 12 last);
      }

      &:last-child {
        @include span(5 of 12);
      }
    }
  }


  // All regions are active
  // $to is a flow direction variable, see _base.scss
  .arc--4 {
    .l-r {
      &:first-child {
        @include span(9 of 12 last);
      }

      &:nth-child(2) {
        clear: $flow-to;
        @include span(4 of 12 at 4 isolate);
      }

      &:nth-child(3) {
        @include span(3 of 12 isolate last);
      }

      &:last-child {
        width: span(3 of 12);
      }
    }
  }
}

