.applicants {
	padding: var(--space-l-2xl) 0;

	& > header {
		display: flex;
		justify-content: space-between;
		align-items: end;
		flex-wrap: wrap;
		gap: var(--space-s);

		& > div > p {
			color: var(--color-neutral-4);
			margin-top: var(--space-3xs);
		}
	}

	& > .list {
		list-style: none;
		margin-top: var(--space-l);
		display: flex;
		flex-direction: column;
		gap: var(--space-s);

		& > li {
			display: flex;
			flex-wrap: wrap;
			gap: var(--space-m);
			justify-content: space-between;
			padding: var(--space-s);
			border: 1px solid var(--color-neutral-8);
			border-radius: var(--border-radius);

			& > .who {
				flex: 1 1 16rem;

				& > p {
					color: var(--color-neutral-4);
					font-size: var(--font-size--1);
					margin-top: var(--space-3xs);
				}
			}

			& > .overlap {
				flex: 2 1 20rem;
				display: flex;
				flex-direction: column;
				gap: var(--space-xs);

				& > div {
					display: flex;
					gap: var(--space-xs);
					align-items: baseline;

					& > h4 {
						font-size: var(--font-size--1);
						color: var(--color-neutral-4);
						min-width: 4rem;
					}

					& > .skills {
						list-style: none;
						display: flex;
						gap: var(--space-2xs);
						flex-wrap: wrap;

						& > li {
							padding: var(--space-3xs) var(--space-xs);
							border-radius: 1em;
							font-size: var(--font-size--1);
						}

						&.matched > li {
							background: var(--color-color-8);
							color: var(--color-color-0);
						}

						&.missing > li {
							background: var(--color-neutral-9);
							color: var(--color-neutral-4);
						}
					}
				}
			}
		}
	}

	& > .empty {
		margin-top: var(--space-l);

		& > p {
			color: var(--color-neutral-4);
		}
	}
}