@import '@resources/index.css';

.supt-modal-section {
	@mixin clamp padding-top, 32, 64, $xxs-breakpoint, $lg-breakpoint;
	@mixin clamp padding-bottom, 32, 64, $xxs-breakpoint, $lg-breakpoint;
	@mixin clamp padding-left, 24, 67, $xxs-breakpoint, $lg-breakpoint;
	@mixin clamp padding-right, 24, 67, $xxs-breakpoint, $lg-breakpoint;
	width: 100%;
	max-width: 787px;
	background-color: $color-white;
	border-radius: 32px;
}

.supt-modal-overlay {
	@mixin clamp padding-top, 68, 90, $xxs-breakpoint, $lg-breakpoint;
	@mixin clamp padding-left, 0, 40, $xxs-breakpoint, $lg-breakpoint;
	@mixin clamp padding-right, 0, 40, $xxs-breakpoint, $lg-breakpoint;
	top: 0;
	bottom: 0;
	position: fixed;
	overflow: hidden scroll;
	width: 100%;
	z-index: $z-index-demo-modal;
	background-color: rgba(37 37 38 / 90%);
	animation: fade-in 0.5s ease-in-out;
}

.supt-modal-inner {
	@mixin clamp padding-top, 28, 24, $xxs-breakpoint, $lg-breakpoint;
	@mixin clamp padding-right, 16, 38, $xxs-breakpoint, $lg-breakpoint;
	@mixin clamp padding-bottom, 16, 80, $xxs-breakpoint, $lg-breakpoint;
	@mixin clamp padding-left, 16, 38, $xxs-breakpoint, $lg-breakpoint;

	animation: slide-up 0.5s 0.15s cubic-bezier(0.49, -0.08, 0.3, 1.03)
		backwards;

	background-color: $color-interface-grey-20;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	border-radius: 32px;
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 0;
}