:host {
    --ak-mermaid-message-text: var(--pf-c-content--Color);
    --ak-table-stripe-background: var(--pf-global--BackgroundColor--light-200);
}

ak-alert + p {
    margin-block-start: var(--pf-global--spacer--md);
}

a {
    --pf-global--link--Color: var(--pf-global--link--Color--light);
    --pf-global--link--Color--hover: var(--pf-global--link--Color--light--hover);
    --pf-global--link--Color--visited: var(--pf-global--link--Color);
}

/*
 * Note that order of anchor pseudo-selectors must follow:
 *   1. link
 *   2. visited
 *   3. hover
 *   4. active
 */
a:link {
    color: var(--pf-global--link--Color);
}

a:visited {
    color: var(--pf-global--link--Color--visited);
}

a:hover {
    color: var(--pf-global--link--Color--hover);
}

a:active {
    color: var(--pf-global--link--Color);
}

h2:first-of-type {
    margin-top: 0;
}

table thead,
table tr:nth-child(2n) {
    background-color: var(--ak-table-stripe-background,);
}

table td,
table th {
    border: var(--pf-table-border-width) solid var(--ifm-table-border-color);
    padding: var(--pf-global--spacer--md);
}

pre {
    overflow-x: auto;
}

pre:has(.hljs) {
    padding: var(--pf-global--spacer--md);
}

svg[id^="mermaid-svg-"] {
    .rect {
        fill: var(
            --ak-mermaid-box-background-color,
            var(--pf-global--BackgroundColor--light-300)
        ) !important;
    }

    .messageText {
        stroke-width: 4;
        fill: var(--ak-mermaid-message-text) !important;
        paint-order: stroke;
    }
}

/* #region Dark Theme */

:host([theme="dark"]) {
    --ak-mermaid-message-text: var(--ak-dark-foreground);
    --ak-mermaid-box-background-color: var(--ak-dark-background-lighter);
    --ak-table-stripe-background: var(--pf-global--BackgroundColor--dark-200);

    svg[id^="mermaid-svg-"] {
        line[class^="messageLine"] {
            /*
            Mermaid's support for dynamic palette changes leaves a lot to be desired.
            This is a workaround to keep content readable while not breaking the rest of the theme.
         */
            filter: invert(1) !important;
        }
    }
}

/* #endregion */
