/** @format */

@import './gutenberg-components.scss';

// By using CSS variables, we can switch the spacing rhythm using a single media query
:root {
	--main-gap: 24px;
}
@media (max-width: 782px) {
	:root {
		--main-gap: 16px;
	}
}

// Set up animation
@keyframes loading-fade {
	0% {
		opacity: 0.7;
	}
	50% {
		opacity: 1;
	}
	100% {
		opacity: 0.7;
	}
}

// css resets some wp-admin specific rules so that the app fits better in the extension container
.woocommerce-page {
	.wrap {
		margin: 0;
	}

	#wpcontent,
	#wpbody-content {
		padding: 0;
		overflow-x: hidden !important;
	}

	@include breakpoint( '<782px' ) {
		// WP breakpoint for mobile menu
		.wp-responsive-open #wpbody {
			right: -14.5em;
		}
	}

	@include breakpoint( '>960px' ) {
		#toplevel_page_woocommerce.menu-top > a:focus,
		#toplevel_page_wcadmin--analytics.menu-top > a:focus {
			padding-bottom: 1px;
		}
	}

	.wp-has-current-submenu:after {
		right: 0;
		border: 8px solid transparent;
		content: ' ';
		height: 0;
		width: 0;
		position: absolute;
		pointer-events: none;
		border-right-color: #f1f1f1;
		top: 0;
		margin-top: 10px;

		@include breakpoint( '<960px' ) {
			border-width: 4px;
			margin-top: 14px;
		}
	}
}

.woocommerce-embed-page {
	#wpcontent,
	#wpbody-content {
		overflow-x: initial !important;
	}

	#wpbody-content .notice {
		margin-top: 15px;
	}

	.wrap {
		padding: 20px;
	}

	#screen-meta {
		border-right: 0;
		margin: 0;
	}

	.notice {
		margin: 5px 15px 2px;
		padding: 1px 12px;
	}

	.woocommerce-layout__header {
		&.is-scrolled {
			box-shadow: 0 8px 16px 0 rgba(85, 93, 102, 0.3);
		}

		.woocommerce-layout__header-breadcrumbs {
			margin-top: 0;
			margin-bottom: 0;
		}
	}

	/**
	* Hides screen meta and links when notices are open since the elements get moved around.
	* The !important overwrites an inline wp-admin style.
	*/
	#screen-meta.is-hidden-by-notices,
	#screen-meta-links.is-hidden-by-notices {
		display: none !important;
	}

	.woocommerce-layout__primary {
		margin: 0;
		padding-top: 80px;

		@include breakpoint( '782px-1100px' ) {
			padding-top: 60px;
		}
	}

	@keyframes isLoaded {
		0% {
			opacity: 0;
		}
		100% {
			opacity: 1;
		}
	}

	.woocommerce-layout__activity-panel-tabs {
		animation: isLoaded;
		animation-duration: 2000ms;
	}
}

.woocommerce-layout * {
	box-sizing: border-box;
}

.woocommerce-layout__notice-list-hide {
	display: none;
}

@keyframes slideDown {
	0% {
		transform: translateY(-100%);
		opacity: 0;
	}
	100% {
		transform: translateY(0);
		opacity: 1;
	}
}

.woocommerce-layout__notice-list-show {
	margin-top: 100px;
	animation: slideDown;
	animation-duration: 1s;

	&.has-screen-meta-links {
		display: inline-block;
		width: 100%;
	}

	@include breakpoint( '<782px' ) {
		margin-top: 115px;
	}
}

.woocommerce-embed-page {
	.woocommerce-layout__notice-list-show {
		margin-top: 10px;
		margin-bottom: 16px;

		@include breakpoint( '<600px' ) {
			margin-top: 80px;
			margin-bottom: -16px;
		}

		@include breakpoint( '600px-782px' ) {
			margin-top: 32px;
		}
	}
}

#wp__notice-list-uncollapsed {
	visibility: hidden;
	margin: -2px 0 0;
}

#wp__notice-list {
	padding-right: 20px;
}

.woocommerce-layout__notice-list .jitm-card {
	margin: 5px 15px 2px;
	padding: 1px 12px;
}

#wpfooter {
	display: none;
}

.wp-responsive-open {
	.woocommerce-layout__header {
		margin-left: 2px;
	}

	@include breakpoint( '<782px' ) {
		.woocommerce-layout__activity-panel-wrapper.is-open,
		.woocommerce-layout__activity-panel-tabs {
			width: calc(100vw - 190px);
		}
	}
}

@include breakpoint( '<600px' ) {
	#wpadminbar,
	.jetpack-masterbar #wpadminbar {
		position: fixed;
	}
}

// Temporary fix for compability with the Jetpack masterbar
// See https://github.com/Automattic/jetpack/issues/9608
// !important rules overwrite some existing !important rules
.jetpack-masterbar {
	@include breakpoint( '<782px' ) {
		&.wp-admin .wrap h1 {
			padding-left: 0;
		}

		#wpadminbar li.menupop.my-sites {
			margin-left: 55px;
		}

		#wpadminbar #wp-admin-bar-menu-toggle {
			top: -5px;
			left: -5px;
			width: 60px;

			.ab-icon:before {
				color: $white;
			}

			a {
				padding: 0 8px 4px 8px !important;
			}

			a:hover {
				background: #333;
			}
		}

		.wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle {
			left: -5px;
			width: 60px;

			.ab-icon:before {
				color: $white !important;
			}

			a {
				background: #333;
			}
		}
	}
}