.popin {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease-out 0.3s, visibility 0s ease-out 0.6s;
  position: fixed;
  inset: 0px;
  z-index: 1000;
}
.popin-overlay {
  position: absolute;
  inset: 0px;
  background: black;
  opacity: 0.5;
}
.popin--share .popin-overlay {
  background: rgba(34, 34, 34, 0.6);
  opacity: 0.2;
}
.popin-content {
  z-index: 200;
  position: absolute;
  z-index: 2;
  background-color: var(--bg-color);
  opacity: 0;
  transform: translateY(100%);
  transition: all 0.3s ease-in;
}
.popin--share .popin-content {
  bottom: 2rem;
  left: 2rem;
  right: 2rem;
  padding: 5.5rem 2.3rem 2.3rem;
}
.popin.opened {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
  transition-timing-function: ease-in;
}
.popin.opened .popin-content {
  opacity: 1;
  transform: none;
  transition-timing-function: ease-out;
}
body:has(.popin.opened) {
  overflow: hidden;
}
.popin--share .popin-close {
  position: absolute;
  top: 0;
  right: 0;
}
.popin--share .popin-close:hover {
  background-color: transparent;
  color: var(--text-color);
}
.popin--share .popin-close:hover::before {
  background-color: var(--text-color);
}

/*# sourceMappingURL=popin.css.map */