---
---

@import "default";
@import "prism-coy";
@import "@fortawesome/fontawesome-free/scss/fontawesome";
@import "@fortawesome/fontawesome-free/scss/brands";
@import "@fortawesome/fontawesome-free/scss/solid";

.body {
  display: grid;
  grid-template-columns: 100%;
  grid-template-areas: "main";

  .main {
    grid-area: main;

    display: grid;
    gap: map-get($spacers, 4);
    grid-template-columns: 3fr 0.5fr 2fr 1fr;
    grid-template-areas:
      "header . links sidebar"
      "content content content sidebar";

    .sidebar {
      grid-area: sidebar;
    }
    .header {
      grid-area: header;
    }
    .links {
      grid-area: links;
    }
    .content {
      grid-area: content;
    }
  }
}

@include media-breakpoint-down(xxl) {
  .body {
    .main {
      grid-template-columns: 3fr 1fr 3fr 1fr;
      grid-template-areas:
        "header header links sidebar"
        "content content content sidebar";
    }
  }
}

@include media-breakpoint-down(lg) {
  .body {
    .main {
      gap: map-get($spacers, 1);
      grid-template-columns: 100%;
      grid-template-rows: auto;
      grid-template-areas:
        "header"
        "links"
        "content"
        "sidebar";
    }
    .links {
      @include mb(3);
    }
  }
}

.trouble-ids {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: map-get($spacers, 2);
  overflow-y: auto;
  height: fit-content;
  max-height: 15rem;
}

@include media-breakpoint-down(xl) {
  .trouble-ids {
    grid-template-columns: repeat(4, 1fr);
  }
}

@include media-breakpoint-down(md) {
  .trouble-ids {
    grid-template-columns: repeat(2, 1fr);
  }
}

.docker:before {
  @extend .fab;
  @include pr(1);
  content: fa-content($fa-var-docker);
}

nav a[role="button"] {
  &:before {
    @extend .fas;
    @include pr(1);
    content: fa-content($fa-var-angle-right);
    transition: $accordion-icon-transition;
    transform-origin: left;
  }
}

nav a[role="button"][aria-expanded="true"] {
  &:before {
    transform: rotate(90deg);
  }
}

.sidebar nav {
  position: sticky;
  overflow-y: auto;
  height: fit-content;
  max-height: calc(100vh - 9rem);
}
