#toc:not(:empty) {
  border-radius: 20px;
  max-width: 300px;
  background: var(--secondary-container);
  color: var(--on-secondary-container);
  z-index: 30;
}

#toc :is(p, ul) {
  padding: 8px 10px;
}

#toc li {
  margin: 0
}

#toc p {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-block: 0;
  border-bottom: 2px solid var(--outline);
}

#toc span {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 8px;
}

#toc button {
  background: none;
  border: 1px solid var(--outline);
  border-radius: 20px;
  color: var(--on-surface);
  padding: 6px 16px;
}

#toc button:hover {
  background: var(--secondary-container);
  color: var(--on-secondary-container);
}

#toc button:active {
  background: var(--secondary-container);
}

#toc ul {
  margin: 0;
  padding-inline-start: 20px;
  list-style-type: decimal;
  color: var(--on-surface-variant);
}

#toc.collapsed ul {
  display: none;
}

#toc.collapsed p {
  border: 0;
}

#toc ul a {
  color: var(--on-surface);
}

:is(h2, h3, h4):target {
  animation: highlight 2s ease;
}

:is(h2, h3, h4) a:is(:visited, :link) {
  color: var(--on-surface);
}

:is(h2, h3, h4) a:is(:active, :hover):after {
  color: var(--on-surface-variant);
  content: "#";
  display: inline-flex;
  font-size: 0.7em;
  line-height: 1;
  margin-left: 4px;
  text-decoration: none;
}

@keyframes highlight {
  0% {
    background: var(--secondary-container);
  }

  100% {
    background: unset;
  }
}

code {
  word-break: break-word;
}

@media screen and (prefers-color-scheme: dark) {
  :is(h2, h3, h4) a {
    color: var(--on-surface) !important;
  }
}

.markdown-alert {
  background: var(--surface-container-high);
  padding: 8px 16px;
}

.markdown-alert.markdown-alert-important {
  border-left: 8px solid var(--tertiary-container);
  color: var(--on-tertiary-container);
}

.markdown-alert .markdown-alert-title {
  display: flex;
  align-items: center;
  font-weight: 600;
}

.markdown-alert-title .octicon.octicon-report {
  fill: var(--on-tertiary-container);
  margin-right: 6px;
}