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

$blueberry-color: #3858e9;

.hosting-dashboard-item-view__header {
	.hosting-dashboard-item-view__header-content {
		.hosting-dashboard-item-view__header-info {
			display: flex;
			flex-direction: row;
			flex-grow: 1;
			gap: 10px;
		}

		.hosting-dashboard-item-view__header-title-summary {
			word-wrap: anywhere;

			.hosting-dashboard-item-view__header-summary-link svg {
				padding: 0 0 2px 4px;
				vertical-align: middle;
			}

			.hosting-dashboard-item-view__header-env-data {
				padding-top: 6px;
				display: flex;
				gap: 16px;
				font-family: $font-sf-pro-text;
				font-size: rem( 14px );
				color: #101517;
				letter-spacing: -0.15px;

				.hosting-dashboard-item-view__header-env-data-item-link {
					color: $blueberry-color;
					font-size: inherit;
					padding: 0;
					height: auto;
					text-transform: capitalize;
				}
			}

			.hosting-dashboard-item-view__header-add-staging {
				text-decoration: none;

				&:hover {
					text-decoration: none;
				}

				&.components-button.has-icon {
					padding: 0 0 0 2px;
				}
			}

			.components-spinner {
				margin: 0;
				padding-right: 5px;
			}
		}

		.hosting-dashboard-item-view__close,
		.item-view__close-button,
		.item-preview__admin-button {
			align-self: flex-start;
		}

		.item-view__close-button {
			margin-right: 15px;
		}

		&.hosting-dashboard-item-view__header-breadcrumbs {
			padding-top: 22px;
			padding-bottom: 22px;
		}
	}

	.hosting-dashboard-item-view__header-favicon {
		margin-inline-end: 12px;
	}

	@media ( min-width: $break-large ) {
		.hosting-dashboard-item-view__header-favicon {
			margin-inline-end: 24px;
			position: relative;
		}

		.hosting-dashboard-item-view__header-content {
			padding: 24px;
			display: flex;
			align-items: top;

			.hosting-dashboard-item-view__header-title-summary {
				flex-grow: 1;
				display: flex;
				flex-direction: column;

				.hosting-dashboard-item-view__header-title {
					@include heading-2x-large;
					color: var( --color-text-black );
					padding: 4px 0;
				}

				.hosting-dashboard-item-view__header-summary {
					.hosting-dashboard-item-view__header-summary-link {
						display: flex;
						gap: 2px;
						align-items: center;
						@include body-large;
						color: var( --color-accent-70 );
						width: fit-content;
						text-decoration: none;

						&:hover {
							color: var( --color-link-dark );
							text-decoration: underline;
						}

						&:focus {
							box-shadow: none;
							outline: thin dotted;
						}
					}

					> span {
						display: inline-flex;
						align-items: center;
						height: 24px;
					}
				}
			}
		}
	}

	@media ( max-width: $break-large ) {
		display: flex;
		padding: 24px 24px 8px;

		.hosting-dashboard-item-view__header-content {
			flex-grow: 1;
			display: flex;

			.hosting-dashboard-item-view__header-title-summary {
				flex-grow: 1;
				display: flex;
				flex-direction: column;

				.hosting-dashboard-item-view__header-title {
					@include heading-medium;
					color: var( --color-text-black );
					padding: 6px 0 4px 0;
				}

				.hosting-dashboard-item-view__header-summary {
					.hosting-dashboard-item-view__header-summary-link {
						display: flex;
						align-items: center;
						@include body-medium;
						color: var( --color-accent-70 );
						width: fit-content;
						text-decoration: none;

						&:focus {
							box-shadow: none;
						}
					}
				}
			}
		}
	}
}
