@charset "utf-8";

/* PROCESS */
.elements-process {
	--circle: 1.25rem;
	--process-gap: var(--gap-small);
	--process-line: 2px;
	--process-number: var(--font-size-10xl);
	display: grid;
	gap: var(--process-gap);
	margin-block: var(--margin-block);
	text-align: left;
	}

.elements-process-item {
	padding-left: calc(var(--circle) + var(--process-gap));
	position: relative;
	}
	.elements-process-item::before,
	.elements-process-item::after {
		content: '';
		position: absolute;
		}
	.elements-process-item::before {
		background-color: var(--background);
		border: 1px solid var(--color-accent);
		border-radius: 100%;
		height: var(--circle);
		left: 0;
		text-align: center;
		top: 0;
		width: var(--circle);
		z-index: 3;
		}
	.elements-process-item.elements-process-item-2::before {
		border-width: 2px;
		}
	.elements-process-item.elements-process-item-3::before {
		border-width: 3px;
		}
	.elements-process-item.elements-process-item-4::before {
		border-width: 4px;
		}
	.elements-process-item.elements-process-item-5::before {
		border-width: 5px;
		}
	.elements-process-item.elements-process-item-last::before {
		background-color: var(--color-accent);
		border: none;
		color: var(--color-accent-text);
		content: '\f00c';
		display: block;
		font-family: var(--font-awesome);
		font-size: var(--space-10);
		font-style: normal;
		font-variant: normal;
		font-weight: var(--font-awesome-weight);
		line-height: var(--circle);
		}
	.elements-process-item::after {
		border-left: 2px dotted var(--background-trim);
		height: calc(100% + var(--process-gap));
		left: calc((var(--circle) / 2) - 1px);
		top: calc(var(--circle) / 2);
		z-index: 1;
		}

.elements-process-number {
	color: var(--background-trim);
	font-size: var(--process-number);
	font-weight: var(--font-weight-heavy);
	left: var(--space-10);
	line-height: var(--line-height-none);
	opacity: 0.5;
	pointer-events: none;
	position: absolute;
	top: var(--space-5);
	user-select: none;
	z-index: 1;
	}

.elements-process-info {
	position: relative;
	z-index: 2;
	}
	.elements-process-info::before {
		border-top: var(--process-line) solid var(--background-trim);
		content: '';
		left: calc(0px - var(--process-gap) - (var(--circle) / 2));
		position: absolute;
		top: calc((var(--circle) / 2) - (var(--process-line) / 2));
		width: calc(100% + var(--process-gap) + (var(--circle) / 2));
		z-index: 1;
		}
	.elements-process-item-last .elements-process-info::before {
		border-top-color: var(--color-accent);
		}

.elements-process-header {
	color: var(--color-header);
	font-size: var(--font-size-lg);
	line-height: var(--line-height-none);
	padding-top: calc(var(--circle) + var(--space-5));
	}
.elements-process-text {
	color: var(--color-dimmed);
	font-size: var(--font-size-sm);
	line-height: var(--line-height-tight);
	margin-top: var(--space-5);
	}

@container (min-width: 30rem) {
	.elements-process {
		--process-gap: var(--gap);
		}
}
@container (min-width: 60rem) {
	.elements-process-2 {
		grid-template-columns: repeat(2, 1fr);
		}
	.elements-process-3 {
		grid-template-columns: repeat(3, 1fr);
		}
	.elements-process-4 {
		grid-template-columns: repeat(4, 1fr);
		}
	.elements-process-5 {
		grid-template-columns: repeat(5, 1fr);
		}
	.elements-process .elements-process-item {
		padding-left: 0;
		padding-top: var(--circle);
		}
		.elements-process .elements-process-item::after {
			border-left: 0;
			border-top: 2px dotted var(--background-trim);
			height: auto;
			left: calc(var(--circle) / 2);
			top: calc((var(--circle) / 2) - 1px);
			width: calc(100% + var(--process-gap));
			}
	.elements-process .elements-process-number {
		left: var(--space-10);
		top: var(--space-5);
		}
	.elements-process .elements-process-info {
		padding-left: calc((var(--circle) / 2) + var(--process-gap));
		}
		.elements-process .elements-process-info::before {
			border-left: var(--process-line) dotted var(--background-trim);
			border-top: 0;
			height: calc(100% + var(--process-gap) + (var(--circle) / 2));
			left: calc((var(--circle) / 2) - (var(--process-line) / 2));
			top: calc(0px - (var(--circle) / 2));
			width: 0;
			}
		.elements-process .elements-process-item-last .elements-process-info::before {
			border-left-color: var(--color-accent);
			border-top-color: transparent;
			}
	.elements-process .elements-process-header {
		padding-top: var(--circle);
		}
}