/* defaults */
:root[joblist-layout],
joblist-layout {
	font-size: var(--s-h0);
	font-family: var(--font-family);
	background-color: var(--c-bg);
	color: var(--c-fg);

	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
	font-size: 1rem;
}

/* resets */
joblist-layout {
	:is(ul),
	:is(ol) {
		padding-left: calc(var(--s) * 1.5);
	}
	:is(a) {
		text-decoration: none;
	}
	:is(a) {
		color: var(--c-fg);
	}
	:is(a:active, a:hover, a:visited:hover) {
		color: var(--c-link--active);
	}
	:is(a[href^="http"]) {
		&:not(
			[href^="https://joblist.today"],
			[href^="https://joblist.gitlab.io"],
			[href^="https://edit.joblist.today"],
			[href^="https://components.joblist.today"],
			[href^="https://api.joblist.today"]
		) {
			&::after {
				content: "➶";
				font-size: calc(var(--s-font) / 1.3);
				display: inline;
				vertical-align: super;
			}
		}
		&::after {
			align-self: flex-start;
		}
		display: inline-flex;
	}
	:is(form) {
		:is(input, textarea) {
			background-color: var(--c-bg);
			color: var(--c-fg);
			padding: calc(var(--s) / 3);
		}
		:is(input):focus-visible {
			outline: var(--outline-width) solid var(--c-company);
		}
		:is(fieldset) {
			:is(input, textarea, select, option) {
				font-size: 1rem;
			}
			:is(input, textarea) {
				flex-grow: 1;
				width: 100%;
			}
			:is(textarea) {
				min-height: calc(var(--s) * 3);
				resize: vertical;
			}
			:is(button) {
				background: transparent;
				color: var(--c-fg);
			}
			& + :is(fieldset) {
				margin-top: calc(var(--s) / 4);
			}
			border: none;
		}
	}

	:is(button) {
		cursor: pointer;
		padding: calc(var(--s) / 3) calc(var(--s) / 2);
		border-width: var(--s-border);
		background-color: var(--c-bg);
		border-radius: var(--s-border-radius);
		color: var(--c-fg);
	}
	:is(menu, ol, ul) {
		padding: 0;
		margin: 0;
		list-style-position: inside;
	}

	:is(img, video) {
		max-width: 100%;
	}

	:is(details) {
		:is(summary) {
			cursor: pointer;
		}
	}

	:is(hr) {
		flex-basis: 100%;
		flex-grow: 1;
		width: 100%;
		max-width: 80vw;
		justify-self: flex-end;
		border-bottom: none;
		border-left: 0;
		border-right: 0;
		border-color: var(--c-hr);
	}
	:is(h1, h2, h3, h4) {
		line-height: 1.3;
	}
	:is(h1) {
		font-size: var(--s-h1);
	}
	:is(h2) {
		font-size: var(--s-h2);
	}
	:is(h3) {
		font-size: var(--s-h3);
	}
	:is(h4) {
		font-size: var(--s-h4);
	}
}