:root {
	--wp-components-color-destructive: #cc1818;
}

.coreframework-panel .components-base-control__error {
	color: var(--wp--preset--color--vivid-red);
}

.coreframework-panel .components-tab-panel__tabs.disabled {
	opacity: .5;
}

.coreframework-panel .components-search-control {
	margin-bottom: unset !important;
}

.coreframework-panel .coreframework-color-preview {
	width: 10px;
	aspect-ratio: 1;
	border-radius: 50%;
	margin-right: 5px;
	flex-shrink: 0;
	display: inline-block;
}

.coreframework-panel .disable {
	opacity: .25;
	pointer-events: none;
}

.coreframework-panel .disable .components-button.is-active:after {
	height: 0;
}

.coreframework-panel .coreframework-utility-classes {
	display: block !important;
}

.coreframework-panel .coreframework-utility-classes .components-panel__row {
	margin: 0 -15px;
}

.coreframework-panel .coreframework-active-classes, .coreframework-panel .coreframework-search-results, .coreframework-panel .coreframework-active-other-classes, .coreframework-panel .coreframework-utility-classes .components-panel__row {
	display: flex;
	flex-wrap: wrap;
	max-height: 300px;
	overflow: auto;
}

.coreframework-panel .coreframework-active-classes .coreframework-class, .coreframework-panel .coreframework-active-other-classes .coreframework-class {
	width: auto;
}

.coreframework-panel .coreframework-search-results h3 {
	width: 100%;
	margin-top: 1em;
}

.coreframework-panel .coreframework-class {
	padding: 5px 7.5px;
	border-color: rgba(0, 0, 0, 0);
	background: rgba(0, 0, 0, .05);
	text-align: left;
	cursor: pointer;
	width: 100%;
	border-radius: 5px;
	box-shadow: inset -1px 0 0 1px #fff;
	border: 0;
}

.coreframework-panel .coreframework-class.is-selected {
	background: rgba(0, 124.1, 186.15, .5);
	color: #fff;
}

.coreframework-panel .coreframework-class.is-active, .coreframework-panel .coreframework-class.is-destructive {
	background: var(--wp-admin-theme-color);
	color: #fff;
}

.coreframework-panel .coreframework-class.is-destructive:hover {
	background: var(--wp-components-color-destructive);
}

.coreframework-panel .coreframework-active-other-classes-heading {
	margin-top: 1.5em;
}

.cf-theme-toggle-button {
	align-items: center;
	aspect-ratio: 1;
	background: rgba(0, 0, 0, 0);
	border: none;
	border-radius: 999px;
	cursor: pointer;
	display: flex;
	height: 100%;
	justify-content: center;
	outline: none;
	padding: unset;
	width: 100%;
	width: 30px;
}

.cf-theme-toggle-button:focus, .cf-theme-toggle-button:hover {
	background: unset;
}

.cf-theme-toggle-button svg {
	height: 24px;
	width: 24px;
}

.cf-theme-toggle-button.cf-theme-dark .cf-theme-icon.cf-light-mode-icon {
	display: none;
}

.cf-theme-toggle-button.cf-theme-dark .cf-theme-icon.cf-dark-mode-icon, .cf-theme-toggle-button.cf-theme-light .cf-theme-icon.cf-light-mode-icon {
	display: block;
}

.cf-theme-toggle-button.cf-theme-light .cf-theme-icon.cf-dark-mode-icon {
	display: none;
}

.cf-theme-toggle-button svg.cf-light-mode-icon {
	color: #fff;
}

.cf-theme-toggle-button svg.cf-dark-mode-icon {
	color: #000;
}

html.cf-theme-dark .cf-theme-toggle-button .cf-dark-mode-icon {
	display: block;
}

html.cf-theme-dark .cf-theme-toggle-button .cf-light-mode-icon {
	display: none;
}

html.cf-theme-light .cf-theme-toggle-button .cf-dark-mode-icon {
	display: none;
}

html.cf-theme-light .cf-theme-toggle-button .cf-light-mode-icon {
	display: block;
}

html:not(.cf-theme-dark):not(.cf-theme-light) .cf-theme-toggle-button .cf-dark-mode-icon {
	display: none;
}

.show-icon-labels .coreframework-utility-classes .components-tab-panel__tabs {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	border-bottom: 2px solid var(--wp-components-color-foreground, #1e1e1e);
}

.show-icon-labels .coreframework-utility-classes .components-tab-panel__tabs .components-button.has-icon {
	text-align: left;
}