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

.update-plugin__plugin-update-wrapper {
	display: flex;
	align-items: center;
	color: var(--studio-gray-60);
	font-size: 0.75rem;
	position: relative;
	margin-block-start: 16px;

	@include break-xlarge {
		margin-block-start: 0;
	}
}

.update-plugin__arrow-icon {
	display: flex;
	position: relative;
	inset-inline-start: 10px;
	fill: var(--studio-gray-40);
}

button.update-plugin__new-version {
	background-color: var(--studio-jetpack-green-50);
	color: var(--studio-white);
	position: relative;
	inset-inline-start: 20px;
}


button.update-plugin__retry-button {
	text-decoration: underline;
	margin-inline-start: 5px;
	margin-block-start: 15px;

	@include break-xlarge {
		margin-block-start: 0;
	}
}

.update-plugin__plugin-action-status {
	position: relative;

	.plugin-action-status {
		margin-block-start: 20px;
	}

	.plugin-action-status-container {
		margin-block-start: 12px;
		transform: translateY(-50%);
		display: flex;

		@include break-xlarge {
			margin-block-start: 0;
			inset-block-start: 50%;
			position: absolute;
			display: inherit;
		}
	}
}
