/** basic layout, color */
:root {
    --blog-image-color: #444aaa;

    [data-md-color-primary="custom-light"] {
        --md-primary-fg-color: var(--blog-image-color);
    }

    [data-md-color-primary="custom-dark"] {
        --md-primary-fg-color: #8aaaff;

        --md-default-fg-color--lightest: var(--md-default-bg-color);
    }

    /** https://github.com/squidfunk/mkdocs-material/blob/master/src/templates/assets/stylesheets/main/_colors.scss */
    --md-accent-fg-color: #2ca9e1;
    --md-accent-fg-color--transparent: #2ca9e140;

    scrollbar-width: thin;

    --md-text-font: system-ui, sans-serif;
    --md-code-font: "JetBrains Mono", monospace;

    font-size: 125%;

    body {
        --site-max-width: 1330px;
        --article-max-width: 708px;

        header {
            background-color: var(--blog-image-color);
            box-shadow: unset !important;
            transition: unset !important;

            nav.md-header__inner {
                max-width: var(--site-max-width);

                form {
                    border-radius: 4px;
                }

                a.md-logo {
                    margin: 0 8px;
                    padding: 0;

                    img {
                        border-radius: 4px;
                        height: 32px;
                        width: 32px;
                    }
                }
            }

            .md-header__button {
                background-color: var(
                    --md-accent-fg-color--transparent
                ) !important;
                border-radius: 50%;
            }
        }

        header:has(nav > div.md-header__title--active) {
            background-color: transparent !important;

            [data-md-component="header-topic"] {
                display: none;
            }
        }

        main {
            > div.md-main__inner {
                max-width: var(--site-max-width);
                margin-top: 0;

                .md-content {
                    padding: 16px;
                    padding-bottom: 64px;

                    article {
                        max-width: var(--article-max-width);
                        margin: auto !important;
                        line-height: 1.75em;

                        .md-typeset__scrollwrap {
                            scrollbar-color: unset;
                            scrollbar-width: thin;
                        }

                        .highlight {
                            margin: 0 !important;
                        }
                    }
                }

                .md-sidebar {
                    /* Hide navigation title */
                    @media screen and (min-width: 76.25em) {
                        nav label[for="__drawer"] {
                            display: none;
                        }
                    }

                    nav label[for="__toc"] {
                        background-color: transparent;
                    }

                    nav label {
                        box-shadow: unset !important;
                    }

                    * {
                        scrollbar-color: unset;
                        scrollbar-width: thin;
                    }
                }
            }

            hr {
                border-bottom: solid var(--md-default-fg-color--lighter) 1px;
            }
        }

        footer {
            nav.md-footer__inner {
                margin: 0;
                max-width: 100% !important;

                a.md-footer__link {
                    margin: 0;
                }
            }

            .md-copyright {
                padding: 0;
                white-space: nowrap;
                overflow-x: auto;

                .md-copyright__highlight {
                    display: inline;
                    padding-right: 16px;
                }
            }
        }
    }
}

/** article */
body main .md-content article {
    min-height: 100vh;

    p,
    li,
    li > ul,
    li > ol,
    dd {
        margin: 0;
    }

    /** external link */
    a[target="_blank"] {
        padding: 0 2px;
    }

    a[target="_blank"]:after {
        content: "[↗]";
    }

    /** code highlight */
    :not(pre) > code {
        margin: 0 4px;
        padding: 2px 4px;
    }

    /** code block */
    .highlight table {
        padding: 1em 0;
        margin: 0;

        tbody {
            margin: 0.1em 0;

            border-width: 1px;
            border-style: solid;
            border-color: var(--md-default-fg-color--lighter);
            border-radius: 4px;
        }

        td.linenos {
            background-color: var(--md-default-fg-color--lightest);
        }

        td.code pre > code {
            scrollbar-color: unset;
            scrollbar-width: thin;
            padding-right: 48px;
            overflow-x: auto;
        }

        td.code pre:hover {
            > code {
                scrollbar-color: unset;
                scrollbar-width: thin;
            }

            > button {
                background: var(--md-accent-fg-color--transparent);
                border-radius: 4px;
            }
        }
    }

    /** article section number */
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-weight: bold;
        color: var(--md-typeset-color);
    }
    h2 {
        padding-bottom: 4px;
        border-bottom: solid var(--md-default-fg-color--lighter) 1px;
    }

    /* article */
    h1.article-page {
        counter-reset: h2;
    }
    h2.article-page {
        counter-reset: h3;
    }
    h3.article-page {
        counter-reset: h4;
    }
    h2.article-page::before {
        content: counter(h2) " - ";
        counter-increment: h2;
    }
    h3.article-page::before {
        content: counter(h2) "." counter(h3) " - ";
        counter-increment: h3;
    }

    /** table */
    .md-typeset__table table {
        thead {
            background-color: var(--md-default-fg-color--lightest);
            white-space: nowrap;
        }

        tbody {
            background-color: var(--md-default-bg-color);
        }

        td,
        th {
            border: 1px var(--md-default-fg-color--lightest) solid;

            padding: 4px 8px;
            margin: 0;

            min-width: 0;
            width: fit-content;
            /** --article-max-width - 20px */
            max-width: 700px;
            overflow-wrap: break-word;
        }
    }
}

/* force ligature */
.md-typeset {
    code,
    kbd,
    pre {
        font-variant-ligatures: common-ligatures;
    }
}