astra_off_canvas_static_css()

function astra_off_canvas_static_css() {
	$off_canvas_css = '
	.ast-off-canvas-active body.ast-main-header-nav-open {
		overflow: hidden;
	}
	.ast-mobile-popup-drawer .ast-mobile-popup-overlay {
		background-color: rgba(0, 0, 0, 0.4);
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		visibility: hidden;
		opacity: 0;
		transition: opacity 0.2s ease-in-out;
	}
	.ast-mobile-popup-drawer .ast-mobile-popup-header {
		-js-display: flex;
		display: flex;
		justify-content: flex-end;
		min-height: calc( 1.2em + 24px);
	}
	.ast-mobile-popup-drawer .ast-mobile-popup-header .menu-toggle-close {
		background: transparent;
		border: 0;
		font-size: 24px;
		line-height: 1;
		padding: .6em;
		color: inherit;
		-js-display: flex;
		display: flex;
		box-shadow: none;
	}
	.ast-mobile-popup-drawer.ast-mobile-popup-full-width .ast-mobile-popup-inner {
		max-width: none;
		transition: transform 0s ease-in, opacity 0.2s ease-in;
	}
	.ast-mobile-popup-drawer.active {
		left: 0;
		opacity: 1;
		right: 0;
		z-index: 100000;
		transition: opacity 0.25s ease-out;
	}
	.ast-mobile-popup-drawer.active .ast-mobile-popup-overlay {
		opacity: 1;
		cursor: pointer;
		visibility: visible;
	}
	body.admin-bar .ast-mobile-popup-drawer, body.admin-bar .ast-mobile-popup-drawer .ast-mobile-popup-inner {
		top: 32px;
	}
	body.admin-bar.ast-primary-sticky-header-active .ast-mobile-popup-drawer, body.admin-bar.ast-primary-sticky-header-active .ast-mobile-popup-drawer .ast-mobile-popup-inner  {
		top: 0px;
	}
	@media (max-width: 782px) {
		body.admin-bar .ast-mobile-popup-drawer,body.admin-bar .ast-mobile-popup-drawer .ast-mobile-popup-inner {
		  top: 46px;
		}
	}
	.ast-mobile-popup-content > *,
	.ast-desktop-popup-content > *{
	  padding: 10px 0;
	  height: auto;
	}

	.ast-mobile-popup-content > *:first-child,
	.ast-desktop-popup-content > *:first-child{
	  padding-top: 10px;
	}

	.ast-mobile-popup-content > .ast-builder-menu,
	.ast-desktop-popup-content > .ast-builder-menu{
	  padding-top: 0;
	}
	.ast-mobile-popup-content > *:last-child,
	.ast-desktop-popup-content > *:last-child {
	  padding-bottom: 0;
	}
	.ast-mobile-popup-drawer .ast-mobile-popup-content .ast-search-icon,
	.ast-mobile-popup-drawer .main-header-bar-navigation .menu-item-has-children .sub-menu,
	.ast-mobile-popup-drawer .ast-desktop-popup-content .ast-search-icon {
	  display: none;
	}

	.ast-mobile-popup-drawer .ast-mobile-popup-content .ast-search-menu-icon.ast-inline-search label,
	.ast-mobile-popup-drawer .ast-desktop-popup-content .ast-search-menu-icon.ast-inline-search label {
	  width: 100%;
	}
	.ast-mobile-popup-content .ast-builder-menu-mobile .main-header-menu, .ast-mobile-popup-content .ast-builder-menu-mobile .main-header-menu .sub-menu {
		background-color: transparent;
	}
	.ast-mobile-popup-content .ast-icon svg {
		height: .85em;
		width: .95em;
		margin-top: 15px;
	}
	.ast-mobile-popup-content .ast-icon.icon-search svg {
		margin-top: 0;
	}
	.ast-desktop .ast-desktop-popup-content .astra-menu-animation-slide-up > .menu-item > .sub-menu,
	.ast-desktop .ast-desktop-popup-content .astra-menu-animation-slide-up > .menu-item .menu-item > .sub-menu,
	.ast-desktop .ast-desktop-popup-content .astra-menu-animation-slide-down > .menu-item > .sub-menu,
	.ast-desktop .ast-desktop-popup-content .astra-menu-animation-slide-down > .menu-item .menu-item > .sub-menu,
	.ast-desktop .ast-desktop-popup-content .astra-menu-animation-fade > .menu-item > .sub-menu,
	.ast-mobile-popup-drawer.show,
	.ast-desktop .ast-desktop-popup-content .astra-menu-animation-fade > .menu-item .menu-item > .sub-menu{
	  opacity: 1;
	  visibility: visible;
	}';

	if ( is_rtl() ) {
		$off_canvas_css .= '
		.ast-mobile-popup-drawer {
			position: fixed;
			top: 0;
			bottom: 0;
			right: -99999rem;
			left: 99999rem;
			transition: opacity 0.25s ease-in, right 0s 0.25s, left 0s 0.25s;
			opacity: 0;
		}
		.ast-mobile-popup-drawer .ast-mobile-popup-inner {
			width: 100%;
			transform: translateX(100%);
			max-width: 90%;
			left: 0;
			top: 0;
			background: #fafafa;
			color: #3a3a3a;
			bottom: 0;
			opacity: 0;
			position: fixed;
			box-shadow: 0 0 2rem 0 rgba(0, 0, 0, 0.1);
			-js-display: flex;
			display: flex;
			flex-direction: column;
			transition: transform 0.2s ease-in, opacity 0.2s ease-in;
			overflow-y:auto;
			overflow-x:hidden;
		}
		.ast-mobile-popup-drawer.ast-mobile-popup-left .ast-mobile-popup-inner {
			transform: translateX(-100%);
			left: auto;
			right: 0;
		}
		.ast-hfb-header.ast-default-menu-enable.ast-header-break-point .ast-mobile-popup-drawer .main-header-bar-navigation ul .menu-item .sub-menu .menu-link {
			padding-right: 30px;
		}
		.ast-hfb-header.ast-default-menu-enable.ast-header-break-point .ast-mobile-popup-drawer .main-header-bar-navigation .sub-menu .menu-item .menu-item .menu-link {
			padding-right: 40px;
		}
		.ast-mobile-popup-drawer .main-header-bar-navigation .menu-item-has-children > .ast-menu-toggle {
			left: calc( 20px - 0.907em);
		}
		.ast-mobile-popup-drawer.content-align-flex-end .main-header-bar-navigation .menu-item-has-children > .ast-menu-toggle {
			right: calc( 20px - 0.907em);
		}
		.ast-mobile-popup-drawer .ast-mobile-popup-content .ast-search-menu-icon,
		.ast-mobile-popup-drawer .ast-mobile-popup-content .ast-search-menu-icon.slide-search,
		.ast-mobile-popup-drawer .ast-desktop-popup-content .ast-search-menu-icon,
		.ast-mobile-popup-drawer .ast-desktop-popup-content .ast-search-menu-icon.slide-search {
			width: 100%;
			position: relative;
			display: block;
			left: auto;
			transform: none;
		}
		.ast-mobile-popup-drawer .ast-mobile-popup-content .ast-search-menu-icon.slide-search .search-form,
		.ast-mobile-popup-drawer .ast-mobile-popup-content .ast-search-menu-icon .search-form,
		.ast-mobile-popup-drawer .ast-desktop-popup-content .ast-search-menu-icon.slide-search .search-form,
		.ast-mobile-popup-drawer .ast-desktop-popup-content .ast-search-menu-icon .search-form {
			left: 0;
			visibility: visible;
			opacity: 1;
			position: relative;
			top: auto;
			transform: none;
			padding: 0;
			display: block;
			overflow: hidden;
		}

		.ast-mobile-popup-drawer .ast-mobile-popup-content .ast-search-menu-icon.ast-inline-search .search-field,
		.ast-mobile-popup-drawer .ast-mobile-popup-content .ast-search-menu-icon .search-field,
		.ast-mobile-popup-drawer .ast-desktop-popup-content .ast-search-menu-icon.ast-inline-search .search-field,
		.ast-mobile-popup-drawer .ast-desktop-popup-content .ast-search-menu-icon .search-field {
			width: 100%;
			padding-left: 5.5em;
		}
		.ast-mobile-popup-drawer .ast-mobile-popup-content .ast-search-menu-icon .search-submit,
		.ast-mobile-popup-drawer .ast-desktop-popup-content .ast-search-menu-icon .search-submit {
			display: block;
			position: absolute;
			height: 100%;
			top: 0;
			left: 0;
			padding: 0 1em;
			border-radius: 0;
		}';
	} else {
		$off_canvas_css .= '
		.ast-mobile-popup-drawer {
			position: fixed;
			top: 0;
			bottom: 0;
			left: -99999rem;
			right: 99999rem;
			transition: opacity 0.25s ease-in, left 0s 0.25s, right 0s 0.25s;
			opacity: 0;
		}
		.ast-mobile-popup-drawer .ast-mobile-popup-inner {
			width: 100%;
			transform: translateX(100%);
			max-width: 90%;
			right: 0;
			top: 0;
			background: #fafafa;
			color: #3a3a3a;
			bottom: 0;
			opacity: 0;
			position: fixed;
			box-shadow: 0 0 2rem 0 rgba(0, 0, 0, 0.1);
			-js-display: flex;
			display: flex;
			flex-direction: column;
			transition: transform 0.2s ease-in, opacity 0.2s ease-in;
			overflow-y:auto;
			overflow-x:hidden;
		}
		.ast-mobile-popup-drawer.ast-mobile-popup-left .ast-mobile-popup-inner {
			transform: translateX(-100%);
			right: auto;
			left: 0;
		}
		.ast-hfb-header.ast-default-menu-enable.ast-header-break-point .ast-mobile-popup-drawer .main-header-bar-navigation ul .menu-item .sub-menu .menu-link {
			padding-left: 30px;
		}
		.ast-hfb-header.ast-default-menu-enable.ast-header-break-point .ast-mobile-popup-drawer .main-header-bar-navigation .sub-menu .menu-item .menu-item .menu-link {
			padding-left: 40px;
		}
		.ast-mobile-popup-drawer .main-header-bar-navigation .menu-item-has-children > .ast-menu-toggle {
			right: calc( 20px - 0.907em);
		}
		.ast-mobile-popup-drawer.content-align-flex-end .main-header-bar-navigation .menu-item-has-children > .ast-menu-toggle {
			left: calc( 20px - 0.907em);
		}
		.ast-mobile-popup-drawer .ast-mobile-popup-content .ast-search-menu-icon,
		.ast-mobile-popup-drawer .ast-mobile-popup-content .ast-search-menu-icon.slide-search,
		.ast-mobile-popup-drawer .ast-desktop-popup-content .ast-search-menu-icon,
		.ast-mobile-popup-drawer .ast-desktop-popup-content .ast-search-menu-icon.slide-search {
			width: 100%;
			position: relative;
			display: block;
			right: auto;
			transform: none;
		}
		.ast-mobile-popup-drawer .ast-mobile-popup-content .ast-search-menu-icon.slide-search .search-form,
		.ast-mobile-popup-drawer .ast-mobile-popup-content .ast-search-menu-icon .search-form,
		.ast-mobile-popup-drawer .ast-desktop-popup-content .ast-search-menu-icon.slide-search .search-form,
		.ast-mobile-popup-drawer .ast-desktop-popup-content .ast-search-menu-icon .search-form {
			right: 0;
			visibility: visible;
			opacity: 1;
			position: relative;
			top: auto;
			transform: none;
			padding: 0;
			display: block;
			overflow: hidden;
		}

		.ast-mobile-popup-drawer .ast-mobile-popup-content .ast-search-menu-icon.ast-inline-search .search-field,
		.ast-mobile-popup-drawer .ast-mobile-popup-content .ast-search-menu-icon .search-field,
		.ast-mobile-popup-drawer .ast-desktop-popup-content .ast-search-menu-icon.ast-inline-search .search-field,
		.ast-mobile-popup-drawer .ast-desktop-popup-content .ast-search-menu-icon .search-field {
			width: 100%;
			padding-right: 5.5em;
		}
		.ast-mobile-popup-drawer .ast-mobile-popup-content .ast-search-menu-icon .search-submit,
		.ast-mobile-popup-drawer .ast-desktop-popup-content .ast-search-menu-icon .search-submit {
			display: block;
			position: absolute;
			height: 100%;
			top: 0;
			right: 0;
			padding: 0 1em;
			border-radius: 0;
		}';
	}

	// Adding this CSS to bottom because it needs to be load after above style loads. As it required to hide/show flyout offcanvas.
	$off_canvas_css .= '
	.ast-mobile-popup-drawer.active .ast-mobile-popup-inner {
		opacity: 1;
		visibility: visible;
		transform: translateX(0%);
	}';

	return Astra_Enqueue_Scripts::trim_css( $off_canvas_css );
}