/*********** Resets ***********/
/*
 * Button
 */
%reset-button {
	background-color: transparent;
	border: 0;
	border-radius: 0;
	outline: 0;
	appearance: none;
	padding: 0;
	cursor: pointer;

	&::-moz-focus-inner {
		border: 0;
	}
}

/*********** GRID ***********/
/**
 * Base
 */
%container {
	margin-left: $container-min-offset;
	margin-right: $container-min-offset;

	@media (min-width: $sm-breakpoint) {
		margin-left: $container-tablet-offset;
		margin-right: $container-tablet-offset;
	}

	@media (min-width: $md-breakpoint) {
		margin-left: $container-laptop-offset;
		margin-right: $container-laptop-offset;
	}

	@media (min-width: $lg-breakpoint) {
		margin-left: $container-desktop-offset;
		margin-right: $container-desktop-offset;
	}

	@media (min-width: $container-max-width-mq) {
		width: 100%;
		max-width: $container-max-width;
		margin-left: auto;
		margin-right: auto;
	}
}

/**
 * Gaps
 */
%grid-column-gap {
	grid-column-gap: $grid-gap;

	@media (min-width: $grid-gap-max-mq) {
		grid-column-gap: $grid-gap-max;
	}
}

%grid-row-gap {
	grid-row-gap: $grid-gap;

	@media (min-width: $grid-gap-max-mq) {
		grid-row-gap: $grid-gap-max;
	}
}

%grid-no-margin {
	@extend %grid-column-gap, %grid-row-gap;

	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-auto-rows: auto;
	grid-template-rows: auto;
}

%grid {
	@extend %container, %grid-no-margin;
}

/*********** Styles ***********/
%link-underline {
	text-decoration: none;
	background-image: linear-gradient(currentColor, currentColor);
	background-size: 100% 1px;
	background-repeat: no-repeat;
	background-position: 100% 100%;
	transition: background-size 0.3s cubic-bezier(0.77, 0, 0.175, 1);

	&:focus-visible,
	&:hover {
		background-size: 0 1px;
	}
	&:focus-visible {
		outline: 0;
	}
}

%list-style {
	li {
		@extend %t-s-normal;
		position: relative;
		padding-left: 24px;
		margin-bottom: 16px;

		@media (min-width: $sm-breakpoint) {
			padding-left: 26px;
		}

		&::before {
			@extend %t-xs-medium;
			position: absolute;
			top: 0.1em;
			left: 0;
			width: 20px;
			height: 20px;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;

			@media (min-width: $sm-breakpoint) {
				width: 22px;
				height: 22px;
			}
		}
	}

	ol,
	ul {
		list-style: none;

		ul,
		ol {
			margin-top: 16px;
			margin-left: -6px;
		}

		ol li::before {
			@extend %t-s-normal-medium;
			content: counter(liCounter) '.';
			top: 0;
		}
	}

	ol {
		counter-reset: liCounter;
		> li {
			counter-increment: liCounter;
		}
	}

	> ol,
	> ul {
		> li {
			padding-left: 32px;
			@media (min-width: $sm-breakpoint) {
				padding-left: 36px;
			}

			&::before {
				background-color: var(--list-color, $color-pink);
			}
		}
	}

	ul > 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") /
			'';
		/* Visual adjustement */
		padding-top: 4px;
		padding-left: 1px;

		@media (min-width: $sm-breakpoint) {
			padding-top: 5px;
			padding-left: 2px;
		}
	}

	> ol > li::before {
		content: counter(liCounter);
	}
}

/*********** Custom ***********/
%text-formatting {
	@extend %list-style;

	h3 {
		@extend %t-m-medium;
		@mixin clamp margin-bottom, 16, 24, $xxs-breakpoint, $lg-breakpoint;

		&:not(:first-of-type) {
			@mixin clamp margin-top, 40, 64, $xxs-breakpoint, $lg-breakpoint;
		}
	}

	h4 {
		@extend %t-s-medium;
		@mixin clamp margin-top, 16, 24, $xxs-breakpoint, $lg-breakpoint;
		@mixin clamp margin-bottom, 8, 16, $xxs-breakpoint, $lg-breakpoint;
	}

	h5 {
		@extend %t-s-normal-medium;
		@mixin clamp margin-top, 8, 16, $xxs-breakpoint, $lg-breakpoint;

		padding-left: 35px;

		& + p,
		& + p + p,
		& + p + p + p {
			padding-left: 35px;
		}
	}

	p {
		@extend %t-s-normal;

		& + p {
			@mixin clamp margin-top, 8, 16, $xxs-breakpoint, $lg-breakpoint;
		}

		a {
			@extend %link-underline;
		}
	}

	strong {
		font-weight: 500;
	}
}

