/**
 * Editor admin CSS
 * 
 * This file does not gets processed and affects everything on the admin screen.
 */

:root {
    --basic-margin: 10px;
	--basic-padding: 8px;
    --previewMaxWidth: 700px;
    --previewBackgroundColor: var(--wp--preset--color--lightest);
    --wp--style--block-gap: 1em;
}


/*
----------------------------------------------------------

                    .editor-styles-wrapper

----------------------------------------------------------
*/
.editor-styles-wrapper {
    position: static !important;
}

.editor-styles-wrapper style {
    display: none !important;
}

/**
 * Fix editor preview width when sidebar or listview are expanded.
 * @since 1.4.4
 */
.editor-styles-wrapper {
    /* adjust those values based on the editor state */
    --sidebar-width: 0px;
    --listview-width: 0px;
    /* var(--vw) is used to calculate the grid var(--maxWidth) */
    --vw: calc( 100vw - var(--sidebar-width) - var(--listview-width)) !important;
}
/* sidebar is open */
.is-sidebar-opened .editor-styles-wrapper {
    --sidebar-width: 280px;
}
/* listview or block inserter is open */
.interface-interface-skeleton__secondary-sidebar ~ .interface-navigable-region .editor-styles-wrapper {
    --listview-width: 350px;
}

/**
 * Fix editor maxwidth on large sizes
 * @since 1.4.4
 */
@media (min-width: 1400px) {
    .editor-styles-wrapper {
        --maxWidth: calc(var(--vw) - (2 * var(--GRDmaxwidth) * var(--GRDrowxxl))) !important;
    }
}

/* skeleton */
.edit-post-layout .interface-interface-skeleton__content {
    overflow-x: hidden;
    background: #fff;
}
/* post title */
.edit-post-visual-editor__post-title-wrapper .editor-post-title__input {
    position: relative;
    width: 100%;
    max-width: calc( var(--maxWidth) - var(--gutter) - var(--gutter) );
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 40px;
	transition: none !important;
}
/* notices */
.components-notice__actions {
    align-items: center;
}
.components-snackbar .components-snackbar__icon {
    margin-left: -6px;
}

/**
 * Fix Gutenberg Control UI Bug
 * * When WP_DEBUG logs are rendered in the editor screen, sometimes
 * * input- & select-controls are stretched to 100% height.
 * 
 * @since 1.3.3
 */
:where( .components-flex ) {
    height: auto;
}


/*
----------------------------------------------------------

                    List View Sidebar

----------------------------------------------------------
*/
.edit-site-editor__list-view-panel,
.edit-post-editor__document-overview-panel {
    resize: horizontal;
    overflow: hidden;
}


/*
----------------------------------------------------------

                    Inspector Sidebar

----------------------------------------------------------
*/

/**
 * Fixed an issue where the variation svg icons are not visible
 * when the gutenberg plugin is active
 * 
 * @since 1.16.0
 * 
 * @todo can (probably) be removed in future versions
 */
.block-editor-block-variation-transforms svg {
	fill: currentColor;
}

/**
 * new feature highlight
 * can be removed in version 1.7.5+
 */
.feature-tag {
	display: inline-block;
	font-size: 11px;
	line-height: 1.4;
	padding: 0 3px;
	border-radius: 2px;
	background: #9b51e0;
	color: #fff;
}

/* inputs */
.block-editor .components-circular-option-picker {
    min-width: 228px;
}
.components-panel__body > .components-number-control {
    margin-bottom: 1em;
}
.interface-interface-skeleton__sidebar select {
    max-width: 100%;
}
.components-select-control {
    height: auto;
}
.wp-core-ui select[multiple] {
    height: auto !important;
}
select[multiple] option {
    padding: 2px 0;
}

