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

/*
	These are application specific styles, not the CKEditor theme.
*/

/*
Here we hide some of the original GH elements that could be flashing on page load,
right before being replaced with the rte editor.
*/
body:not(.github-writer-loaded) markdown-toolbar md-mention,
body:not(.github-writer-loaded) markdown-toolbar md-ref,
body:not(.github-writer-loaded) markdown-toolbar details,
body:not(.github-writer-loaded) .preview-tab,
body:not(.github-writer-loaded) .tabnav-extra,
body:not(.github-writer-loaded) .drag-and-drop,
body:not(.github-writer-loaded) #gollum-editor-function-bar,
body:not(.github-writer-loaded) #gollum-editor-help,
body:not(.github-writer-loaded) #gollum-editor-body {
	display: none !important;
}

div.github-writer-ckeditor .ck-editor__editable {
	min-height: inherit;
}

div.github-writer-ckeditor .ck-editor__editable.ck.ck-content {
	/* https://github.com/ckeditor/github-writer/issues/311 */
	border-radius: 6px;
}

/* Top corners should not be rounded anymore. See #470 */
div.github-writer-ckeditor .ck-editor__editable.ck.ck-content {
	border-top-right-radius: 0;
	border-top-left-radius: 0;
}

/* Keep the original background color on blur. See #470 */
div.github-writer-ckeditor .ck-editor__editable.ck-blurred {
	background-color: var(--bgColor-default);
}

div.github-writer-ckeditor .ck-editor__editable.ck-focused {
	background-color: var(--bgColor-default);
}

/* Release page specific. */
form.js-release-form .ck-editor__editable {
	min-height: 200px;
}
form.js-release-form div.github-writer-ckeditor {
	width: 100%;
}

/* Milestone page specific. */
form.github-writer-type-milestone .ck-editor__editable {
	min-height: 200px;
}

/* The CKEditor placeholder. Matches the inspected rules from the GH textarea on Chrome. */
.ck.ck-editor__editable > .ck-placeholder::before {
	color: var(--fgColor-subtle);
	opacity: 1;
	position: absolute;
}

/* RTE mode */

/* Hide the "Preview" tab. */
.github-writer-mode-rte .preview-tab {
	display: none;
}

/* Hide the markdown textarea outer box. */
.github-writer-mode-rte .github-writer-panel-markdown,
.github-writer-mode-rte .github-writer-panel-preview {
	display: none !important;
}

/* Hide all markdown toolbar. */
.github-writer-mode-rte markdown-toolbar {
	display: none !important;
}

/* Remove the markdown message when in RTE. */
.github-writer-mode-rte .tabnav-extra {
	display: none;
}

/* Bottom corners should not by rounded anymore. See #470 */
.github-writer-mode-rte .js-previewable-comment-form {
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 0;
}

/* Markdown mode */

/* Hide the rte outer box. */
.github-writer-mode-markdown .github-writer-panel-rte {
	display: none !important;
}

/* Hide all rte toolbar items. */
.github-writer-mode-markdown .ck-toolbar__items > * {
	display: none !important;
}

/* Except the Kebab and Markdown buttons. */
.github-writer-mode-markdown .ck-toolbar__items > .github-writer-kebab-button,
.github-writer-mode-markdown .ck-toolbar__items > .github-writer-mode-button {
	display: block !important;
}

/* But hide it for good if in the code editor but not for a markdown file. */
.github-writer-mode-markdown.github-writer-code-editor-not-md .ck-toolbar__items > * {
	display: none !important;
}

/* Hide the mention and issue ref buttons so the markdown toolbar will not break in two rows */
.github-writer-mode-markdown markdown-toolbar md-mention,
.github-writer-mode-markdown markdown-toolbar md-ref
{
	display: none !important;
}

/* Get the GH toolbar closer to the RTE one (which is always available with the the Kebab button). */
.github-writer-mode-markdown markdown-toolbar.px-2 {
	padding-right: 3px !important;
}

/* Change the text of the "Write" tab. */
.github-writer-mode-markdown .write-tab {
	font-size: 0;
	line-height: 0;
}
.github-writer-mode-markdown .write-tab::after {
	content: "Markdown";
	font-size: 14px;
	line-height: 20px;
}

/* Classes are prefixed with "div" so they have higher specificity and override default rules. */

/* The following rules are mainly overriding defaults coming from CKEditor and GitHub. */

div.github-writer-ckeditor .ck-editor__editable.ck-focused {
	border: none !important;
	box-shadow: none !important;
}

div.github-writer-ckeditor .ck-editor__editable {
	border: none !important;
	padding: 0 var(--stack-padding-normal, 16px);
	width: 100%;
}

div.github-writer-ckeditor {
	height: auto !important;
}

/* The following rules needed to be copied because they're applied to the textarea directly, while the editable is a div.
   Most of the CSS here are copies from teh markdown textarea CSS, sniffed with the inspector. */
div.github-writer-ckeditor {
	display: block;
	width: 100%;
	max-width: 100%;
	padding: 0 !important;
	margin: 0;
	line-height: 1.6;
}

div.github-writer-panel-rte.form-control {
	padding: 0;
	width: auto;
}

