@use "../variables/mixins" as mixins;
@use "../variables/colors";
@use "~@wordpress/base-styles/breakpoints" as wp-breakpoints;

.edd-pass-handler {
	&__description {
		display: grid;
		gap: 1em;
		margin-bottom: 1em;
	}

	&__control {
		display: flex;
		gap: 4px;
		flex-wrap: wrap;

		> input {
			max-width: 250px !important;
		}

		+ .notice {
			max-width: 400px;
			margin-top: 1em;
		}

		.button {
			margin: 0;
		}
	}

	&__loading {
		display: flex;
		align-items: center;
		gap: .5em;

		&:before {
			background: none;
			display: block;
			@include mixins.edd-spinner(
				12px,
				colors.$wp-input-border,
				colors.$wp-alternate
			);
		}
	}

	&__verifying-wrap {
		display: flex;
		position: fixed;
		left: 36px;
		right: 0;
		top: 0;
		bottom: 0;
		background: rgba(0,0,0,.5);
		justify-content: center;
		align-items: center;
		z-index: 110;

		p {
			background: #fff;
			border: 1px solid colors.$wp-input-border;
			border-radius: 4px;
			padding: 2em;
		}

		@media only screen and (min-width: wp-breakpoints.$break-large) {
			.wp-admin:not(.folded) & {
				left: 160px;
			}
		}

		@media only screen and (max-width: wp-breakpoints.$break-medium) {
			left: 0;
		}
	}

	&__verifying ul#adminmenu #menu-posts-download ul.wp-submenu li.current a:before {
		border-right-color: #787878;
	}

	&__actions {
		display: flex;
		gap: 4px;
	}

	&__heading {
		width: 100%;
	}
}