.toc-content {
  height: 100%;
  width: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;

  &::-webkit-scrollbar {
    display: none;
  }

  padding: 6px;

  & .props-list {
    color: hsl(var(--prop-color));

    & a {
      color: hsl(var(--prop-link-color));
    }
  }

  & .funcs-list {
    color: hsl(var(--func-color));

    & a {
      color: hsl(var(--func-link-color));
    }
  }

  & .signals-list {
    color: hsl(var(--signal-color));

    & a {
      color: hsl(var(--signal-link-color));
    }
  }

  & .vars-list {
    color: hsl(var(--var-color));

    & a {
      color: hsl(var(--var-link-color));
    }
  }
}

.types-list {
  list-style: none;
  z-index: 21;

  & .types-item {
    margin-block: 0.1rem;
    width: 100%;
    transition: background-color 0.3s;
    padding-left: 0.3rem;
    border-radius: 5px;

    & svg {
      opacity: 0.6;
      width: 1.25rem;
      height: 1.25rem;
      transition: opacity 0.5s;
    }

    & a {
      display: flex;
      align-items: center;
      gap: 0.3rem;
      width: 100%;
      padding: 0.3rem;
      text-decoration: none;
    }

    &:hover {
      cursor: pointer;
      background-color: hsl(var(--toc-hovered-bkg));

      & svg {
        opacity: 1;
      }
    }
  }
}
