/**
 * -------------------------------------------------------------------------
 *
 * The styles for the Settings 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 Table Of Contents
 * page. Let's call them a general style. If you will need any edits to the
 * general style specifically for the Settings 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( 'toc.css' );

    .content {
    }

        .right {
        }

            .right h4 {
                clear: both;
                margin-bottom: 0;
            }
            .right h4:not(:first-child) {
                margin-top: 2rem;
            }
            .right .half  + h4,
            .right .third + h4,
            .right .quarter + h4 {
                padding-top: 1rem;
            }

            .content .right ul,
            .content .right ol {
                clear: both;
                margin-bottom: 0;
            }
            .content .right p + ul,
            .content .right p + ol {
                margin-top: 1rem;
            }

                .content .right ul li + li,
                .content .right ol li + li {
                    margin-top: 1rem;
                }

            .right p {
                clear: both;
                margin-bottom: 0;
            }
            .right p:not(:first-child) {
                margin-top: 1rem;
            }

            .right label {
                clear: both;
                margin-top: 1rem;
                overflow: visible;
            }
            .right label:first-child {
                margin-top: 0;
            }

            .right label.half {
                float: left;
                width: calc( 50% - 0.5rem );
                margin-bottom: 1rem;
            }
            .right label.half + .half {
                clear: right;
                float: right;
            }

            .right label.third {
                float: left;
                width: calc( 33% - 0.5rem );
                margin-bottom: 1rem;
            }
            .right label.third + .third {
                float: right;
                clear: right;
            }
            .right label.third + .third + .third {
                float: none;
                clear: none;
            }

            .right label.quarter {
                clear: right;
                float: left;
                width: calc( 25% - 0.75rem - 1px );
                margin-right: 1rem;
                margin-bottom: 1rem;
            }
            .right label.quarter + .quarter + .quarter + .quarter {
                margin-right: 0;
            }
            @media (min-width: 768px) and (max-width: 959px) {
                .right label.quarter {
                    width: calc( 50% - 0.5rem - 1px );
                    margin-bottom: 0;
                }
                .right label.quarter + .quarter {
                    margin-right: 0;
                }
                .right label.quarter + .quarter + .quarter {
                    margin-right: 1rem;
                    margin-bottom: 1rem;
                }
                .right label.quarter + .quarter + .quarter + .quarter {
                    margin-right: 0;
                }
            }
            @media (max-width: 575px) {
                .right label.quarter {
                    width: calc( 50% - 0.5rem - 1px );
                    margin-bottom: 0;
                }
                .right label.quarter + .quarter {
                    margin-right: 0;
                }
                .right label.quarter + .quarter + .quarter {
                    margin-right: 1rem;
                    margin-bottom: 1rem;
                }
                .right label.quarter + .quarter + .quarter + .quarter {
                    margin-right: 0;
                }
            }

                .right input[type="number"]:focus,
                .right input[type="text"]:focus,
                .right input[type="password"]:focus,
                .right input[type="file"]:focus,
                .right select:focus,
                .right textarea:focus {
                    box-shadow: var( --buttonFocus ) 0 0 0 0.25rem;
                }

                .right textarea[rows] {
                    height: auto;
                }

                .right textarea.js {
                    font-family: monospace;
                    white-space: nowrap;
                }

                .right textarea.css,
                .right textarea.bbcode {
                    font-family: monospace;
                    height: calc( 100vh - 16rem );
                    white-space: nowrap;
                }

            .right .btn {
                background: var( --buttonBackground );
                color: var( --buttonColor );
                width: 12rem;
                margin-top: 1.5rem;
                opacity: 0.75;
            }
            .right .btn:hover,
            .right .btn:active,
            .right .btn:focus {
                background: var( --buttonFocus );
                color: var( --submitFocus );
                opacity: 1;
            }
