@import "../../../theme/global";

/**
* @prop --lar-opacity: general opacity on overlays
*/
$blur:                      var(--lar-ios-blur, 10px) !default;
$opacity:                   var(--lar-backdrop-opacity, .92) !default;

:host {
  @include position(0, 0, 0, 0);

  display: block;
  position: absolute;

  transform: translateZ(0);

  contain: strict;
  cursor: pointer;
  opacity: $opacity;
  touch-action: none;
  z-index: 2;
  background-color: $backdrop-color;
}


:host(.lar-backdrop-hide) {
  background: transparent;
}

:host(.lar-backdrop-no-tappable) {
  cursor: auto;
}