.blob {
    border: var(--solid-border);
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;

    .title {
        border-bottom: var(--solid-border);
        padding: var(--gap);
        margin: 0;
        background-color: var(--bg-lighter);

        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--gap);
    }

    .view-tabs {
        display: flex;
        gap: var(--gap);

        label {
            padding: 2px var(--gap);
            border: var(--solid-border);
            cursor: pointer;
        }

        label:hover {
            background-color: var(--hover-col);
        }
    }

    &:first-child {
        margin: 0;
        padding: 0;
    }

    pre {
        margin: 0;
        background-color: var(--bg-darker);
        font-family: monospace;
        padding: var(--gap);
    }

    pre code {
        counter-reset: line;

        span {
            display: flex;
            max-width: 100%;
            overflow-wrap: anywhere;
            white-space: preserve;
            word-break: break-all;

            &:nth-child(odd) {
                background-color: var(--bg-col);
            }

            &::before {
                counter-increment: line;
                content: counter(line);
                display: inline-block;
                margin-right: var(--gap);
                color: var(--link-col);
                height: max-content;
                white-space: nowrap;
            }
        }
    }

    .tab-radio {
        display: none;
    }

    #mdrender {
        order: 1;
    }

    #mdcode {
        order: 2;
        display: none;
    }

    #mdview-code:checked~#mdcode {
        display: block;
    }

    #mdview-code:checked~#mdrender {
        display: none;
    }

    #mdview-render:checked~.title label[for="mdview-render"],
    #mdview-code:checked~.title label[for="mdview-code"] {
        background-color: var(--link-col);
        color: var(--bg-col);
    }

    .rendered-md {
        padding: var(--gap);
        margin: 0;
        background-color: var(--bg-darker);
        line-height: 1.6;

        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            margin: var(--gap) 0;
        }

        h1 {
            border-bottom: var(--solid-border);
            padding-bottom: var(--gap);
        }

        h2 {
            border-bottom: 1px solid var(--bg-lighter);
            padding-bottom: calc(var(--gap) / 2);
        }

        p,
        ul,
        ol,
        blockquote,
        pre,
        table {
            margin: 0 0 var(--gap) 0;
        }

        ul,
        ol {
            padding-left: calc(var(--gap) * 3);
        }

        blockquote {
            padding-left: var(--gap);
            border-left: 3px solid var(--link-col);
        }

        code {
            background-color: var(--bg-col);
            padding: 0.1em 0.4em;
            border-radius: 2px;
        }

        pre code {
            background: none;
            padding: 0;
        }

        img {
            max-width: 100%;
        }

        table,
        th,
        td {
            border: 1px solid var(--bg-lighter);
            border-collapse: collapse;
            padding: calc(var(--gap) / 2) var(--gap);
        }
    }
}