/**
 * The following styles get applied inside the editor only.
 *
 * Replace them with your own styles or remove the file completely.
 */

.orphic-ui-spacer-responsive-desktop,
.orphic-ui-spacer-responsive-tablet,
.orphic-ui-spacer-responsive-mobile {
	background-color: lightgray;
	width: 33%;
	position: relative;
	// transition: height 0.3s ease;
}

.orphic-ui-spacer-responsive {
	display: flex;
	width: 100%;
}

.orphic-ui-spacer-responsive__button {
	width: 15px;
	aspect-ratio: 1/1;
	background-color: white;
	border: 2px solid var(--wp--preset--color--vivid-cyan-blue);
	border-radius: 100%;
	bottom: 0;
	left: 50%;
	cursor: pointer;
}
.orphic-ui-spacer-responsive__bar {
	width: 100%;
	height: 30px;
	position: absolute;
	transform: translateY(50%);
	bottom: 0;
	cursor: ns-resize;
	display: flex;
	justify-content: center;
	align-items: center;
}

.orphic-ui-spacer-responsive__box {
	width: 33.33% !important;
	background-color: transparent;
	flex-shrink: 1;
	position: relative;
}

.orphic-ui-spacer-responsive__height__info {
	position: absolute;
	right: 5px;
	bottom: 5px;
	color: black;
	font-size: 10px;
	font-weight: bold;
	padding: 2px 5px;
	border-radius: 5px;
	transition: 1s;
	opacity: 0;
}

.orphic-ui-spacer-responsive__height__info.active {
	transition: 0s;
	opacity: 1;
}

.wp-block-orphic-ui-spacer-responsive:hover .orphic-ui-spacer-responsive__box,
.wp-block.is-selected .orphic-ui-spacer-responsive__box {
	background-color: #0000001a;
	border: 1px solid #eee !important;
}

.wp-block-orphic-ui-spacer-responsive .components-resizable-box__handle::after {
	display: none;
}
.wp-block.is-selected .components-resizable-box__handle::after {
	display: block;
}
