@import '~@/uni_modules/lime-style/index.scss';
// $prefix: l !default;
$popup: #{$prefix}-popup;

$popup-bg-color: create-var(popup-bg-color, #fff);
$popup-close-icon-color: create-var(popup-close-icon-color, rgba(0,0,0,0.6));
$popup-border-radius: create-var(popup-border-radius, $border-radius-lg);


.#{$popup} {
  position: fixed;
  // z-index: 11500;
  // max-height: 100vh;
  // transition: translateY 1000ms ease;
  transition-duration: 300ms;
  transition-property: transform, opacity;
  transition-timing-function: ease;
  background-color: $popup-bg-color;
  overflow: visible;
  opacity: 1; // uniapp x ios 必须写

  &__close {
    position: absolute;
    top: 0;
    right: 0;
    padding: 20rpx;
	/* #ifndef APP-ANDROID || APP-IOS || APP-HARMONY */
	color: $popup-close-icon-color;
	/* #endif */
	&-icon {
		color: $popup-close-icon-color;
	}
  }

  &--top {
    top: 0;
    left: 0;
    right: 0;
    border-bottom-left-radius: $popup-border-radius;
    border-bottom-right-radius: $popup-border-radius;
	// transform: scale(1) translateY(0)
	transform: scale(1) translate(0, 0)
  }
	
  &--bottom {
    bottom: 0;
    left: 0;
    right: 0;
    border-top-left-radius: $popup-border-radius;
    border-top-right-radius: $popup-border-radius;
	// transform: scale(1) translateY(0);
	transform: scale(1) translate(0, 0);
	 
	}
	&--safe-top {
		/* #ifndef APP-ANDROID || APP-IOS || APP-HARMONY */
		padding-top: constant(safe-area-inset-top);
		padding-top: env(safe-area-inset-top);
		/* #endif */
	}
	&--safe-bottom {
		/* #ifndef APP-ANDROID || APP-IOS || APP-HARMONY */
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		/* #endif */
	}
	&--left {
		top: 0;
		left: 0;
		bottom: 0;
		// transform: scale(1) translateX(0);
		transform: scale(1) translate(0, 0);
		// height: 100vh;
	}

  &--right {
    top: 0;
    right: 0;
	bottom: 0;
	// transform: scale(1) translateX(0);
	transform: scale(1) translate(0, 0);
    // height: 100vh;
  }

  &--center {
    top: 50%;
    left: 50%;
	/* #ifdef APP-IOS */
    transform: translate(-50%, -50%);
	/* #endif */
	/* #ifndef APP-IOS */
	transform: translate(-50%, -50%) scale(1);
	/* #endif */
    transform-origin: 50% 50%;
    border-radius: $popup-border-radius;
  }

  &.#{$popup}-fade-enter,
  &.#{$popup}-fade-leave-to {
	  opacity: 0;
    &.#{$popup}--top {
      // transform: translateY(-100%);
      transform: scale(1) translate(0, -100%);
    }

    &.#{$popup}--bottom {
      // transform: translateY(100%);
      transform: scale(1) translate(0, 100%);
    }

    &.#{$popup}--left {
      // transform: translateX(-100%);
      transform: scale(1) translate(-100%, 0);
    }

    &.#{$popup}--right {
      // transform: translateX(100%);
      transform: scale(1) translate(100%, 0);
    }

    &.#{$popup}--center {
      // transform: scale(0.6) translate(-50%, -50%);
	  /* #ifndef APP-IOS */
      transform: translate(-50%, -50%) scale(0.6);
	  /* #endif */
	  /* #ifdef APP-IOS */
	  transform: translate(-50%, -50%);
	  /* #endif */
      opacity: 0;
    }
  }

  &.#{$prefix}-dialog-enter,
  &.#{$prefix}-dialog-leave-to {
    &.#{$popup}--center {
      transform: scale(0.6) translate(-50%, -50%);
      opacity: 0;
    }
  }
}