// Components / Layout Column

$percent_1_12: 8.3333333333333%;
$percent_2_12: 16.6666666666667%;
$percent_3_12: 25%;
$percent_4_12: 33.3333333333333%;
$percent_5_12: 41.6666666666667%;
$percent_6_12: 50%;
$percent_7_12: 58.3333333333333%;
$percent_8_12: 66.6666666666667%;
$percent_9_12: 75%;
$percent_10_12: 83.33333333333335%;
$percent_11_12: 91.6666666666667%;
$percent_12_12: 100%;

.row{
  --rowGap: 0;

  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  margin-bottom: var(--rowGap);

  &.auto{
    flex-wrap:nowrap;

    & > *{
      flex:1;
    }
  }

  &.gap-none{ --rowGap: var(--gapNone); }
  &.gap-xsmall{ --rowGap: var(--gapXSmall); }
  &.gap-small{ --rowGap: var(--gapSmall); }
  &.gap-medium{ --rowGap: var(--gapMedium); }
  &.gap-large{ --rowGap: var(--gapLarge); }
  &.gap-xlarge{ --rowGap: var(--gapXLarge); }

  &.column-gap-none{
    .column{ --rowGap: var(--gapNone); }
  }

  &.column-gap-xsmall{
    .column{ --rowGap: var(--gapXSmall); }
  }

  &.column-gap-small{
    .column{ --rowGap: var(--gapSmall); }
  }

  &.column-gap-medium{
    .column{ --rowGap: var(--gapMedium); }
  }

  &.column-gap-large{
    .column{ --rowGap: var(--gapLarge); }
  }

  &.column-gap-xlarge{
    .column{ --rowGap: var(--gapXLarge); }
  }

  &.span-1,
  &.span-2,
  &.span-3,
  &.span-4,
  &.span-5,
  &.span-6,
  &.span-7,
  &.span-8,
  &.span-9,
  &.span-10,
  &.span-11,
  &.span-12{
    flex-wrap:wrap;
  }

  &.span-1 > *{ flex:0 0 $percent_1_12; }
  &.span-2 > *{ flex:0 0 $percent_2_12; }
  &.span-3 > *{ flex:0 0 $percent_3_12; }
  &.span-4 > *{ flex:0 0 $percent_4_12; }
  &.span-5 > *{ flex:0 0 $percent_5_12; }
  &.span-6 > *{ flex:0 0 $percent_6_12; }
  &.span-7 > *{ flex:0 0 $percent_7_12; }
  &.span-8 > *{ flex:0 0 $percent_8_12; }
  &.span-9 > *{ flex:0 0 $percent_9_12; }
  &.span-10 > *{ flex:0 0 $percent_10_12; }
  &.span-11 > *{ flex:0 0 $percent_11_12; }
  &.span-12 > *{ flex:0 0 $percent_12_12; }
}

.column{
  --rowGap: var(--gapSmall);

  display:flex;
  margin-bottom: var(--rowGap);

  &.left{ justify-content:flex-start; }
  &.center{ justify-content:center; }
  &.right{ justify-content:flex-end; }

  &.top{ align-items:flex-start; }
  &.middle{ align-items:center; }
  &.top{ align-items:flex-end; }

  &.span-1{ flex:0 0 $percent_1_12; }
  &.span-2{ flex:0 0 $percent_2_12; }
  &.span-3{ flex:0 0 $percent_3_12; }
  &.span-4{ flex:0 0 $percent_4_12; }
  &.span-5{ flex:0 0 $percent_5_12; }
  &.span-6{ flex:0 0 $percent_6_12; }
  &.span-7{ flex:0 0 $percent_7_12; }
  &.span-8{ flex:0 0 $percent_8_12; }
  &.span-9{ flex:0 0 $percent_9_12; }
  &.span-10{ flex:0 0 $percent_10_12; }
  &.span-11{ flex:0 0 $percent_11_12; }
  &.span-12{ flex:0 0 $percent_12_12; }

  &.fixed-span-1,
  &.fixed-span-2,
  &.fixed-span-3,
  &.fixed-span-4,
  &.fixed-span-5,
  &.fixed-span-6,
  &.fixed-span-7,
  &.fixed-span-8,
  &.fixed-span-9,
  &.fixed-span-10,
  &.fixed-span-11,
  &.fixed-span-12{
    width:100%;
    margin-left:auto;
    margin-right:auto;
  }

  &.fixed-span-1{ max-width:$percent_1_12; }
  &.fixed-span-2{ max-width:$percent_2_12; }
  &.fixed-span-3{ max-width:$percent_3_12; }
  &.fixed-span-4{ max-width:$percent_4_12; }
  &.fixed-span-5{ max-width:$percent_5_12; }
  &.fixed-span-6{ max-width:$percent_6_12; }
  &.fixed-span-7{ max-width:$percent_7_12; }
  &.fixed-span-8{ max-width:$percent_8_12; }
  &.fixed-span-9{ max-width:$percent_9_12; }
  &.fixed-span-10{ max-width:$percent_10_12; }
  &.fixed-span-11{ max-width:$percent_11_12; }
  &.fixed-span-12{ max-width:$percent_12_12; }
}

