/**
 * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
 * For licensing, see LICENSE.md.
 */

:root {
	--ck-color-pre-background: hsla(0, 0%, 78%, .3);
}

/*
	Our goal here is making the editor content look as similar as possible with the final content
	users will have after publishing.
*/

.ck-content {
	/* Image */
	& .image {
		margin: 0;
		margin-bottom: 21px;

		/* Styles used in the code editor */
		padding: 0;
		background: var(--bgColor-default);

		& > img {
			margin: 0;
			min-width: auto;
		}
	}

	/* Links */
	& a:hover {
		text-decoration: initial;
	}

	/* Mentions */
	& .mention {
		/* We actually unstyle mentions altogether, leaving it to the autolinking feature */
		background: unset;
		color: unset;
	}

	/* To-do list */
	& .todo-list {
		& li {
			margin-bottom: initial;

			& .todo-list {
				margin-top: initial;
			}
		}

		& .todo-list__label {
			& > input {
				-webkit-appearance: checkbox;
				width: auto;
				height: auto;
				margin-right: -18px;
				margin-left: 4px;

				&::before {
					content: none;
				}

				&::after {
					content: none;
				}
			}

			& .todo-list__label__description {
				vertical-align: middle;
			}
		}
	}

	/* Horizontal line */
	& div.ck-horizontal-line {
		padding: 0;
		overflow: initial;
		display: block;

		& hr {
			height: .25em;
			padding: 0;
			margin: 24px 0;
			background-color: var(--borderColor-default);
			border: 0;
		}
	}

	/* Inline code */
	& code br[data-cke-filler="true"] {
		display: inline;
	}

	/* Code block */
	& pre {
		color: var(--fgColor-default);
		background-color: var(--ck-color-pre-background);
		border: 0;
		padding: 16px;

		& br {
			display: initial !important;
		}
	}

	&.ck-blurred pre {
		background-color: var(--ck-color-pre-background);
	}

	/* Table */
	& .table {
		margin: 0 0 16px 0;

		& table {
			border: 0;
			margin: 0;

			& tr {
				background: transparent;
			}

			& tr:nth-child(2n) {
				background: var(--bgColor-muted);
			}

			& th {
				background: transparent;
			}

			& th,
			& td {
				padding: 6px 13px;
				border: 1px solid var(--borderColor-default) !important;
				width: auto;
			}
		}
	}

	/* Blockquote */
	& blockquote {
		font-style: initial;
	}

	/* Emoji */
	& g-emoji {
		display: inline-block;

		& img {
			height: 1em;
			min-height: 20px;
			width: auto;
			vertical-align: bottom !important;
			font-size: inherit;
		}
	}
}


/*
https://github.com/ckeditor/github-writer/pull/450#issuecomment-1584553496
https://github.com/ckeditor/github-writer/pull/450#issuecomment-1584573368
*/
.file.open {
	& .image {
		&.ck-widget {
			display: block;
		}
	}
}
