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

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

			& > p {
				color: var(--color-neutral-5);
				font-size: var(--font-size--1);
			}
		}
	}

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

		& > li {
			display: flex;
			align-items: center;
			gap: var(--space-s);
		}

		& > li > a:first-child {
			flex: 1;
			display: flex;
			justify-content: space-between;
			align-items: center;
			gap: var(--space-s);
			padding: var(--space-s);
			border: 1px solid var(--color-neutral-8);
			border-radius: var(--border-radius);
			text-decoration: none;
			color: inherit;

			& > div > p {
				color: var(--color-neutral-5);
				font-size: var(--font-size--1);
			}

			& > .badge {
				background: var(--color-neutral-9);
				color: var(--color-neutral-2);
				padding: var(--space-3xs) var(--space-xs);
				border-radius: 1em;
				font-size: var(--font-size--1);
				white-space: nowrap;

				&.published {
					background: var(--color-color-8);
					color: var(--color-color-0);
				}

				&.blocked {
					background: var(--color-color-11);
					color: var(--color-color-3);
				}
			}
		}
	}

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

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