/**
 * dashboard.scss
 * Styles for WooCommerce dashboard widgets, only loaded on the dashboard itself.
 */

/**
 * Imports
 */
@import "mixins";
@import "variables";
@import "fonts";

/**
 * Styling begins
 */
.wc-dashboard-widget-loading {
	padding: 16px 10px;
	text-align: center;

	p {
		align-items: center;
		display: flex;
		flex-direction: column;
		gap: 8px;
		margin: 0;
	}

	.spinner {
		float: none;
		margin: 0;
	}

	&__text {
		color: $gray-700;
	}
}

ul.woocommerce_stats {
	overflow: hidden;
	zoom: 1;

	li {
		width: 25%;
		padding: 0 1em;
		text-align: center;
		float: left;
		font-size: 0.8em;
		border-left: 1px solid #fff;
		border-right: 1px solid #ececec;
		box-sizing: border-box;
	}

	li:first-child {
		border-left: 0;
	}

	li:last-child {
		border-right: 0;
	}

	strong {
		font-family: Georgia, "Times New Roman", "Bitstream Charter", Times, serif;
		font-size: 4em;
		line-height: 1.2em;
		font-weight: normal;
		text-align: center;
		display: block;
	}
}

#woocommerce_dashboard_status {

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

	.best-seller-this-month {

		a {

			strong {
				margin-right: 48px;
			}
		}
	}

	.wc_status_list {
		overflow: hidden;
		margin: 0;
		border-radius: 0 0 var(--wc-card-border-radius, 8px) var(--wc-card-border-radius, 8px);

		li {
			width: 50%;
			float: left;
			padding: 0;
			box-sizing: border-box;
			margin: 0;
			border-top: 1px solid #ececec;
			color: $subtext;

			a {
				display: block;
				padding: 9px 12px 9px 44px;
				position: relative;
				font-size: 13px;
				line-height: 1.5;
				color: $wp-admin-icon-gray;

				&:hover,
				&:focus {
					background-color: $wp-admin-hover-gray;
				}

				.wc_sparkline {
					width: 4em;
					height: 2em;
					display: block;
					float: right;
					position: absolute;
					right: 0;
					top: 50%;
					margin-right: 12px;
					margin-top: -1.25em;
				}

				strong {
					font-size: 16px;
					line-height: 1.2em;
					font-weight: normal;
					display: block;
					color: $gray-900;
				}

				&::before {

					@include icon_dashicons( "\f14c" );
					font-size: 20px;
					position: absolute;
					top: 50%;
					left: 12px;
					transform: translateY(-50%);
					width: 20px;
					height: 20px;
					line-height: 20px;
					color: $wp-admin-icon-gray;
					float: none;
					margin: 0;
				}
			}
		}

		li:first-child {
			border-top: 0;
		}

		li:not(.sales-this-month):not(.best-seller-this-month):not(.processing-orders):not(.on-hold-orders):not(.low-in-stock):not(.out-of-stock) {
			clear: both;
			width: 100%;
		}

		li.sales-this-month {
			width: 100%;

			a::before {
				content: "\f185";
			}
		}

		li.best-seller-this-month {
			width: 100%;

			a::before {
				content: "\f174";
			}
		}

		li.processing-orders {
			border-right: 1px solid #ececec;

			a::before {
				content: "\f469";
			}
		}

		li.on-hold-orders {

			a::before {
				content: "\f523";
			}
		}

		li.low-in-stock {
			border-right: 1px solid #ececec;

			a::before {
				content: "\f14c";
			}
		}

		li.out-of-stock {

			a::before {
				content: "\f158";
			}
		}
	}
}

#woocommerce_dashboard_recent_reviews {

	#wc-recent-reviews-widget-content > p {
		margin-bottom: 0;
	}

	ul {
		margin: 0;
	}

	li {
		display: grid;
		grid-template-columns: 32px minmax(0, 1fr) max-content;
		column-gap: 10px;
		align-items: start;
		font-size: 13px;
		line-height: 1.4;
		margin-bottom: 12px;

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

	h4.meta {
		grid-column: 2;
		grid-row: 1;
		font-size: 13px;
		line-height: 1.5;
		margin: 0;
		font-weight: normal;
		color: $wp-admin-icon-gray;
	}

	blockquote {
		grid-column: 2 / -1;
		grid-row: 2;
		line-height: 1.4;
		padding: 0;
		margin: 0;
	}

	.avatar {
		float: none;
		grid-column: 1;
		grid-row: 1 / span 2;
		margin: 0;
	}

	.star-rating {
		float: none;
		grid-column: 3;
		grid-row: 1;
		justify-self: end;
		overflow: hidden;
		position: relative;
		height: 1.5em;
		line-height: 1.5;
		margin-left: 0.5em;
		width: 5.4em;
		font-family: "WooCommerce" !important;

		&::before {
			content: "\e021\e021\e021\e021\e021";
			color: $wp-admin-icon-gray;
			float: left;
			top: 0;
			left: 0;
			position: absolute;
			letter-spacing: 0.1em;
			letter-spacing: 0\9; // IE8 & below hack ;-(
		}

		span {
			overflow: hidden;
			float: left;
			top: 0;
			left: 0;
			position: absolute;
			padding-top: 1.5em;
		}

		span::before {
			content: "\e020\e020\e020\e020\e020";
			top: 0;
			position: absolute;
			left: 0;
			letter-spacing: 0.1em;
			letter-spacing: 0\9; // IE8 & below hack ;-(
			color: $wp-admin-text-gray;
		}
	}
}

#dash-right-now li.product-count a::before {
	font-family: "WooCommerce";
	content: "\e01d";
}

#dashboard_activity {
	#activity-widget {
		#the-comment-list {
			.review.comment-item {
				.avatar {
					margin-right: 12px;
					position: relative;
					top: 0;
					float: left;
				}
			}
		}
	}
}