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

.button.edd-extension-manager__action-upgrade {
	background-color: var(--edd-notice-green);
	color: #fff;

	&:hover,
	&:active {
		background-color: var(--edd-notice-green-hover);
		color: #fff;
	}
}

.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: colors.$wp-input-text;
		border-color: colors.$wp-input-border;

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

.edd-extension-manager__control {
	.edd-button__toggle {
		position: relative;
		margin: 0;
		padding: 0;
		width: 36px;
		height: 20px;
		min-height: unset;
		background-color: colors.$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: #fff;
			transition: 0.1s transform ease;
			border-radius: 50%;

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

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

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

		&:disabled {
			background-color: colors.$wp-border !important;
		}

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

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

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

.edd-extension-manager__activate {
	display: flex;
	align-items: center;
	gap: .5em;
	min-height: 30px;
	border: 1px solid colors.$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: icons.$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: colors.$wp-alternate;

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

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