/**
 * Suggested tasks widget.
 *
 * Dependencies: progress-planner/web-components/prpl-badge
 */

@media all and (min-width: 1400px) {

	.prpl-widget-wrapper.prpl-monthly-badges {
		grid-row-start: 1;
		grid-column-start: 3;
	}
}

.prpl-widget-wrapper.prpl-monthly-badges {

	/* Remove styling from the widget wrapper (but not in popover view). */
	& > .widget-inner-container .prpl-widget-content > .prpl-widget-wrapper:has(.badge-group-monthly) {
		padding: 0;
		border: none;
		box-shadow: none;
		margin-bottom: 0;
	}

	.badge-group-monthly {


		.prpl-badge-row-wrapper {

			display: grid;
			grid-template-columns: 1fr 1fr 1fr;
			gap: calc(var(--prpl-gap) / 2);
		}

		p {
			margin: 0;
			font-size: var(--prpl-font-size-small);
			text-align: center;
			line-height: 1.2;
		}
	}

	.prpl-widget-content {
		margin-bottom: 1em;

		&:last-child {
			margin-bottom: 0;
		}
	}

	.prpl-widget-content-points {
		display: flex;
		justify-content: space-between;
		align-items: center;

		.prpl-widget-content-points-number {
			font-size: var(--prpl-font-size-3xl);
			font-weight: 600;
		}
	}
}

/*------------------------------------*\
	Popover styles.
\*------------------------------------*/
#prpl-popover-monthly-badges {

	.prpl-widgets-container {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(var(--prpl-column-min-width), 1fr));
		grid-gap: var(--prpl-gap);
		grid-auto-rows: auto;
	}

	.prpl-widget-title {
		padding: 0.5rem 1rem;
		border-radius: 0.5rem;
		background: var(--prpl-background-monthly);
	}

	.badge-group-monthly {
		background-color: transparent;
	}

	.prpl-widget-wrapper-content {

		.prpl-widget-title {
			background: var(--prpl-background-content-badge);
		}

		.badge-group-content {
			background-color: transparent;
		}
	}

	.prpl-widget-wrapper-maintenance {

		.prpl-widget-title {
			background: var(--prpl-background-streak);
		}

		.badge-group-maintenance {
			background-color: transparent;
		}
	}
}

/* This is the badge streak widget. */
.prpl-widget-wrapper.prpl-badge-streak {
	display: flex;
	flex-direction: column;
	justify-content: space-between;

	.progress-label {
		display: inline-block;
	}

	.progress-wrapper {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		gap: calc(var(--prpl-gap) / 4);
		padding: calc(var(--prpl-padding) / 2);
		border-radius: var(--prpl-border-radius-big);

		&:not(:first-child) {
			margin-top: var(--prpl-padding);
		}

		&.badge-group-content {
			background: var(--prpl-background-content-badge);
		}

		&.badge-group-maintenance {
			background: var(--prpl-background-streak);
		}

		.prpl-badge {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: flex-start;
			flex-wrap: wrap;
			min-width: 0;
		}

		p {
			margin: 0;
			font-size: var(--prpl-font-size-small);
			text-align: center;
			line-height: 1.2;
		}
	}

	.prpl-widget-content {
		margin-bottom: 1em;
	}

	.badge-group-monthly {
		background-color: transparent;
	}
}

#prpl-popover-monthly-badges-trigger {
	font-size: var(--prpl-font-size-base);
	color: var(--prpl-color-link);
	text-decoration: underline;
	margin-top: 1.25rem;
}