@use "sass:math";
@use "@wordpress/base-styles/colors";
@use "@wordpress/base-styles/variables";

$spacing-xs: variables.$grid-unit-05;      // 4px
$spacing-sm: variables.$grid-unit-10;      // 8px
$spacing-md: variables.$grid-unit-15;      // 12px
$spacing-lg: variables.$grid-unit-20;      // 16px

.newsletter-widget {

	&__header {
		padding: $spacing-md;
		margin-bottom: $spacing-md;
	}

	&__heading {
		font-weight: variables.$font-weight-medium !important;
	}

	&__footer {
		background-color: colors.$gray-100;
		padding: $spacing-md;
	}

	&__footer-msg {
		margin: 0;
		margin-bottom: $spacing-md;
	}

	&__footer-list {
		margin: 0;
		padding-left: $spacing-md;
		list-style-type: disc;
		columns: 2;
	}

	&__stat-label {
		margin-left: $spacing-xs;
		text-decoration: none;
	}

	&__stats {
		display: flex;
		gap: $spacing-md;
		flex-wrap: wrap;
		width: 100%;

		> :first-child {
			margin-right: $spacing-md;
		}
	}

	&__icon {
		display: inline-flex;
		flex-direction: column;
		align-items: flex-start;
	}

	&__stat-item {
		display: flex;
		align-items: center;
		gap: $spacing-xs;
		text-decoration: none;
	}

	&__chart-container {
		padding: 0 $spacing-md;
	}

	&__chart {
		width: 100%;
		box-sizing: border-box;
		padding: 0 $spacing-md $spacing-md;
	}

	a {
		text-decoration: none;
	}
}

.subscribers-chart {
	width: 100%;
	height: 200px;

	&__tooltip {
		background: colors.$white;
		padding: $spacing-sm;
		border-radius: variables.$radius-medium;
		box-shadow: variables.$elevation-x-small;
		font-size: variables.$font-size-small;
		color: colors.$gray-900;
		min-width: 120px;
	}

	&__tooltip-date {
		font-weight: variables.$font-weight-medium;
		margin-bottom: $spacing-xs;
	}

	&__tooltip-stats {
		display: flex;
		flex-direction: column;
		gap: math.div($spacing-xs, 2);
	}

	&__tooltip-stat {
		display: flex;
		align-items: center;
	}

	&__tooltip-indicator {
		width: $spacing-sm;
		height: $spacing-sm;
		border-radius: variables.$radius-round;
		margin-right: $spacing-xs;
	}

	&__legend {
		display: flex;
		justify-content: center;
	}
}

// wp-admin overrides
#jetpack_newsletter_dashboard_widget {

	.inside {
		padding: 0;
		margin: 0;
	}
}
