/**
 * Editor Styles
 */
.edit-post-pinned-plugins {
	margin-left: 5px;
}

// .block-editor-block-inspector .components-base-control {
    // 	padding: 8px;
    // }
.components-base-control .components-base-control__label {
	display: block;
	margin-bottom: 0px;
}

.components-font-size-picker__controls .components-font-size-picker__number {
	margin: 0px;
	border-radius: 2px;
}

.edit-post-pinned-plugins .components-icon-button:not(.is-toggled) .c9-plugin-icon svg,
.edit-post-pinned-plugins .components-icon-button.is-toggled .c9-plugin-icon svg,
.edit-post-pinned-plugins .components-icon-button:hover .c9-plugin-icon svg {
	display: block;
	width: auto;

	* {
		stroke: initial !important; // stylelint-disable-line
		fill: url(#c9-feather-logo-gradient_svg__a); // stylelint-disable-line
	}

	height: 16px;
}

// default Gutenberg icons is 20x20, but we use 24x24
// so, we need to compensate the padding
.edit-post-pinned-plugins .components-icon-button .c9-plugin-icon span {
	margin: -2px;
}

.block-editor-editor-skeleton__sidebar .plugin-c9-panel {
	.plugin-c9-panel-button {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		width: 100%;
		height: auto;
		padding: 10px 0px;
		margin-bottom: 16px;
		flex-shrink: 0;
		overflow: hidden;
		color: inherit;
		text-align: center;
		cursor: pointer;
		background: none;
		border: 1px solid;
		border-color: rgba(79, 89, 105, 0.2);
		border-radius: 4px;
		transition: 0.2s color, 0.2s background-color, 0.2s border-color,
			0.2s box-shadow;

		&,
		&:hover,
		&:focus,
		&:focus:enabled,
		&:active,
		&:active:enabled {
			border-color: rgba(79, 89, 105, 0.2);
			box-shadow: none;
		}

		&:hover,
		&:active,
		&:active:enabled {
			color: #191e23;
			background-color: #f8f9f9;
		}

		&:focus,
		&:focus:enabled {
			color: #191e23;
			border-color: #007fac;
			box-shadow: 0 0 0 2px #00a0d2;
		}

		span {
			display: block;
			margin: 0 auto;
			margin-top: 3px;
			text-align: center;
			height: 24px;
		}
	}
}

.c9-block-default-palette .components-color-palette__item,
.c9-block-default-palette .components-color-palette__item-wrapper {
	display: inline-block;
}

.c9-block-default-palette .components-color-palette__item svg {
	color: inherit;
}

/* sidebar buttons */
.block-editor-editor-skeleton__sidebar .components-panel__body>div>span {
	display: block;
}

/* flip container c9 grid element height vertically */
.c9-height-range-control {
	overflow: visible;
	transform: rotate(90deg) translateY(80px);
	margin-top: 125px;
}

.c9-height-range-control .components-base-control__label {
	text-align: right;
	z-index: 2;
}

.c9-height-range-control .components-range-control__slider {
	z-index: 4;
}

.c9-height-range-control .components-range-control .dashicon {
	margin-right: 0px;
	z-index: 5;
}

.c9-height-range-control .components-base-control__label,
.c9-height-range-control .components-range-control__number {
	transform: rotate(-90deg);
}

.c9-container-base-control>.components-base-control__field {
	min-height: 160px;
}