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

/*
	Mainly overriding Lark styles, so it matches the GH original styles.
	The value of most of the rules here defined have been copied from GH as is.
*/

:root {
	--ck-icon-size: 16px;
	--ck-ui-component-min-height: auto;
	--ck-color-toolbar-border: transparent;
	--ck-color-button-default-hover-background: transparent;
	--ck-color-button-on-background: transparent;
	--ck-color-button-on-hover-background: transparent;
	--ck-color-button-on-active-background: transparent;
	--ck-color-button-default-active-background: transparent;
	--ck-color-button-on-active-shadow: transparent;
	--ck-color-button-default-active-shadow: transparent;
	--ck-color-button-on-disabled-background: transparent;
	--ck-color-split-button-hover-background: transparent;
	--ck-color-split-button-hover-border: transparent;
}

.ck.ck-icon {
	width: auto;
}

.tabnav .ck.ck-toolbar {
	margin: 0 15px 0 0;
	padding: 4px;
}

.ck.ck-toolbar {
	background: inherit !important;
	padding: 0;

	& > .ck-toolbar__items {
		margin: 0 !important;

		& > .ck:last-child {
			margin-right: 4px !important; /* We need to overwrite css with much higher specificity. */
		}

		& .ck-button {
			/* Spacing between buttons */
			padding: 4px;
			margin: 0 4px;
			border: 0;

			/* Color */
			color: var(--fgColor-muted) !important;

			/* Height */
			display: block;
			float: left;

			/* Cursor */
			cursor: pointer;

			&.ck-splitbutton__action {
				margin-right: 0 !important;
			}

			&.ck-splitbutton__arrow {
				margin-left: 0 !important;
				padding-left: 0 !important;
			}

			& .ck-dropdown__arrow {
				margin-left: 4px;
			}
		}

		& > .ck-dropdown {
			margin: 3px 4px;

			&:last-child {
				margin: 3px 4px !important; /* We need to overwrite css with much higher specificity. */
			}

			& > .ck-splitbutton > .ck-button,
			& > .ck-button.ck-dropdown__button {
				margin: 0 !important;
			}

			& .ck.ck-toolbar {
				margin: 0;
			}
		}

		/* We're using the separator to mimic the margin that GH has between its toolbar blocks. */
		& .ck-toolbar__separator {
			width: 0;
			min-width: 0;
			margin-left: 4px;
			margin-right: 4px;
			width: 1px;
			min-width: 1px;
			background: var(--borderColor-default);
		}

		/* Fixes the toggle button in dropdown lists (#41) */
		& .ck-list {
			& > .ck-list__item {
				padding: 0 4px;

				& > .ck-button {
					margin: 0 !important;
				}

				& > .ck-switchbutton {
					display: flex;

					& .ck-button__toggle {
						margin-right: 4px;
					}
				}
			}
		}

		& > .ck-file-dialog-button {
			margin: 0;
		}

		& button[aria-label="Add a link <ctrl+k>"] svg,
		& button[aria-label="Add a link <cmd+k>"] svg,
		& button[aria-label="Add a task list"] svg {
			margin-left: -3px;
		}

		& .ck-insert-table-dropdown-grid-box {
			margin: var(--ck-insert-table-dropdown-box-margin);
			border: 1px solid var(--ck-color-base-border);

			&.ck-button.ck-on,
			&.ck-button:not(.ck-disabled):hover {
				border-color: var(--ck-color-focus-border);
				background: var(--ck-color-focus-outer-shadow);
			}
		}
	}
}

/* This will make the toolbar (including the kebab toolbar) inherit the color used by the GH toolbar space. */
.ck.ck-toolbar,
.ck.ck-toolbar__items,
.ck.ck-dropdown,
.ck.ck-dropdown__panel {
	background: inherit;
}

html[data-color-mode="dark"] .ck.ck-toolbar>.ck-toolbar__items .ck-insert-table-dropdown__label {
	color: #FFF;
}
