/* show skip links if selected */
.wp-block-blockstrap-blockstrap-widget-skip-links.bs-skip-links.is-selected {
	transform: translate(-50%, 0%);
}

/* Show modal when selected in Editor */
.modal {
	@at-root .modal:has(.wp-block-blockstrap-blockstrap-widget-modal.is-selected),
	.modal:has(.wp-block-blockstrap-blockstrap-widget-modal.has-child-selected) {
		display: block;
		position: relative;
		opacity: 1 !important;
	}
}

/* Show offcanvas when selected in Editor */
.offcanvas {
	@at-root .offcanvas:has(.wp-block-blockstrap-blockstrap-widget-offcanvas.is-selected),
	.offcanvas:has(.wp-block-blockstrap-blockstrap-widget-offcanvas.has-child-selected) {
		transform: none !important;
	}
}

/* Show offcanvas when selected in Editor */
#editor {
	@at-root {
		#editor .offcanvas.offcanvas-top:has(.wp-block-blockstrap-blockstrap-widget-offcanvas.is-selected),
		#editor .offcanvas.offcanvas-start:has(.wp-block-blockstrap-blockstrap-widget-offcanvas.is-selected),
		#editor .offcanvas.offcanvas-end:has(.wp-block-blockstrap-blockstrap-widget-offcanvas.is-selected),
		#editor .offcanvas:has(.wp-block-blockstrap-blockstrap-widget-offcanvas.has-child-selected) {
			top: 61px !important;
		}
	}

	.is-sidebar-opened {
		@at-root {
			#editor .offcanvas.offcanvas-top:has(.wp-block-blockstrap-blockstrap-widget-offcanvas.is-selected, .is-sidebar-opened),
			#editor .offcanvas.offcanvas-bottom:has(.wp-block-blockstrap-blockstrap-widget-offcanvas.is-selected, .is-sidebar-opened),
			#editor .offcanvas.offcanvas-end:has(.wp-block-blockstrap-blockstrap-widget-offcanvas.is-selected, .is-sidebar-opened),
			#editor .offcanvas:has(.wp-block-blockstrap-blockstrap-widget-offcanvas.has-child-selected, .is-sidebar-opened) {
				right: 310px !important;
			}
		}
	}
}



/* show responsive menu if selected */
@media ( max-width: 840px ) {
	.wp-block-blockstrap-blockstrap-widget-navbar {
		&.is-selected, &.has-child-selected {
			.wp-block-blockstrap-blockstrap-widget-nav {
				display: block !important;
			}
		}
	}

	// fix for fully transparent nav menu open on mobile
	.navbar.bg-transparent.navbar-dark{
		background: #343a40 !important;
	}
	.navbar.bg-transparent.navbar-light{
		background: #f8f9fa !important;
	}
}