html[data-theme='light'] {
  --sidebar-category-c: var(--c-gray-0);
  --sidebar-border-c: var(--c-gray-90);

  --ifm-menu-color: var(--c-gray-20);
}

html[data-theme='dark'] {
  --sidebar-category-c: var(--c-gray-0);
  --sidebar-border-c: var(--c-gray-90);

  --ifm-menu-color: var(--c-gray-20);
}

:root {
  --doc-sidebar-width: 17.5rem;

  --dropdown-icon-width: 0.625rem;
  --dropdown-icon-height: 0.375rem;
  --dropdown-icon-gap: 0.688rem;

  --ifm-menu-link-padding-vertical: 0.5rem;
  --ifm-menu-color-active: var(--ifm-link-color);

  --sidebar-spacing-horizontal: 1.5rem;
}

//overrides
#__docusaurus {
  [class^='docSidebarContainer'] {
    background: red;

    position: sticky;
    top: 0;
    margin-block-start: 0;
    will-change: initial;

    height: 100vh;

    border-inline-end: 1px solid var(--sidebar-border-c);

    >a {
      display: flex;
      align-items: center;
      height: var(--ifm-navbar-height);

      padding-inline-start: var(--sidebar-spacing-horizontal);
      padding-inline-end: var(--sidebar-spacing-horizontal);
    }
  }

  [class^='sidebar_'] {
    max-height: calc(100vh - var(--ifm-navbar-height));
    position: static;

    overflow-y: auto;

    padding-inline-start: var(--sidebar-spacing-horizontal);
    padding-inline-end: var(--sidebar-spacing-horizontal);
    padding-block-start: 1rem;

    >.menu {
      overflow-x: initial;
      padding-block-end: 2rem;
      padding: 0;
    }
  }

  [class^='sidebarLogo'] {
    display: none !important;
  }

  .menu__list {
    display: block !important;
    transition: height 0.35s cubic-bezier(0.36, 0.66, 0.04, 1) 25ms !important;
    will-change: initial !important;

    margin: 0;

    li:last-of-type {
      padding-block-end: 1.5rem;
    }

    .menu__list {
      .menu__link--sublist {
        margin-inline-start: calc(-1 * (var(--dropdown-icon-width) + var(--dropdown-icon-gap)));

        &::after {
          opacity: 0.6;
        }
      }
    }

    &-item {
      &:not(:first-child) {
        margin-block-start: 0;
      }

      .menu__list {
        .menu__link {
          padding-inline-start: calc(var(--dropdown-icon-width) + var(--dropdown-icon-gap));
        }
      }
    }
  }

  .menu__link {
    font-weight: 500;
    font-size: 0.813rem;
    line-height: 16px;
    /* identical to box height */

    display: flex;
    align-items: center;
    letter-spacing: -0.01em;

    transition: opacity 0.2s ease-out;

    &:not(.menu__link--active:not(.menu__link--sublist)) {
      background: initial;
    }

    &:not(.menu__link--active):not(.menu__link--sublist) {

      &:hover,
      &:active,
      &:focus {
        opacity: 0.7;
      }
    }
  }

  .menu__link--sublist {
    padding-inline-start: 0;
    padding-inline-end: 0;

    margin-block-end: 0;

    display: flex;
    align-items: center;
    flex-direction: row-reverse;
    justify-content: flex-end;

    &::after {
      background: var(--ifm-menu-link-sublist-icon) center / var(--dropdown-icon-width) var(--dropdown-icon-height);
      background-repeat: no-repeat;

      min-width: auto;

      width: var(--dropdown-icon-width);
      height: var(--dropdown-icon-height);

      margin-inline-end: var(--dropdown-icon-gap);
      margin-block-end: 0;
    }
  }

  .theme-doc-sidebar-item-category-level-1 {
    >.menu__link {
      color: var(--sidebar-category-c);

      font-weight: 600;
      font-size: 0.938rem;
      line-height: 100%;
    }
  }
}