:host {
  width: 100%; height: 100%; opacity: 0; position: fixed; top: 0px; left: 0px; pointer-events: none; z-index: -2000001000; --message-font-size: 14px; --message-line-height: 160%; --message-background: rgba(0, 0, 0, .8); --message-border-radius: 6px; --message-color: #ffffff
}
:host(.on) {
  opacity: 1; z-index: 2000001000
}
container {
  display: block !important; width: 100%; height: 100%; opacity: 0; position: relative; z-index: 100
}
container span.message {
  display: block; padding: 10px 20px; font-size: var(--message-font-size); line-height: var(--message-line-height); background: var(--message-background); border-radius: var(--message-border-radius); color: var(--message-color); opacity: 0; transform: translate(-50%, -50%) scale(.4); position: absolute; top: 50%; left: 50%; z-index: 100
}
container span.message.on {
  transform: translate(-50%, -50%) scale(1); opacity: 1; transition: all .3s ease
}
container span.message.out {
  transform: translate(-50%, -50%) scale(1.1); opacity: 0
}
container.on {
  opacity: 1
}