/* ╭──────────────────────────────────────╮
/  │                    _                 │
/  │  _ __   __ ___   _| |__   __ _ _ __  │
/  │ | '_ \ / _` \ \ / / '_ \ / _` | '__| │
/  │ | | | | (_| |\ V /| |_) | (_| | |    │
/  │ |_| |_|\__,_| \_/ |_.__/ \__,_|_|    │
/  ╰──────────────────────────────────────╯
/  table of contents - styling  for the table of contents button and list that appears on some pages */

.toc {
    align-content: center;
    background-color: var(--accent);
    border-radius: 1rem;
    color: var(--background);
    cursor: pointer;
    height: 1.9rem;
    margin-left: auto !important;
    outline: .13rem solid color-mix(in srgb, var(--accent) 60%, transparent);
    position: absolute;
    top: 1rem;
    right: 1rem;
    padding: 0px .2em !important;
    /* unset the padding for the button itself so the button can take the padding to make the entire button clickable */

    input[type="checkbox"]#toc-menu {
        left: -100vw;
        position: absolute;
    }

    input[type="checkbox"]#toc-menu:focus-visible {
        left: unset !important;
    }

    label[data-toggle="toc"] {
        cursor: pointer;
        overflow: hidden !important;
        padding: .3rem .5rem !important;
        position: relative;

        .icon {
            padding: 0 .5rem !important;
            pointer-events: none;
            transform: translateY(.1rem) scale(1.5);
        }
    }

    ul {
        background-color: var(--background);
        border-radius: 1rem;
        border: var(--accent) solid .15rem;
        cursor: initial !important;
        /* reset the cursor otherwise it uses the pointer cursor */
        margin-top: 1.2rem !important;
        max-height: 27rem;
        max-width: 17rem;
        min-height: 27rem;
        min-width: 17rem;
        overflow: scroll;
        position: absolute;
        right: .4rem;
        visibility: hidden;

        /* inital "hidden" state, used for providing animation when activated */
        opacity: 0;
        scale: .5;
        transform-origin: top right;
        transition: opacity .3s, scale .3s, visibility .3s;

        li {
            border-radius: 1rem;
            color: var(--foreground);
            list-style-type: none;
            margin-left: -2rem;
            padding: .4rem;

            span {
                padding: .1rem 0px .1rem 0px !important;
            }

            h2 {
                margin: 0 !important;
            }
        }
    }

    input[type="checkbox"]#toc-menu:checked~ul {
        /* makes the menu visibile when activated and makes it appear from the top right */
        opacity: 1;
        scale: 1;
        transition: opacity .3s, scale .3s, visibility .3s;
        visibility: visible;
    }
}