/* Global imports */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@500&display=swap') layer(fonts);
@import "theme.css" layer(theme);
@import "variables.css";

/* Section-specific imports */
@import "api.css";

/* Global styles */
a:not(.btn):active {
  text-decoration: underline;
}

video {
  max-width: 100%;
}

#back-banner {
  padding-bottom: 10px;
  padding-top: 10px;
  font-size: small;
  font-weight: bold;
  line-height: 13px;
  min-height: 12px;
  background-color: red;
  color: white;
  width: 100%;
  top: 0px;
  text-align: center;
  font-family: OpenSans, sans-serif;
}

#back-banner a {
  color: white;
}

.wy-nav-side {
  background: radial-gradient(
    circle at 50% 25%,
    hsl(from var(--ts3d-dk-grey) h s calc(l * .75)),
    hsl(from var(--ts3d-dk-grey) h s calc(l * .5))
  );
  padding-bottom: 0;
}

.wy-nav-content {
  max-width: 100%;
  position: relative;
  
  a {
    color: var(--ts3d-lt-blue);
    
    &:hover,
    &:active {
      color: var(--ts3d-dk-blue);
    }
  }
  
  .rst-content footer {
    margin-top: auto;
  }
}

.wy-side-nav-search {
  position: sticky;
  top: 0;
  width: var(--sidebar-width);
  background: linear-gradient(
    to right,
    hsl(from var(--brand-color) h s calc(l / var(--shadow-factor))),
    var(--brand-color) 50%
  );
  margin-bottom: 0;

  > a img.logo {
    all: unset;
    /* specify width of SVG for Firefox */
    width: calc(var(--sidebar-width) - var(--sidebar-padding) * 2 - var(--home-link-padding) * 2); 
  }
}

@media only screen and (max-width: 767.99px) {
  .shift .wy-side-nav-search {
    --sidebar-width: 85vw; /* matches mobile sidebar width in RTD theme */
  }
}

.scrollToTopBtn {
  border: none;
  cursor: pointer;
  font-size: 18px;
  line-height: 48px;
  width: 30px;
  position: fixed;
  bottom: 10px;
  left: auto;
  right: 10px;
  z-index: 100;
  opacity: 0;
  transform: translateY(100px);
  transition: all 0.5s ease
}

.showBtn {
  opacity: 1;
  transform: translateY(0)
}

h1, h2, h3, h4, h5, h6, legend, .rst-content .toctree-wrapper>p.caption {
  font-family: 'Open Sans', Lato, proxima-nova, 'Helvetica Neue', Arial, sans-serif;
  font-weight: 500;
  letter-spacing: -.05ch;
}

h1, h2, h3, h4, h5, h6 {
  &, a.toc-backref {
    background: linear-gradient(
      to right,
      hsl(from var(--brand-color) h s calc(l / calc(var(--shadow-factor) * .75))) ,
      hsl(from var(--brand-color) h s calc(l / calc(var(--shadow-factor) * .5))) 16ch
    );
    background-clip: text;
    color: transparent;
    line-height: initial;

    .highlighted {
      color: hsl(from var(--brand-color) h s calc(l / var(--shadow-factor)));
    }
  }
}

h1 {
  font-size: 2.5rem;
}

h2 {
  font-size: 1.875rem;
}

h3 {
  font-size: 1.25rem;
}

h4 {
  font-size: 1.125rem;
}

h5, p {
  font-size: 1rem;
}

h6 {
  font-size: .875rem;
}

p {
  font-weight: normal;
}

.wy-table-responsive th {
  white-space: normal;
}

/* Wide status/summary tables authored with `.. list-table:: :class: cra-eta-table`.
   The RTD base theme sets `white-space: nowrap` on `td` cells, so long Description
   cells refuse to wrap and the `:widths:` percentages are ignored. Forcing fixed
   layout at full width makes the colgroup percentages authoritative, and allowing
   normal wrapping lets prose cells flow. The selectors are scoped to the class so
   no other tables are affected. */
.rst-content table.cra-eta-table.docutils {
  table-layout: fixed;
  width: 100%;
}

.rst-content table.cra-eta-table.docutils th,
.rst-content table.cra-eta-table.docutils td {
  white-space: normal;
  vertical-align: top;
  padding: 0.75em 0.9em;
}

/* The cell text lives in a <p>, and the RTD base theme sets a tight
   `line-height:1rem` and `font-size:.9rem` on `table.docutils td>p`. Match that
   selector shape (incl. the html.writer-html5 prefix) so the text gets normal
   size and leading. */
html.writer-html5 .rst-content table.cra-eta-table.docutils th > p,
html.writer-html5 .rst-content table.cra-eta-table.docutils td > p {
  font-size: inherit;
  line-height: 1.5;
}