%single-templates-style {
	.supt-single__inner {
		@extend %grid;
		@mixin clamp padding-top, 105, 160, $xxs-breakpoint, $lg-breakpoint;
		margin-top: -45px; /* Fix for breadcrumb */
	}

	.supt-header-single-post {
		@media (min-width: $sm-breakpoint) {
			position: sticky;
			top: 100px;
			align-self: baseline;
		}
	}

	.supt-single__content {
		grid-column: 1 / span 12;
		@media (min-width: $sm-breakpoint) {
			grid-column: 6 / span 7;
		}
	}

	.supt-single__introduction {
		@extend %t-m;
		@mixin clamp font-size, 16, 24, $xxs-breakpoint, $lg-breakpoint;
		@mixin clamp line-height, 24, 36, $xxs-breakpoint, $lg-breakpoint;
	}

	.supt-single__text {
		@extend %grid-no-margin;
		grid-row-gap: 0;

		@media (min-width: $sm-breakpoint) {
			grid-template-columns: repeat(7, 1fr);
		}

		> * {
			grid-column: 1 / span 12;
			@media (min-width: $xs-breakpoint) {
				grid-column: 2 / span 10;
			}
			@media (min-width: $sm-breakpoint) {
				grid-column: 1 / span 7;
			}
			@media (min-width: $md-breakpoint) {
				grid-column: 2 / span 5;
			}

			&:first-child {
				margin-top: 0 !important;
			}
		}

		.supt-heading,
		.supt-media,
		.supt-list,
		.supt-blockquote,
		> .supt-button-primary {
			@mixin clamp margin-top, 48, 72, $xxs-breakpoint, $lg-breakpoint;
		}
		.supt-paragraph {
			@mixin clamp margin-top, 24, 32, $xxs-breakpoint, $lg-breakpoint;
		}
		.supt-heading:not(h2) {
			+ .supt-paragraph,
			+ .supt-list,
			+ .supt-media,
			+ .supt-heading:not(h2) {
				@mixin clamp margin-top, 8, 16, $xxs-breakpoint, $lg-breakpoint;
			}
		}
		h2.supt-heading {
			scroll-margin-top: 100px;

			+ .supt-list,
			+ .supt-media {
				@mixin clamp margin-top, 24, 32, $xxs-breakpoint, $lg-breakpoint;
			}
		}
		.supt-list .supt-list {
			@mixin clamp margin-top, 8, 16, $xxs-breakpoint, $lg-breakpoint;
		}

		.supt-button-primary {
			--card-background-color: var(--single-color);
			color: $color-interface-grey-100;

			justify-self: flex-start;

			+ .supt-button-primary {
				@mixin clamp margin-top, 24, 32, $xxs-breakpoint, $lg-breakpoint;
			}
		}
		.supt-blockquote {
			--blockquote-icon-color: var(--single-color);
		}

		.supt-media {
			img {
				@mixin clamp border-radius, 14, 24, $xxs-breakpoint,
					$lg-breakpoint;
			}
		}
	}

	/* Modifiers */
	&.-yellow {
		--summary-block-color: $color-interface-grey-100;
		--social-share-color: $color-interface-grey-100;

		.supt-blockquote {
			--blockquote-background-color: $color-yellow-light;
		}
		.supt-tag {
			--card-background-color: $color-yellow-light;
		}
	}
	&.-pink {
		.supt-blockquote {
			--blockquote-background-color: $color-pink-light;
		}
		.supt-tag {
			--card-background-color: $color-pink-light;
		}
	}
	&.-purple {
		.supt-blockquote {
			--blockquote-background-color: $color-purple-light;
		}
		.supt-tag {
			--card-background-color: $color-purple-light;
		}
	}
	&.-blue {
		.supt-blockquote {
			--blockquote-background-color: $color-blue-light;
		}
		.supt-tag {
			--card-background-color: $color-blue-light;
		}
	}
	&.-green {
		.supt-blockquote {
			--blockquote-background-color: $color-green-light;
		}
		.supt-tag {
			--card-background-color: $color-green-light;
		}
	}
}