.usage-warning__storage-full {
	font-size: 1rem;
	font-weight: bold;
	margin-bottom: 16px;
}

.usage-warning__action-button.components-button {
	width: 100%;
	height: 100%;

	margin-top: 24px;

	flex-wrap: nowrap;
	justify-content: space-between;
	column-gap: 8px;

	padding: 16px 24px;
	border: 2px solid var(--studio-jetpack-green);
	border-radius: calc(2 * 2px);

	color: var(--color-text);
	font-size: $font-body;
	text-align: initial;

	&:visited {
		color: var(--color-text);
	}

	&:focus,
	&:hover {
		cursor: initial;
		background: none;
	}

	&.has-clickable-action:focus,
	&.has-clickable-action:hover {
		cursor: pointer;


		.action-button__arrow {
			transform: translateX(8px);
		}
	}

	.action-button__status {
		margin-bottom: 0.25rem;
	}

	.action-button__action-text {
		font-weight: bold;
	}

	.action-button__arrow {
		transition: transform 0.15s ease-out;

		color: var(--studio-jetpack-green);
		font-size: $font-title-medium;
		font-weight: 700;
		line-height: 24px;
	}
}

.usage-warning__upsell-price {
	&.is-placeholder {
		@include placeholder( --color-neutral-10 );
	}

	.display-price {
		&__billing-time-frame {
			font-size: 1rem;
			color: inherit;
		}
	}

	.plan-price {
		font-size: inherit;
		line-height: inherit;
		color: inherit;
	}

	.plan-price__fraction {
		font-weight: inherit;
		font-size: inherit;
		vertical-align: inherit;
	}

	.plan-price__integer {
		margin: 0;
		font-weight: inherit;
	}

	.plan-price__currency-symbol {
		color: inherit;
		font-size: inherit;
		vertical-align: inherit;
	}

}