@include breakpoint($laptop){
  .row{
    &.auto{
      &.laptop-span-1,
      &.laptop-span-2,
      &.laptop-span-3,
      &.laptop-span-4,
      &.laptop-span-5,
      &.laptop-span-6,
      &.laptop-span-7,
      &.laptop-span-8,
      &.laptop-span-9,
      &.laptop-span-10,
      &.laptop-span-11,
      &.laptop-span-12{
        flex-wrap:wrap;
      }
    }

    &.laptop-span-1 > *{ flex:0 0 $percent_1_12; }
    &.laptop-span-2 > *{ flex:0 0 $percent_2_12; }
    &.laptop-span-3 > *{ flex:0 0 $percent_3_12; }
    &.laptop-span-4 > *{ flex:0 0 $percent_4_12; }
    &.laptop-span-5 > *{ flex:0 0 $percent_5_12; }
    &.laptop-span-6 > *{ flex:0 0 $percent_6_12; }
    &.laptop-span-7 > *{ flex:0 0 $percent_7_12; }
    &.laptop-span-8 > *{ flex:0 0 $percent_8_12; }
    &.laptop-span-9 > *{ flex:0 0 $percent_9_12; }
    &.laptop-span-10 > *{ flex:0 0 $percent_10_12; }
    &.laptop-span-11 > *{ flex:0 0 $percent_11_12; }
    &.laptop-span-12 > *{ flex:0 0 $percent_12_12; }

    .column{
      &.laptop-span-1,
      &.laptop-span-2,
      &.laptop-span-3,
      &.laptop-span-4,
      &.laptop-span-5,
      &.laptop-span-6,
      &.laptop-span-7,
      &.laptop-span-8,
      &.laptop-span-9,
      &.laptop-span-10,
      &.laptop-span-11,
      &.laptop-span-12{
        max-width:100%;
      }

      &.laptop-span-1{ flex:0 0 $percent_1_12; }
      &.laptop-span-2{ flex:0 0 $percent_2_12; }
      &.laptop-span-3{ flex:0 0 $percent_3_12; }
      &.laptop-span-4{ flex:0 0 $percent_4_12; }
      &.laptop-span-5{ flex:0 0 $percent_5_12; }
      &.laptop-span-6{ flex:0 0 $percent_6_12; }
      &.laptop-span-7{ flex:0 0 $percent_7_12; }
      &.laptop-span-8{ flex:0 0 $percent_8_12; }
      &.laptop-span-9{ flex:0 0 $percent_9_12; }
      &.laptop-span-10{ flex:0 0 $percent_10_12; }
      &.laptop-span-11{ flex:0 0 $percent_11_12; }
      &.laptop-span-12{ flex:0 0 $percent_12_12; }
    }
  }
}

