@use "aloha_prefix" as aloha;

.#{aloha.$aloha-prefix}backdrop {
  --#{aloha.$aloha-prefix}_backdrop_zindex: var(--a_z_index_backdrop);
  --#{aloha.$aloha-prefix}_backdrop_bg: #000;
  --#{aloha.$aloha-prefix}_backdrop_opacity: 0.5;

  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--#{aloha.$aloha-prefix}_backdrop_zindex);
  width: 100vw;
  height: 100vh;
  background-color: var(--#{aloha.$aloha-prefix}_backdrop_bg);
}
.#{aloha.$aloha-prefix}backdrop_confirm {
  --#{aloha.$aloha-prefix}_backdrop_zindex: var(--a_z_index_backdrop_confirm);
}
.#{aloha.$aloha-prefix}backdrop_fade {
  transition: opacity .15s linear;
  opacity: 0;
}
.#{aloha.$aloha-prefix}backdrop_show {
  opacity: var(--#{aloha.$aloha-prefix}_backdrop_opacity);
}