/*
 * Foldable content navigation.
 *
 * Deliberately minimal and scoped to the foldable navigation, so that the surrounding theme keeps
 * control over colours, fonts and list markers. The caret inherits its colour and size.
 */

/* Indent the sub levels. Relative to the font size, so that it scales with the theme. */
[data-toc-foldable] ul {
    opacity: 1;
    padding-left: 1.25em;
    transition:
        opacity 0.18s ease-out,
        translate 0.18s ease-out,
        display 0.18s allow-discrete;
    translate: 0 0;
}

/*
 * The sub levels are collapsed via the hidden attribute. Themes frequently set a display value on
 * lists, which would win over the browser default for [hidden], hence the explicit rule.
 *
 * Transitioning display requires allow-discrete above, so that the sub level stays rendered while
 * fading out. Browsers not supporting it simply snap, which is a fair fallback.
 */
[data-toc-foldable] ul[hidden] {
    display: none;
    opacity: 0;
    translate: 0 -0.25em;
}

/* The state a sub level starts from when it gets displayed again */
@starting-style {
    [data-toc-foldable] ul {
        opacity: 0;
        translate: 0 -0.25em;
    }
}

.toc-toggle {
    background: none;
    border: 0;
    color: inherit;
    cursor: pointer;
    font: inherit;
    line-height: 1;
    margin-left: 0.25em;
    padding: 0.25em 0.4em;
    vertical-align: text-bottom;
}

.toc-toggle::before {
    border-bottom: 2px solid currentColor;
    border-right: 2px solid currentColor;
    content: '';
    display: inline-block;
    height: 0.45em;
    transform: rotate(45deg) translate(-0.1em, -0.1em);
    transition: transform 0.15s ease-in-out;
    width: 0.45em;
}

.toc-toggle[aria-expanded='true']::before {
    transform: rotate(-135deg) translate(-0.15em, -0.15em);
}

.toc-toggle:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    [data-toc-foldable] ul,
    .toc-toggle::before {
        transition: none;
    }
}