@import '@resources/index.css';

.supt-section-text {
	position: relative;
	z-index: 11;
	background: none;

	&__inner {
		position: relative;
		z-index: 1;

		@extend %grid;
	}

	&__headline {
		height: max-content;
		grid-column: 1 / span 12;

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

		@media screen and (min-width: $sm-breakpoint) {
			grid-column: 1 / span 6;

			&.-is-sticky {
				position: sticky;
				top: 64px;
			}
		}

		@media screen and (min-width: $ml-breakpoint) {
			grid-column: 2 / span 4;
		}

		.supt-section__title {
			@extend %t-ml;
			text-align: left;
			margin-bottom: 36px;
			text-wrap: balance;

			@media screen and (min-width: $sm-breakpoint) {
				margin-bottom: unset;
			}
		}
	}

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

		display: flex;
		flex-direction: column;

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

		@media screen and (min-width: $sm-breakpoint) {
			grid-column: 7 / span 6;
			margin-top: 5px;
		}

		@media screen and (min-width: $ml-breakpoint) {
			grid-column: 7 / span 4;
		}

		.supt-heading {
			@extend %t-sm-medium;

			&:not(:first-child) {
				margin-top: 48px;
			}
		}

		.supt-paragraph {
			&:not(:first-child) {
				margin-top: 16px;
			}
		}

		.supt-list {
			&:not(:first-child) {
				margin-top: 24px;
			}
		}
		.supt-list-item {
			@mixin clamp padding-left, 22, 36, $xxs-breakpoint, $lg-breakpoint;
			margin-bottom: 8px;
			&::before {
				@mixin clamp width, 14, 20, $xxs-breakpoint, $lg-breakpoint;
				@mixin clamp height, 14, 20, $xxs-breakpoint, $lg-breakpoint;

				background: none;
			}
		}
		ul.supt-list > li::before {
			content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none'%3E%3Cpath d='M10.4993 10 6.666 6.1667 7.8327 5l5 5-5 5-1.1667-1.1667L10.4993 10Z' fill='%23252526'/%3E%3C/svg%3E") /
				'';
			top: 0.3em;
		}
		ol.supt-list > li::before {
			@extend %t-sm-normal-medium;
			content: counter(liCounter) '.';
			top: 0.2em;
		}

		.supt-button {
			width: max-content;
			margin-top: 48px;
		}
	}
}

.-is-visible {
	.supt-section-text {
		opacity: 1;
	}
}