@import "var";

.@{prefixName}-popup {
	&__container {
		display: none;
		position: fixed;
		width: 100%;
		max-width: 100%;
		z-index: @popup-zindex;

		.@{prefixName}-popup__drawer {
			position: fixed;
			left: 0;
			right: 0;
			background-color: @popup-background-color;
			transition: all 300ms ease;

			&.top {
				top: 0;
				transform: translateY(-100%);

				&.is-expanded {
					transform: translateY(0);
				}
			}

			&.center {
				top: 50%;
				left: 50%;
				width: 80%;
				border-radius: @popup-border-radius;
				transform: translate(-50%, -50%);
			}

			&.bottom {
				bottom: 0;
				padding-bottom: constant(safe-area-inset-bottom);
				padding-bottom: env(safe-area-inset-bottom);
				transform: translateY(100%);

				&.is-expanded {
					transform: translateY(0);
				}
			}
		}

		&.is-shown {
			display: block;
		}
	}
}

@keyframes popupBottomActive {
  0% {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}