// Asciidoctor-specific styles
@import "roles";

:root {
    --side-accent-color: var(--base05);
    --side-accent-color-text: var(--base00);
    --border-style: 1px var(--side-accent-color) solid;
    --mark-border-style: 0.5em var(--side-accent-color) solid;
}

.anchor {
    &::before {
        content: "§";
        display: inline-block;
        margin-right: 0.25em;
    }
}

.conum {
    color: var(--base05) !important;
    background-color: var(--base03);
    user-select: none;
}

.quoteblock {
    border: var(--border-style);
    border-left: var(--mark-border-style);

    blockquote {
        margin: auto;
        padding: 0.5em;
        max-height: var(--code-block-size);
        overflow: auto;

        &> :first-child {
            margin-top: 0;
        }
    }
}

#footnotes> :not(hr) {
    margin-top: 1rem;
}

.admonitionblock {
    display: flex;
    flex-direction: row;

    font-family: initial;
    color: unset;
    font-size: unset;
    padding: 0;
    border: var(--border-style);

    >.icon {
        --size: 8em;
        background: var(--foreground);
        color: var(--background);
        width: var(--size);
        padding: 0.5em;
    }

    >.content {
        align-content: center;
        border: none !important;
        line-height: initial;
        padding: 0 0.5em;
    }
}

[class$="block"],
:where(.admonitionblock, .dialogblock, .listingblock, .literalblock) {
    margin: 1rem 0 0;

    .title>code {
        background: unset;
    }

    .content> :first-child {
        margin-top: 0;
    }
}

p.tableblock {
    margin: unset;
}

*:not(.listingblock, .literalblock, .openblock) {

    >.attribution,
    >.title {
        background: var(--side-accent-color);
        color: var(--side-accent-color-text);
        font-size: 0.9em;
        padding: 0.5em;
        word-break: break-word;
    }

    >.content {
        border: var(--border-style);
        padding: 0.5em;
    }
}

.listingblock {
    position: relative;

    >.title {
        background: var(--side-accent-color);
        color: var(--side-accent-color-text);
        font-size: 0.9em;
        padding: 0.5em;
        word-wrap: break-word;

        code {
            background: unset;
        }
    }

    >.content pre {
        margin-top: unset;
    }
}

.literalblock {
    position: relative;

    >.content pre {
        background: var(--base00);
        font-size: 0.9em;
    }
}

.literalblock,
.listingblock {
    >.listingblock__btn-row {
        $gap: 0.3em;

        display: flex;
        gap: $gap;
        flex-flow: row;
        justify-content: center;
        align-items: center;
        width: min-content;

        position: absolute;
        top: 0;
        right: 0;

        >button {
            background: var(--base01);
            padding: $gap;

            &:hover {
                background: var(--selection-color);
                color: var(--base05);
            }

            &:active {
                background: var(--accent-color);
                color: var(--base06);
            }
        }
    }

    &:fullscreen {
        border: unset;

        .content>pre {
            max-height: 100vh;
            border: unset;
        }

        .title {
            display: none;
        }

        >.listingblock__btn-row {
            top: 0;
        }

        &::backdrop {
            --color1: var(--base08);
            --color2: var(--base0C);
            --threshold1: 9px;
            --threshold2: 24px;
            background: repeating-linear-gradient(45deg,
                    var(--color1) 0px,
                    var(--color1) var(--threshold1),
                    var(--color2) var(--threshold1),
                    var(--color2) var(--threshold2));
        }
    }
}

.admonitionblock {
    >table {
        border: unset;
        margin: unset;
        table-layout: fixed;
        width: 100%;

        tbody {

            tr+tr,
            tr:first-child {
                border-top: unset;
            }
        }
    }

    td.content {
        background: var(--base01);
        border: unset;
        max-height: var(--code-block-size);
        overflow: auto;
    }

    td.icon {
        --size: 6ch;
        background: var(--foreground);
        color: var(--background);
        vertical-align: middle;
        width: var(--size);
        padding: 0.25em;

        >.title {
            display: flex;
            justify-content: center;
        }

        >svg.icon {
            width: 100%;
            height: var(--size);
        }
    }
}

.imageblock {
    >.content {
        display: flex;
        justify-content: center;
    }

    >.title {
        text-align: center;
    }
}

p {
    margin-bottom: unset;
}

.sidebarblock {
    >.content {
        background: var(--base01);
        border: unset;
        padding: var(--vertical-rhythm);

        >.title {
            background: unset;
            color: unset;
            font-family: var(--header-family);
            font-size: 1em;
            font-weight: bold;
            padding: unset;
        }
    }
}

// Custom Asciidoctor components.
.dialogblock {
    align-items: center;
    border: var(--border-style);
    border-left: var(--mark-border-style);
    display: flex;
    flex-flow: row nowrap;
    gap: 1em;
    padding: 0.5em;
    max-width: 60ch;
    width: fit-content;

    &__avatar {
        --size: 4em;
        width: var(--size);
        flex-basis: var(--size);
        flex-shrink: 0;
        margin: 0;

        .imageblock {
            margin: 0;

            .content {
                border: unset;
                padding: 0;
            }
        }
    }

    &__text {
        display: block;
        margin: 0;

        > :first-child {
            margin-top: 0;
        }
    }

    // Roles/modifiers.
    &.reversed {
        flex-direction: row-reverse;
        margin-left: auto;
        border-left: var(--border-style);
        border-right: var(--mark-border-style);
    }

    &.full {
        max-width: unset;
        width: unset;
    }
}

@media all and (max-width: 860px) {
    .imageblock {
        >.content {
            width: 100% !important;
        }
    }
}