.o-options-general {
	.components-toggle-control {
		.components-base-control__field {
			display: flex;
			align-items: center;
			margin-bottom: 0;
		}
	}

	.o-onboarding-button {
		&.has-icon.has-text {
			width: 100%;
			justify-content: center;
			color: #000;
			box-shadow: inset 0 0 0 1px #e0e0e0;
		}
	}
}

.padding-20 {
	padding: 20px;
}

.components-button.o-navi-button {
	position: relative;
	padding: 16px 48px 16px 16px;
	outline: none;
	width: 100%;
	font-weight: 500;
	text-align: left;
	color: #1e1e1e;
	box-shadow: none;
	transition: background .1s ease-in-out;
	height: auto;  border-top: 1px solid #e0e0e0;
	border-bottom: 1px solid #e0e0e0;

	&:hover {
		color: #1e1e1e;
		background: #f0f0f0;
	}

	&:focus {
		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
		border-radius: 0;
	}

	svg {
		width: 24px;
		height: 24px;
		position: absolute;
		right: 16px;
	}

	&.o-navi-button-back {
		padding: 12px 48px 12px 16px;

		svg {
			position: relative;
			left: 0;
		}
	}
}

.o-options-global-defaults {
	.o-options-block-item {
		display: flex;
		background: #ffffff;
		border: 1px solid #d5dadf;
		margin: 10px 20px;

		&:hover {
			background: #fafafb;
		}

		&.editable {
			.o-options-block-item-label {
				flex-basis: 40%;
				flex-grow: 1;
				padding-right: 5px;
			}
		}

		&.hidden {
			color: #e5e5e5;

			.o-options-block-item-icon {
				svg {
					fill: #E5E5E5 !important;
				}
			}

			.o-options-block-item-label {
				color: #E5E5E5;
			}
		}

		.o-options-block-item-icon {
			display: flex;
			justify-content: center;
			align-self: center;
			flex-basis: 20%;
			padding: 15px 0;

			svg {
				width: 18px;
				height: 18px;
			}
		}

		.o-options-block-item-label {
			cursor: default;
			flex-basis: 60%;
			display: flex;
			align-items: center;

			&::selection {
				background: none;
			}
		}

		.o-options-block-item-button {
			height: auto;
			flex-basis: 20%;
			justify-content: center;
			padding: 10px 5px;
			border-left: 1px solid #d5dadf;
			border-radius: 0;

			&.components-icon-button:not(:disabled):not([aria-disabled="true"]):not(.is-default) {

				&:hover {
					background: #fafafb;
					border-radius: 0;
					box-shadow: none;
				}
			}

			svg,
			.dashicon {
				margin: 2px;
			}
		}
	}

	.components-placeholder {
		box-shadow: none;
	}
}

.o-options-global-defaults-modal {
	.components-panel__body-toggle {
		padding: 15px 24px;

		.components-panel__arrow {
			right: 22px;
		}
	}

	:is(
		.components-unit-control-wrapper,
		.components-base-control,
		.o-responsive-control
	) {
		padding-left: 10px;
		margin: 0;
	}

	div:not( .components-base-control__field ) {
		 > .o-sizing-control {
			padding: 10px;
			margin: 0;
		}
	}

	.components-base-control {
		.components-base-control__label {
			margin-bottom: 1em;
		}

		:is(.components-base-control, .components-font-size-picker__header  ) {
			padding: 0;
		}
	}

	:is(
		.o-typo-header,
		.o-control-panel-control,
		.components-font-size-picker__header,
		.component-box-control__header,
		.component-box-control__header-control-wrapper
	) {
		padding-left: 10px;
	}

	.o-responsive-control :is(
		.components-base-control,
		.component-box-control__header,
		.components-font-size-picker__header,
		.component-box-control__header-control-wrapper
	) {
		padding: 0;
	}

	.components-font-size-picker__controls {
		margin: 0;
	}

	hr {
		border: 0.1px solid #f3f3f3;
	}

	.o-options-global-defaults-actions {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		padding: 15px 24px;

		button {
			height: auto;
			line-height: 28px;
			padding: 0 12px 2px;

			&.is-primary {
				margin-left: 10px;
			}
		}
	}
}

.o-sidebar-toggle:is(.components-base-control) {
	margin-bottom: 0px;
}