@include breakpoint($laptop-tablet){
  .row{
    &.auto{
      &.laptop-tablet-span-1,
      &.laptop-tablet-span-2,
      &.laptop-tablet-span-3,
      &.laptop-tablet-span-4,
      &.laptop-tablet-span-5,
      &.laptop-tablet-span-6,
      &.laptop-tablet-span-7,
      &.laptop-tablet-span-8,
      &.laptop-tablet-span-9,
      &.laptop-tablet-span-10,
      &.laptop-tablet-span-11,
      &.laptop-tablet-span-12{
        flex-wrap:wrap;
      }
    }

    &.laptop-tablet-span-1 > *{ flex:0 0 $percent_1_12; }
    &.laptop-tablet-span-2 > *{ flex:0 0 $percent_2_12; }
    &.laptop-tablet-span-3 > *{ flex:0 0 $percent_3_12; }
    &.laptop-tablet-span-4 > *{ flex:0 0 $percent_4_12; }
    &.laptop-tablet-span-5 > *{ flex:0 0 $percent_5_12; }
    &.laptop-tablet-span-6 > *{ flex:0 0 $percent_6_12; }
    &.laptop-tablet-span-7 > *{ flex:0 0 $percent_7_12; }
    &.laptop-tablet-span-8 > *{ flex:0 0 $percent_8_12; }
    &.laptop-tablet-span-9 > *{ flex:0 0 $percent_9_12; }
    &.laptop-tablet-span-10 > *{ flex:0 0 $percent_10_12; }
    &.laptop-tablet-span-11 > *{ flex:0 0 $percent_11_12; }
    &.laptop-tablet-span-12 > *{ flex:0 0 $percent_12_12; }

    .column{
      &.laptop-tablet-span-1,
      &.laptop-tablet-span-2,
      &.laptop-tablet-span-3,
      &.laptop-tablet-span-4,
      &.laptop-tablet-span-5,
      &.laptop-tablet-span-6,
      &.laptop-tablet-span-7,
      &.laptop-tablet-span-8,
      &.laptop-tablet-span-9,
      &.laptop-tablet-span-10,
      &.laptop-tablet-span-11,
      &.laptop-tablet-span-12{
        max-width:100%;
      }

      &.laptop-tablet-span-1{ flex:0 0 $percent_1_12; }
      &.laptop-tablet-span-2{ flex:0 0 $percent_2_12; }
      &.laptop-tablet-span-3{ flex:0 0 $percent_3_12; }
      &.laptop-tablet-span-4{ flex:0 0 $percent_4_12; }
      &.laptop-tablet-span-5{ flex:0 0 $percent_5_12; }
      &.laptop-tablet-span-6{ flex:0 0 $percent_6_12; }
      &.laptop-tablet-span-7{ flex:0 0 $percent_7_12; }
      &.laptop-tablet-span-8{ flex:0 0 $percent_8_12; }
      &.laptop-tablet-span-9{ flex:0 0 $percent_9_12; }
      &.laptop-tablet-span-10{ flex:0 0 $percent_10_12; }
      &.laptop-tablet-span-11{ flex:0 0 $percent_11_12; }
      &.laptop-tablet-span-12{ flex:0 0 $percent_12_12; }
    }
  }
}

