/* the job-boards "builder" component */
joblist-boards {
	:is(form) {
		display: flex;
		position: sticky;
		top: 0;
		background-color: var(--c-bg);
		gap: calc(var(--s) / 2);
	}
	:is(input, select, textarea) {
		padding: calc(var(--s) / 3);
		background-color: transparent;
		flex-grow: 1;
		font-size: 1rem;
		color: var(--c-fg);
	}
	:is(textarea) {
		resize: vertical;
		white-space: pre-wrap;
		word-break: break-all;
		padding: 0;
		&:not(:empty) {
			padding: calc(var(--s) / 2);
			min-height: calc(var(--s) * 7);
			font-size: 1rem;
			cursor: copy;
		}
	}
	&::before {
		display: block;
		font-style: italic;
		color: var(--c-fg);
		padding: calc(var(--s) / 2);
	}
	&[provider-hostname][provider-name]::before {
		content: "Copy this HTML code, into the HTML code of any webpage, to display the list of jobs";
	}
	&:not([provider-hostname]):not([provider-name])::before {
		content: "Embeddable code snippet will be displayed below, fill in a <provider-name> and <provider-hostname> to display a list of jobs";
	}
	&:not([provider-name])::before {
		content: "Select a provider-name";
	}
	&:not([provider-hostname])::before {
		content: "Enter a <provider-hostname> for the project/company/room ID, found in the job-board's URL of the <provider-name> site";
	}
	display: flex;
	flex-direction: column;
	gap: calc(var(--s) / 2);
}

joblist-board {
	:is(ul) {
		list-style: none;
	}
	display: flex;
	flex-direction: column;
	gap: calc(var(--s) / 2);
}

joblist-board-job {
	:is(joblist-board-job-header) {
		display: flex;
		flex-wrap: wrap;
		gap: 0 calc(var(--s) / 2);
	}
	:is(joblist-board-job-location) {
		font-weight: bold;
		/* font-size: 0.9em; */
		/* color: var(--c-fg--info); */
	}
	:is(joblist-board-job-published) {
		font-style: italic;
	}

	:is(joblist-board-job-description) {
		word-break: break-word;
	}
	:is(joblist-board-job-department) {
		font-family: monospace;
	}

	display: inline-flex;
	flex-wrap: wrap;
	/* gap: calc(var(--s) / 5); */
}
joblist-board-search {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: calc(var(--s) / 3);
	:is(input) {
		flex-grow: 1;
	}
	:is(& + joblist-board-jobs) {
		padding-top: calc(var(--s) / 2);
		display: flex;
	}
}
joblist-board-search-results {
	/* padding: calc(var(--s) / 2); */
}