.button.edd-extension-manager__action-upgrade {
	background-color: $wp-green-50;
	color: $white;

	&:hover,
	&:active {
		background-color: darken($wp-green-50,10%);
		color: $white;
	}
}

.edd-extension-manager__card--installer .button {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 5px;
	margin: 0;

	&:before {
		margin: 0;
	}

	&.edd-button__install {
		color: $wp-input-text;
		border-color: $wp-input-border;

		&:before {
			content: ' ';
			display: block;
			width: 1em;
			height: 1em;
			background-image: $icon-install;
			background-size: 1em;
		}

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

.edd-extension-manager__control {
	.edd-button__toggle {
		position: relative;
		margin: 0;
		padding: 0;
		width: 36px;
		height: 20px;
		min-height: unset;
		background-color: $wp-border;
		transition: background 0.2s ease;
		border-radius: 30px;
		box-shadow: none;
		border: none;

		&:after {
			position: absolute;
			content: "";
			height: 14px;
			width: 14px;
			left: 3px;
			bottom: 3px;
			background-color: $white;
			transition: 0.1s transform ease;
			border-radius: 50%;

			.edd-plugin__active & {
				transform: translateX(16px);
			}
		}

		&:active,
		&:focus {
			outline: 0;
			box-shadow: 0 0 0 1px $white, 0 0 0 3px $wp-input-border;
		}

		&:hover {
			background-color: $wp-input-border;
		}

		&:disabled {
			background-color: $wp-input-border !important;

			&:before {
				position: absolute;
				top: 3px;
				@include edd-spinner(
					10px,
					$wp-input-border,
					$wp-alternate
				);
			}

			&:after {
				display: none;
			}
		}

		.edd-plugin__active & {
			background-color: var(--wp-admin-theme-color);

			:active,
			:focus {
				box-shadow: 0 0 0 1px $white, 0 0 0 3px var(--wp-admin-theme-color);
			}
		}
	}

	@media screen and (max-width: $break-medium) {
		min-height: 40px;
	}
}

.edd-extension-manager__activate {
	display: flex;
	align-items: center;
	gap: .5em;
	min-height: 30px;
	border: 1px solid $wp-border;
	border-radius: 4px;
	padding: 3px 10px;
}

a.button.edd-extension-manager__button-settings {
	display: none;
	position: absolute;
	top: 1em;
	right: 1em;
	background-image: $icon-settings;
	background-size: 1.25em;
	background-repeat: no-repeat;
	background-position: center;
	min-height: unset;
	height: 1.5em;
	width: 1.5em;
	padding: 1em;
	border: none;
	background-color: $wp-alternate;

	&:hover,
	&:active {
		background-image: $icon-settings;
		background-size: 1.25em;
		background-repeat: no-repeat;
		background-position: center;
	}

	.edd-plugin__active & {
		display: block;
	}
}