remove z-index property of notification container

Set default value with CSS class instead. Default value could be
customized with CSS variable if needed. If consumer prefers to set it on
invocation, it could be set as any other HTML attribute using angle bracket
component invocation:

```hbs
<NotificationContainer style="z-index: 9999;" />
```

This should be preferred over style bindings due to security reasons.
Especially style bindings requires an `style-src: unsafe-inline` directive
Content Security Policy, which is bad for security reasons.

addon/components/notification-container.js

@@ -1,6 +1,5 @@
 import Component from '@ember/component';
 import { computed } from '@ember/object';
-import { htmlSafe } from '@ember/string';
 import { inject as service } from '@ember/service';
 
 import layout from '../templates/components/notification-container';
@@ -13,13 +12,7 @@ export default Component.extend({
   classNameBindings: ['computedPosition', ':ember-cli-notifications-notification__container'],
   attributeBindings: ['computedStyle:style', 'position:data-test-notification-container'],
 
-  zindex: '1060',
-
   computedPosition: computed('position', function() {
     return `ember-cli-notifications-notification__container--${this.get('position')}`;
   }),
-
-  computedStyle: computed('zindex', function() {
-    return htmlSafe(`z-index: ${this.get('zindex')};`);
-  })
 });

addon/styles/components/notification-container.css

@@ -2,6 +2,7 @@
   --ecn-container-position: 10px;
   --ecn-container-width: 80%;
   --ecn-container-max-with: 400px;
+  --ecn-container-z-index: 1060;
 
   --ecn-icon-width: 30px;
   --ecn-icon-position: 10px;
@@ -28,6 +29,7 @@
   margin: 0 auto;
   width: var(--ecn-container-width);
   max-width: var(--ecn-container-max-with);
+  z-index: var(--ecn-container-z-index),
 }
 
 /* Position */

tests/dummy/app/controllers/application.js

@@ -11,7 +11,6 @@ export default Controller.extend({
   clearDuration: 2800,
   htmlContent: false,
   position: 'top',
-  zindex: '9999',
   clearAll: true,
   cssClasses: 'profile-saved-success-notification',
 

tests/dummy/app/templates/application.hbs

@@ -1,4 +1,4 @@
-{{notification-container position=position zindex=zindex}}
+{{notification-container position=position}}
 <div class="bg-blue white py4">
   <div class="max-width-4 mx-auto px2">
     <div class="mb3">
@@ -25,9 +25,9 @@
     <h2>Basic usage</h2>
     <hr>
     <p>Include the container component in your template.</p>
-    <p>Optionally, change the position or z-index value of the notifications container.</p>
+    <p>Optionally, change the position of the notifications container.</p>
     <p class="h5"><i>Default value is top</i></p>
-    <CodeBlock @language="handlebars">&#123;&#123;notification-container position="top-right" zindex="9999"&#125;&#125;</CodeBlock>
+    <CodeBlock @language="handlebars">&#123;&#123;notification-container position="top-right"&#125;&#125;</CodeBlock>
 
     <p>Inject the notifications service where required.</p>
     <CodeBlock @language="js">import Controller from '@ember/controller';