main {
  margin-top: 0;
  min-height: auto;
}

table {
  width: 100% !important; // some docs have table widths set inline :(
}

// issue #2612: switch up list style for nested ordered lists
ol ol {
  list-style: lower-alpha;
}

ol ol ol {
  list-style: lower-roman;
}

ol ol ol ol {
  list-style: decimal;
}

.table-with-scroll {
  overflow-x: scroll;
}

label.link-label {
  color: $link-color;
  text-decoration: $link-decoration;
  cursor: pointer;

  &:hover {
    color: $link-hover-color;
    text-decoration: $link-hover-decoration;
  }
}

/* Images */
.gatsby-resp-image-wrapper:has(img[src$='.png' i], img[src$='.jpg' i], img[src$='.jpeg' i]):has(img[srcset*="540w"])
{
  box-shadow: 
    0 0 1px rgba(from var(--bs-body-color) r g b / 0.3), 
    0 0 2px rgba(from var(--bs-body-color) r g b / 0.25), 
    0 0 3px rgba(from var(--bs-body-color) r g b / 0.2), 
    0 0 4px rgba(from var(--bs-body-color) r g b / 0.15), 
    0 0 5px rgba(from var(--bs-body-color) r g b / 0.1);
  border-radius: 5px;
  overflow: clip;  
  background: white;
}

a:has(img) { position: relative; display: block; }
a:has(img):after
{
  content: '';
  width: 24px;
  height: 24px;
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  background: var(--bs-body-color);
  mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 -256 1850 1850" xmlns="http://www.w3.org/2000/svg"><g transform="matrix(1,0,0,-1,30.372881,1426.9492)"><path d="M 1408,608 V 288 Q 1408,169 1323.5,84.5 1239,0 1120,0 H 288 Q 169,0 84.5,84.5 0,169 0,288 v 832 Q 0,1239 84.5,1323.5 169,1408 288,1408 h 704 q 14,0 23,-9 9,-9 9,-23 v -64 q 0,-14 -9,-23 -9,-9 -23,-9 H 288 q -66,0 -113,-47 -47,-47 -47,-113 V 288 q 0,-66 47,-113 47,-47 113,-47 h 832 q 66,0 113,47 47,47 47,113 v 320 q 0,14 9,23 9,9 23,9 h 64 q 14,0 23,-9 9,-9 9,-23 z m 384,864 V 960 q 0,-26 -19,-45 -19,-19 -45,-19 -26,0 -45,19 L 1507,1091 855,439 q -10,-10 -23,-10 -13,0 -23,10 L 695,553 q -10,10 -10,23 0,13 10,23 l 652,652 -176,176 q -19,19 -19,45 0,26 19,45 19,19 45,19 h 512 q 26,0 45,-19 19,-19 19,-45 z" style="fill:currentColor"></path></g></svg>');
  mask-repeat: no-repeat;
  mask-size: 100%;  
}


/* Search */
.global-search {
  .select-product {
    z-index: calc($zindex-dropdown + 1);
  }
}

/* remove glow from search input */
.form-control:focus {
  box-shadow: none !important;
}

/* Sidebar */

.sidebar {
  width: 100vh;
  max-width: 300px;
  flex-basis: 0.8;
  position: relative;
  top: 0;
  bottom: 0;
  left: 0;
}

.sidebar-sticky {
  position: relative;
  top: 0;
  height: 100vh;
  z-index: $zindex-sticky;
  /* Scrollable contents if viewport is shorter than content. */
}

.sidebar .sidebar-nav-links {
  overflow-x: hidden;
  overflow-y: auto;
}

/* headers have a position: relative style added by gatsby-remark-auto-headers 
   - this is only needed when the icon is positioned absolutely, which we don't do */
h1, h2, h3, h4, h5, h6 {
  position: static !important;
}

.tabs {

  .tabs__list {
    display: flex;
    flex-direction: row;
    margin: 0;
    padding: 0;
    position: sticky;
    top: 0;
    background-color: var(--bs-body-bg);
  }

  >.tab-content>.tabs__content {
    display: none;
  }
}

