/* Sidebar */

/* Sticky Nav*/

.sticky {
  display: none;
}

@media (min-width: 60em) {
  .sticky,
  .support-info {
    display: block;
    gap: 2rem;
  }
  .sticky {
    position: sticky;
    inset-block-start: 4rem;
    max-height: 100vh;
    max-width: 16.5rem;
    z-index: 1000;
    overflow-y: scroll;
    overflow-x: scroll;
    scroll-snap-stop: always;
    overflow-x: scroll;
    scrollbar-color: var(--clr-neutral-40) var(--clr-white);
    scrollbar-gutter: stable;
  }
}

/************************/

/* Table of contents (inner sticky nav) */

.table-of-contents {
  width: 100%;
  ol {
    margin-block-start: 0.75rem;
    gap: 0.75rem;
    display: flex;
    flex-direction: column;
    transition:
      max-height 400ms ease-out,
      border 0ms 400ms linear;
    li {
      position: relative;
    }

    li * {
      font-size: var(--step-1);
      font-weight: var(--font-bold);
    }

    a {
      display: flex;
      padding: 0.5rem 1.5rem;
      text-decoration: none;
      color: var(--clr-neutral-160);
      &:hover {
        background-color: var(--clr-neutral-5);
        transition-duration: var(--transition-duration);
      }
    }
  }

  .is-active {
    background-color: var(--clr-neutral-160);
    color: var(--clr-white);
    border-radius: 0.25rem;
    &:hover {
      background-color: var(--clr-neutral-160);
      transition-duration: var(--transition-duration);
    }
  }
}

/***************************/

/* Related and Recent Articles */
details {
  margin-block-start: 1rem;
  overflow: hidden;
  display: flex;
}

details:first-child {
  margin-block-start: 0;
}

summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

summary::-webkit-details-marker {
  display: none;
}

.sidebar-article-dropdown {
  flex-direction: column;
  border: 1px solid var(--clr-neutral-40);
  border-radius: 0.5rem;
  padding: 1rem;
  background-color: var(--clr-white);
  transition:
    max-height 400ms ease-out,
    border 0ms 400ms linear;
  &:hover {
    border-color: var(--clr-neutral-160);
    cursor: pointer;
    transition-duration: var(--transition-duration);
  }
}

.sidebar-articles-label {
  position: relative;
  display: flex;
  gap: 0.5rem;
  align-items: center;

  h3 {
    font-size: var(--step-2);
    font-weight: var(--font-bold);
  }

  &:hover {
    cursor: pointer;
    transition-duration: var(--transition-duration);
  }
}

details > summary > span[aria-hidden='true'] > svg {
  transition: all 300ms ease;
}

.recent-articles,
.related-articles {
  max-height: 0;
  overflow: hidden;
  padding: 0 10px;
  border: 2px solid transparent;
  transition:
    max-height 400ms ease-out,
    border 0ms 400ms linear;
}

details[open] .recent-articles,
details[open] .related-articles {
  max-height: 25rem;
  transition:
    max-height 400ms ease-out,
    border 0ms linear;
}

details[open] summary > span[aria-hidden='true'] > svg {
  rotate: 180deg;
  transition: 200ms ease-out;
}

.sidebar-articles-label-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}

.related-articles,
.recent-articles {
  & ul {
    padding-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    transition:
      max-height 400ms ease-out,
      border 0ms linear;
  }
  a {
    color: var(--clr-secondary-140);
    font-size: var(--step-1);
    font-weight: var(--font-bold);
    &:hover {
      background-color: var(--clr-secondary-5);
      cursor: pointer;
      text-decoration: none;
      transition-duration: var(--transition-duration);
    }
  }
}

h2.recent-articles-title,
h2.related-articles-title {
  display: none;
}
/*************************/

/* Article Contaainer */

.article-wrapper {
  gap: 2rem;
  display: flex;
  flex-direction: column;
}

@media (min-width: 45em) {
  .article-wrapper {
    z-index: 0;
  }
}

