@use '../styles/variables' as *;

.backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.5);
  -webkit-tap-highlight-color: transparent;
  
  &.invisible {
    background-color: transparent;
  }
}

.backdropContent {
  position: relative;
  z-index: 1;
}

// Animation
.backdrop {
  animation: backdropFadeIn 0.3s ease-in-out;
}

@keyframes backdropFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

// Dark mode
:global(.dark) {
  .backdrop:not(.invisible) {
    background-color: rgba(0, 0, 0, 0.7);
  }
}