Unable to change arrow color

[machineresearch]

I've been able to override all of the SCSS entries to customize the bdc-walk-popup class...except for the arrow color. How can I change the arrow color using CSS-only (see attachment)?

[davideas]

I use these styles to get theme colors and so the arrow. Blue style is also nice 👍
The variables have been set in @mixin with $theme parameter: the way Angular Material wants.

/* WALK-THROUGH */

.mat-mdc-menu-panel.bdc-walk-popup {
    box-shadow: 0 0 10px mat.get-color-from-palette($primary, default, 0.3);
    border: 1px solid $primaryColor;

    &.arrow.mat-menu-after.horizontal {
        &::before {
            border-right-color: $primaryColor;
        }
        &::after {
            border-right-color: $backgroundColor;
        }
    }

    // Hide the 'x' icon (useless with the buttons)
    .title a.close {
        display: none;
    }

    // Must use theme colors, increased readability (was too small)
    .container {
        background: $backgroundColor; //<-- in the library white background is hardcoded: this is a bug
        color: $primaryText;
        font-size: 16px;
        font-weight: normal;
    }

    .buttons button, .title .header {
        color: $primaryColor;
        font-size: 18px;
    }
}

[dboulet01]

How did you overcome the hardcoding in the library? @davideas

Having difficulty customizing the styling of the popup