/* Adjust editor layout after recent GH changes. See #470 */
div.github-writer-panel-rte.form-control {
	margin: 0 !important;
	border-top: none;
	border-top-right-radius: 0;
	border-top-left-radius: 0;
	top: -1px;
}

/* Adjust editor layout after recent GH changes. See #470 */
form.github-writer-revieweditor .github-writer-panel-rte.form-control {
	margin-bottom: var(--stack-padding-normal, 16px) !important;
}

.js-comment-update div.github-writer-panel-rte.form-control {
	top: 0;
}

.js-comment-update div.github-writer-panel-rte.form-control {
	border: none;
}

/* Do not show the arrow in the Kebab button. */
.github-writer-kebab-button .ck-dropdown__arrow {
	display: none;
}

/* Here, we're fixing up a bit of mess from the GH CSS itself.
The comment editing CSS is different from other editors in GH :/ */
form[data-github-writer-id]:not(.github-writer-type-code) div.comment-form-head {
	padding: 8px 0 0 !important;
	display: flex;
	align-items: center;
}
form[data-github-writer-id]:not(.github-writer-type-code) div.comment-form-head > * {
	margin-top: -8px !important;
}
form[data-github-writer-id]:not(.github-writer-type-code) div.tabnav-tabs,
form[data-github-writer-id]:not(.github-writer-type-code) nav.tabnav-tabs {
	flex: auto;
	order: -1;
	white-space: nowrap;
}

/*******************************
	Wiki page specific stuff
********************************/

/* Fix the toolbar position. */
.github-writer-wikieditor .comment-form-head {
	display: flex;
}
.github-writer-wikieditor .comment-form-head > :first-child {
	flex: auto;
}

.github-writer-wikieditor.github-writer-mode-rte .comment-form-head {
	/* Sticky toolbar. */
	position: sticky !important;
	top: 0;
	z-index: 1;  /* The editable may somehow show above the toolbar, so we raise its plane. */
}

.github-writer-wikieditor .form-actions {
	position: sticky !important;
	bottom: 10px;
	z-index: 1;
}

/* Hide the markdown toolbar. */
.github-writer-wikieditor.github-writer-mode-rte #gollum-editor-function-bar {
	display: none;
}

/* Make the editor bigger. Maybe GH calculates the best size, but we're going fixed. */
.github-writer-wikieditor .github-writer-ckeditor > .ck-editor__editable {
	max-height: initial !important;

	/* Grow forever... pared with sticky toolbar. */
	height: initial;
	min-height: 360px;
}

/* Although the blur effect is nice, we're removing it here so the editor stays aligned with other fields. */
.github-writer-wikieditor .ck-editor__editable.ck-blurred {
	background-color: var(--bgColor-default) !important;
}

/* Remove the gab between toolbar and editor. See #470 */
.github-writer-wikieditor .comment-form-head {
	margin-bottom: 0;
}

/**********************************
	Code editor specific stuff
***********************************/

/* Hide the preview tab */
.github-writer-type-code.github-writer-mode-rte .preview.tabnav-tab {
	display: none;
}

/* Hide the file actions */
.github-writer-type-code.github-writer-mode-rte .file-actions {
	display: none !important;
}

/**********************************
	Milestone page specific stuff
***********************************/

/* Fix the toolbar position. */
.github-writer-type-milestone .github-writer-toolbar-container {
	position: absolute;
	bottom: 100%;
	right: 0;
}

.github-writer-type-milestone .ck.ck-toolbar {
	margin-right: 0;
}

/***************************************
 Flex the editor structure for resizing
****************************************/

/* Change the outer container to a vertical flex. */
.github-writer-size-container {
	display: flex;
	flex-direction: column;

	/* This is to allow the container to shrink, so it'll not grow with its children contents. */
	min-width: auto;
}

/* The following ensures that the editor doesn't show up when preloading it before editing comments */
.previewable-edit .github-writer-size-container {
	display: none !important;
}
.is-comment-editing .github-writer-size-container.js-previewable-comment-form {
	display: flex !important;
}

/* Flex the editor container tree to use the whole space available in the above flex. */
.github-writer-size-container .github-writer-panel-rte,
.github-writer-size-container div.github-writer-panel-rte.write-content,
.github-writer-size-container .github-writer-ckeditor {
	display: flex;
	overflow: auto !important;
	flex-grow: 1;
	min-height: 100px !important;
	max-height: none !important;
}

.github-writer-size-container > fieldset {
	display: contents;
}

/* display:flex disables margin merge, so we fix the buttons distance in new comments. */
.github-writer-size-container div.tabnav.mb-2 {
	margin-top: 0 !important;
}

/* display:flex disables margin merge, so we fix the buttons distance in new comments. */
.github-writer-size-container div.form-actions.my-md-2,
form.new-pr-form .timeline-comment > div.d-flex.flex-justify-end.m-2 {
	margin-top: 0 !important;
}

/* Added margin makes the editor visually coherent. */
.github-writer-size-container > .file-header {
	margin-bottom: 8px;
}

/* Mimick the max size of the container set by GitHub. See #329. */
.ck.ck-content.ck-editor__editable {
    max-height: 646px;
}
