@use "sass:string";
@use "sass:meta";
@use "lab-layout-v2.variables" as *;

@reference "../../app/globals.css";

.Lab-root {
  --lab-container-width: #{$container-width};
  --lab-left: calc((var(--lab-container-width) - (var(--lab-side-width) + var(--lab-main-width) + var(--lab-nav-width) + var(--lab-consoles-width))) / 2);

  display: grid;
  width: calc(var(--lab-main-width) + var(--lab-side-width) + var(--lab-nav-width) + var(--lab-consoles-width));
  grid-template-columns:
      var(--lab-side-width)
      var(--lab-main-width)
      var(--lab-nav-width)
      var(--lab-consoles-width);
  grid-template-rows:
      calc(100vh - var(--site-header-height) - var(--site-footer-height))
      var(--site-footer-height);

  .Lab-main {
    grid-row: 1;
    grid-column: 2;
  }

  .Lab-side {
    @apply border-r;
    grid-row: 1;
    grid-column: 1;
    overflow: hidden auto;
    display: var(--lab-side-display, block);
  }

  .Lab-nav {
    @apply p-2;
    grid-row: 1 / span 2;
    grid-column: 3;
    overflow: hidden auto;
    display: var(--lab-nav-display, block);
  }

  .Lab-consoles {
    grid-row: 1 / span 2;
    grid-column: 4;
    display: var(--lab-consoles-display, block);
  }

  .Lab-side-footer {
    @apply border-r border-t;
    grid-row: 2;
    grid-column: 1;
    display: var(--lab-side-display, block);
  }

  .Lab-main-footer {
    @apply border-t;
    grid-row: 2;
    grid-column: 2;
  }

  .w-lab-main {
    width: var(--lab-main-width);
  }
}