/* Status badges (sphinx-design) must stay inside the narrow Status column.
   By default the pill is a single non-wrapping line, so a label like
   "WORK IN PROGRESS" overflows into the Due Date cell. Let the pill wrap its
   own text and never exceed the cell width (text-align is inherited from the
   sphinx-design base rule). */
.rst-content table.cra-eta-table.docutils td .sd-badge {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: break-word;
  line-height: 1.35;
}

.wy-menu-vertical {
  height: calc(100% - var(--menu-offset, 150px)); /* variable set in JS */
  padding-bottom: 2rem;
  overflow-y: auto;
  overflow-x: hidden;

  li button.toctree-expand {
    color: #d9d9d9;
  }
  
  p.caption {
    margin-bottom: .25rem;
  }

  li > a {
    line-height: 1.35;
  }
}


/* DOC-4961: Custom breadcrumbs */
.breadcrumb-item {
  &:first-child {
    &:has(+ li.breadcrumb-item:not(.active)) {
      padding-inline-end: .25em;
    }
    
    &::before {
      content: unset;
    }
  }
  
  &::before {
    padding-inline: .25em;
    font-size: inherit;
  }
}

.breadcrumb-logo-item {
  padding-inline-end: 0.125em;
  transform: translateY(-.0625em);
  
  img {
    width: 1em;
  }
}
/* end DOC-4961 */

html.writer-html4 .rst-content dl:not(.docutils) dl:not(.field-list)>dt,
html.writer-html5 .rst-content dl[class]:not(.option-list):not(.field-list):not(.footnote):not(.glossary):not(.simple) dl:not(.field-list)>dt {
  border-left: 0px;
}

html.writer-html4 .rst-content dl:not(.docutils)>dt,
html.writer-html5 .rst-content dl[class]:not(.option-list):not(.field-list):not(.footnote):not(.glossary):not(.simple)>dt {
  border-top: 0px;
}

/* DOC-3436 */
.sig-name .pre,
.sig-paren {
  margin-left: .125ch;
  margin-right: .125ch;
}

:not(em) .pre {
  margin-right: .125ch
}

/* DOC-2716 */
.rst-content a code.xref {
  all: inherit;
}

/* DOC-2967 */
.rst-content div[class^="highlight"],
.rst-content pre.literal-block {
  display: grid;
}

/* DOC-4330: Preserving left border on cells following cells with rowspan attribute */
.rst-content table.docutils tr:has(td[rowspan]:first-child) ~ tr td:first-child {
  border-left-width: 1px;
}

@media screen and (min-width: 1100px) {
  .wy-nav-content {
    max-width: 80%
  }
}

.linkbox_main {
  background-color: #333;
  border-radius: 6px;
  border: 3px solid #ddd;
  color: #d9d9d9;
  padding: 10px;
  width: 400px;
  float: left;
}

.linkbox_main a {
  padding: 3px;
}

.linkbox_main a:link,
.linkbox_main a:visited {
  color: #d9d9d9;
}

.linkbox_main a:hover {
  background-color: #4e4a4a;
}

.linkbox_logo {
  height: 64px;
  width: 64px;
}

.linkbox_title {
  float: right;
  font-size: 1.5em;
  padding-top: 20px;
}

.linkbox_title ::after,
.linkbox_archives ::after,
.linkbox_kb ::after {
  display: none
}

.linkbox_kb {

  padding-right: 10px;
}

.linkbox_desc {
  font-style: italic;
  text-align: center;
}

.left-panel {
  float: left;
  width: 500px;
}

@keyframes glowing {
  0% {
    background-position: 0 0;
  }

  50% {
    background-position: 400% 0;
  }

  100% {
    background-position: 0 0;
  }
}

.linkbox_title {
  font-size: 22px;
  position: relative;
  left: 0px;
  top: 0px;
  color: white;

}


.linkbox_archives {
  display: flex;
  justify-content: center;
  position: relative;
  left: 0;
  top: 0px;
  color: white;
}


/* Three-Columns layout for API Reference index */
.api-index-section p.rubric {
  margin: 0 -20px 10px -20px;
  padding: 0 20px 10px 20px;
  border-bottom: 1px solid #ddd;
}


.api-index-section ul {
  column-count: 3;
  column-gap: 20px;
  padding: 0;
  list-style: none;
  line-height: 1.333em;
}

@media (max-width: 900px) {
  .api-index-section ul {
    column-count: 1;
  }
}

@media (min-width: 901px) and (max-width: 1024px) {
  .api-index-section ul {
    column-count: 2;
  }
}

.api-index-section ul li {
  column-break-inside: avoid;
  page-break-inside: avoid;
}

.api-index-section a,
.api-parent-kind-module a {
  color: #9600ff;
}

.api-index-section .api-parent-kind-interface a {
  color: #7da01f;
}

.api-index-section .api-parent-kind-enum a {
  color: #cc9900;
}

.api-index-section .api-parent-kind-class a {
  color: #4da6ff;
}

.api-index-section .api-kind-module a {
  color: #9600ff;
}

