<template>
  <up-popup
    :customStyle="
      props?.insetBottom
        ? { bottom: 'calc(env(safe-area-inset-bottom) + 48px)' }
        : {}
    "
    :overlayStyle="
      props?.insetBottom
        ? { bottom: 'calc(env(safe-area-inset-bottom) + 48px)' }
        : {}
    "
    :show="props.show"
    @close="onClose"
    :mode="props?.mode || 'top'"
    :round="props?.round || 0"
    :closeable="props?.closeable"
  >
    <slot></slot>
  </up-popup>
</template>

<script setup lang="ts">
const props = defineProps([
  "show",
  "mode",
  "insetBottom",
  "round",
  "closeable",
]);
const emit = defineEmits(["close"]);

const onClose = () => {
  emit("close");
};
</script>

<style lang="scss" scoped>
:deep(.u-transition) {
  padding-bottom: calc(env(safe-area-inset-bottom) + 48px) !important;
}
</style>
