@import "../tokens/colors";
@import "../tokens/spacing";
@import "../tokens/screen_sizes";
@import "./layout_mixin";

$list-width: 300px;
$gap: $space_sm;
$scrollbar-thickness: $space_md;
$list-header-height: $space_lg;
$list-footer-height: $space_lg;
$list-border-radius: $border_rad_lighter;
$card-border-radius: $border_rad_lightest;


[class^=pb_layout_kit] {

  &[class*=_collection]{
    div.layout_body{
      display: grid;
      grid-template-rows: 1fr;
      grid-column-gap: $space_sm;
      grid-row-gap: $space_sm;
      grid-template-columns: repeat(4, 1fr);
      
      @media screen and (max-width: $screen-md-min) {
        grid-template-columns: repeat(2, 1fr);
      }
       @media screen and (max-width: $screen-xs-min) {
        grid-template-columns: repeat(1, 1fr);
      }
    }
  
  }

  &[class*=_kanban]{
    display: flex;
    overflow-x: auto;

    > * {
      flex: 0 0 auto;
      margin-left: $gap;
    }
    &::after {
      content: '';
      flex: 0 0 $gap;
    }
    
    div.layout_body{
      width: $list-width;
      height: 100vh;
      list-style: none;
      margin: 0;
      overflow-y: auto;

      & > * {
        margin: $space_xs $space_xs $space_xs;
        &:not(:last-child) {
          margin-bottom: 0;
        }
      }
    }
  }

  // For future release as of 6/18/2020
  &[class*=_kanban_responsive] {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    &::after {
      flex: none;
      content: none;
    }
    div.layout_body{
      width: 100%;
    }
  }
  

  &[class*=_sidebar]{
    $layout_sizes: (
      "xs":   64px,
      "sm":   200px,
      "md":   250px,
      "lg":   300px,
      "xl":   365px,
    );
    $positions: (
      "left",
      "right",
    );
    $colors: (
      "light",
      "dark",
      "gradient",
      "transparent",
    );

    // Sections
    &[class*=_section] {
      padding: $space_sm $space_xl;
      &[class*=_border] {
        padding: $space_sm $space_xl;
        border-bottom: 1px solid $border_light;
        &[class*=_margin] {
          margin: $space_sm $space_xl;
          border-bottom: 1px solid $border_light;
        }
      }
    }

    // sidebar and Body
    @each $name, $size in $layout_sizes {
      &[class*=_size_#{$name}] {
        @each $position in $positions {
          &[class*=_#{$position}] {
            @each $color in $colors {
              &[class*=_#{$color}] {
                @include layout_settings($size, $position, $color, "#{&}");
              }
            }
          }
        }
      }
    }


    // Collapse Settings
    @each $position in $positions {
      @each $breakpoint_name, $breakpoint in $breakpoints {
        &_#{$position}_collapse_#{$breakpoint_name} {
          @include break_at($breakpoint) {
            @if $position == 'left' {
              grid-template-areas: "layout_collapsed_#{$breakpoint_name}_sidebar" "layout_collapsed_#{$breakpoint_name}_body";
              grid-template-rows: auto 1fr;

            } @else {
              grid-template-areas: "layout_collapsed_#{$breakpoint_name}_body" "layout_collapsed_#{$breakpoint_name}_sidebar";
              grid-template-rows: 1fr auto;
            }
            grid-template-columns: 1fr;
            &.full {
              min-height: auto !important;
            }
            .layout_sidebar {
              grid-area: "layout_collapsed_#{$breakpoint_name}_sidebar";
              border-width: 0 0 1px 0;
            }
            .layout_body {
              grid-area: "layout_collapsed_#{$breakpoint_name}_body";
            }
          }
        }
      }
    }
  }
}