@import "@wordpress/base-styles/breakpoints";
@import "@wordpress/base-styles/mixins";

.plugin-activate-toggle__disabled,
.plugin-activate-toggle__link {
	display: inline-flex;
	flex-direction: row-reverse;
	font-size: $font-body-extra-small;
	line-height: 16px;
}

.plugin-activate-toggle__link:hover,
.plugin-activate-toggle__link:hover .plugin-activate-toggle__icon {
	color: var(--color-link-dark);
}

.plugin-activate-toggle__disabled {
	color: var(--color-neutral-20);
}

.plugin-activate-toggle__disabled .plugin-activate-toggle__icon {
	color: var(--color-neutral-0);
}

.plugin-activate-toggle__label {
	margin-left: 0;
	margin-right: 8px;
}

.plugin-activate-toggle__link {
	cursor: pointer;
}

.plugin-activate-toggle__link a {
	color: currentcolor;
	line-height: 16px;
}

.plugin-activate-toggle__link .plugin-activate-toggle__icon {
	color: var(--color-neutral-light);
}

.plugin-activate-toggle__icon {
	flex: none;
	margin: auto 0 auto 3px;
	.gridicon {
		display: block;
	}
}

.plugin-row-formatter__toggle {
	.components-flex.components-h-stack {
		flex-direction: row-reverse;

		@include break-large {
			margin: auto 0;
			flex-direction: unset;
		}

		.plugin-action__label {
			@include break-large() {
				// We don't want to use display: none here, because it will hide the popover icon
				// that might contain useful details about why the action is disabled.
				font-size: 0;
			}
		}
	}
	.plugin-autoupdate-toggle {
		.plugin-action__label {
			.plugin-action__disabled-info {
				color: var(--studio-gray-40);
			}
		}
	}
}
