/**
 *
 * Rules
 *
 */
:host {
  animation: var(--ezp-backdrop-animation-name, host-in) var(--ezp-duration-3) forwards var(--ezp-easing-out-quart);
  background: var(--ezp-core-backdrop);
  border-radius: var(--ezp-backdrop-border-radius, 6px);
  display: block;
  height: 100%;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 4;
}
:host(.hide) {
  --ezp-backdrop-animation-name: host-out;
}

@keyframes host-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes host-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}