@import "../page-layout-base";
//
// Priority Content 12--2-8-2
//
// Source ordered layout for content priotization.
//
// ---------------------------------------------------------------------------
//
// Source order:
//   - first
//   - second
//   - third
//   - fourth
//
// Appearance (all regions active):
//   ------------------------------------------------------
//  |                        first                         |
//  |------------------------------------------------------|
//  |   third  |             second         |   fourth     |
//   ------------------------------------------------------
//

.fourcol-source-ordered-12--2-8-2 {

  // Third and fourth are active.
  .hr--3-4 {
    .l-r {
      width: span(6 of 12);
    }
  }

  //
  // Switch to priority ordering.
  //

  // Second and third.
  .hr--2-3 {
    .l-r {
      &:first-child {
        width: span(8 of 12);
      }

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

  // Second and fourth.
  .hr--2-4 {
    .l-r {
      &:first-child {
        width: span(8 of 12);
      }

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


  //
  // Three regions.
  //

  // First, second and third.
  .hr--1-2-3 {
    .l-r {
      &:first-child {
        order: 1;
      }

      &:nth-child(2) {
        width: span(8 of 12);
        order: 3;
      }

      &:last-child {
        width: span(4 of 12);
        order: 2;
      }
    }
  }

  // First, third and fourth.
  .hr--1-2-4 {
    .l-r {
      &:nth-child(2) {
        width: span(8 of 12);
      }

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

  // First, third and fourth.
  .hr--1-3-4 {
    .l-r {
      &:nth-child(2) {
        width: span(6 of 12);
      }

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

  // Two, three and 4col.
  .hr--2-3-4 {
    .l-r {
      &:first-child {
        width: span(8 of 12);
        order: 2;
      }

      &:nth-child(2) {
        width: span(2 of 12);
        order: 1;
      }

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


  // All regions active.
  .arc--4 {
    .l-r {
      &:first-child {
        order: 1;
      }

      &:nth-child(2) {
        width: span(8 of 12);
        order: 3;
      }

      &:nth-child(3) {
        width: span(2 of 12);
        order: 2;
      }

      &:last-child {
        width: span(2 of 12);
        order: 4;
      }
    }
  }
}