/**
 * Editor Styles for components and UI.
 * 
 * This style is loaded in the editor only.
 *
 * @package Greyd
 */

:root {
	--basic-margin: 12px;
	--basic-padding: 8px;
}


/*    Sidebar Panel
__________________________________
*/
.greyd-styles-panel {
	position: relative;
	padding-bottom: 50px;
}
.greyd-styles-panel .panel-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: calc(2 * var(--basic-padding));
	border-bottom: 1px solid #ddd;
}

.greyd-styles-panel .panel-menu {
	padding: calc(2 * var(--basic-padding));
}

.greyd-styles-panel .panel-head .panel-title {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin-left: var(--basic-margin);
}

.greyd-styles-panel .panel-menu-item {
	width: 100%;
	padding-top: calc(1 * var(--basic-margin));
	padding-bottom: calc(1 * var(--basic-margin));
	height: auto;
}

.greyd-styles-panel .panel-headline {
	margin-top: calc( 3 * var(--basic-margin));
	margin-bottom: var(--basic-margin);
}

.greyd-styles-panel .components-range-control {
	flex: 1;
}

.greyd-styles-panel .components-panel__body:last-child {
	border-bottom: none;
}

/* .greyd-styles-panel :is( input:not([type=checkbox]):not([type=radio]), select ) {
	min-height: 40px;
	height: 40px;
} */

.greyd-styles-panel :is( .components-input-control__input, .components-custom-select-control__button, .components-text-control__input ) {
	font-size: 13px !important;
	line-height: 1 !important;
	min-height: 40px !important;
	height: 40px !important;
	padding-left: 16px !important;
}

.greyd-styles-panel .components-unit-control__select {
	font-size: 13px !important;
	text-transform: none !important;
	min-width: 24px !important;
	max-width: 40px !important;
	height: 40px !important;
	margin-inline-end: 0px !important;
	padding: 4px 2px 4px 0 !important;
	color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)) !important;
	width: auto !important;
}


/*    Save Button
__________________________________
*/

.panel-foot-sticky {
	position: fixed;
	bottom: 25px;
	right: -1px;
	width: 282px;
	padding: calc(2 * var(--basic-padding));
	background: #fff;
	border: 1px solid #ddd;
	z-index: 1;
	display: flex;
	justify-content: space-between;
	align-items: stretch;
}

.panel-foot-sticky > button {
	flex: 1;
	display: flex;
	justify-content: center;
}

.greyd-styles-panel .components-button.is-primary {
	background: var(--wp-block-synced-color);
}

.greyd-styles-panel .components-button.is-primary:hover {
	background: rgba( var(--wp-block-synced-color--rgb),.9 );
}

.greyd-styles-panel .components-button.is-primary:disabled {
	background: rgba( var(--wp-block-synced-color--rgb),.6 );
}


/*    Debug
__________________________________
*/
.panel_debug {
	font-size: 0.75em;
	line-height: 1;
	padding: var(--basic-padding) 2px;
	border: 1px solid #D7D7D7;
	background: #f3f3f3;
	overflow: auto hidden;
}


/*    Preview
__________________________________
*/
.greyd-styles-panel .edit-site-typography-preview {
	padding-top: var(--basic-padding);
	padding-bottom: var(--basic-padding);
}

:where( .greyd-styles-panel .edit-site-typography-preview ) {
	font-size: 16px;
	line-height: 1.5;
}


/*    ButtonGroup
__________________________________
*/
.greyd-styles-panel .block-editor-block-styles__variants.layout--inline {
	margin: 1rem 0;
	background: #eee;
	padding: 4px;
	border-radius: 2px;
	justify-content: space-around;
}

.greyd-styles-panel .block-editor-block-styles__variants .block-editor-block-styles__item:not(.is-active) {
	background-color: #fff;
}

/*    Grid Control Group
__________________________________
*/

.greyd-grid-controls {
	display: grid;
	grid-template-columns: repeat(2, minmax(0px, 1fr));
	gap: calc(16px) calc(8px);
	align-items: end;
}

.greyd-grid-controls > * {
	grid-column: 1 / -1;
}

.greyd-grid-controls > .single-column {
	grid-column: span 1;
}

.greyd-grid-controls .components-base-control__field,
.greyd-grid-controls select {
	margin-bottom: 0 !important
}
