/**
 * Copyright (c) Microblink Ltd. All rights reserved.
 */

@import "../styles/globals-sass";

:host {
  display: block;
  width: 100%;
  height: 100%;

  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;

  opacity: 0;
  border-radius: 0px;

  visibility: hidden;
  overflow: hidden;

  background-color: transparent;
  border-style: none;
  border-color: transparent;

  transform: translate(0, 0);
  transform-origin: center;

  transition: background-color 0.2s ease 0.4s,
              border-style 0.2s ease 0.4s,
              border-color 0.2s ease 0.4s,
              opacity 0.2s ease 0.4s,
              visibility 0.1s ease 0.5s,
              z-index 0.7s;
}

:host(.visible) {
  z-index: 200;

  visibility: visible;
  opacity: 1;

  background-color: transparent;

  transform: translate(0, 0);

  transition: opacity 0.2s ease, visibility 0.1s ease;
}

:host(.non-fullscreen) {
  width: auto;
  height: auto;

  position: absolute;

  top: calc(0px - var(--mb-component-border-width));
  bottom: calc(0px - var(--mb-component-border-width));
  left: calc(0px - var(--mb-component-border-width));
  right: calc(0px - var(--mb-component-border-width));
}