Your task is to style an Angular component called MessageBoxComponent which displays a paragraph $10px$ message passed to it as an input @Input $().$ Write the component css style rules using Angular special selectors according to the requirements specified below.

Requirements

The component should always occupy the total height and width of the ancestor container.

The component should have its padding set to $10$px$.$

By default the component should have its background color set to gray $.$

If the component is used within a container of style $.$ banner, the text in the component should be aligned to the center.

If the component is used within a container of style $.$ popup, the text in the component should be justified to the center.

If the class error is applied to the component, the background color should be set to red $.$

If the class warning is applied to the component, the background color should be set to yellow.

Assumptions

You should use Angular special selectors to complete this task.

The MessageBoxComponent uses the app$-$message$-$box selector.

Available packages and libraries

Angular $12\mathrm{.}0\mathrm{.}0$

Examples

Example usage of MessageBoxComponent :

: