@import "@automattic/components/src/styles/typography";
@import "@wordpress/base-styles/breakpoints";
@import "@wordpress/base-styles/variables";

$card-padding: 24px;
$blueberry-color: #3858e9;

.hosting-overview {
	margin: 0;
	padding: 0;
	overflow-y: auto;
	max-height: calc(100vh - 300px);

	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto auto;
	grid-column-gap: 16px;
	grid-row-gap: 16px;
	grid-auto-flow: row;

	&__plan-card-header {
		.hosting-overview__development-site-badge {
			align-self: center;
		}
	}

	&__actions-list {
		list-style: none;
		margin: 0;

		.hosting-overview__action {
			border-bottom: 1px solid var(--gutenberg-gray-100, #f0f0f0);
			padding: $grid-unit-15 0;

			svg {
				color: var(--studio-gray-30);
				margin-right: 8px;
				width: 20px;
				height: 20px;
			}

			a.hosting-overview__action-button,
			button.hosting-overview__action-button {
				display: flex;
				justify-content: space-between;
				color: var(--studio-gray-100);
				font-family: "SF Pro Text", $sans;
				font-size: $font-body-small;
				line-height: 20px;
				letter-spacing: -0.15px;
				width: 100%;

				&:visited,
				&:hover,
				&:active,
				&:focus {
					color: var(--studio-gray-100);
					text-decoration: none;
				}

				&:not([disabled]) {
					cursor: pointer; // Required to specify explicitly for times when no href is present but onClick is
				}
				&[disabled] {
					opacity: 0.5;
					cursor: not-allowed;
				}
			}

			.hosting-overview__action-text {
				display: flex;
				align-items: center;

				.hosting-overview__dashicon {
					color: var(--studio-gray-30);
					margin-right: 8px;
				}

				svg {
					fill: var(--studio-gray-30);
				}
			}

			&:last-child {
				border-bottom: none;
			}

			&:hover {
				svg {
					color: var(--color-primary-60);
					fill: var(--color-primary-60);
				}

				.hosting-overview__action-button:not([disabled]) {
					.hosting-overview__action-text,
					.hosting-overview__dashicon {
						color: var(--color-primary-60);
						svg {
							color: var(--color-primary-60);
							fill: var(--color-primary-60);
						}
					}
				}
			}
		}
	}

	&__development-site-badge {
		border-radius: 4px;
		font-family: "SF Pro", $sans;
		font-size: $font-body-extra-small;
		font-weight: 500;
		line-height: $font-size-header-small;
	}

	&__development-site-ctas {
		display: flex;
		flex-direction: column;
		gap: 20px;

		.hosting-overview__development-site-cta-wrapper {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.hosting-overview__development-site-cta {
				min-width: 140px;
			}

			p {
				margin: 0;
			}
		}
	}

	&__navigation-header {
		margin-bottom: 24px;
	}

	&__blog-stickers {
		margin: 0 0 24px;
		padding: 16px;
		background-color: var(--color-surface);
		border: 1px solid var(--color-border-subtle);
		border-radius: 4px;
		font-size: 14px;
		color: var(--color-text-subtle);
	}

}

.hosting-overview__domain-to-plan-credit-notice {
	grid-column: 1 / -1;
	text-wrap: pretty;
}

.hosting-overview__navigation-header,
.hosting-overview__active-domains {
	grid-column: 1 / -1;
}

.hosting-overview__plan,
.hosting-card.site-backup-card {
	grid-column: 1 / 2;
}

.hosting-overview__quick-actions,
.hosting-card.support-card {
	grid-column: 2 / 2;
}

.hosting-overview__quick-actions {
	padding-bottom: 10px;
}

.hosting-overview__quick-actions .hosting-card__title-wrapper {
	margin-bottom: 12px;
}
.hosting-overview__quick-actions .hosting-card__title {
	display: inline;
}
.hosting-overview__quick-actions .hosting-card__title-shortcut {
	margin-left: 1em;
	background-color: var(--studio-gray-0);
	padding: 0.25em;
	font-size: 0.75rem;
}

.hosting-card.support-card {
	.happiness-engineers-tray {
		align-items: flex-start;
		display: flex;
		/* Flipping the display order around so that the negative margin on gravatars
		means that left overlaps right rather than vice versa */
		justify-content: flex-end;
		flex-direction: row-reverse;
		height: 44px;
	}

	.happiness-engineers-tray__gravatar {
		margin-left: -10px;
		margin-right: 0;
		border: 2px solid #fff;
	}

	:last-child {
		margin-left: 0;
	}
}

@media (max-width: $break-xlarge) {
	.hosting-overview {
		grid-template-columns: minmax(300px, 1fr);
		grid-template-rows: auto auto auto;
		grid-row-gap: 16px;
	}

	.hosting-overview__plan,
	.hosting-overview__quick-actions,
	.hosting-card.site-backup-card,
	.hosting-card.support-card,
	.hosting-overview__active-domains {
		grid-column: 1;
		grid-row: auto;
	}
}

.hosting-overview__plan-card-header,
.hosting-overview .plan-price-wrapper,
.hosting-overview .plan-price-loading-placeholder {
	display: flex;
	margin-bottom: 8px;
}

.hosting-overview .plan-price {
	display: flex;
	align-items: center;
}

@media (max-width: $break-xlarge) {
	.hosting-overview__plan-card-header {
		margin-bottom: 4px;
	}
}

.hosting-overview__plan-card-title {
	flex: 1;
}

.hosting-overview__plan-card-title,
.hosting-overview .plan-price,
.hosting-overview .plan-price .plan-price__currency-symbol,
.hosting-overview .plan-price .plan-price__integer,
.hosting-overview .plan-price .plan-price__fraction,
.hosting-overview .plan-price-term {
	color: var(--studio-gray-100);
	font-family: "SF Pro", $sans;
	font-size: rem(28px); //typography-exception
	line-height: 32px;
}

.hosting-overview .plan-price .plan-price__integer {
	margin-right: 0;
}

.hosting-overview .plan-price .plan-price__fraction {
	font-weight: 400;
}

@media (max-width: $break-xlarge) {
	.hosting-overview__plan-card-title {
		font-size: $font-size-header-small;
		font-weight: 500;
		line-height: 26px;
	}

	.hosting-overview .plan-price,
	.hosting-overview .plan-price .plan-price__currency-symbol,
	.hosting-overview .plan-price .plan-price__integer,
	.hosting-overview .plan-price .plan-price__fraction,
	.hosting-overview .plan-price-term {
		font-size: rem(18px); //typography-exception
		line-height: 26px;
	}

}

.hosting-overview .plan-price-info {
	margin-bottom: 4px;
}

.hosting-overview .plan-price-info-loading-placeholder {
	margin-bottom: 4px;
}

@media (max-width: $break-xlarge) {
	.hosting-overview .plan-price-wrapper,
	.hosting-overview .plan-price-loading-placeholder {
		margin-bottom: 4px;
	}

	.hosting-overview .plan-price-info,
	.hosting-overview .plan-price-info-loading-placeholder {
		margin-bottom: 2px;
	}
}

.domains-table.hosting-overview__domains-table {
	font-family: "SF Pro Text", $sans;
	padding: 0;

	table {
		border-top: 1px solid var(--color-border-secondary);
		margin-bottom: 0;
		margin-top: 0;

		tbody tr:last-child::after {
			content: none;
		}

		th:not(.domains-table-checkbox-th):first-child,
		th.domains-table-checkbox-th + th,
		td:not(.domains-table-checkbox-td):first-child,
		td.domains-table-checkbox-td + td {
			padding-left: 16px;
		}

		th:last-child,
		td:last-child {
			padding-right: 16px;
		}
	}

	button {
		font-family: "SF Pro Text", $sans;
		font-weight: 400;
	}

	.domains-table__primary-domain-label {
		background-color: inherit;
		color: var(--studio-green-60);
		font-family: "SF Pro", $sans;
		font-size: $font-body-extra-small;
		font-weight: 500;
		line-height: 20px;
		margin: 0;
		padding: 0;

		svg {
			display: none;
		}
	}

	.domains-table__domain-name {
		font-size: $font-body-small;
		font-style: normal;
		line-height: 20px;
	}

	.components-dropdown-menu__toggle {
		transform: rotate(90deg);
	}

	.domains-table__bulk-action-container,
	.domains-table-checkbox-td,
	.domains-table-checkbox-th {
		display: none;
	}

	.domains-table-mobile-card {
		padding: 12px 0;

		.components-checkbox-control,
		> div:not(:first-child) {
			display: none;
		}

		&:last-child {
			border: 0;
		}
	}
}

.domains-table-row__actions-group {
	font-family: "SF Pro Text", $sans;
}

.hosting-overview__plan-agency-purchase {
	p {
		font-size: 0.875rem;
	}
}
