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

.ck-balloon-panel, .ck-dropdown__panel {
	box-shadow: var(--shadow-floating-large) !important;
	background-color: var(--bgColor-muted) !important;
	border: 1px solid var(--borderColor-default) !important;
	border-radius: 6px !important;
}

.ck.ck-balloon-panel[class*=arrow_n]:not(.ck-tooltip):after {
	border-bottom-color: var(--overlay-borderColor) !important;
}

.ck.ck-balloon-panel[class*=arrow_s]:not(.ck-tooltip):after {
	border-top-color: var(--overlay-borderColor) !important;
}

/* After updating ckeditor to 35.2.1 the update to the balloon panel arrow color was needed. See #377. */
.ck.ck-balloon-panel[class*=arrow_n]:before {
	border-bottom-color: var(--borderColor-default);
}

.ck.ck-balloon-panel[class*=arrow_s]:before {
	border-top-color: var(--borderColor-default);
}
/* ********** */

.ck-list {
	color: var(--fgColor-default) !important;
	background: var(--overlay-bgColor) !important;
}

.ck-button {
	color: var(--fgColor-default) !important;
}

/* Mermaid balloon toolbar styles */
.ck.ck-balloon-panel [aria-label="Mermaid toolbar"] {
	margin: 0;
}

.ck.ck-balloon-panel .ck.ck-toolbar .ck-button {
	line-height: 1;
	margin: 3px 4px;
}

.ck.ck-balloon-panel [aria-label="Mermaid toolbar"] .ck.ck-toolbar__separator {
	margin-left: 0;
	margin-right: 0;
	width: 1px;
	min-width: 1px;
	background: var(--borderColor-default);
}

/* When GitHub uses the light mode, we need to overwrite parts of the color scheme
	so it still resembles the original GitHub looks. */
html[data-color-mode="light"] .ck.ck-balloon-panel.ck-balloon-panel_arrow_n.ck-balloon-panel_with-arrow.ck-tooltip {
	background-color: var(--ck-color-tooltip-background) !important
}

/* Updating tooltip's text color for the 'sync-with-system' and 'dark' theme. See #390. */
html[data-color-mode="auto"] .ck.ck-balloon-panel {
	&.ck-tooltip {
		background-color: var(--ck-color-tooltip-background) !important;

		&[class*=arrow_n]:after,
		&[class*=arrow_s]:after {
			border-bottom-color: var(--ck-color-panel-background) !important;
		}
	}
}
