:host {
  display: block; box-sizing: border-box; width: 100%; height: 500px; border: #d1d1d1 1px solid; --background: #fff; --z-index: 100
}
.container {
  display: block !important; width: 100%; height: 100%; position: relative; z-index: var(--z-index)
}
.container canvas.signature {
  display: block; background: var(--background); position: relative; z-index: 10
}
.container div.mask {
  width: 100%; height: 100%; background: #dddddd; opacity: .3; position: absolute; top: 0px; left: 0px; z-index: -100
}
.container.disabled div.mask {
  z-index: 10000
}