:root {
  --sidenav-text-base: 1rem;
  --sidenav-text-lg: 1.125rem;
  --sidenav-text-scale: 0.8765;
  --sidenav-text-color: var(--text-color);
  --sidenav-link-color: var(--link-color);
  --sidenav-link-alpha: 0.75;
  --sidenav-font-weight-bold: 600;
}

/* Search */

sidenav-component {
  position: relative;
}

.sidenav__search {
  position: relative;
  padding-inline-end: 1rem;
  z-index: 20;

  input {
    &::placeholder {
      font-size: 14px;
    }
  }
}

.sidenav__search--overlay {
  opacity: 0;
  z-index: -1;
  pointer-events: none;

  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  background-color: #fff;
  border-radius: 8px;

  transition: opacity 250ms ease-out;

  &[data-active="true"] {
    opacity: 1;
    z-index: 10;
    pointer-events: all;
  }
}

.sidenav-search-results {
  padding: 0;
  margin: 0;
  list-style: none;
  padding-top: 70px;
  padding-inline-end: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;

  li,
  a {
    font-size: 14px;
    color: rgba(0, 0, 0, 0.75);
  }
}

#sidenav-search-clear,
#sidenav-search-loader {
  display: none;
  padding: 0;
  margin: 0;

  position: absolute;
  right: 2rem;
  top: 1.15rem;
  color: #747474;
  font-size: 14px;
}

#sidenav-search-clear {
  outline: 0;
  border: 0;
  background-color: transparent;
  cursor: pointer;
}

#sidenav-search-loader {
  i {
    animation: spin 1000ms ease-out forwards infinite;
  }
}

.sidenav__search[data-loaded="true"] {
  #sidenav-search-clear {
    display: block;
  }
}

.sidenav__search[data-loading="true"] {
  #sidenav-search-loader {
    display: block;
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* End of Search */

.sidenav {
  display: none;
  border-right: 1px solid rgba(0, 0, 0, 0.2);
  font-size: 14px;

  @media (min-width: 1200px) {
    display: block;
  }
}

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

.sidenav__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;

  font-weight: var(--sidenav-font-weight-bold);

  border-top: var(--border-width) solid var(--border-color);
  border-bottom: var(--border-width) solid var(--border-color);

  touch-action: manipulation;
}

.sidenav__toggle svg {
  align-items: center;
  width: 1rem;
  height: 1rem;
}

.sidenav summary {
  position: relative;

  list-style: none;
  cursor: pointer;
}

.sidenav__content {
  padding-top: /* 0.5rem */ 0;
  padding-left: /* 1.5rem */ 1rem;
}

.sidenav__list {
  margin: 0;
  padding-left: 0;
  padding-right: 1rem;

  list-style: none;
}

.sidenav__list > * + *,
 .sidenav__list /* + .sidenav__articles, */
/* .sidenav__list li.sidenav__article:first-of-type */ {
  margin-top: 0.5rem;
}

/* .sidenav__label {
  font-weight: var(--sidenav-font-weight-bold);
} */

.sidenav__articles {
  display: block;
}

.sidenav__article-name {
  color: var(--sidenav-link-color);

  opacity: var(--sidenav-link-alpha);
}

.sidenav__article-name[aria-current="page"] {
  --sidenav-link-alpha: 1;
  text-decoration: none;
  font-weight: 600;
}

.sidenav__article-name[aria-current="page"]::before {
  content: "\f15c";
  font-family: "FontAwesome";
  font-weight: 200;
  padding-right: 0.3em;
  font-size: 13px;
  color: #898a8c;
}

/* .sidenav__list--main > li > sidenav-details > details > summary {
  font-size: calc(var(--sidenav-text-lg) * var(--sidenav-text-scale));
} */

.sidenav summary:has(.sidenav__icon) {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;

  & > * {
    display: block;
  }
}

.sidenav__icon {
  min-width: max-content;
  flex-shrink: 0;
  img {
    height: 28px;
  }
}

.sidenav summary:has(.sidenav__icon) ~ .sidenav__content {
  padding-left: 2.5rem;
}

sidenav-details > details.open > summary > span > .sidenav__label {
  font-weight: var(--sidenav-font-weight-bold);
}

.sidenav-enabled.toc-enabled .article-container__sidenav,
.sidenav-enabled.toc-enabled .article-container__toc {
  width: 20%;
}

.sidenav__label {
  display: block;
  max-width: 300px;
  padding-right: 2em;
}

.sidenav__drawer {
  details[open] {
    & > summary::after {
      transform: translateY(-50%) rotate(90deg);
    }
  }

  summary {
    &::after {
      content: "\f054";
      font-family: "FontAwesome";
      position: absolute;
      font-size: 14px;
      color: inherit;
      right: 0.3rem;
      top: 50%;
      transform: translateY(-50%);
      transition: all 0.2s ease-out;
    }
  }
}