
//note(dgmid): common / light theme

@keyframes pulse {
	0% {
		color: var(--accent-light);
	}
	70% {
		color: var(--accent-dark);
	}
	100% {
		color: var(--accent-light);
	}
}

.CodeMirror-code {
	
	* { font-size: inherit !important; }
}

.editor-preview-active {
	
	user-select: text;
	font-weight: 400;
	width: 100%;
	
	h1, h2, h3, h4, h5, h6 {
		
		line-height: 1;
		margin: 1ex 0;
	}
	
	h1:first-of-type { margin-top: 0; }
	
	p, blockquote, ul, ol, pre, hr, dl {
		
		margin-top: 1.5em;
		margin-bottom: 1.5em;
	}
	
	small { font-size: .8em }
	
	sup, sub { font-size: .6em; }
	
	sup { vertical-align: super; }
	sub { vertical-align: sub; }
	
	table {
		
		margin-top: 1.5em;
		margin-bottom: 2em;
		
		th, td { padding: .8em; }
	}
	
	h1, h2, h3, h4, h5, h6 { font-weight: 600; }
	
	b, strong { font-weight: 700; }
	
	i, em { font-style: italic; }
	
	h1 { font-size: 2.2em; }
	
	h2 { font-size: 1.8em; }
	
	h3 { font-size: 1.6em; }
	
	h4 { font-size: 1.4em; }
	
	h5 { font-size: 1.2em; }
	
	h6 { font-size: 1.1em; }
	
	blockquote {
		
		padding-left: 2ch;
		border-left: 0.2em solid var(--accent-light);
	}
	
	ul {
		
		list-style-type: square;
		margin-left: 2ch;
		
		ul {
			
			list-style-type: disc;
			
			ul {
				
				list-style-type: circle;
			}
		}
	}
	
	ol {
		
		list-style-type: decimal;
		margin-left: 2ch;
	}
	
	ul ul,
	ol ol,
	ol ul,
	ul ol {
		
		margin-top: 0;
		margin-bottom: 0;
	}
	
	li {
		
		&::marker {
			
			font-weight: 500;
			color: var(--accent-dark);
		}
		
		margin-bottom: .2em;
		
		input[type="checkbox"] {
			
			appearance: none;
			font-size: 1em;
			width: 1em;
			height: 1em;
			display: inline-block;
			margin-right: .25em;
			vertical-align: -0.35em;
			background-color: var(--text-light);
			mask: var(--unchecked);
			mask-repeat: no-repeat;
			mask-position: left bottom;
			background-size: cover;
			
			&[checked] {
				
				background-color: var(--accent-dark);
				mask: var(--checked);
			}
		}
	}
	
	dt {
		
		font-weight: 700;
		margin-top: .8em;
	}
	
	dd {
		
		margin-left: 2ch;
		display: list-item;
		list-style-type: disc;
	}
	
	code {
		
		color: var(--code-color);
		background-color: var(--code);
		padding-left: 1ch;
		padding-right: 1ch;
		font-family: 'Menlo', monospace;
		font-size: .9em;
		border-radius: 0.3em;
	}
	
	pre {
		
		background-color: var(--code);
		padding: 1.5ch 2ch;
		border-radius: 0.4em;
		overflow-x: scroll;
		
		code {
			
			background-color: transparent;
			padding: 0;
			
			white-space: pre;
		}
	}
	
	hr {
		
		border: 1px solid var(--hr);
		border-top: 0;
	}
	
	a {
		
		color: var(--accent-light);
		text-decoration: none;
		transition: color .15s;
		
		&:hover {
			
			animation: pulse 2s infinite;
		}
		
		&:focus {
			
			outline: 4px solid var(--accent-light);
		}
	}
	
	img {
		
		display: inline-block;
		max-width: 100%;
	}
	
	mark {
		
		color: white;
		background-color: var(--accent-light);
		padding-left: .5ch;
		padding-right: .5ch;
	}
	
	table {
		
		border-collapse: unset;
		
		thead {
			
			th {
				
				background-color: var(--table-head);
				font-weight: 700;
				border-top: 1px solid var(--table-border);
				border-right: none;
				
				&:first-of-type {
					
					border-top-left-radius: 11px;
				}
				
				&:last-of-type {
					
					border-top-right-radius: 11px;
					border-right: 1px solid var(--table-border);
				}
			}
		}
		
		tbody {
			
			tr {
				
				td {
					
					border: none;
				}
				
				td + td {
					
					border-left: 1px solid var(--table-border);
				}
				
				td:first-of-type {
					
					border-left: 1px solid var(--table-border);
				}
				
				td:last-of-type {
					
					border-right: 1px solid var(--table-border);
				}
			}
			
			tr:nth-of-type(even) {
				
				background-color: var(--table-stripe);
			}
			
			tr:last-of-type {
				
				td {
					
					border-bottom: 1px solid var(--table-border);
				}
				
				td:first-of-type {
					
					border-bottom-left-radius: 11px;
				}
				
				td:last-of-type {
					
					border-bottom-right-radius: 11px;
				}
			}
		}
	}
	
	#datetime {
		
		display: block;
		text-align: center;
		color: var(--text-light);
		font-size: 13px;
		font-weight: 400;
		padding-bottom: 20px;
	}
}

.cm-formatting-task {

}

.cm-formatting-task.cm-meta::before {

}

.cm-formatting-task.cm-property::before {

}

//note(dgmid): dark theme

[data-theme="dark"] {
	
	.editor-preview-active {
		
		li {
			
			&::marker {
				
				color: var(--accent);
			}
			
			input[type="checkbox"] {
				
				&[checked] {
				
					background-color: var(--accent-light);
				}
			}
		}
		
		code {
			
			background-color: rgba(255,255,255,.15);
		}
		
		pre {
			
			code {
				
				background-color: transparent;
			}
		}
		
		blockquote {
			
			border-left-color: var(--accent-dark);
		}
		
		mark {
			
			background-color: var(--accent-dark);
		}
		
		table {
			
			thead {
				
				th {
					
					border: none;
				}
			}
		}
	}
}
