[data-overlay-id]:not(.open) {
  z-index: -1 !important;
  opacity: 0;
}

[data-overlay-id] {
  z-index: 999 !important;
  position: fixed !important;
}

/* overlay-bg */

/* before */
.overlay-bg {
  position: fixed;
  z-index: 1;

  top: 0;
  left: 0;

  width: 100%;
  height: 100%;

  transition-property: all;
  opacity: 1;
  background: rgba(0, 0, 0, 0);
}

/* after */
body.has-overlay-bg {
  overflow: hidden;
  padding-right: var(--scrollbar-width, 0px);
}

/* animation */

[data-overlay-id] {
  transition-property: all;
}

.overlay-transition-duration-0-200 {
  transition-duration: 200ms;
}

.overlay-transition-duration-0-300 {
  transition-duration: 300ms;
}

.overlay-transition-easing-ease_out {
  transition-timing-function: ease-out;
}

/* position */

.overlay-position-manual {
  position: absolute !important;
}

/* dissolve */

/* before */
.overlay-transition-type-dissolve:not(.open) {
  opacity: 0;
  z-index: 9999 !important;
}

/* after */
.overlay-transition-type-dissolve.open {
  opacity: 1;
}

/* transition */

/* right / top_left */

.overlay-position-top_left.overlay-transition-direction-right {
  top: 0;
  left: -100%;
}

.overlay-position-top_left.overlay-transition-direction-right.open {
  left: 0;
}

/* top / center */

/* before */
.overlay-position-center.overlay-transition-direction-top {
  top: 200%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

/* after */
.overlay-position-center.overlay-transition-direction-top.open {
  top: 50%;
}

/* left / top_right */

.overlay-position-top_right.overlay-transition-direction-left {
  top: 0;
  right: -100%;
}

.overlay-position-top_right.overlay-transition-direction-left.open {
  top: 0;
  right: 0;
}

/* top_center */
.overlay-position-top_center {
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}