/* #region 1.0. Variables 
:root {
	--darkest-gray: #dcdddf;
	--dark-gray: #ffffff;
	--main-gray: #ededed;
	--canvas-bg: #dedede;
	--text-color: #333333;
	--white: #000000;
	--transparent-gray: transparent;
	--border-gray: #dddddd;
	--error-border: #ff9999;
}*/

/* Dark Mode Variables - Only applied when .slc-dev-ui-dark is present */
:root {
	--darkest-gray: #202021;
	--dark-gray: #252527;
	--main-gray: #323235;
	--canvas-bg: #6b6b6b;
	--text-color: #afafaf;
	--white: #ffffff;
	--transparent-gray: #32323500;
	--border-gray: #94949486;
	--error-border: #e129256b;
	--border-radius: 0.5rem;
}
/* #endregion 1.0. Variables */

/* #region 2.0. Scrollbars & Basic Elements */
.wp-toolbar::-webkit-scrollbar,
.block-editor-iframe__body::-webkit-scrollbar,
.interface-navigable-region.interface-interface-skeleton__content::-webkit-scrollbar,
.editor-styles-wrapper.block-editor-writing-flow::-webkit-scrollbar {
	display: none !important;
}

/* Hide scrollbar for Firefox and Edge legacy */
.wp-toolbar,
.block-editor-iframe__body,
.interface-navigable-region.interface-interface-skeleton__content,
.editor-styles-wrapper.block-editor-writing-flow {
	scrollbar-width: none !important; /* Firefox */
	-ms-overflow-style: none !important ; /* IE & Edge Legacy */
}
/* #endregion 2.0. Scrollbars & Basic Elements */

/* #region 3.0. Notifications & Alerts */
.interface-interface-skeleton__body
	.components-notice:not(.block-editor-contrast-checker .components-notice) {
	color: var(--text-color) !important;
	background-color: var(--main-gray);
	position: absolute;
	z-index: 999;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border-right: 1px solid;
}

.rank-math-focus-keyword .components-notice {
	position: relative !important;
	background-color: var(--dark-gray) !important;
}

.block-editor-contrast-checker .components-notice {
	position: relative;
	color: var(--text-color) !important;
	background-color: var(--main-gray);
	border-right: 1px solid;
}
/* #endregion 3.0. Notifications & Alerts */

/* #region 4.0. Main Layout Elements */
.block-editor-iframe__scale-container,
.interface-navigable-region.interface-interface-skeleton__content {
	background-color: var(--canvas-bg);
	padding: 0.4rem;
}

.editor-visual-editor iframe[name="editor-canvas"] {
	border-radius: var(--border-radius);
}

.wp-toolbar .editor-header,
.interface-interface-skeleton__footer,
.interface-interface-skeleton__footer .block-editor-block-breadcrumb,
.block-editor-block-breadcrumb__current,
.block-editor-block-toolbar,
.entities-saved-states__panel-header,
.editor-layout__toggle-entities-saved-states-panel {
	background-color: var(--darkest-gray) !important;
	color: var(--text-color) !important;
}

.editor-styles-wrapper.block-editor-writing-flow {
	background-color: var(--canvas-bg);
}

.wp-toolbar .editor-header {
	border-bottom: 2px solid var(--main-gray);
}

.interface-interface-skeleton__footer {
	border-top: 2px solid var(--main-gray);
}

/* #endregion 4.0. Main Layout Elements */

/* #region 5.0. Panels, Sidebars & Containers */
.wp-toolbar .components-popover__content,
.wp-toolbar .components-panel,
.wp-toolbar .components-panel__header,
.wp-toolbar .postbox,
.wp-toolbar .interface-complementary-area .editor-sidebar,
.edit-post-meta-boxes-area .postbox .handle-order-higher,
.edit-post-meta-boxes-area .postbox .handle-order-lower,
.editor-inserter-sidebar,
.editor-inserter-sidebar :before,
.interface-complementary-area,
.block-editor-inserter__block-list .block-editor-block-icon,
.editor-sidebar__panel .block-editor-block-icon,
.components-popover__content .block-editor-block-icon,
.css-1y1qek0,
.editor-post-card-panel__title.editor-post-card-panel__title,
.block-editor-block-inspector h2,
.editor-document-bar,
.editor-document-bar h1,
.editor-document-bar span,
.components-button.editor-document-bar__command.is-compact:hover,
.block-editor-tabbed-sidebar__tabpanel,
.block-editor-block-card__description,
.acf-relationship .selection .values,
.acf-gallery .acf-gallery-toolbar,
.acf-table > tbody > tr > th,
.acf-table > tbody > tr > td,
.acf-table > thead > tr > th,
.acf-table > thead > tr > td,
.components-color-palette__custom-color-name,
.components-base-control h3,
.block-editor-panel-color-gradient-settings__dropdown-content > div > button,
.components-input-control__label,
.components-placeholder.components-placeholder,
.acf-relationship .filters,
.acf-block-component .acf-block-fields,
.block-directory-downloadable-blocks-panel,
.media-modal-content,
.media-frame-title h1,
.media-router .active,
.media-router .media-menu-item.active:last-child,
.attachments-browser .media-toolbar,
.media-toolbar h2,
.attachments-browser.has-load-more .attachments-wrapper,
.wp-core-ui .attachment-preview,
.media-frame-router button,
.media-frame-content,
.upload-instructions.drop-instructions,
.acf-switch-slider,
.block-editor-block-contextual-toolbar,
div.rank-math-sidebar-panel.components-panel
	div.rank-math-tabs
	div.components-tab-panel__tabs,
