@import "@wordpress/base-styles/colors";
@import "@wordpress/base-styles/variables";

.dashboard-overview-card {
	&--disabled {
		background-color: transparent !important;
		box-shadow: 0 0 0 1px $gray-100 !important;
	}

	.components-card__body {
		padding: 0;
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	.dashboard-callout {
		.dashboard-callout__h-container {
			padding: 24px;
		}
	}
}

.dashboard-overview-card__content {
	border-radius: $radius-large;
	padding: 24px;
	// HStacks are width 100% and will try to grow as wide as the card body.
	// We need to ensure this new padding is included as part of that 100%.
	box-sizing: border-box;
}

.dashboard-overview-card--has-bottom {
	.dashboard-overview-card__content {
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;
	}
}

.dashboard-overview-card__title {
	.dashboard-overview-card--upsell & {
		color: var( --wp-admin-theme-color );
	}
}

.dashboard-overview-card__icon {
	color: var(--wp-admin-theme-color);
	fill: var(--wp-admin-theme-color);

	.dashboard-overview-card--success & {
		color: var(--dashboard__background-color-success);
		fill: var(--dashboard__background-color-success);
	}

	.dashboard-overview-card--error & {
		background-color: color-mix(in srgb, var(--dashboard__background-color-error) 8%, transparent);
		color: var(--dashboard__background-color-error );
		fill: var(--dashboard__background-color-error );
	}

	.dashboard-overview-card--warning & {
		background-color: color-mix(in srgb, var(--dashboard__background-color-warning) 8%, transparent);
		color: var(--dashboard__background-color-warning);
		fill: var(--dashboard__background-color-warning);
	}

	.dashboard-overview-card--disabled & {
		color: $gray-600;
		fill: $gray-600;
	}
}

.dashboard-overview-card__link-icon {
	color: $gray-600;
	fill: $gray-600;
	height: 24px;
	margin: 0;
	text-align: center;
	width: 24px;

	.rtl & {
		transform: scaleX(-1);
	}
}

.dashboard-overview-card__link {
	text-decoration: none;

	&:only-child {
	    display: flex;
	    flex-grow: 1;

	    .dashboard-overview-card__content {
	    	flex: 1;
	    }
	}

	&:hover {
		.dashboard-overview-card__content {
			background-color: color-mix(in srgb, var( --wp-admin-theme-color ) 2%, transparent);
			box-shadow: 0 0 0 1px color-mix(in srgb, var( --wp-admin-theme-color ) 12%, transparent);

			span, h2 {
				color: var( --wp-admin-theme-color );
			}

			.dashboard-overview-card__icon,
			.dashboard-overview-card__link-icon {
				fill: var( --wp-admin-theme-color );
				background-color: transparent;
			}
		}
	}
}

.dashboard-overview-card__button {
	height: 100%;
	width: 100%;
	padding: 0;
	text-align: start;
}

.dashboard-overview-card__progress-bar {
	width: 100% !important;
}