.article-container {
  padding: var(--gap-sm);
  border: var(--card-border);
  border-radius: var(--border-radius);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 2rem;
  max-width: 70em;
}

.article-page {
  .tags {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    color: var(--clr-neutral-160);
  }

  .last-updated {
    display: block;
  }

  .metadate {
    color: var(--clr-neutral-160);
  }
}

.img-50 {
  width: 50%;
  display: flex;
}

.img-75 {
  width: 75%;
}

/***************************/

/* Article Meta */

.article-meta {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.article-share {
  background-color: var(--clr-white);
  z-index: 999;
  position: absolute;
  inset-block-start: auto;
  margin-block-start: 0;
}

.article-share-label {
  border: 1px solid var(--clr-neutral-160);
  border-radius: 0.25rem;
  color: var(--clr-neutral-160);
  line-height: 1.5;
  display: flex;
  justify-content: space-between;
  padding: 0.25rem 0.5rem;
  font-size: var(--step-0);

  &:hover {
    background-color: var(--clr-neutral-5);
    border-color: var(--clr-neutral-160);
    color: var(--clr-neutral-160);
    transition-duration: var(--transition-duration);
  }
}

.article-share-label-wrapper {
  h3 {
    font-size: var(--step-0);
  }

  &:focus-within {
    border-radius: 0.25rem;
    background-color: var(--clr-neutral-160);
  }

  &:focus-within * {
    color: var(--clr-white);
  }
}

.share-dropdown {
  display: flex;
  flex-direction: column;
  padding: 0.5rem 0;
  border: 1px solid var(--clr-neutral-40);
  align-items: flex-start;
  gap: 0.5rem;
  margin-block-start: 0.5rem;
  border-radius: 0.25rem;
  background-color: var(--clr-white);
  box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.1);
  width: 12rem;

  &:hover {
    border-color: var(--clr-neutral-160);
    transition-duration: var(--transition-duration);
  }

  svg {
    &:hover {
      background-color: var(--clr-neutral-5);
      cursor: pointer;
      color: var(--clr-neutral-160);
    }
  }

  ul {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;

    li {
      display: flex;
      flex-direction: row;
      width: 100%;
    }

    li > a {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      text-decoration: none;
      width: 100%;
      padding: 0.5rem 1.5rem;
      color: var(--clr-neutral-160);
    }

    li > a > svg {
      height: 1rem;
      width: 1rem;
      color: var(--clr-neutral-160);
    }

    li:nth-child(2) {
      svg:nth-child(2) {
        display: none;
      }
    }

    li:hover * {
      background-color: var(--clr-secondary-5);
      cursor: pointer;
      color: var(--clr-secondary-140);
      transition-duration: var(--transition-duration);
    }
  }
}

details[open] .share-dropdown {
  display: flex;
}

details:not([open]) .share-dropdown {
  display: none;
}

.share-print {
  width: 100%;
}

.share-print a {
  display: inline-flex;
  text-decoration: none;
  align-items: center;
  gap: 0.5rem;
  color: var(--clr-neutral-160);
  width: 100%;
  padding: 0.5rem 1.5rem;

  &:hover {
    color: var(--clr-secondary-140);
    transition-duration: var(--transition-duration);
  }
}

.share-facebook::after,
.share-twitter::after,
.share-linkedin::after {
  font-size: var(--step-0);
  color: var(--clr-secondary-600);
}

.share-facebook::after {
  content: 'Facebook';
}

.share-twitter::after {
  content: 'X';
}

.share-twitter::before {
  font: var(--fa-font-brands);
  content: '\e61b';
  display: none;
}

.share-linkedin::after {
  content: 'LinkedIn';
}

/*****************************/

/* Article Vote */

.article-vote {
  display: flex;
  margin-block-start: 3rem;
  width: 100%;
  justify-content: flex-start;
  gap: 1rem;
  align-items: center;

  button,
  p {
    color: var(--clr-neutral-160);
    font-weight: var(--font-bold);
    font-size: var(--step-0);
    line-height: 1.5;
  }

  button {
    border: 1px solid var(--clr-neutral-160);
    border-radius: 0.25rem;
    padding: 0.25rem 0.5rem;
  }
}