.rank-math-checklist,
.components-modal__frame.rank-math-modal,
.rank-math-editor .field-group,
div.rank-math-modal .components-modal__header,
div.rank-math-modal .components-modal__header h1,
.schema-builder-save-as,
.schema-builder
	.schema-group--children
	> .schema-group-or-property-container
	> .schema-group-or-property,
.components-popover.block-editor-block-list__block-popover
	.block-editor-block-parent-selector
	.block-editor-block-parent-selector__button,
.components-modal__frame,
.interface-interface-skeleton__actions,
.select2-container.-acf .select2-selection--multiple .select2-selection__choice,
.edit-site-page,
.dataviews-footer,
.dataviews-bulk-actions-footer__item-count,
.rank-math-contentai-modal-overlay .rank-math-modal .column-body .column,
.rank-math-contentai-modal-overlay
	.rank-math-modal
	.column-body
	.column.column-output,
.rank-math-contentai-modal-overlay
	.rank-math-modal
	.column-body
	.column
	.footer {
	background-color: var(--main-gray) !important;
	background: var(--main-gray) !important;
	color: var(--text-color) !important;
}

.block-editor-tabbed-sidebar__tablist-and-close-button,
.components-panel__header.interface-complementary-area-header.editor-sidebar__panel-tabs,
.interface-navigable-region.interface-interface-skeleton__secondary-sidebar,
.interface-navigable-region.interface-interface-skeleton__sidebar {
	border: none;
}
/*fixes for tabs on panels*/
.css-8ivkzm {
	color: var(--text-color) !important;
}

.css-1nuemzt[aria-orientation="horizontal"]::before {
	height: 1px;
	z-index: 999;
}

/*fixes for outlines */
.document-outline__button {
	color: var(--text-color) !important;
}

.components-panel__body-title:hover {
	background-color: var(--dark-gray) !important;
	opacity: 0.3;
	background: var(--dark-gray) !important;
}

.interface-complementary-area.editor-sidebar,
.interface-complementary-area__fill {
	width: 100% !important;
}

.interface-interface-skeleton__secondary-sidebar .editor-list-view-sidebar {
	width: unset;
	min-width: 300px;
}

.interface-navigable-region .interface-interface-skeleton__secondary-sidebar {
	min-width: 15%;
	width: 20%;
}

/* #endregion 5.0. Panels, Sidebars & Containers */

/* #region 6.0. Command Menu & Popups */
.commands-command-menu__container [cmdk-list-sizer],
.commands-command-menu__container [cmdk-item],
.block-editor-block-types-list__item-icon {
	background-color: var(--main-gray);
	color: var(--text-color);
}

.wp-toolbar .block-editor-tabbed-sidebar__close-button,
.wp-toolbar .block-editor-tabbed-sidebar__close-button svg,
.commands-command-menu__header svg,
.commands-command-menu__container [cmdk-item] svg,
.editor-post-panel__section.editor-post-summary,
.block-directory-block-ratings svg,
.block-editor-block-icon.has-colors svg {
	background-color: var(--transparent-gray) !important;
	fill: var(--white);
}

.components-popover.block-editor-block-popover .components-popover__content {
	max-height: 5px !important;
}

.css-pjv3to:not([aria-orientation="vertical"])::after {
	border-bottom-width: 3px !important;
}
/* #endregion 6.0. Command Menu & Popups */

/* #region 7.0. Inputs & Controls */
.wp-toolbar input,
.wp-toolbar select,
.wp-editor-container,
.quicktags-toolbar,
.wp-editor-container textarea.wp-editor-area,
.block-editor-block-inspector__no-blocks,
#editor .postbox > .postbox-header:hover,
.wp-core-ui .button:not(.acf-color-picker .wp-color-result),
.acf-color-picker .wp-color-result-text,
.iris-border,
.wp-core-ui .button-secondary,
.wp-switch-editor,
.interface-complementary-area .components-panel__header,
.block-editor-tabbed-sidebar,
.wp-toolbar .css-if8s8t,
.components-toggle-group-control,
.components-input-control__container,
.components-textarea-control__input,
.commands-command-menu__header,
.acf-relationship .selection .choices,
.acf-field textarea,
.acf-gallery .acf-gallery-main,
.media-sidebar,
.media-sidebar textarea,
.acf-switch,
.serp-preview,
.serp-preview input,
.serp-preview-body div,
.serp-preview-body h5,
.rank-math-focus-keyword .tagify,
.edit-post-layout__metaboxes,
#rank-math-schema-item,
.components-form-token-field__suggestions-list,
.select2-container--default .select2-selection--multiple,
.page-patterns-preview-field,
.dataviews-filters__summary-chip-container .dataviews-filters__summary-chip,
.css-10we6by .components-dropdown-menu,
.acf-file-uploader .file-wrap,
.acf-file-uploader.file-icon,
.wp-core-ui .attachment .thumbnail,
.wp-core-ui .attachment .filename,
.rank-math-editor > .components-tab-panel__tabs {
	background-color: var(--dark-gray) !important;
	background: var(--dark-gray) !important;
	color: var(--text-color) !important;
}

