regex finding css block [duplicate]

I have this CSS block:

@component HelloWorld {
  background-color: red;
  padding: 1rem;

  @modifier red {
    color: green;
  }
}

and I want to find all the contents in this block until the blocks end (with })

I wrote the following regex and I don't know how to ignore all of the brackets inside the block and find only the closing one.

[\s]{0,}@([\w]+)[ ]{1,}([\w\d]+)[ ]{0,}{.+?(?=})

example

and also I want to match all of the blocks if I have the following CSS:

@modifier red {
  color: green;
}

@modifier red {
  color: green;
}