@import 'shared/utils';
@import 'colors';
@import '~@automattic/calypso-color-schemes/src/shared/color-schemes';
@import '~@automattic/color-studio/dist/color-variables';

.wp-core-ui.wp-admin .wcc-root {
	a, a:visited {
		text-decoration: none;
	}

	// Buttons
	.button {
		background: var( --color-surface-backdrop );
		box-shadow: none;
		padding: 5px 14px 7px;

		.spinner {
			margin-bottom: -8px;

			.spinner__border {
				fill: transparent;
			}
		}
	}

	.label-settings__credit-card-description button.is-borderless {
		color: var( --color-primary );
	}

	.button.is-primary {
		background: var( --color-primary );
		border-color: var( --color-primary-dark );
		&:hover {
			background: var( --color-primary );
		}
		// overwrite core styles
		&[disabled],
		&:disabled,
		&.disabled {
			color: var( --color-surface-backdrop ) !important;
			background: var( --color-white ) !important;
			border-color: var( --color-surface-backdrop ) !important;
			text-shadow: none !important;
		}
		//wp-admin styles override the disabled button with !important, so need to do the same here

		&.is-busy {
			background-size: 120px 100% !important;
			background-image: linear-gradient(
				-45deg,
				var( --color-accent ) 28%,
				var( --color-accent-600 ) 28%,
				var( --color-accent-600 ) 72%,
				var( --color-accent ) 72%
			) !important;
			border-color: var( --color-accent-dark ) !important;
		}

		&.is-borderless {
			background: none;
		}
	}

	input[type=checkbox]:checked:before {
		font-family: initial;
		font-size: 16px;
		font-weight: 600;
		line-height: 0px;
		float: none;
	}

	%form-field {
		box-shadow: none;
		height: auto;
		&::placeholder {
			color: var( --color-neutral-200 );
		}
	}

	.form-input-validation {
		padding: 4px 0 4px 32px;
		.gridicon {
			float: none;
			vertical-align: middle;
		}
	}

	.form-server-error {
		.gridicon {
			float: none;
			vertical-align: middle;
		}
	}

	.settings-steps-summary {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

		.settings-step-summary {
			background-color: var( --color-surface-backdrop );
			border-radius: 5px;
			border: 1px var( --color-neutral-dark ) solid;
			padding: 12px;
			margin-bottom: 12px;
			flex-basis: 44%;

			h4 {
				font-weight: bold;
			}
		}
	}

	.share-package-option {
		display: inline-block;
		margin-top: 8px;
		text-align: left;
		font-size: 13px;
	}

	.global-notices {
		z-index: z-index( 'root', '.is-section-woocommerce .global-notices' ) !important; // Make sure notices are shown on top of modals
		top: 16px;
		right: 16px;
		@include breakpoint( '<660px' ) {
			top: -5px;
			right: 0;
		}

		.notice {
			max-width: 740px;
			padding: 0;

			@include breakpoint( '<660px' ) {
				margin-left: 0;
			}
		}

		.notice__text {
			font-size: 15px;

			@include breakpoint( '>660px' ) {
				margin-top: 1px;
			}
		}
	}

	// Custom styles
	&:not(.label-purchase-modal) {
		max-width: 100%;
		padding: 20px;
		position: relative;
	}

	&.wc-connect-shipping-settings {
		margin-top: 6px;
	}

	// WP style conflict resets
	.card {
		min-width: 0;
		max-width: none;
		border: 0;
	}

	p {
		margin: 0;
		font-size: 100%;
	}

	select {
		height: auto;
		box-shadow: none;
		width: 100%;
		line-height: 18px;
		padding: 9px 32px 12px 14px;
	}

	.button {
		height: auto;

		&:focus {
			box-shadow: none;
		}
	}

	// .spinner is used both for the Calypso <Spinner> component and WP-admin. This rules revert the WP-Admin ones
	.spinner {
		background: none;
		visibility: visible;
		float: none;
		vertical-align: inherit;
		opacity: 1;
		width: inherit;
		height: inherit;
	}

	@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

	.form-troubles {
		 opacity: 0;
		 animation: fadeIn ease-in 1;
		 animation-fill-mode: forwards;
		 animation-duration: .5s;
		 animation-delay: 3s;
	 }

	.wc-connect-no-priv-settings {
		background: var( --color-white );
		padding: 20px;
	}

	// Gridicons
	.gridicon {
		fill: currentColor;
	}

	.label-settings__labels-container {
		.label-settings__external {
			display: block !important;
		}

		.label-settings__internal {
			display: none;
		}
	}

	// Shared
	@import 'shared/forms'; // form styling

	// Main
	@import 'main'; // global layout and responsive styles

	// Components
	@import 'components';
	@import 'fix-image-paths';

	@import 'woocommerce/woocommerce-services/style';

	// Hide  WordPress Component style checkboxes.
	input[type='checkbox'] + svg.components-checkbox-control__checked {
		display: none;
	}

	.components-base-control.is-error {
		.components-text-control__input {
			color: var( --color-error );
			border-color: var( --color-error );
		}
	}
}

@import 'components/dialog/style';
@import 'components/popover/style';
@import 'components/tooltip/style';
@import 'components/migration/style';

// Just the tooltip WordPress Component styles is all we use for now.
@import "~@wordpress/base-styles/colors";
@import "~@wordpress/base-styles/variables";
@import "~@wordpress/base-styles/z-index";
@import '~@wordpress/components/src/tooltip/style.scss';
@import '~@wordpress/components/src/external-link/style.scss';
@import '~@wordpress/components/src/visually-hidden/style.scss';

#woocommerce-order-label .inside {
	margin: 0;
	padding: 0;
}

.wc-connect-admin-dev-notice {
	p {
		font-style: italic;
		color: var( --color-neutral-light );
	}
}

.wcs-pointer-page-dimmer {
	display: none;
	position: fixed;
	background-color: black;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 9998;
	opacity: 0.5;
}

// Gridicons
.gridicon {
	fill: currentColor;
}

#woocommerce-services-shipping-debug .packing-log {
	white-space: pre-wrap;
}

// When metabox in sidebar display same as small screen.
.wp-core-ui.wp-admin #side-sortables .wcc-root .shipping-label__container {
	display: block;
}

.wp-core-ui.wp-admin #woocommerce-order-shipment-tracking {
	.wcc-root.wc-connect-create-shipping-label {
		padding: 0;

		.shipping-label__container {
			.button.is-placeholder, .button.is-primary {
				border-width: 1px;
				border-style: solid;
				border-radius: 3px;
				background: #0085ba;
				border-color: #0073aa #006799 #006799;
				box-shadow: 0 1px 0 #006799;
				color: #fff;
				text-decoration: none;
				text-shadow: 0 -1px 1px #006799, 1px 0 1px #006799, 0 1px 1px #006799, -1px 0 1px #006799;
			}
		}
	}
}

// Adding here so it will not have the .wp-core-ui.wp-admin .wcc-root prefix
.shipping-label__item-menu-reprint-expired.popover__menu-item {
	cursor: pointer;
	background: transparent;
	color: $muriel-gray-100;
	.gridicon {
		color: $muriel-gray-100;
	}
}

// Adding here so it will not have the .wp-core-ui.wp-admin .wcc-root prefix
@import 'woocommerce/woocommerce-services/views/carrier-accounts/dialog-styles';