.article-vote-up {
  &:hover {
    background-color: var(--clr-success-10);
    border: 1px solid var(--clr-success-140);
    color: var(--clr-success-140);
    transition-duration: var(--transition-duration);
  }

  &:focus-within {
    background-color: var(--clr-success-140);
    border: 1px solid var(--clr-success-60);
    color: var(--clr-success-5);
  }

  &::after {
    font: var(--fa-font-regular);
    content: '\f164';
    display: none;
  }
}

.article-vote-down {
  &:hover {
    background-color: var(--clr-alert-10);
    border: 1px solid var(--clr-alert-140);
    color: var(--clr-alert-140);
    transition-duration: var(--transition-duration);
  }

  &:focus-within {
    background-color: var(--clr-alert-140);
    border: 1px solid var(--clr-alert-60);
    color: var(--clr-alert-5);
  }

  &:focus-within * {
    background-color: var(--clr-alert-140);
    color: var(--clr-alert-5);
  }

  &::after {
    font: var(--fa-font-regular);
    content: '\f165';
    display: none;
  }
}

@media (min-width: 45em) {
  .article-vote {
    margin-block-start: 0;
    justify-content: flex-end;
  }
}

/*****************************/

/* Article Navigation */

.article-navigation {
  margin-block-start: 3.5rem;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 2rem;
  width: 100%;
}

.article-pagination {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
}

