@use '../utilities/main_utilities' as *;

/* https://css-tricks.com/css-grid-in-ie-debunking-common-ie-grid-misconceptions/ */
/* https://css-tricks.com/snippets/css/a-guide-to-flexbox/ */
/* https://stackoverflow.com/a/45059944 */
/* Flex grid, done similarly to a float: left. So content needs to be within the grid */
/* -ms-grid-columns: 1fr (20px 1fr)[3]; */
/* grid-template-columns: 1fr repeat(3, 20px 1fr); */
/* Would prefer to use grid, but there's less support for earlier browsers, so using flex (for now) */

html{
    font-size: 18px; /* rem based on this (root element), em is based on the parent element of wherever the change is */
  }
  
  .container{
    margin: 0 auto;
    max-width: $width-content;
    padding: 1.4rem 1rem;
    /* overflow: auto; */
  }
  .container--no-topgap{
    padding-top: 0;
  }
  .container--no-botgap{
    padding-bottom: 0;
  }
  .container--no-gap{
    /* Still has right/left padding, otherwise page looks odd. Can be omitted with no-padd */
    padding-bottom: 0;
    padding-top: 0;
  }
  
  
  .row {
    position: relative;
    width: 100%;
  
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start; 
    flex-direction: row;
    row-gap: 1.25rem; /* In-case of flex-wrap content, space it out. Padding left+right */
  }
  
  .row+.row{
    margin-top: 1.4rem;
  }
  
  /* To make (first level) elements fit within the flex container (h1s, paras, etc. don't use all space by default) */
  /* Would use :not(x y z) for exceptions, but no i.e. support, and poor support on "older" browsers */
  /* .col>*{ */
  .col>address, .col>article, .col>aside, .col>blockquote, .col>canvas, .col>dd, .col>div, .col>dl, .col>dt, .col>fieldset, .col>figcaption,
  .col>figure, .col>footer, .col>form, .col>h1, .col>h2, .col>h3, .col>h4, .col>h5, .col>h6, .col>header, .col>hr, .col>li, .col>main,
  .col>main, .col>nav, .col>noscript, .col>ol, .col>p, .col>pre, .col>section, .col>table, .col>tfoot, .col>ul, .col>video{
    width: 100%;
  }
  /* inline elements */
  .col img{
    max-width: 100%;
    height: auto;
    margin-right: auto;
    margin-left: auto;
  }
  
  
  /* Col elements with row should be flex elements to allow flex (eg. section, etc are block by default) */
  /* MAYBE REMOVE THIS, IF YOU WANT ROW FUNCTIONALITY IN A ROW, ADD ANOTHER ROW!!! */
  .row [class^="col"]{
    padding-right: 0.625rem; /* ~20px gap = 20/16(html size)  / 2(as 2 elems next to each other should equat the gap = 0.62625 */
    padding-left: 0.625rem; /* In place of gap, so it can be full width rows */
  
    /* display: flex; */
    /* flex-wrap: wrap; */
    min-height: 0.125rem;
  }
  
  
  .row--scroll{
    flex-wrap: nowrap;
    overflow-x: scroll; /* Used instead of auto, as auto changed the height of elements if a tabgroup toggled */
    justify-content: left;
    /* Scrollbar stuff */
    scrollbar-color: $color-scrollbar transparent;
    scrollbar-width: thin;
    padding-bottom: .5rem;

    @include color-scheme(dark) {
      scrollbar-color: $color-scrollbar--dark transparent;
    }
  }
  .row--scroll [class^="col"]{
  
  }
  
  .col{
    flex: 0 0 auto;
  }
  
  // Default cols to 100% width when below $media-xs (base 360px)
  .col-1,.col-2,.col-3,.col-4,.col-5,.col-6,
  .col-7,.col-8,.col-9,.col-10,.col-11,.col-12{
    flex: 0 0 100%;
  }

  @include media($media-xs) {

    // Once a breakpoint has been hit, cols will behave regularly,
    // but will be overwritten/cascaded by their xs,md,lg, etc. counterparts
    // This is duplicated at md, as the 'default' col will be medium, needed here in-case people just
    // use .col-4, etc. as an end-all be-all
    .col-1 { flex: 0 0 8.33%; }
    .col-2 { flex: 0 0 16.66%; }
    .col-3 { flex: 0 0 25%; }
    .col-3p5 { flex: 0 0 29.166%; } /* 3 point 5, example for scroll-off page, example. Should be set independantly */
    .col-4 { flex: 0 0 33.33%; }
    .col-5 { flex: 0 0 41.66%; }
    .col-6 { flex: 0 0 50%; }
    .col-7 { flex: 0 0 58.33%; }
    .col-8 { flex: 0 0 66.66%; }
    .col-9 { flex: 0 0 75%; }
    .col-10 { flex: 0 0 83.33%; }
    .col-11 { flex: 0 0 91.66%; }
    .col-12 { flex: 0 0 100%; }

    // Now the actual xs styling
    .col-xs-1 { flex: 0 0 8.33% }
    .col-xs-2 { flex: 0 0 16.66% }
    .col-xs-3 { flex: 0 0 25% }
    .col-xs-4 { flex: 0 0 33.33% }
    .col-xs-5 { flex: 0 0 41.66% }
    .col-xs-6 { flex: 0 0 50% }
    .col-xs-7 { flex: 0 0 58.33% }
    .col-xs-8 { flex: 0 0 66.66% }
    .col-xs-9 { flex: 0 0 75% }
    .col-xs-10 { flex: 0 0 83.33% }
    .col-xs-11 { flex: 0 0 91.66% }
    .col-xs-12 { flex: 0 0 100% }
    
    .hidden-xs { display: none }

  }

  @include media($media-sm) {

    // THINK .col-3 will need to be re-cascaded each time, otherwise the sm/md will overwrite for ever
    // if it's recascaded here for instance, any .col-xs that have .col- will be replaced by the (default) col size 
    .col-1 { flex: 0 0 8.33%; }
    .col-2 { flex: 0 0 16.66%; }
    .col-3 { flex: 0 0 25%; }
    .col-3p5 { flex: 0 0 29.166%; } /* 3 point 5, example for scroll-off page, example. Should be set independantly */
    .col-4 { flex: 0 0 33.33%; }
    .col-5 { flex: 0 0 41.66%; }
    .col-6 { flex: 0 0 50%; }
    .col-7 { flex: 0 0 58.33%; }
    .col-8 { flex: 0 0 66.66%; }
    .col-9 { flex: 0 0 75%; }
    .col-10 { flex: 0 0 83.33%; }
    .col-11 { flex: 0 0 91.66%; }
    .col-12 { flex: 0 0 100%; }

    /* (100/12) * x = the flex % */
    .col-sm-1 { flex: 0 0 8.33% }
    .col-sm-2 { flex: 0 0 16.66% }
    .col-sm-3 { flex: 0 0 25% }
    .col-sm-4 { flex: 0 0 33.33% }
    .col-sm-5 { flex: 0 0 41.66% }
    .col-sm-6 { flex: 0 0 50% }
    .col-sm-7 { flex: 0 0 58.33% }
    .col-sm-8 { flex: 0 0 66.66% }
    .col-sm-9 { flex: 0 0 75% }
    .col-sm-10 { flex: 0 0 83.33% }
    .col-sm-11 { flex: 0 0 91.66% }
    .col-sm-12 { flex: 0 0 100% }
    
    .hidden-sm { display: none }

    // Any overwrites for previous sizes (as using min-width by preference)
    // Not sure how hidden display altering will work with flex/block/inline-block differences though...
    // IN FACT. This may not be needed? Could just be that if it's hidden sm, it's hidden above that too?
    // but then I guess I'd need a 'show-md' etc, which has the same problem...
    .hidden-xs { display: unset }

  }

  @include media($media-md){

    /* (100/12) * x = the flex % */
    // Medium AND .col-4 over-ridden for the 2nd time, as medium is to be the default 'col' size
    .col-md-1, .col-1 { flex: 0 0 8.33% }
    .col-md-2, .col-2 { flex: 0 0 16.66% }
    .col-md-3, .col-3 { flex: 0 0 25% }
    .col-md-4, .col-4 { flex: 0 0 33.33% }
    .col-md-5, .col-5 { flex: 0 0 41.66% }
    .col-md-6, .col-6 { flex: 0 0 50% }
    .col-md-7, .col-7 { flex: 0 0 58.33% }
    .col-md-8, .col-8 { flex: 0 0 66.66% }
    .col-md-9, .col-9 { flex: 0 0 75% }
    .col-md-10, .col-10 { flex: 0 0 83.33% }
    .col-md-11, .col-11 { flex: 0 0 91.66% }
    .col-md-12, .col-12 { flex: 0 0 100% }
    
    .hidden-md { display: none }

    // Any overwrites for previous sizes (as using min-width by preference)
    // Not sure how hidden display altering will work with flex/block/inline-block differences though...
    .hidden-xs, .hidden-sm { display: unset }

  }

  @include media($media-lg) {

    // Col DOESN'T Need to be redone here as it's medium default. If a lg/xl are set, that SHOULD overwrite
    // each time. So should be good. Reckon I need mixins/functions to replicate this grid though, as it's a
    // little uhhhh, jank and repetative atm
    /* (100/12) * x = the flex % */
    .col-lg-1 { flex: 0 0 8.33% }
    .col-lg-2 { flex: 0 0 16.66% }
    .col-lg-3 { flex: 0 0 25% }
    .col-lg-4 { flex: 0 0 33.33% }
    .col-lg-5 { flex: 0 0 41.66% }
    .col-lg-6 { flex: 0 0 50% }
    .col-lg-7 { flex: 0 0 58.33% }
    .col-lg-8 { flex: 0 0 66.66% }
    .col-lg-9 { flex: 0 0 75% }
    .col-lg-10 { flex: 0 0 83.33% }
    .col-lg-11 { flex: 0 0 91.66% }
    .col-lg-12 { flex: 0 0 100% }
    
    .hidden-lg { display: none }

    // Any overwrites for previous sizes (as using min-width by preference)
    // Not sure how hidden display altering will work with flex/block/inline-block differences though...
    .hidden-xs, .hidden-sm, .hidden-md { display: unset }

  }

  @include media($media-xl) {

    /* (100/12) * x = the flex % */
    .col-xl-1 { flex: 0 0 8.33% }
    .col-xl-2 { flex: 0 0 16.66% }
    .col-xl-3 { flex: 0 0 25% }
    .col-xl-4 { flex: 0 0 33.33% }
    .col-xl-5 { flex: 0 0 41.66% }
    .col-xl-6 { flex: 0 0 50% }
    .col-xl-7 { flex: 0 0 58.33% }
    .col-xl-8 { flex: 0 0 66.66% }
    .col-xl-9 { flex: 0 0 75% }
    .col-xl-10 { flex: 0 0 83.33% }
    .col-xl-11 { flex: 0 0 91.66% }
    .col-xl-12 { flex: 0 0 100% }
    
    .hidden-xl { display: none }

    // Any overwrites for previous sizes (as using min-width by preference)
    // Not sure how hidden display altering will work with flex/block/inline-block differences though...
    .hidden-xs, .hidden-sm, .hidden-md, .hidden-lg { display: unset }

  }

  // These things may want to have an indivual xs,md,lg, etc. as well, but for now, leaving...

  /* Try to avoid !important, have each rule set to keep track of */
  .no-padd, .row.no-padd [class^="col"], .row [class^="col"].no-padd{
    padding: 0; /* In-case elements want to be full-width, touching, etc */
  }
  
  .row--align-center{ align-items: center;}
  .row--justify-center{ justify-content: center; }
  .col--align-center{ align-self: center; align-self: anchor-center}
  
  /* Sort into col/sm areas with media queries */
  .col-grow, .col-grow-sm
  ,.col-fill, .col-fill-sm{
    flex-grow: 1;
  }