/* Light Mode CKEditor Styles */
[data-theme="light"] {
	--ck-color-base-background: #fff;
	--ck-color-base-text: #333;
	--ck-color-toolbar-background: #f0f0f0;
	--ck-color-toolbar-border: #ccc;
	--ck-color-dropdown-panel-background: #fff;
	--ck-color-panel-background: #f9f9f9;
	--ck-color-input-background: #fff;
	--ck-color-input-text: #333;

	--ck-color-button-default-background: transparent;
	--ck-color-button-default-hover-background: #f0f0f0;
	--ck-color-button-default-active-background: #e0e0e0;
	--ck-color-button-default-disabled-background: transparent;

	--ck-color-button-on-background: #f0f7ff;
	--ck-color-button-on-hover-background: #dbecff;
	--ck-color-button-on-active-background: #c6e0ff;

	--ck-color-switch-button-off-background: #ccc;
	--ck-color-switch-button-on-background: #2977ff;
	--ck-color-switch-button-on-hover-background: #1a5ebd;

	--ck-color-dropdown-panel-background: #fff;
	--ck-color-dropdown-panel-border: #ccc;
}

/* Dark Mode CKEditor Styles */
[data-theme="dark"] {
	--ck-color-base-background: #1e1e1e;
	--ck-color-base-text: #e0e0e0;
	--ck-color-toolbar-background: #333;
	--ck-color-toolbar-border: #555;
	--ck-color-dropdown-panel-background: #333;
	--ck-color-panel-background: #2e2e2e;
	--ck-color-input-background: #2e2e2e;
	--ck-color-input-text: #e0e0e0;

	--ck-color-button-default-background: transparent;
	--ck-color-button-default-hover-background: #444;
	--ck-color-button-default-active-background: #555;
	--ck-color-button-default-disabled-background: transparent;

	--ck-color-button-on-background: #444;
	--ck-color-button-on-hover-background: #555;
	--ck-color-button-on-active-background: #666;

	--ck-color-switch-button-off-background: #666;
	--ck-color-switch-button-on-background: #53a336;
	--ck-color-switch-button-on-hover-background: #4d9d30;

	--ck-color-dropdown-panel-background: #333;
	--ck-color-dropdown-panel-border: #555;
}

/* Apply the styles to CKEditor */
.ck-editor__editable_inline {
	background-color: var(--ck-color-base-background);
	color: var(--ck-color-base-text);
}

.ck-toolbar {
	background-color: var(--ck-color-toolbar-background);
	border-color: var(--ck-color-toolbar-border);
}

/* Add hover and active states */
.ck.ck-button:not(.ck-disabled):hover {
	background-color: var(--ck-color-button-default-hover-background);
}

.ck.ck-button:not(.ck-disabled):active {
	background-color: var(--ck-color-button-default-active-background);
}

/* Ensure the "on" state buttons are consistent */
.ck.ck-button.ck-on {
	background-color: var(--ck-color-button-on-background);
	color: var(--ck-color-base-text);
}

.ck.ck-button.ck-on:not(.ck-disabled):hover {
	background-color: var(--ck-color-button-on-hover-background);
}

.ck.ck-button.ck-on:not(.ck-disabled):active {
	background-color: var(--ck-color-button-on-active-background);
}

/* Handle switch buttons */
.ck.ck-button.ck-switchbutton.ck-on {
	background-color: var(--ck-color-switch-button-on-background);
}

.ck.ck-button.ck-switchbutton.ck-on:hover {
	background-color: var(--ck-color-switch-button-on-hover-background);
}