TinyMCE Some custom text styles are not selectable, and some are

EDIT: Reproducible fiddle for review : https://fiddle.tiny.cloud/P2haab

I'm having trouble creating a custom style formatting configuration option, my text styles sometimes work and sometimes don't. Here are my current style_formats for reference:

style_formats: [
    { title: 'Table Row or List Styles' },
    { title: 'Light Gray', selector: 'tr,ul,ol', classes: 'bg__ltgray' },
    { title: 'Light Blue', selector: 'tr,ul,ol', classes: 'bg__ltblue' },
    { title: 'Light Teal', selector: 'tr,ul,ol', classes: 'bg__ltteal' },
    { title: 'Light Purple', selector: 'tr,ul,ol', classes: 'bg__ltpurple' },
    { title: 'List Styles' },
    { title: 'Dark Teal Text', selector: 'ul,ol', classes: 'text__dkteal' },
    { title: 'Dark Purple Text', selector: 'ul,ol', classes: 'text__dkpurple' },
    { title: 'Dark Blue Text', selector: 'ul,ol', classes: 'text__dkblue' },
    { title: 'Text Styles' },
    { title: 'White Text', inline: 'span', classes: 'text__white' },
    { title: 'Dark Blue Text', inline: 'span', classes: 'text__dkblue' },
    { title: 'Medium Blue Text', inline: 'span', classes: 'text__medblue' },
    { title: 'Dark Green Text', inline: 'span', classes: 'text__dkgreen' },
    { title: 'Dark Teal Text', inline: 'span', classes: 'text__dkteal' },
    { title: 'Dark Purple Text', inline: 'span', classes: 'text__dkpurple' },
    { title: 'Dark Blue Gray Text', inline: 'span', classes: 'text__dkbluegray' },
    { title: 'Medium Blue Gray Text', inline: 'span', classes: 'text__medbluegray' },
    { title: 'Dark Gray Text', inline: 'span', classes: 'text__dkgray' },
    { title: 'Medium Gray Text', inline: 'span', classes: 'text__medgray' },
],
paste_block_drop: false,
content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
                    + '.bg__ltgray {background-color: #ededee;}.bg__dkgray {background-color: #a5a7a9;}.bg__dkblue {background-color: #1a315b;}.bg__ltblue {background-color: #cdd6df;}.bg__medblue {background-color: #33587d;}.bg__dkgreen {background-color: #0a492c;}.bg__ltteal {background-color: #ceebeb;}.bg__dkteal {background-color: #00b9ad;}.bg__ltpurple {background-color: #e0d4e1;}.bg__dkpurple {background-color: #652767;}.bg__dkbluegray {background-color: #4b6e8c;}.bg__ltbluegray {background-color: #dbe2e8;}.bg__medbluegray {background-color: #6e8aa3;}.bg__dkgray {background-color: #a5a7a9;}.bg__medgray {background-color: #b9b7bb;}'
                    + '.text__white {color: #ffffff;} .text__dkblue {color: #1a315b;} .text__medblue {color: #33587d;} .text__dkgreen {color: #0a492c;} .text__dkteal {color: #00b9ad;} '
                    + '.text__dkpurple { color: #652767;} .text__dkbluegray { color: #4b6e8c; } .text__medbluegray { color: #6e8aa3; } .text__dkgray { color: #a5a7a9; } '
                    + '.text__medgray { color: #b9b7bb; } '

As you can see, all text styles are exactly the same, however, the user can only select a few options from the list, the other options will show an unavailable mouse cursor, similar to when you try to use the list or table styles (if not desired table or list to which the style is applied).

Specifically, these are what makes the color and is not selectable :

• Optional:
  • White
  • In blue
  • dark green
  • dark blue gray
  • medium blue grey
  • dark grey
  • grey
• Not selectable:
  • dark blue
  • Teal
  • dark purple

I can't find any rhyme or reason why these other styles cannot be applied. I've provided a screenshot of the mouse cursor when I try to apply a style that doesn't work. Am I missing something in the config specifically to limit these color/style choices?