.article-pagination:nth-child(2) {
  .arrow-wrapper {
    justify-content: flex-end;
    text-align: end;
  }

  .arrow-link {
    text-align: end;
  }
}
.arrow-wrapper {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.arrow-link a {
  color: var(--clr-secondary-140);
  text-decoration: underline;
  font-size: var(--step-1);
  font-weight: var(--font-bold);
}

.arrow-wrapper > a {
  border: 1px solid var(--clr-neutral-160);
  border-radius: 0.25rem;
  padding: 0.5rem;
  box-sizing: content-box;
  display: flex;
  width: 1rem;
  height: 1rem;
  justify-content: center;

  svg {
    color: var(--clr-neutral-160);
  }

  &:hover {
    border-color: var(--clr-neutral-160);
    background-color: var(--clr-neutral-5);
    color: var(--clr-neutral-160);
  }

  &:focus-within {
    background-color: var(--clr-neutral-160);
    color: var(--clr-white);
  }
}

@media (max-width: 45em) {
  .arrow-link {
    display: none;
  }
}

/*****************************/
/* Article Footer */

.article-footer {
  border: 1px solid var(--clr-neutral-40);
  border-radius: 0.5rem;
  flex: 1 1 20%;
  padding: var(--space-m);
}

.article-vote-footer {
  justify-content: center;
  gap: 1.5rem;
  flex-direction: column;
  margin-top: 0;

  p {
    font-size: var(--step-3);
    color: var(--clr-neutral-160);
  }
  button {
    padding: 0.75rem 2rem;
    font-size: var(--step-2);
  }
}

.vote-buttons {
  display: flex;
  flex-direction: row;
  gap: 1rem;
}

.article-vote-label {
  font-size: var(--step-0);
  color: var(--clr-neutral-100);
}

@media print {
  @page {
    size: A4;
  }
  header,
  nav,
  .article-meta,
  aside,
  .back-to-top-wrapper,
  .cta,
  .article-footer,
  .article-navigation,
  .hero,
  footer {
    display: none !important;
  }

  .article-wrapper {
    width: 100%;
    min-width: 100vw;
  }

  .article-container {
    min-width: 100%;
    border: none;
  }

  article {
    widows: 3;
  }

  table,
  img,
  svg {
    break-inside: avoid;
  }
  table td {
    word-break: break-all;
  }
}

[dir='rtl'] .arrow-wrapper > a > svg {
  transform: rotate(180deg);
}

/*******************************/

/* Click to copy button */

.code-block {
  background-color: var(--clr-neutral-5);
  border: 1px solid var(--clr-neutral-160);
  border-radius: 0.25rem;
  padding: var(--space-2xs);
}

.code-block pre {
  white-space: pre-wrap;
  margin: 0;
  padding: 0.5rem;
  line-height: 1.4;
  display: inline-block;
}

.code-block pre::after {
  content: '';
  display: inline-block;
  width: 0;
}
.code-block br {
  display: block;
  content: '';
  margin: 0;
  padding: 0;
  line-height: inherit;
}

.copy-btn {
  background-color: var(--clr-white);
  border: 1px solid var(--clr-neutral-160);
  border-radius: 0.25rem;
  padding: 0.5rem;
  color: var(--clr-neutral-160);
  font-weight: var(--font-bold);
  font-size: var(--step-0);

  &::after {
    display: none;
    font: var(--fa-font-solid);
    content: '\f0c5';
  }

  &:hover {
    background-color: var(--clr-secondary-5);
    border-color: var(--clr-secondary-140);
    transition-duration: var(--transition-duration);
  }

  &:active,
  &:focus-within,
  &:focus-visible {
    background-color: var(--clr-neutral-160);
    color: var(--clr-white);
  }
}

.copy-btn.no-icon::after {
  content: '';
}

.copy-notification {
  display: inline-block;
  margin-left: 10px;
  padding: 5px 10px;
  background-color: #333;
  color: white;
  border-radius: 4px;
  font-size: 14px;
  transition: opacity 0.5s ease;
  vertical-align: middle;
}

/*************************/
/* Article Title */

.article-header {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: flex-start;
  position: relative;
  z-index: 0;
  margin-block: 1.5rem 2.5rem;
  padding: 0;
  border-bottom: 0;
}

/***********************/

/* Article Content */

.article-content > * + * {
  margin-block: 1.5rem;
}
.article-content {
  h2 {
    font-size: var(--step-4);
    font-weight: var(--font-bold);
    text-wrap: pretty;
    line-height: 1.5;
    cursor: pointer;
    position: relative;
    display: inline-flex;
    margin-block-end: 0;

    &:hover {
      text-decoration: underline;
    }

    &:focus-within {
      border: 2px solid var(--clr-primary-100);
      box-shadow: 0 0 0 2px #fce1d3;
      border-radius: 0.25rem;
      padding: var(--space-3xs);
    }

    .link-anchor:focus-visible {
      border: none;
      outline: none;
    }

    .link-anchor svg {
      display: none;
    }
    .link-anchor::after {
      content: '';
      position: absolute;
      inset-block-start: 0;
      inset-inline-start: 0;
      width: 100%;
      height: 100%;
      z-index: 10;
    }
  }
}
.article-content {
  h3 {
    font-size: var(--step-3);
    font-weight: var(--font-bold);
    line-height: 1.3;
  }

  .link:hover {
    background-color: var(--clr-secondary-5);
  }

  .callout-note .link,
  .callout-support .link {
    &:hover {
      background-color: var(--clr-secondary-10);
    }
  }

  .callout-tip .link {
    color: var(--clr-success-140);
    &:hover {
      background-color: var(--clr-success-10);
    }
  }

  .callout-remember .link {
    color: var(--clr-primary-140);
    &:hover {
      background-color: var(--clr-primary-10);
    }
  }

  .callout-warning .link {
    color: var(--clr-alert-140);
    &:hover {
      background-color: var(--clr-alert-10);
    }
  }

  /*SECTION - Accordion */
  .collapse:not(.is-visible) {
    display: none;
  }
  .collapse {
    pointer-events: none;
  }

  details {
    display: flex;
    overflow: hidden;
    flex-direction: column;
  }

  .article-accordion {
    margin-top: 0;
  }

  .article-accordion-label {
    border: 1px solid var(--clr-neutral-40);
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    cursor: pointer;
    font-weight: var(--font-bold);
    height: 4.5rem;

    &:hover {
      background-color: var(--clr-neutral-5);
      color: var(--clr-neutral-160);
      text-decoration: underline;
      transition-duration: var(--transition-duration);
    }
    &:focus-visible {
      border: 2px solid var(--clr-primary-100);
      color: var(--clr-neutral-160);
      text-decoration: underline;
    }
    &::after {
      display: none;
      font: var(--fa-font-regular);
      content: '\f078';
      width: 1em;
      height: 1em;
      text-align: center;
      transform: rotate(90deg);
      transition: all 300ms ease;
    }
  }

  details[open] .article-accordion-label {
    color: var(--clr-white);
    text-decoration: underline;
    transition: all 300ms ease;
    background-color: var(--clr-neutral-160);
    border-left-width: 0;
    border-right-width: 0;

    svg {
      transform: rotate(180deg);
      transition: all 300ms ease;
      color: var(--clr-white);
    }
  }

  .article-accordion-content-wrapper {
    padding: 1rem;
    background-color: var(--clr-white);
    border-right: 1px solid var(--clr-neutral-40);
    border-left: 1px solid var(--clr-neutral-40);
    border-bottom: 1px solid var(--clr-neutral-40);
    margin-block-start: 0;
  }

  .article-accordion-content > * + * {
    margin-block-start: 1.5rem;
  }

  .article-accordion-content p {
    margin-block-end: 1.5rem;
  }

  .article-accordion-content p:first-child {
    margin-block-start: 0;
  }
  .article-accordion-content p:last-child {
    margin-block-end: 0;
  }

  .toggles {
    margin-block-end: 1.5rem;
    display: flex;
    justify-content: space-between;
    border-radius: 0.25rem;
  }

  ol .toggles,
  ul .toggles {
    margin-block-start: 1.5rem;
  }

  /*!SECTION - Accordion */

  /*******************************/

  /* Lists */

  ul > * + *,
  ol > * + * {
    margin-block-start: 1.5rem;
  }

  ol,
  ul {
    margin-inline-start: 3rem;
    p {
      margin-block-start: 1.5rem;
    }
  }

  ol,
  ul {
    [class*='callout-'] {
      padding: 0.5rem 0.75rem;
      border: none;
      display: inline-flex;
      font-size: var(--size-0);
      margin-block-end: unset;
      margin-block-start: 1.5rem;

      svg:first-child {
        display: none;
      }
    }
  }

  /* List style types */

  ul,
  ol ul {
    list-style-type: disc;
    ::marker {
      color: var(--clr-neutral-160);
    }
  }

  :is(ul) :is(ul) {
    list-style-type: circle;
  }

  :is(ul) :is(ul) :is(ul) {
    list-style-type: square;
  }

  ol {
    list-style: none;
    margin-inline-start: 3rem;
    position: static;
  }

  ol:not(ol ol) {
    counter-reset: article-counter;
  }

  ol li {
    counter-increment: article-counter;
    position: relative;
    padding-inline-start: 1rem;

    &::before {
      content: counter(article-counter);
      color: var(--clr-neutral-160);
      font-size: var(--step-0);
      font-weight: var(--font-bold);
      position: absolute;
      --size: 1.5rem;
      inset-inline-start: calc(-1 * var(--size));
      line-height: var(--size);
      width: var(--size);
      height: var(--size);
      top: 0;
      background-color: var(--clr-neutral-5);
      border-radius: 50px;
      text-align: center;
    }
  }

  :is(ol) :is(ul) {
    li {
      padding-inline-start: 0;
      counter-increment: unset;
    }
    ::before {
      display: none;
    }
    ::marker {
      color: var(--clr-neutral-160);
    }
  }

  :is(ol) :is(ol) {
    list-style-type: lower-latin;
    ::marker {
      color: var(--clr-neutral-160);
    }
    ::before {
      display: none;
    }
  }

  :is(ol) :is(ol) :is(ol) {
    list-style-type: lower-roman;
  }

  ol[type='a'],
  ol.alpha,
  ul ol[type='a'],
  [type='a'] {
    padding-left: 1rem;
    list-style-type: lower-latin;
    li {
      counter-increment: article-counter 0;
    }
    li::before {
      display: none;
    }
    li::marker {
      color: var(--clr-neutral-160);
      font-weight: var(--font-bold);
    }
  }

  li {
    ul,
    ol {
      margin-inline-start: 1.5rem;
    }
    ol[type='a'] {
      margin-inline-start: 1rem;
    }
    ul,
    ol,
    div {
      margin-block-start: 1.5rem;
    }
    .code-block div {
      margin-block-start: 0;
    }
    [class*='callout-'] div {
      margin-block-start: 0;
    }
  }

  /***********************/

  /* Tables */

  figure.wysiwyg-table,
  table > * + * {
    margin-block-start: 1.5rem;
  }

  figure.wysiwyg-table figcaption,
  caption {
    text-align: start;
    margin-block-end: var(--space-2xs);
    font-weight: var(--font-bold);
    font-size: var(--step-3);
    padding: 0;
  }

  figure.wysiwyg-table,
  figure.wysiwyg-table-align-left,
  figure.wysiwyg-table-align-right,
  table {
    overflow-y: scroll;
    scrollbar-color: var(--clr-neutral-40) var(--clr-white);
    max-width: 100%;
    max-height: 80vh;
    font-size: var(--step-0);
    overflow-wrap: break-word;
    margin-inline: 0;

    thead > tr,
    tbody > tr:nth-of-type(odd) {
      background-color: var(--clr-neutral-5);
    }

    tr:first-child {
      vertical-align: middle;
      background-color: var(--clr-white);
    }

    th,
    td {
      border: 1px solid var(--clr-neutral-40);
      padding: var(--space-xs) var(--space-2xs);
    }

    th[scope='col'] {
      font-weight: var(--font-bold);
      font-size: var(--step-1);
    }

    th[scope='rowgroup'],
    th[scope='row'],
    td[scope='rowgroup'],
    td[scope='row'],
    td[rowspan] {
      text-align: start !important;
      font-weight: var(--font-bold);
      vertical-align: top;
    }

    td > * + * {
      margin-block-start: 1rem;
    }

    td {
      vertical-align: top;
      font-size: var(--step-0);
      [class*='callout-'] {
        padding: 0.5rem 0.75rem;
        border: none;
        display: inline-flex;
        font-size: var(--size-0);
        margin-block-end: unset;
        svg {
          display: none;
        }
      }
    }

    /*************************/
    /* Lists in tables */

    ul > * + *,
    ol > * + * {
      margin-block-start: 1rem;
    }

    :is(ol, ul) {
      margin-inline-start: 1.5rem;
    }
    :is(ol, ul) p {
      margin-inline-start: 1.5rem;
    }

    :is(ol, ul) li:first-child {
      margin-block-start: 0;
    }

    :is(ol, ul) :is(ol, ul) {
      margin-block-start: 1rem;
    }

    p + ul {
      margin-inline-start: 3rem;
    }
  }

  /* Tables in Tabs */

  .tab-inner {
    table:first-child,
    figure:first-child {
      margin-block: 0;
    }
  }
  /**********************/

  /* Images and video */
  img,
  iframe,
  video {
    border: 1px solid var(--clr-neutral-40);
    border-radius: 0.25rem;
  }

  video {
    display: block;
    width: 100%;
  }
}

/****************************/

/* Example article custom styles */
.example pre {
  display: block;
  border: none;
}

/* Icons */
.mod-ui {
  --height: 1.25rem;
  height: var(--height);
  padding-inline: 0.5rem;
}

.mod-ui-bell {
  --height: 2rem;
}

.fa-layers-counter {
  --fa-counter-border-radius: 1.625rem;
  --fa-counter-line-height: 1;
  --fa-top: -7px;
  --fa-right: -2px;
  --fa-counter-scale: 0.6;
}