@use 'grid-sidebar-sidebar' as *;
@use 'media-query' as *;

@mixin grid-sidebar($is-sidebar-1-open: false, $is-sidebar-2-open: false) {
  @if $is-sidebar-1-open == false and $is-sidebar-2-open == true {
    @error "[STIHL Design System] - [ds.grid-sidebar()]: Sidebar 1 cannot be visually closed when sidebar 2 is open";
  }

  display: grid;
  --ds-grid-sidebar-gap: 16px;
  gap: var(--ds-grid-sidebar-gap);
  min-width: 320px;
  grid-template-columns:
    var(--ds-internal-grid-safe-zone)
    [main-start] repeat(4, minmax(0, 1fr))
    [main-end] var(--ds-internal-grid-safe-zone);
  --ds-internal-grid-safe-zone: 0;
  --ds-grid-span-one-half: span 4;
  --ds-grid-span-one-third: span 4;
  --ds-grid-span-two-thirds: span 4;
  --ds-grid-span-one-quarter: span 2;

  @if $is-sidebar-1-open == false {
    & > :first-child {
      @include grid-sidebar-sidebar-1(false);
    }
    & > :nth-child(2) {
      @include grid-sidebar-sidebar-2(false);
    }
  } @else if $is-sidebar-1-open == true and $is-sidebar-2-open == false {
    & > :first-child {
      @include grid-sidebar-sidebar-1(true);
    }
    & > :nth-child(2) {
      @include grid-sidebar-sidebar-2(false);
    }
  } @else if $is-sidebar-1-open == true and $is-sidebar-2-open == true {
    & > :first-child {
      @include grid-sidebar-sidebar-1(true);
    }
    & > :nth-child(2) {
      @include grid-sidebar-sidebar-2(true);
    }
  }

  @include media-query-min('m') {
    --ds-grid-sidebar-gap: 24px;
    gap: var(--ds-grid-sidebar-gap);
    grid-template-columns:
      var(--ds-internal-grid-safe-zone)
      [main-start] repeat(6, minmax(0, 1fr))
      [main-end] var(--ds-internal-grid-safe-zone);
    --ds-internal-grid-safe-zone: 9px;
    --ds-grid-span-one-half: span 3;
    --ds-grid-span-one-third: span 2;
    --ds-grid-span-two-thirds: span 4;
    --ds-grid-span-one-quarter: span 3;
  }

  @include media-query-min('l') {
    --ds-grid-sidebar-gap: 0px;
    gap: var(--ds-grid-sidebar-gap);
    column-gap: 24px;
    
    
    margin-block-end: -24px;

    @if $is-sidebar-1-open == false {
      grid-template-columns:
        [sidebar-1-start] fit-content(64px)
        [sidebar-1-end]
        var(--ds-internal-grid-safe-zone-left)
        [main-start] repeat(6, minmax(0, 1fr))
        [main-end] var(--ds-internal-grid-safe-zone-right);
    } @else if $is-sidebar-1-open == true and $is-sidebar-2-open == false {
      grid-template-columns:
        [sidebar-1-start] fit-content(264px)
        [sidebar-1-end]
        var(--ds-internal-grid-safe-zone-left)
        [main-start] repeat(6, minmax(0, 1fr))
        [main-end] var(--ds-internal-grid-safe-zone-right);
    } @else if $is-sidebar-1-open == true and $is-sidebar-2-open == true {
      grid-template-columns:
        [sidebar-1-start] fit-content(264px)
        [sidebar-1-end sidebar-2-start] fit-content(320px)
        [sidebar-2-end]
        var(--ds-internal-grid-safe-zone-left)
        [main-start] repeat(6, minmax(0, 1fr))
        [main-end] var(--ds-internal-grid-safe-zone-right);
    }

    --ds-internal-grid-safe-zone-left: 2px;
    
    --ds-internal-grid-safe-zone-right: 26px;

    --ds-grid-span-one-half: span 3;
    --ds-grid-span-one-third: span 2;
    --ds-grid-span-two-thirds: span 4;

    
    
    & > * {
      margin-block-end: 24px;
    }
  }

  @include media-query-min('xl') {
    column-gap: 32px;
    
    
    margin-block-end: -32px;

    @if $is-sidebar-1-open == false {
      grid-template-columns:
        [sidebar-1-start] fit-content(64px)
        [sidebar-1-end]
        var(--ds-internal-grid-safe-zone-left)
        [main-start] repeat(12, minmax(0, 1fr))
        [main-end] var(--ds-internal-grid-safe-zone-right);
    } @else if $is-sidebar-1-open == true and $is-sidebar-2-open == false {
      grid-template-columns:
        [sidebar-1-start] fit-content(264px)
        [sidebar-1-end]
        var(--ds-internal-grid-safe-zone-left)
        [main-start] repeat(12, minmax(0, 1fr))
        [main-end] var(--ds-internal-grid-safe-zone-right);
    } @else if $is-sidebar-1-open == true and $is-sidebar-2-open == true {
      grid-template-columns:
        [sidebar-1-start] fit-content(264px)
        [sidebar-1-end sidebar-2-start] fit-content(320px)
        [sidebar-2-end]
        var(--ds-internal-grid-safe-zone-left)
        [main-start] repeat(12, minmax(0, 1fr))
        [main-end] var(--ds-internal-grid-safe-zone-right);
    }

    --ds-internal-grid-safe-zone-left: 0px;
    
    --ds-internal-grid-safe-zone-right: 32px;

    --ds-grid-span-one-half: span 6;
    --ds-grid-span-one-third: span 4;
    --ds-grid-span-two-thirds: span 8;

    
    
    & > * {
      margin-block-end: 32px;
    }
  }

  @media (min-width: 2304px) {
    max-width: 2304px;
  }
}