* {
    --md-default-bg-color-darker: color-mix(in srgb, var(--md-primary-fg-color) 30%, var(--md-default-bg-color) 70%)
}

.md-typeset kbd {
    border-radius: .2rem;
    font-size: .85em;
    padding: 0 .5em;
    margin: 0 .1em;
    box-shadow:
        0 0.1rem 0 0.05rem var(--md-typeset-kbd-border-color),
        0 0.1rem 0 var(--md-typeset-kbd-border-color),
        0 -0.05rem 0.1rem var(--md-typeset-kbd-accent-color) inset;
}

.md-typeset .mdx-badge {
    font-size: 0.8rem;
    display: inline-flex;
    align-items: stretch;
    overflow: hidden;
    border: .05rem solid var(--md-default-bg-color-darker);
    border-radius: .25rem;
    vertical-align: baseline;
}

.md-typeset .mdx-badge__icon,
.md-typeset .mdx-badge__text {
    display: inline-flex;
    align-items: center;
}

.md-typeset .mdx-badge__icon {
    justify-content: center;
    background-color: var(--md-default-bg-color-darker);
    padding: .15rem;
    color: var(--md-primary-fg-color);
}

.md-typeset .mdx-badge__text {
    font-size: .85em;
    padding: 0 .5rem;
}

.md-typeset .mdx-badge__text code {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
}