@for $i from 1 through 20 {
  .tabs:has(>.tabs__list .tab#{$i} input:checked)>.tab-content>.tab#{$i} { display: block;}
}

.tabs__tab>label {
  cursor: pointer;
}

.tabs__tab>label:has(input:checked) { @extend .active; font-weight: bold; }

.tabs__tab:focus-within {
  outline: 2px solid #333;
}

.tabs__input {
  position: fixed;
  top:-100px;
}    

@supports ((position: -webkit-sticky) or (position: sticky)) {
  .sidebar-sticky {
    position: -webkit-sticky;
    position: sticky;
  }
}

@include media-breakpoint-down(sm) {
  .sidebar {
    position: initial; 
    height: auto;
    width: auto;
    max-width: none;
  }
  .sidebar .open-close-button {
    cursor: pointer;
  }
  .sidebar .open-close-button:before { 
    filter: invert(1);
    display: inline-block;
    width: 48px;
    height: 48px;
    vertical-align: middle;
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="48" height="48" fill="currentColor"><path d="M3 5a1 1 0 100 2h18a1 1 0 100-2H3zm0 6a1 1 0 100 2h18a1 1 0 100-2H3zm0 6a1 1 0 100 2h18a1 1 0 100-2H3z"></path></svg>');
  }
  .sidebar .open-close-button:has(input:checked):before { 
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="48" height="48" fill="currentColor"><path d="M5.99 4.99a1 1 0 00-.697 1.717L10.586 12l-5.293 5.293a1 1 0 101.414 1.414L12 13.414l5.293 5.293a1 1 0 101.414-1.414L13.414 12l5.293-5.293a1 1 0 00-.727-1.717 1 1 0 00-.687.303L12 10.586 6.707 5.293a1 1 0 00-.717-.303z"></path></svg>');
  }
  .sidebar .open-close-button input {
    width: 0;
    height: 0;
  }

  .sidebar .sidebar-nav-links {
    clip-path: rect(0 0 0 0);
    height: 0;
    padding: 0 !important;
  }
  .sidebar:has(.open-close-button input:checked) .sidebar-nav-links {
    clip-path: rect(0 100% 100% 0);
    padding: 1rem !important;
    height: auto;
    transition: clip-path 0.4s ease-in-out;
  }
}

/* sidebar item that contains other items */


.list-parent:has(> div) >  div > a.section-title  {
   @include caret(end);
  &::after {
    vertical-align: 0;
  }
}

.list-parent:has(> div):has(> ul) >  div > a.section-title  {
   @include caret(down);
  &::after {
    vertical-align: 0;
  }
}

.list-parent:has(div:only-child) >  div > a.transplanted-child {
  &::after {
    vertical-align: 0;
    margin-left: 0.2rem;
    text-decoration: none;
    content: "➦";
  }
}

.font-weight-400 {
  font-weight: 400;
}

.disabled-grey {
  color: $gray-300;
  border-color: $gray-300;
  pointer-events: none;
}

.blockquote-bordered {
  border-left: 5px solid $gray-200;
  padding-left: 1rem;
}

.break-word {
  word-wrap: break-word;
}

.content-container {
  max-width: 1344px;
  margin: 0 auto;
}

.codeblock-controls {
  background: #272822; // match pre background
  border-top-left-radius: 5px; // match pre radius
  border-top-right-radius: 5px;
  color: $gray-500;
  font-size: 0.875rem; // match bootstrap sm btn text
  justify-content: space-between;
  flex-direction: row-reverse;

  .btn.btn-link {
    color: $gray-500;

    &:hover {
      color: $gray-300;
    }
  }

  &.output-label {
    text-transform: uppercase;
    color: black;
  }
}

.codeblock-wrapper {
  background: black;
  padding: 0.3em;
  border-radius: 8px;
  overflow: auto;
}

.output-block {
  .codeblock-controls {
    background: #d1d1d1;
  }

  pre {
    background: #d1d1d1;
    color: #272822;
    text-shadow: none;
    line-height: normal;
    // Google doesn't serve some character ranges for Source Code Pro that we need for legible output, e.g. table listings - so use default
    font-family: monospace !important;
  }
}

/* katacoda */

.katacoda-page-embed {
  height: calc(100vh - 200px) !important;
  box-shadow: 0px 0px 1px 1px $gray-100;
}

// Katacoda in panel display mode adds a fixed-position console with this height
.katacoda-panel-active body {
  margin-bottom: max(40vh, 320px);
}

#katacoda-panel-container {
  min-height: 320px !important;
}

.katacoda-exec-button {
  display: none;
  border: none;
  background: #272822; // match pre background

  &:disabled {
    opacity: 0.3;
  }
}

html.katacoda-panel-active .katacoda-exec-button {
  display: inline-block !important;
}

.katacoda-start-button {
  min-width: 180px;
  text-align: left;

  .cta {
    font-size: 1.2rem;
  }
}

@media print {
  .tabs {
    .tabs__list { display: none; }
    >.tab-content>.tabs__content { display: block; }
    >.tab-content>.tabs__content::before {
      display: block;
      break-after: avoid-page;
      font-size: $h3-font-size;
      font-weight: $headings-font-weight;
      content: attr(data-label); 
    }
  }

  // h/t https://stackoverflow.com/questions/31947026/bootstrap-printing-and-column-resizing/45226168#45226168
  .col-print-12 {
    max-width: 100%;
    flex: 0 0 100%;
  }

  tr {
    break-inside: avoid-page;
  }

  h1, h2, h3, h4, h5, h6 {
    break-after: avoid-page;
  }

  .topbar,
  .sidebar,
  nav {
    display: none !important;
  }

  // Because it is fixed position, the Katacoda panel screws up printing big-time
  .katacoda-panel-active {
    body {
      margin-bottom: unset;
    }

    .katacoda-panel {
      display: none;
    }
  }

  /*
   * details / summary
   * note that this does not / cannot *expand* the details - that's handled via script in 
   * the purpose of these styles is simply to clean up the rendering a bit.
   */
  summary {
    display: block;
  }
  
  summary::-webkit-details-marker { display: none }
  
}

// Index page

.card-columns.full-width {
  column-count: 12;
  columns: 1;
}

.card-editorial-cnpo img {
  max-width: 250px;
  height: auto;
}

.nested-link {
  &:before {
    content: "∟";
    color: lightgrey;
    position: relative;
    top: -3px;
    //font-size: 12px;
    margin-right: 2px;
  }

  position: relative;
  top: -0.75rem;
  margin-bottom: -0.75rem;
}

.new-thing {
  color: $orange;
  font-size: 0.65rem;
  font-weight: 400;
  border: 1px solid $orange;
  padding: 0 2px;
  border-radius: 5px;
  margin-left: 0.3rem;
  font-weight: normal;
  display: inline-block;
}

.new-thing-header {
  position: relative;
  display: inline;

  &::before {
    content: "";
    border-top: 1px solid rgba($orange, 0.3);
    border-right: 1px solid rgba($orange, 0.3);
    transform: skewX(25deg);
    width: 100%;
    height: 100%;
    position: absolute;
  }

  .badge-text {
    color: $orange;
    padding: 4px 10px 4px 5px;
    text-transform: uppercase;
    font-size: 0.7rem;
  }
}

.homepage-headling-link {
  &:hover {
    text-decoration: underline;
  }
}

.header-docs-link {
  & span:hover {
    border-bottom: 1px solid grey;
  }
}

