@import '@resources/index.css';

.supt-pricing-form {
	padding-top: 0 !important;
	padding-bottom: 220px !important;

	row-gap: 24px;

	background-color: transparent !important;

	&__inner {
		@extend %grid;

		display: block;

		@media screen and (min-width: $sm-breakpoint) {
			display: grid;
		}

		.supt-form__footer {
			@mixin clamp margin-top, 16, 32, $xxs-breakpoint, $lg-breakpoint;
		}
	}

	&__form {
		grid-column: 1 / span 12;

		@media screen and (min-width: $xs-breakpoint) {
			grid-column: 2 / span 10;
		}
		@media screen and (min-width: $md-breakpoint) {
			grid-column: 1 / span 7;
		}
		@media screen and (min-width: $lg-breakpoint) {
			grid-column: 2 / span 6;
		}

		&__inner {
			@mixin clamp padding-top, 32, 60, $xxs-breakpoint, $lg-breakpoint;
			@mixin clamp padding-right, 24, 60, $xxs-breakpoint, $lg-breakpoint;
			@mixin clamp padding-bottom, 32, 60, $xxs-breakpoint, $lg-breakpoint;
			@mixin clamp padding-left, 24, 60, $xxs-breakpoint, $lg-breakpoint;

			border-radius: 32px;
			background-color: $color-white;

			display: flex;
			flex-direction: column;
			gap: 64px;
		}
	}

	.supt-modal__policy {
		@extend %t-s;
		grid-column: span 12;
		margin-top: -32px;

		.supt-modal__policy__link {
			@extend %t-s, %reset-button, %link-underline;
			text-align: center;
			text-wrap: balance;
			border: none;
			padding: 0;
			outline: none;
			font-weight: 300;
			background-size: 100% 1px;
			background-position: 100% 100%;
			transition: background-size 0.3s ease-in-out;

			&:hover,
			&:focus {
				cursor: pointer;
				background-size: 0% 1px;
			}
		}
	}

	.-is-hidden {
		display: none;
	}
}