.components-form-token-field__remove-token,
.components-form-token-field__token-text,
.components-form-token-field__remove-token.components-button {
	background-color: var(--dark-gray);
	color: var(--text-color);
}

.components-form-token-field__token {
	border: 1px solid #949494;
}

.wp-toolbar .components-button:not(.components-circular-option-picker__option) {
	color: var(--white) !important;
}

/* #endregion 7.0. Inputs & Controls */

/* #region 8.0. Post Editor & Title */
.editor-visual-editor__post-title-wrapper.edit-post-visual-editor__post-title-wrapper {
	margin-top: 0 !important;
	color: var(--text-color) !important;
	padding: 0.6rem;
	background-color: var(--dark-gray);
	border-radius: 0.5rem 0.5rem 0 0;
	width: -webkit-fill-available;
	display: flex;
	flex-direction: column;
	justify-items: flex-start;
}

h1.wp-block.wp-block-post-title.block-editor-block-list__block.editor-post-title.editor-post-title__input.rich-text {
	background-color: var(--main-gray);
	border-radius: 2px;
	border: 1px solid var(--border-gray);
	width: fit-content;
	font-size: 1.2em;
	padding: 0.2rem 1.5rem;
	margin: unset;
	color: var(--text-color);
	font-family: sans-serif;
}

.is-root-container.is-desktop-preview.is-layout-flow.wp-block-post-content.block-editor-block-list__layout {
	background-color: white;
}
/* #endregion 8.0. Post Editor & Title */

/* #region 9.0. Publish Panel */
.editor-post-publish-panel,
.editor-post-publish-panel__prepublish .components-panel__body,
.editor-post-publish-panel__header,
.editor-post-publish-panel__prepublish strong {
	background-color: var(--main-gray) !important;
	background: var(--main-gray) !important;
	color: var(--text-color) !important;
}

.editor-post-publish-panel {
	border-color: var(--white);
	border-left-width: 1px;
}

.block-editor-block-inspector label,
.components-panel__header h2,
.editor-post-visibility h2,
.editor-post-visibility span,
.block-editor-publish-date-time-picker h2,
.block-editor-publish-date-time-picker span,
.components-datetime__date h3,
.components-truncate.components-text,
.components-form-token-field__suggestions-list li,
span.components-truncate,
.block-directory-downloadable-blocks-panel__title,
.block-directory-downloadable-blocks-panel__description,
.block-directory-downloadable-block-list-item__details,
.rank-math-focus-keyword .components-panel__body-title,
.rank-math-tabs .serp-preview,
.rank-math-tabs .serp-description,
.rank-math-tabs.serp-title,
.rank-math-tabs.serp-url,
.components-modal__header h1,
#placeholder {
	color: var(--text-color) !important;
}

h1#components-modal-header-0 {
	margin-left: 1rem;
	margin-top: 1.2rem;
}
/* #endregion 9.0. Publish Panel */

/* #region 10.0. Rank Math Components */
.rank-math-toolbar-score.bad-fk,
.rank-math-toolbar-score.content-ai-score.bad-fk,
.rank-math-tabs .rank-math-group-score,
.rank-math-tabs .rank-math-checklist li:before,
span.rank-math-group-score.test-fail,
div.rank-math-checklist li::before {
	background-color: var(--dark-gray) !important;
	background: var(--dark-gray) !important;
	color: var(--text-color) !important;
	border-color: var(--error-border) !important;
	border: solid 1px;
}
/* #endregion 10.0. Rank Math Components */

/* #region 11.0. Modal & Components */
.components-modal__frame .components-modal__header {
	position: relative;
	padding: 0;
}

.components-modal__frame .components-modal__content {
	margin: 0;
}
/* #endregion 11.0. Modal & Components */

/* #region 12.0. Media Manager */
.media-frame-content,
.uploader-inline-content,
.attachments-browser.has-load-more .attachments-wrapper {
	position: relative !important;
	min-height: 80vh;
}

.wp-core-ui .attachments-browser .attachments {
	padding: 2px 8px 8px;
	width: calc(100% - 320px);
	height: 64vh;
	overflow-y: scroll;
}
/* #endregion 12.0. Media Manager */

/* #region 13.0. Block Editor Extensions */
html :where(.wp-block) {
	max-width: 100%;
	margin: auto;
}

:where(.editor-styles-wrapper) .wp-block a {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

.block-editor__container img {
	max-width: fit-content;
}
/* #endregion 13.0. Block Editor Extensions */