Checkbox doesn't check inside data-component=""

I'm making this checkbox list and everything works great until i place it inside this div and wrap the scss in it:

<div data-component="modal"></div>
[data-component='modal'] {styling goes here}

Outside of that in css, it checks great. Can someone tell me what is going on?

Also, the reason it's called modal, it's because this checkbox is inside a modal. And at first I thought the modal was messing things up, but it works great. The issue is in scss, for some reason.

Here's the codepen.