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

.plan-field {
	display: flex;
	flex-direction: row;
	gap: 12px;
	align-items: center;
	padding-inline: 8px;
	flex-wrap: wrap;

	@include break-medium {
		flex-wrap: unset;
	}
}

.plan-field__icon {
	display: flex;
	align-items: center;
	justify-content: center;

	border-radius: 4px;
	border: 1px solid var(--color-primary-10);
	width: 40px;
	height: 40px;

	img {
		width: 20px;
		height: 20px;
	}
}

.plan-field__name {
	@include heading-medium;
}

.plan-field__sub {
	@include body-medium;
	color: var(--color-neutral-50);
}

.plan-field__button {
	padding: 1px;
	text-decoration: underline;
	@include body-medium;
	cursor: pointer;

	@include break-medium {
		padding: 8px 16px;
	}
}

.plan-field__loader {
	display: flex;
	flex-direction: row;
	gap: 8px;
	align-items: center;
	padding: 8px 16px;
	@include body-medium;

	.components-spinner {
		margin: 0;
	}
}

.sites-dashboard.is-without-filters {
	.dataviews-view-table {
		margin-block-start: 32px;
	}
}

.has-product-referral {
	.plan-field {
		padding-inline: 8px;
		flex-wrap: wrap;

		@include break-medium {
			flex-wrap: unset;
		}
	}

	.plan-field__button {
		padding: 1px;

		@include break-medium {
			padding: 8px 16px;
		}
	}

	.plan-field__content {
		width: 250px;

		.plan-field__sub strong {
			max-width: 250px;
			text-overflow: ellipsis;
			white-space: nowrap;
			overflow: hidden;
			display: block;
		}
	}
}
