Cypress: How to get properties of pseudo progress elements like --webkit-progress-bar or --moz-progress-bar

I have progress bar components that change color based on their value, and I'd like to evaluate the background-color property using Cypress. Trouble is, I can't find any way to get at the pseudo elements where the background-color is actually stored. Here is my styling (using React and styled-components):

const MacroBar = styled.progress`
  -webkit-appearance: none;
  appearance: none;
  width: ${props => (props.barSize === 'large' ? '146px' : '80px')};
  height: ${props => (props.barSize === 'large' ? '8px' : '6px')};
  border: none;
  border-radius: ${props => (props.barSize === 'large' ? '6px' : '3px')};

  ::-webkit-progress-bar {
    background-color: ${colors.primary100};
    border-radius: ${props => (props.barSize === 'large' ? '6px' : '3px')};
  }
  ::-webkit-progress-value {
    background-color: ${props =>
      props.over
        ? colors.error
        : props.color === 'teal'
        ? colors.secondary400
        : colors.hliteone400};
    border-radius: ${props => (props.barSize === 'large' ? '6px' : '3px')};
  }
  ::-moz-progress-bar {
    background-color: ${props =>
      props.over
        ? colors.error
        : props.color === 'teal'
        ? colors.secondary400
        : colors.hliteone400};
    border-radius: ${props => (props.barSize === 'large' ? '6px' : '3px')};
  }
`;

Based on other guides I've found, I figured maybe these items were part of the shadow DOM, but it turns out there's no shadow root on the progress element. Next, I tried this:

cy.getBySel('macroTable-fatBar')
  .then($els => {
  // get Window reference from element
  const win = $els[0].ownerDocument.defaultView
  // use getComputedStyle to read the pseudo selector
  const pseudo = win.getComputedStyle($els[0], 'webkit-progress-value')
  // read the value of the `content` CSS property
  const color = pseudo.getPropertyValue('background-color')
  console.log(color) // comes back as rgb(0, 0, 0)
})

When I log the value of pseudo above, I don't even see a property for webkit-progress-value or webkit-progress-bar. How can I access these from Cypress or Javascript? They're clearly somewhere, because the bars are changing color.

EDIT: From the dev tools:

In Firefox the pseudo element is visible:

In Chrome it is not:

For purposes of this, the Chrome one is more important since Cypress uses the Chrome browser.

EDIT 2: HTML structure:

Right click > Copy > JS Path document.querySelector("#root > div.sc-coaFxK.gDjsDI > div > div > div.sc-bjPkoM.gIVEZf.sc-bdVaJa.btEwTU > div:nth-child(2) > div > div.sc-jklikK.gSjtyw.sc-bdVaJa.kceFjZ > div > table > tbody > tr:nth-child(2) > td.sc-ePZHVD.sc-eKZiaR.icnKcQ > progress")