/**
 * -------------------------------------------------------------------------
 *
 * The styles for the default Table Of Contents page.
 *
 * -------------------------------------------------------------------------
 *
 * Inspired by code pen "Snake highlight" of Mikael Ainalem
 * https://codepen.io/ainalem/pen/EQXjOR
 *
 * So we just import the same styles that are used on the Log In page. Let's
 * call them a general style. If you will need any edits to the general
 * style specifically for the default Table Of Contents page, they can be
 * written under the import line.
 *
 * -------------------------------------------------------------------------
 *
 * @package    MimimiFramework
 * @subpackage Examples / Static Pages only
 * @license    GPL-2.0
 *             https://opensource.org/license/gpl-2-0/
 * @copyright  2022 MiMiMi Community
 *             https://mimimi.software/
 *
 * -------------------------------------------------------------------------
 */

    @import url( 'login.css' );

    body {
        overflow: hidden;
    }
    @media (max-width: 767px) {
        body {
            overflow-y: auto;
        }
    }

        .success,
        .error {
        }
        @media (min-width: 768px) {
            .success,
            .error {
                padding: 0 21rem 0 0.5rem;
            }
        }

        .content.list {
        }
        @media (max-width: 767px) {
            .content.list {
                width: calc( 100% - 1rem - 1rem );
            }
        }

            .content.list .left {
                height: min-content;
                margin-left: 0;
            }
            @media (max-width: 767px) {
                .content.list .left {
                    width: calc( 20rem - 3rem );
                    margin-left: auto;
                }
            }

            .content.list .right {
                border: transparent 1rem solid;
                border-radius: 0 0.5rem 0.5rem 0;
                box-shadow: none;
                height: calc( 100% - 1rem - 1rem );
                width: calc( 50% - 1rem );
                overflow-x: hidden;
                scrollbar-width: thin;
                scrollbar-color: var( --rightBackground ) var( --formText );
                position: fixed;
                top: 1rem;
                right: 1rem;
                z-index: 2;
            }
            .content.list .right::before,
            .content.list .right::after {
                content: "";
                display: block;
                height: 1rem;
                width: calc( 50vw - 3rem - 1rem );
                position: fixed;
                right: 3rem;
                z-index: 1;
            }
            .content.list .right::before {
                background: linear-gradient( var(--rightBackground) 0%,
                                             transparent            100% );
                top: 2rem;
            }
            .content.list .right::after {
                background: linear-gradient( transparent            0%,
                                             var(--rightBackground) 100% );
                bottom: 2rem;
            }
            @media (max-width: 767px) {
                .content.list .right {
                    border: none;
                    border-radius: 0.5rem;
                    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.2);
                    height: auto;
                    width: 100%;
                    overflow: hidden;
                    position: relative;
                    top: auto;
                    right: auto;
                    z-index: auto;
                }
                .content.list .right::before,
                .content.list .right::after {
                    display: none;
                }
            }

                .content.list .form {
                    padding: 1rem;
                    text-align: center;
                }
                @media (max-width: 767px) {
                    .content.list .form {
                        padding: 2rem;
                    }
                }

                    .content.list ul,
                    .content.list ol {
                        margin: 0 auto 1rem 2rem;
                    }

                        .content.list ul ul,
                        .content.list ul ol,
                        .content.list ol ul
                        .content.list ol ol {
                            margin-bottom: 0;
                        }

                        .content.list li {
                            list-style: disc;
                        }
                        .content.list li + li,
                        .content.list ul ul li,
                        .content.list ul ol li,
                        .content.list ol ul li,
                        .content.list ol ol li {
                            margin-top: 0.25rem;
                        }

                            .content.list li span {
                                background: var( --formColor );
                                border-radius: 0.75em;
                                color: var( --rightBackground );
                                display: inline-block;
                                font-size: 80%;
                                padding: 0 0.5em;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                vertical-align: bottom;
                            }

                            .content.list li a {
                                display: inline-block;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                vertical-align: bottom;
                            }

                            .content.list p a {
                                text-decoration: underline;
                            }
                            .content.list .form p a {
                                display: inline-block;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                vertical-align: bottom;
                            }

                            .content.list li small {
                                display: block;
                                font-size: 70%;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                opacity: 0.5;
                            }
                            .content.list li small.tools {
                            }
                            .content.list li small + .tools {
                                border-top: var(--formColor) 1px dotted;
                                margin-top: 0.5em;
                            }
                            .content.list li small:has(a:hover),
                            .content.list li small:has(a:active),
                            .content.list li small:has(a:focus) {
                                opacity: 1;
                            }

        @media (min-width: 768px) {
            .content.list ~ .footnote:not(:empty) {
                border-top: var(--rightBackground) 1px solid;
                margin-left: 0;
                width: calc( 50vw - 3rem );
            }
        }
