// Global

body,
.reversed {
    color: var(--bf-color-neutral-primary);
}

// Display

.bf-display-highlight {
    @extend .bf-color-bg-action-primary;
    @extend .px-1;

    @at-root
    .reversed.bf-display-highlight,
    .reversed .bf-display-highlight {
        color: var(--bf-color-bg-ground); // When reversed, force black text color over highlight background-color.
    }
}