@use './scaling';
/*
$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);
*/

.results-container {
  display: grid;
  grid-template-columns: 3fr 1fr;
}

.results-col {
  //flex: 8;
}

.results-toc-col {
  //flex: 2;
  padding-left: 1rem;
  width: 15vw;
}

.results-toc {
  // float the table of contents when scrolling
  position: sticky;
  top: 5rem;
  left: 3rem;
  height: calc(100vh - 50px);
}

// position of tool results needs to be relative to allow
// for scrolling within the tool results card
.results-content {
  position: relative;
  max-width: 65vw;
}

// table of contents entry for tool results
.results-toc-item {
  font-size: 1rem;
  text-transform: uppercase;
  overflow-wrap: break-word;
}

// coloring for results TOC items whose result IS in view
.results-toc-item .selected {
  color: var(--thorium-text) !important;
  text-decoration: none;
}

// coloring for results TOC items whose result IS NOT in view
.results-toc-item .unselected {
  color: var(--thorium-secondary-text) !important;
  text-decoration: none;
}

// 1400px
//@media (max-width: scaling.$xxl) { ... }

// 1200px
@media (max-width: scaling.$xl) {
  .results-toc {
    display: none;
  }
  .results-content {
    position: relative;
    max-width: 78vw;
  }
  .results-container {
    display: grid;
    grid-template-columns: 3fr 0fr;
  }
}

// 992px
//@media (max-width: scaling.$lg) { ... }

// 768px
//@media (max-width: scaling.$md) { ... }

// 576px
//@media (max-width: scaling.$sm) { ... }
