/* Modiferingar för utseendet för wiki */

main {
	padding:1em;/*
	font-size:.8em;*/
}

h1 {
	font-size:1.4em;
	font-weight:400;
}

p { /* <p> har en del korkad styling från huvuddokumentet som behöver skrivas över */
	margin:1em 0;
	font-size:.9rem;
	letter-spacing: 0;
}/*
p + p {
	margin-top:1em;
}*/

a.new {
	color:#D53;

	&:hover {
		color: #F86;
	}
}


/*********** USERNAME **********/
.inline-username {
	display:inline-flex;
	gap:.5em;
	align-items: center;
	justify-content: center;

	.iu-name {
		/*text-transform:capitalize;*/
	}
	.iu-domain {
		background:#ffffff33;
		border-radius:4px;
		line-height: 1;
		padding:3px;
	}
}

/**************/

.tag {
	display:inline-block;
	background:#444;
	padding: 4px;
	margin:2px;
	font-size:80%;
}

.article-edit-tags { /* Alla labels i formulären */
	display:block;
	margin:1em 0 .4em;
}


/********** Artikelformatering ********************/
.wiki-body {
	max-width:800px;
	line-height:1.5;
	margin:auto;
	color:#ccc;

	/* Nollställer styling */
	h1,h2,h3,h4,h5,h6 {
		font-size:1rem;
		font-weight:300;
		letter-spacing: normal;
		margin:2rem 0 1rem 0;
		color:#FFF;
	}

	h1 {margin-top:0;font-size: 1.7em; border-bottom:1px solid #FFFFFF33;}
	h2 {font-size: 1.5em; border-bottom:1px solid #FFFFFF33;}
	h3 {font-size: 1.1em; font-weight:600;}
	h4 {font-size: 1em; font-weight:600;}
	h5 {font-size:.8em; font-weight:600;}
	h6 {font-size:.6em; font-weight:600;}

	blockquote {
		border-left:4px solid #444;
		background-color:#1a1a1a;
		padding:1px 1em;
	}

	pre {
		margin:1rem 0;
		font-size:.8rem;
		padding:.7rem .5rem;
		border-radius:.4em;
		background-color:#ffffff11;
		border-left:3px solid #ffffff11;
		border-right:.4em solid #00000011;
		overflow-x: auto;
		font-family: ui-monospace, "Cascadia Mono", "Segoe UI Mono", "Liberation Mono", Menlo, Monaco, Consolas, monospace; /* Noallad från StackOverflow */
	}

	/* Tabeller */
	table {
		width: auto;
		max-width: 100%;
		overflow-x: auto;
		display:inline-block;
		font-size: .9rem;

		border:1px solid #ffffff11;
		border-collapse: collapse;

		td, th {
			padding:.5em 1em;
		}
		thead {
			position:sticky;
			background-color:#ffffff11;
		}

		tbody tr:nth-child(even) {
			background-color:#ffffff04;
		}
	}



	.tags {
		margin-bottom:1em;
		font-size:80%;
	}

	.wiki-paragraph {
		margin-bottom:1em;
	}

	img {
		width:100%;
	}

	/* Todo: Flytta ut denna och placera i ett grid/flexbox så att footern är en högerkolumn på pc */
	.footer {
		padding:1em;
		margin-top:2em;
		background:#333;
		color:#ccc;
		font-size:80%;
		text-align:center;
	}

	ul,ol {
		margin:.5em auto;
		padding-left:2em;

		ul,ol {
			margin-bottom:1em;
		}
	}

	ol {
		--margin-left: 2em;
		padding-left:var(--margin-left);
		counter-reset: item;

		> li {
			display:block;
			position:relative;
			padding-left:0em;
			margin: 1.3em auto;

			&:before {
				content: counters(item, ".") " ";
				counter-increment: item;
				text-align:right;
				display:inline-flex;
				justify-content: center;
				align-items: center;

				position:absolute;
				right:calc(100% + .6em);
				top:.1em;
				/*width:0;*/
				margin-left:-0;
				margin-right: 0; /* calc(-.5em - var(--margin-left));*/
				padding:.3em .5em;
				line-height:1;
				/*margin:.1em;*/
				font-size:80%;
				background-color:#444;
				border-radius: 6px;
				border-right:2px solid rgba(0,0,0,.3);
				border-bottom:2px solid rgba(0,0,0,.3);
				color:#FFF;
			}
		}
	}

	li {
		margin: .5em auto;
	}

	/*
		Numrerade listor i toppnivå skall ha ett större avstånd för att tydligare gruppera
		in uppgifterna */
	> ol > li {
		margin-bottom:2em;
	}
}
/********** / Artikelformatering ********************/


/* Animationer */
@keyframes rotate {
	0% {transform:rotate(0deg)}
	100% {transform:rotate(360deg)}
}
.a-rotate {
	animation: rotate 1s infinite linear;
}


/* INPUT och formulär */

form {
	transition: all .25s, filter .25s;
}
form[inert] > *:not(dialog) { /* när formulären är "avstängda" efter submit. */
	opacity:.7;
	filter:grayscale(1);
}

input[type='checkbox'] {
	--height: 20px;
	--width: 40px;

	position:relative;
	height:var(--height);
	width:var(--width);
	isolation: isolate;
	cursor:pointer;

	/* Bakgrund */
	&::after {
		content:'';
		position:absolute;
		background:#ccc;
		width:100%;
		height:100%;
		border-radius:calc(var(--height) / 2);
		z-index:0;

		transition: .5s all;
	}

	/* Indikator */
	&::before {
		content:'';
		position:absolute;
		background:#888;
		top:0;bottom:0;
		right:calc( var(--width) - var(--height) );
		margin:2px;
		aspect-ratio: 1;
		z-index:1;
		border-radius:100%;

		transition: .2s all;
	}

	/* Indikator checked */
	&:checked {

		&::before {
			right:0;
			background:#00897B;
		}

		&::after {
			background:#88DDCC;
		}
	}
}

input[type='text'],textarea {
	width:100%;
}

textarea {
	tab-size:4;
	min-height:400px;
}



/*** Modals och dialog
 * I mitt fall tror jag inte att tågverktyg kommer använda mer än en modal dialog,
 * men om jag ändrar mig så se till att sätta stylingen i en class (och applicera
 * i modal-funktionen). Animationerna kan säkert återanvändas även om utseendet skiljer.
 *
 * Faktum är att animationerna säkert bidrar till ett enhetligt utseende, så det är nog bra
 * om de behålls till dialog-elementet.
 ****/


/* Dialog styling */
dialog {
	margin:auto;
	border:3px solid #444;
	color:#ccc;
	background-color:#222;
	box-shadow:0 0 2em #111;

	.buttons {
		display:flex;
		gap:.5em;
	}

	&.--bad {
		border-color: #A22;
		box-shadow: 0 0 2em #522;
		background-color:#322;
	}

	&.--good {
		border-color: #292;
		box-shadow: 0 0 2em #242;
		background-color:#232;
	}

	&::backdrop {
		backdrop-filter:blur(2px);
		background-color:rgba(0,0,0,.3);
	}

	button {
		margin-top:1em;
		float:right;
	}
}


/* Dialog animationer & transitions */

/*   Closed state of the dialog   */
dialog {
	transition: all 0.25s allow-discrete;

	opacity: 0;
	transform:translateY(-40px);

	/*Styling när dialogen är öppen */
	&[open] {
		opacity: 1;
		transform:translateY(0);

		@starting-style { /* Samma som i topp */
			opacity: 0;
			transform:translateY(-40px);
		}
	}

}

/* Transition the :backdrop when the dialog modal is promoted to the top layer */
dialog::backdrop {
	transition: all .25s allow-discrete;
	opacity: 0; 		/* Dessa nestas inte eftersom det blev lurigt */
}

dialog[open]::backdrop {
	opacity:1;

	@starting-style {
		opacity:0;
	}
}