@include breakpoint($tablet-landscape){
  .row{
    &.auto{
      &.tablet-landscape-span-1,
      &.tablet-landscape-span-2,
      &.tablet-landscape-span-3,
      &.tablet-landscape-span-4,
      &.tablet-landscape-span-5,
      &.tablet-landscape-span-6,
      &.tablet-landscape-span-7,
      &.tablet-landscape-span-8,
      &.tablet-landscape-span-9,
      &.tablet-landscape-span-10,
      &.tablet-landscape-span-11,
      &.tablet-landscape-span-12{
        flex-wrap:wrap;
      }
    }

    &.tablet-landscape-span-1 > *{ flex:0 0 $percent_1_12; }
    &.tablet-landscape-span-2 > *{ flex:0 0 $percent_2_12; }
    &.tablet-landscape-span-3 > *{ flex:0 0 $percent_3_12; }
    &.tablet-landscape-span-4 > *{ flex:0 0 $percent_4_12; }
    &.tablet-landscape-span-5 > *{ flex:0 0 $percent_5_12; }
    &.tablet-landscape-span-6 > *{ flex:0 0 $percent_6_12; }
    &.tablet-landscape-span-7 > *{ flex:0 0 $percent_7_12; }
    &.tablet-landscape-span-8 > *{ flex:0 0 $percent_8_12; }
    &.tablet-landscape-span-9 > *{ flex:0 0 $percent_9_12; }
    &.tablet-landscape-span-10 > *{ flex:0 0 $percent_10_12; }
    &.tablet-landscape-span-11 > *{ flex:0 0 $percent_11_12; }
    &.tablet-landscape-span-12 > *{ flex:0 0 $percent_12_12; }

    .column{
      &.tablet-landscape-span-1,
      &.tablet-landscape-span-2,
      &.tablet-landscape-span-3,
      &.tablet-landscape-span-4,
      &.tablet-landscape-span-5,
      &.tablet-landscape-span-6,
      &.tablet-landscape-span-7,
      &.tablet-landscape-span-8,
      &.tablet-landscape-span-9,
      &.tablet-landscape-span-10,
      &.tablet-landscape-span-11,
      &.tablet-landscape-span-12{
        max-width:100%;
      }

      &.tablet-landscape-span-1{ flex:0 0 $percent_1_12; }
      &.tablet-landscape-span-2{ flex:0 0 $percent_2_12; }
      &.tablet-landscape-span-3{ flex:0 0 $percent_3_12; }
      &.tablet-landscape-span-4{ flex:0 0 $percent_4_12; }
      &.tablet-landscape-span-5{ flex:0 0 $percent_5_12; }
      &.tablet-landscape-span-6{ flex:0 0 $percent_6_12; }
      &.tablet-landscape-span-7{ flex:0 0 $percent_7_12; }
      &.tablet-landscape-span-8{ flex:0 0 $percent_8_12; }
      &.tablet-landscape-span-9{ flex:0 0 $percent_9_12; }
      &.tablet-landscape-span-10{ flex:0 0 $percent_10_12; }
      &.tablet-landscape-span-11{ flex:0 0 $percent_11_12; }
      &.tablet-landscape-span-12{ flex:0 0 $percent_12_12; }
    }
  }
}

@include breakpoint($tablet-portrait){
  .row{
    &.auto{
      &.tablet-portrait-span-1,
      &.tablet-portrait-span-2,
      &.tablet-portrait-span-3,
      &.tablet-portrait-span-4,
      &.tablet-portrait-span-5,
      &.tablet-portrait-span-6,
      &.tablet-portrait-span-7,
      &.tablet-portrait-span-8,
      &.tablet-portrait-span-9,
      &.tablet-portrait-span-10,
      &.tablet-portrait-span-11,
      &.tablet-portrait-span-12{
        flex-wrap:wrap;
      }
    }

    &.tablet-portrait-span-1 > *{ flex:0 0 $percent_1_12; }
    &.tablet-portrait-span-2 > *{ flex:0 0 $percent_2_12; }
    &.tablet-portrait-span-3 > *{ flex:0 0 $percent_3_12; }
    &.tablet-portrait-span-4 > *{ flex:0 0 $percent_4_12; }
    &.tablet-portrait-span-5 > *{ flex:0 0 $percent_5_12; }
    &.tablet-portrait-span-6 > *{ flex:0 0 $percent_6_12; }
    &.tablet-portrait-span-7 > *{ flex:0 0 $percent_7_12; }
    &.tablet-portrait-span-8 > *{ flex:0 0 $percent_8_12; }
    &.tablet-portrait-span-9 > *{ flex:0 0 $percent_9_12; }
    &.tablet-portrait-span-10 > *{ flex:0 0 $percent_10_12; }
    &.tablet-portrait-span-11 > *{ flex:0 0 $percent_11_12; }
    &.tablet-portrait-span-12 > *{ flex:0 0 $percent_12_12; }

    .column{
      &.tablet-portrait-span-1,
      &.tablet-portrait-span-2,
      &.tablet-portrait-span-3,
      &.tablet-portrait-span-4,
      &.tablet-portrait-span-5,
      &.tablet-portrait-span-6,
      &.tablet-portrait-span-7,
      &.tablet-portrait-span-8,
      &.tablet-portrait-span-9,
      &.tablet-portrait-span-10,
      &.tablet-portrait-span-11,
      &.tablet-portrait-span-12{
        max-width:100%;
      }

      &.tablet-portrait-span-1{ flex:0 0 $percent_1_12; }
      &.tablet-portrait-span-2{ flex:0 0 $percent_2_12; }
      &.tablet-portrait-span-3{ flex:0 0 $percent_3_12; }
      &.tablet-portrait-span-4{ flex:0 0 $percent_4_12; }
      &.tablet-portrait-span-5{ flex:0 0 $percent_5_12; }
      &.tablet-portrait-span-6{ flex:0 0 $percent_6_12; }
      &.tablet-portrait-span-7{ flex:0 0 $percent_7_12; }
      &.tablet-portrait-span-8{ flex:0 0 $percent_8_12; }
      &.tablet-portrait-span-9{ flex:0 0 $percent_9_12; }
      &.tablet-portrait-span-10{ flex:0 0 $percent_10_12; }
      &.tablet-portrait-span-11{ flex:0 0 $percent_11_12; }
      &.tablet-portrait-span-12{ flex:0 0 $percent_12_12; }
    }
  }
}