/* components-button */
/* .components-button.is-small {
    font-size: 12px;
    height: auto;
    line-height: 2.4;
} */
.components-button.has-icon.has-text .dashicon {
	margin-right: 2px !important;
}
.components-button.has-icon.is-small {
    padding: 0 8px;
}
.components-button.is-small .dashicon {
    margin-right: 2px !important;
    width: auto;
    height: auto;
    font-size: 16px;
}
.components-button.is-small.has-icon:not(.has-text) {
    width: auto;
}

.inner_label {
    align-self: center;
    opacity: .75;
    flex: 1;
}

.is-flex {
    display: flex;
}
.is-flex-space-between {
    display: flex;
    justify-content: space-between;
}
.is-edge-layout {
    margin-bottom: 8px !important;
}
.is-edge-layout .components-input-control__container {
    max-width: 80px;
}
.components-input-control {
    height: auto;
}

.greyd-inspector-wrapper {
    display: inline-flex;
    flex-wrap: wrap;
    /* justify-content: space-between; */
    width: 100%;
}
.greyd-inspector-wrapper.hidden {
    display: none;
}
.greyd-inspector-wrapper .dashicon {
    width: 35px;
    height: 30px;
    line-height: 30px;
    margin-bottom: 8px;
    border-radius: 2px;
}
.greyd-inspector-wrapper.greyd-icons-inline .dashicon {
    display: block;
    margin: 8px auto;
}
.greyd-icon-flex > span > svg {
    width: 35px;
    height: 30px;
    padding: 0px 6px;
    margin-right: 10px;
    border-radius: 2px;
}
.block-editor-block-icon img[size='24'] {
    width: 24px;
}
/* 
@media (max-width: 480.98px) {
    .greyd-icon-flex.xs > span > svg,
    .greyd-inspector-wrapper.xs .dashicon,
    .greyd-inspector-wrapper .xs .dashicon {
        background: #eee;
    }
}
@media (min-width: 481px) and (max-width: 767.98px) {
    .greyd-icon-flex.sm > span > svg,
    .greyd-inspector-wrapper.sm .dashicon,
    .greyd-inspector-wrapper .sm .dashicon {
        background: #eee;
    }
}
@media (min-width: 768px) and (max-width: 1024.98px) {
    .greyd-icon-flex.md > span > svg,
    .greyd-inspector-wrapper.md .dashicon,
    .greyd-inspector-wrapper .md .dashicon {
        background: #eee;
    }
}
@media (min-width: 1025px) {
    .greyd-icon-flex.lg > span > svg,
    .greyd-inspector-wrapper.lg .dashicon,
    .greyd-inspector-wrapper .lg .dashicon {
        background: #eee;
    }
} 
*/

.greyd-inspector-wrapper > .components-unit-control-wrapper,
.greyd-inspector-wrapper > .components-base-control,
.greyd-inspector-wrapper > .iconselect {
    margin: 0 0 8px 0;
}
.greyd-inspector-wrapper > .components-unit-control-wrapper:not(:first-child),
.greyd-inspector-wrapper > .components-base-control:not(:first-child) {
    margin-left: 4px;
}
.greyd-inspector-wrapper.greyd-2 > .components-unit-control-wrapper,
.greyd-inspector-wrapper.greyd-2 > .components-base-control {
    width: calc(50% - 3px);
}
.greyd-inspector-wrapper.greyd-3 > .components-unit-control-wrapper,
.greyd-inspector-wrapper.greyd-3 > .components-base-control {
    width: calc(33% - 3px);
}
.greyd-inspector-wrapper.greyd-icon-1 > .components-unit-control-wrapper,
.greyd-inspector-wrapper.greyd-icon-1 > .components-base-control,
.greyd-icon-flex > .components-base-control {
    width: calc(100% - 40px);
}
.greyd-inspector-wrapper.greyd-icon-2 > .components-unit-control-wrapper,
.greyd-inspector-wrapper.greyd-icon-2 > .components-base-control {
    width: calc(50% - 23px);
}
.greyd-inspector-wrapper.greyd-icons-inline > div {
    width: 25%;
    padding: 0px 5px;
}
.greyd-inspector-wrapper.greyd-icons-inline .components-toggle-control .components-base-control__field .components-form-toggle {
    margin: 0 auto;
	min-width: auto;
}