.api-index-section .api-kind-interface a {
  color: #7da01f;
}

.api-index-section .api-kind-enum a {
  color: #cc9900;
}

.api-index-section .api-kind-class a {
  color: #4da6ff;
}

.api-index-section .api-is-private a {
  color: #808080;
}


/* Styles related to linkboxes */

div[role="main"] {
  container-name: content;
  container-type: inline-size;
}

.linkbox-grid-container {
  --card-spacer: .75rem;
  --card-divider: 1px solid var(--ts3d-lt-grey);
  --link-color: var(--ts3d-lt-blue);
  --link-hover-color: var(--ts3d-dk-blue);
  --landing-grey: #ddd;

  display: grid;
  gap: 1rem;
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.linkbox {
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
  'title'
  'tagline'
  'links';
  justify-items: center;
  text-align: center;
  gap: var(--card-spacer);
  padding: 1rem;
  background-color: #fff;
  border: 1px solid var(--ts3d-lt-grey);
  border-radius: var(--search-border-radius);
  box-shadow: inset 0 1px 3px var(--landing-grey);

  &:has(img) {
    grid-template-rows: repeat(2, auto) 1fr auto;
    grid-template-areas:
    'logo'
    'title'
    'tagline'
    'links';
  }
  
  a {
    color: var(--link-color);
    
    &:hover {
      color: var(--link-hover-color);
    }
  }
  
  img {
    grid-area: logo;
    width: 75px;
    aspect-ratio: 1;
    justify-self: center;
  }
  
  p.title {
    grid-area: title;
    margin: 0;
    font-size: larger;
    color: var(--link-hover-color);
  }

  .tagline {
    grid-area: tagline;
    
    * {
      margin: 0;
    }
    
    & + ul {
      grid-area: links;
      margin: 0 !important;
      text-align: initial;
      
      li {
        font-weight: bold;
      }
    }
  }
}
        
@container content (max-width: 31.99rem) {
  .tagline {
    width: 100%;
    padding-bottom: var(--card-spacer);
    border-bottom: var(--card-divider);
  }
}

@container content (min-width: 32rem) {
  .linkbox-grid-container {
    grid-template-rows: repeat(2, auto) 1fr;
  }

  .linkbox {
    grid-row: 1 / 4;
    grid-template-rows: subgrid;
    justify-items: initial;
    text-align: initial;
    
    &:has(img) {
      grid-template-areas:
      'logo title'
      'logo tagline'
      'links links';
    }
  }

  .tagline + ul {
    padding-top: var(--card-spacer);
    border-top: var(--card-divider);
  }

  .linkbox:has(img) .tagline + ul {
    grid-column: 1 / 3; /* Chrome rule to honor column span */
  }
}

@container content (min-width: 32rem) and (max-width: 49.99rem) {
  .linkbox-grid-container {
    grid-template-columns: repeat(2, 1fr);
  }

  .linkbox {
    &:has(img) {
      grid-template-columns: minmax(3rem, 25%) 1fr;
    }

    &:nth-child(n + 3) {
      grid-row: 4 / 7;
    }

    &:nth-child(n + 5) {
      grid-row: 7 / 10;
    }

    &:nth-child(n + 7) {
      grid-row: 10 / 13;
    }

    &:nth-child(n + 9) {
      grid-row: 13 / 16;
    }

    &:nth-child(n + 11) {
      grid-row: 16 / 19;
    }

    &:nth-child(n + 13) {
      grid-row: 19 / 22;
    }

    &:nth-child(n + 15) {
      grid-row: 22 / 25;
    }
  }
}

@container content (min-width: 50rem) {
  .linkbox-grid-container {
    grid-template-columns: repeat(3, 1fr);
  }

  .linkbox {
    &:has(img) {
      grid-template-columns: auto 1fr;
    }

    &:nth-child(n + 4) {
      grid-row: 4 / 7;
    }

    &:nth-child(n + 7) {
      grid-row: 7 / 10;
    }

    &:nth-child(n + 10) {
      grid-row: 10 / 13;
    }

    &:nth-child(n + 13) {
      grid-row: 13 / 16;
    }
  }
}

/* Contact Us table styles */
.contact-us {
  text-align: center; /* center all content */
}

.contact-us thead,
.contact-us td:first-child * {
  text-align: initial; /* un-center all content in header row and first column */
}

/* End styles related to linkboxes */

banner-component {
    height: 2em;
    
    + * {
        margin-top: 3em;
    }
}

/* DOC-5184: Font size fixes */
.rst-content {
  .sidebar {
    dl, p, ul {
      font-size: inherit;
    }
  
    > dl, > p, > ul {
      font-size: clamp(.875rem, 90%, 1rem);
    }
  }

  code, tt {
    font-size: clamp(.875rem, 75%, 1rem);
  }
}

code {
  font-size: clamp(.875rem, 75%, 1rem);
}
/* End DOC-5184 */