@include breakpoint($phone){
  .row{
    --gapLarge:64px;
    --gapXLarge:112px;

    flex-direction:column;

    &.auto{
      flex-wrap:wrap;
    }
  }

  .column{

    // TODO Write breakpoint classes for alignment
    &.right{ justify-content:flex-start; }
    // END TODO

    &.span-1,
    &.span-2,
    &.span-3,
    &.span-4,
    &.span-5,
    &.span-6,
    &.span-7,
    &.span-8,
    &.span-9,
    &.span-10,
    &.span-11,
    &.span-12{ flex:0 0 100%; }
  }

  .row{
    &.auto{
      &.phone-span-1,
      &.phone-span-2,
      &.phone-span-3,
      &.phone-span-4,
      &.phone-span-5,
      &.phone-span-6,
      &.phone-span-7,
      &.phone-span-8,
      &.phone-span-9,
      &.phone-span-10,
      &.phone-span-11,
      &.phone-span-12{
        flex-wrap:wrap;
      }
    }

    &.phone-span-1 > *{ flex:0 0 $percent_1_12; }
    &.phone-span-2 > *{ flex:0 0 $percent_2_12; }
    &.phone-span-3 > *{ flex:0 0 $percent_3_12; }
    &.phone-span-4 > *{ flex:0 0 $percent_4_12; }
    &.phone-span-5 > *{ flex:0 0 $percent_5_12; }
    &.phone-span-6 > *{ flex:0 0 $percent_6_12; }
    &.phone-span-7 > *{ flex:0 0 $percent_7_12; }
    &.phone-span-8 > *{ flex:0 0 $percent_8_12; }
    &.phone-span-9 > *{ flex:0 0 $percent_9_12; }
    &.phone-span-10 > *{ flex:0 0 $percent_10_12; }
    &.phone-span-11 > *{ flex:0 0 $percent_11_12; }
    &.phone-span-12 > *{ flex:0 0 $percent_12_12; }

    .column{
      &:last-child{
        --rowGap: 0;
      }
      
      &.phone-span-1,
      &.phone-span-2,
      &.phone-span-3,
      &.phone-span-4,
      &.phone-span-5,
      &.phone-span-6,
      &.phone-span-7,
      &.phone-span-8,
      &.phone-span-9,
      &.phone-span-10,
      &.phone-span-11,
      &.phone-span-12{
        max-width:100%;
      }

      &.phone-span-1{ flex:0 0 $percent_1_12; }
      &.phone-span-2{ flex:0 0 $percent_2_12; }
      &.phone-span-3{ flex:0 0 $percent_3_12; }
      &.phone-span-4{ flex:0 0 $percent_4_12; }
      &.phone-span-5{ flex:0 0 $percent_5_12; }
      &.phone-span-6{ flex:0 0 $percent_6_12; }
      &.phone-span-7{ flex:0 0 $percent_7_12; }
      &.phone-span-8{ flex:0 0 $percent_8_12; }
      &.phone-span-9{ flex:0 0 $percent_9_12; }
      &.phone-span-10{ flex:0 0 $percent_10_12; }
      &.phone-span-11{ flex:0 0 $percent_11_12; }
      &.phone-span-12{ flex:0 0 $percent_12_12; }
    }
  }
}
