.my-popup-container,
.my-popup-container *,
.my-popup-container *::before,
.my-popup-container *::after {
  box-sizing: border-box;
}

.my-popup-container {
  --_my-popup-viewport-left: 0px;
  --_my-popup-viewport-top: 0px;
  --_my-popup-viewport-width: 100vw;
  --_my-popup-viewport-height: 100vh;
  --_my-popup-padding-top: max(var(--my-popup-container-padding), env(safe-area-inset-top, 0px));
  --_my-popup-padding-right: max(var(--my-popup-container-padding), env(safe-area-inset-right, 0px));
  --_my-popup-padding-bottom: max(var(--my-popup-container-padding), env(safe-area-inset-bottom, 0px));
  --_my-popup-padding-left: max(var(--my-popup-container-padding), env(safe-area-inset-left, 0px));
  height: var(--_my-popup-viewport-height);
  left: var(--_my-popup-viewport-left);
  opacity: 0;
  padding:
    var(--_my-popup-padding-top)
    var(--_my-popup-padding-right)
    var(--_my-popup-padding-bottom)
    var(--_my-popup-padding-left);
  pointer-events: none;
  position: fixed;
  top: var(--_my-popup-viewport-top);
  transition: opacity var(--my-popup-transition-duration) ease;
  width: var(--_my-popup-viewport-width);
  z-index: var(--my-popup-z-index);
}

@supports (height: 100dvh) {
  .my-popup-container {
    --_my-popup-viewport-width: 100dvw;
    --_my-popup-viewport-height: 100dvh;
  }
}

.my-popup-container--open {
  opacity: 1;
  pointer-events: auto;
}

.my-popup-container--closing {
  opacity: 0;
}

.my-popup__backdrop {
  background: var(--my-popup-backdrop-color);
  inset: 0;
  opacity: var(--my-popup-overlay-opacity);
  position: absolute;
}

.my-popup {
  background: var(--my-popup-surface);
  border: 1px solid var(--my-popup-border-color);
  border-radius: var(--my-popup-radius);
  box-shadow: var(--my-popup-shadow);
  color: var(--my-popup-color);
  display: grid;
  font-family: var(--my-popup-font-family);
  gap: var(--my-popup-gap);
  max-height: max(
    0px,
    calc(
      var(--_my-popup-viewport-height)
      - var(--_my-popup-padding-top)
      - var(--_my-popup-padding-bottom)
    )
  );
  max-width: max(
    0px,
    calc(
      var(--_my-popup-viewport-width)
      - var(--_my-popup-padding-left)
      - var(--_my-popup-padding-right)
    )
  );
  min-width: 0;
  opacity: 0;
  overflow: auto;
  padding: var(--my-popup-padding);
  position: absolute;
  left: var(--my-popup-position-left);
  top: var(--my-popup-position-top);
  transform:
    translate(var(--my-popup-anchor-x), var(--my-popup-anchor-y))
    scale(0.98);
  transition:
    opacity var(--my-popup-transition-duration) ease,
    transform var(--my-popup-transition-duration) ease;
  width: min(var(--my-popup-width), 100%);
}

.my-popup--open {
  opacity: 1;
  transform:
    translate(var(--my-popup-anchor-x), var(--my-popup-anchor-y))
    scale(1);
}

.my-popup:focus {
  outline: none;
}

.my-popup--draggable {
  cursor: grab;
  touch-action: none;
}

.my-popup--draggable :where(a, button) {
  cursor: pointer;
}

.my-popup--draggable :where(input, select, textarea, [contenteditable]) {
  cursor: auto;
}

.my-popup--dragging {
  cursor: grabbing;
  transition: none;
  user-select: none;
}