@use 'sass:map';
@use '../../dist/letsui.tokens.scss' as *;
@use '../utilities/functions' as *;
@use '../utilities/tokens.map' as *;

@each $name, $value in $breakpoint {
  .show-#{$name} {
    display: none;

    @media (min-width: $value) {
      display: block;
    }
  }
  .hide-#{$name} {
    display: block;

    @media (min-width: $value) {
      display: none;
    }
  }
}

.layout,
.grid {
  display: grid;
}

.grid {
  margin-bottom: clamp(fluid(16), fluid(32), fluid(32));
  align-items: start;

  &:last-of-type {
    margin-bottom: fixed(0);
  }
}

@mixin col-span($prefix, $cols) {
  .col {
    @for $i from 1 through $cols {
      &-#{$prefix}-#{$i} {
        grid-column: span $i;
      }
    }
  }
} 

@mixin grid-gap($gap) {
  .grid {
    gap: $gap;
  }
}

// Extra small
@media (max-width: calc(map.get($breakpoint, sm) - 1px)) {
  @include col-span(1xs, 4);
  @include grid-gap(clamp(0.75rem, 0.75rem + 1.25vw, 1rem));
}

// Small
@media (min-width: map.get($breakpoint, sm)) and (max-width: calc(map.get($breakpoint, md) - 1px)) {
  @include col-span(sm, 8);
  @include grid-gap(clamp(0.75rem, 0.5705rem + 0.8949vw, 1rem));
}

// Medium
@media (min-width: map.get($breakpoint, md)) and (max-width: calc(map.get($breakpoint, lg) - 1px)) {
  @include col-span(md, 12);
  @include grid-gap(clamp(1.25rem, 0.4961rem + 1.5686vw, 1.5rem));
}

// Large
@media (min-width: map.get($breakpoint, lg)) and (max-width: calc(map.get($breakpoint, 1xl) - 1px)) {
  @include col-span(lg, 12);
  @include grid-gap(clamp(1.25rem, 0.2549rem + 1.5564vw, 1.5rem));
}

// Extra large
@media (min-width: map.get($breakpoint, 1xl)) {
  @include col-span(1xl, 12);
  @include grid-gap(clamp(1.25rem, 0.4961rem + 1.5686vw, 1.5rem));
}

// Mobile
@media (max-width: calc(map.get($breakpoint, lg) - 1px)) {
  .main-content {
    padding: fixed(16);
    margin-left: 0;
    max-width: none;
  }

  .sidebar {
    position: static;
    width: auto;
  }

  .layout {
    grid-template-areas:
      "header"
      "content";
  }
}

// Desktop
@media (min-width: map.get($breakpoint, lg)) {
  .main-content {
    grid-area: content;
    padding: fluid(40);
    margin-left: 280px;
  }

  .grid {
    grid-template-columns: repeat(12, 1fr);
  }

  .layout {
    grid-template-areas:
      "header header"
      "sidebar content";
  }
}