.block-editor-block-inspector .block-editor-link-control {
	min-width: unset;
	margin: 0 -16px;
}

.greyd-label,
.greyd-inspector-wrapper label {
    display: inline-block;
    margin-bottom: 8px !important;
    padding: 0px !important;
}
.greyd-inspector-help {
    font-size: 12px;
    font-style: normal;
    color: rgb(117, 117, 117);
}

.iconselect .components-custom-select-control__item {
    float: left;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0px;
}
.iconselect .icon {
    font-size: 20px;
}
.iconselect .components-custom-select-control__button .title {
    margin-left: 10px;
}
.iconselect .components-custom-select-control__item .title {
    display: none;
}
.iconselect .components-custom-select-control__item-icon {
    position: absolute;
    width: 32px;
    height: 32px;
    background: #e8e8e8;
    z-index: -1;
}
.iconselect .components-custom-select-control__item-icon path {
    stroke: transparent;
    fill: transparent;
}

.editor-post-featured-image__preview {
    background-image: linear-gradient(45deg, #efefef 25%, transparent 25%, transparent 75%, #efefef 75%, #efefef), linear-gradient(45deg, #efefef 25%, transparent 25%, transparent 75%, #efefef 75%, #efefef);
    background-size: 20px 20px;
    background-position: 0 0, 10px 10px;
}
.editor-post-featured-image__preview > img {
    max-height: 80px;
}
.editor-post-featured-image__preview > .components-responsive-wrapper > img[src*="svg"] {
    position: relative;
}
.interface-interface-skeleton__sidebar {
    overflow: auto;
    overflow-x: hidden;
}

/* sometimes (no idea why) Gutenberg sets the height of select controls in the inspector to 100% */
.components-select-control {
    height: auto !important;
}

.components-panel .disabled {
	opacity: 0.25;
	pointer-events: none;
	cursor: default;
}

/*
----------------------------------------------------------

                    Editor Preview

----------------------------------------------------------
*/


/*    AdvancedPanelBody
__________________________________
*/
/*
    change indicator
*/
.components-panel__body.holds-change:not(.is-opened) button.components-panel__body-toggle::after,
.components-panel__body:not(.is-opened) button.components-panel__body-toggle .change_holder
{
    content: " ";
    display: inline-block;
    background: #d6d6d6;
    height: var(--basic-margin);
    width: var(--basic-margin);
    border-radius: 100%;
    vertical-align: baseline;
    margin-left: 6px;
}

/*
    responsive & hover buttons
*/
.components-panel__body .panel_buttons {
    position: absolute;
    right: 55px;
    top: 10px;
}
.components-panel__body .panel_buttons .button {
    color: #949495;
    background-color: #fff;
    min-height: 0;
    line-height: 1;
    padding: 2px 6px;
    border-color: #D7D7D7 !important;
    box-shadow: none !important;
}
.components-panel__body .panel_buttons .button:hover {
    color: #949495;
    background-color: #f3f3f3;
}
.components-panel__body .panel_buttons .button.active {
    color: var(--wp-admin-theme-color);
    background-color: #f3f3f3;
}

/*
    color indicator
*/
.block-editor-panel-color-gradient-settings .components-panel__body-toggle > div {
    display: flex;
    align-items: center;
}
.block-editor-panel-color-gradient-settings__panel-title {
    display: inline-flex;
    margin: -10px 8px;
    gap: 4px;
}
.block-editor-panel-color-gradient-settings .block-editor-panel-color-gradient-settings__panel-title .component-color-indicator {
    height: 1em;
    width: 1em;
}
.block-editor-panel-color-gradient-settings.is-opened .block-editor-panel-color-gradient-settings__panel-title {
    display: none;
}


/*    RangeControl
__________________________________
*/
/* fixed offset */
.components-range-control .components-range-control__wrapper,
.components-range-control .css-pioupe-InputRange {
    margin-left: 0;
}


/*    AdvancedLabel
__________________________________
*/
.advanced_label {
    display: inline-flex;
    background: #eaeaea;
    flex-direction: row;
    align-items: center;
    border-radius: 3px;
    padding: 2px 5px;
    color: var(--wp-admin-theme-color);
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.advanced_label .components-base-control__label {
    margin-bottom: 0;
}

.advanced_label .components-base-control__label {
    margin: 0;
}


/*    RangeUnitControl
__________________________________
*/
.range_unit_control {
    flex: 2;
}
.range_unit_control .flex > :first-child {
    flex: 2;
}
.range_unit_control .flex > :not(:first-child) {
    flex: 1;
    margin: 0 0 0 15px;
}


/*    DimensionControl
__________________________________
*/
.dimension_control {
    margin-top: calc(2 * var(--basic-margin));
}
.dimension_control__label {
    align-items: center;
}
.dimension_control__label,
.dimension_control__inputs > .flex {
    margin-bottom: var(--basic-margin);
}
.dimension_control .components-unit-control-wrapper {
    flex: 1;
}
/* switch button */
.dimension_control__label .switch_button {
    cursor: pointer;
    align-self: center;
    height: 24px;
    width: 24px;
    padding: 2px;
    color: #777;
    transition: all .2 ease;
}
.dimension_control__label .switch_button:hover {
    color: #555;
}


/*    ColorPopupControl
__________________________________
*/
.color_popup_control {
    margin-bottom: var(--basic-margin);
}
.color_popup_control.flex {
    align-items: center;
}
.color_popup_control .components-circular-option-picker__option:focus:after{
    content: none;
}
.color_popup_control .components-circular-option-picker__option-wrapper {
    margin: 0;
}
.color_popup_control__popover  .components-popover__content > div {
    width: 280px;
    padding: 8px;
}
/* remove color indicator */
.color_popup_control__popover  .components-popover__content legend {
    display: none;
}

.color_gradient_popup_control {
    border: 1px solid rgba(0,0,0,.1);
    border-bottom-width: 0px;
}
.color_gradient_popup_control.single, 
.color_gradient_popup_control:last-of-type {
    border-bottom-width: 1px;
    margin-bottom: 16px;
}
.color_gradient_popup_control.small {
    height: 32px;
    margin-bottom: 0px;
}
.color_gradient_popup_control.small button {
    height: auto;
}
.color_popup_control__popover.color_gradient {
    margin-left: -45px;
}


/*    ButtonGroupControl
__________________________________
*/
.button_group_control {
    margin-top: var(--basic-margin);
    padding-bottom: var(--basic-margin);
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    flex-wrap: nowrap;
    overflow-x: auto;
}
.button_group_control .button {
    color: #575756;
    background-color: #fff;
    border-color: #CCCCCC !important;
    box-shadow: none !important;
    transition: color .1s ease, background-color .1s ease;
}
.button_group_control .button:hover {
    background-color: #F7F7F7;
}
.button_group_control .button.active,
.button_group_control .button.active:hover {
    background-color: #F2F2F2;
}
.button_group_control .button:not(:last-child) {
    margin-right: -1px;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}
.button_group_control .button:not(:first-child) {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}
.button_group_control .button svg {
    display: block;
}

.block-editor-block-styles__variants.layout--inline {
    gap: 4px;
    justify-content: flex-start;
}

.block-editor-block-styles__variants.layout--inline .block-editor-block-styles__item,
.block-editor-block-styles__variants.layout--inline .block-editor-block-styles__item.components-button {
    height: auto;
    width: auto;
}

.advanced_label + .block-editor-block-styles {
	margin-top: var(--basic-margin);
}

.components-panel__body > .block-editor-block-styles:not(:last-child) {
	margin-bottom: 24px;
}

/* margin before & after */
.advanced_label + .block-editor-block-styles {
    margin-top: var(--basic-margin);
}
.block-editor-block-styles + .components-base-control {
    margin-top: var(--basic-margin);
}


/*    DropShadowControl
__________________________________
*/
.drop_shadow_control {
    margin: var(--basic-margin) 0;
}
.drop_shadow_control__label {
    margin-bottom: calc(2 * var(--basic-margin));
}
.drop_shadow_control > .flex {
    margin-bottom: var(--basic-margin);
}
.drop_shadow_control > .flex {
    align-items: center;
}
.drop_shadow_control .inner_label {
    margin-bottom: 7px;
}
.drop_shadow_control .color_popup_control {
    margin-bottom: 0;
}
.drop_shadow_control .components-range-control {
    flex: 2;
}
.drop_shadow_control .button_group_control {
    padding: 0;
    margin: 0;
}
.drop_shadow_control .components-range-control,
.drop_shadow_control .components-range-control > div {
    margin-bottom: 0 !important;
}


/*    BorderControl
__________________________________
*/
/* greyd (deprecated) */
.border_control .components-base-control,
.border_control .components-base-control > div {
    margin-bottom: 0;
}
.border_control .dimension_control__inputs > .flex > div:not(:last-child) {
    flex: 1;
    margin-right: var(--basic-margin);
}
.border_control .dimension_control__inputs > .flex > div:nth-child(2) {
    flex: 2;
}
.border_control .dimension_control__inputs .inner_label {
    display: inline-block;
    margin-bottom: 5px;
}
/* core */
.components-border-control .components-range-control {
    flex-basis: auto;
    margin: 0 4px !important;
}


/*    Tabs
__________________________________
*/
.block-editor .greyd_tabs {
	margin: 0 0 calc( 2 * var(--basic-margin) ) 0;
	padding: 0 6px;
	gap: 6px;
	background: 0 0;
	width: 100%;
	overflow: hidden;
	height: auto;
}
.block-editor .greyd_tabs .tab {
    background: #fff;
    color: #949495;
    padding: 0 16px;
    margin: 0;
	height: auto;
	justify-content: center;
	padding: 0 10px;
	height: 34px;
	min-width: 50px;
}
.block-editor .greyd_tabs .tab.active {
    background: #fff;
    border-top: 1px solid var(--wp-admin-theme-color);
    color: var(--wp-admin-theme-color);
}
.block-editor .greyd_tabs .tab svg {
    vertical-align: middle;
    width: 17px;
    fill: currentColor;
    outline: none;
}


/*    Control Group
__________________________________
*/
.components-greyd-controlgroup {
    margin: 0px -8px var(--basic-margin);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
.components-greyd-controlgroup__item {
    position: relative;
    width: 100%;
    padding: 12px 30px 2px 12px;
    margin-bottom: 6px;
    background: #F2F2F2;
}
.components-greyd-controlgroup__item select {
    max-width: 100%;
}
.components-greyd-controlgroup__item .components-base-control {
    margin-bottom: 12px;
}
.components-greyd-controlgroup__item .components-form-token-field__input-container {
    background: #fff;
}
.components-greyd-controlgroup__item .components-form-token-field__label {
    display: none;
}
.components-greyd-controlgroup__remove,
.components-greyd-controlgroup__add {
    line-height: 0.8;
    padding: 3px;
    height: auto;
}
.components-greyd-controlgroup__remove {
    position: absolute;
    top: 0;
    right: 0;
}
.components-greyd-controlgroup__add {
    background: #F2F2F2;
}
.components-greyd-controlgroup__add.group_is_empty {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 10px 0;
}
.components-greyd-controlgroup__add.group_is_empty > * {
    margin: 0 5px;
}


/*    Section Control
__________________________________
*/
.components-panel__body.greyd-section-header {
    padding-top: 0;
    border-top: 0;
}
.greyd-section-button {
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 0 15px!important;
    min-height: 32px;
}


/*
----------------------------------------------------------

                    Toolbar

----------------------------------------------------------
*/
.block-library-classic__toolbar {
    margin-bottom: 8px !important;
    border: 1px solid #1e1e1e !important;
}
.block-library-classic__toolbar div,
.block-library-classic__toolbar i {
    font: normal 20px/1 dashicons !important;
    vertical-align: middle !important;
}
.block-library-classic__toolbar span {
    vertical-align: middle !important;
}
.block-library-classic__toolbar i.mce-caret {
    border: 6px solid transparent !important;
    border-top-color: #555d66 !important;
}

.greyd-toolbar-icon {
    width: 24px;
    height: 24px;
    border: 2px solid black;
    border-radius: 25px;
    font-weight: 600;
    line-height: 19px;
}
.components-dropdown-menu__menu-item > .greyd-toolbar-icon {
    margin-right: var(--basic-margin);
}
.components-button.is-opened > .greyd-toolbar-icon:not(.active),
.components-button:hover > .greyd-toolbar-icon:not(.active) {
    color: var(--wp-admin-theme-color);
    border-color: var(--wp-admin-theme-color);
}
.greyd-toolbar-icon.active {
    color: white;
    border: 2px solid black;
    background: black;
}
.components-button.is-opened > .greyd-toolbar-icon.active,
.components-button:hover > .greyd-toolbar-icon.active {
    background: var(--wp-admin-theme-color);
    border-color: var(--wp-admin-theme-color);
}


/*    Greyd Select Popover (for Images, Forms...)
__________________________________
*/
.components-greyd-select-popover {
    z-index: 999;
}
.components-greyd-select-popover .components-popover__content {
    padding: 12px 12px 4px;
    min-width: 200px;
}
.show-label .components-button::after {
    content: attr(aria-label);
    font-size: 12px;
}


/*    OptionsControl
__________________________________
*/
.components-base-control.greyd-options-control {
	width: 100%;
}

.components-base-control.greyd-options-control label {
	display: inline-block;
	margin-bottom: var(--basic-padding);
}

.components-base-control.greyd-options-control select {
	display: inline-block;
	margin-bottom: var(--basic-padding);
}


/*
----------------------------------------------------------

                    Plugin Features

----------------------------------------------------------
*/


/*    Customize preview window (size & color)
__________________________________
*/
.is-desktop-preview {
    height: auto !important;
}
.greyd_block_editor_preview .editor-styles-wrapper {
    background: #F0F0F0;
    --vw: 100vw !important;
}
/* post title */
.greyd_block_editor_preview .editor-styles-wrapper .editor-post-title {
    color: #1e1e1e;
    max-width: calc( var(--previewMaxWidth) + 1em);
    margin-left: auto;
    margin-right: auto;
    position: relative;
    background: 0 0;
}
/* post content */
.greyd_block_editor_preview .editor-styles-wrapper > .is-root-container.wp-block-post-content {
    position: relative;
    background: var(--previewBackgroundColor);
    max-width: var(--previewMaxWidth);
}
.greyd_block_editor_preview .is-desktop-preview .editor-styles-wrapper > .is-root-container.wp-block-post-content {
    margin: 0 auto 50px;
    padding: 20px calc(20px - var(--wp--style--block-gap)) calc(20px - var(--Pmargin));
    border-radius: 2px;
}
.greyd_block_editor_preview .editor-styles-wrapper > .is-root-container.is-desktop-preview.wp-block-post-content {
    margin: 0 auto 50px;
    padding: 20px calc(20px - var(--wp--style--block-gap)) calc(20px - var(--Pmargin));
    border-radius: 2px;
}
