@import "@wordpress/base-styles/breakpoints";

.site-preview__header {

	@media (min-width: $break-large) {
		.site-preview__header-favicon {
			margin-right: 24px;
			position: relative;
		}

		.site-preview__header-content {
			padding: 48px 48px 24px 48px;
			display: flex;
			align-items: center;

			.site-preview__header-title-summary {
				flex-grow: 1;
				display: flex;
				flex-direction: column;

				.site-preview__header-title {
					font-style: normal;
					font-weight: 500;
					font-size: rem(32px);
					line-height: 32px;
					color: var(--studio-black);
					margin-bottom: 4px;
				}

				.site-preview__header-summary {

					.site-preview__header-summary-link {
						display: flex;
						align-items: center;
						font-size: rem(18px);
						font-weight: 400;
						color: var(--studio-gray-70);
						line-height: 26px;
						width: fit-content;

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

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

		.sites-dataviews__site-favicon {
			border-radius: 2px;
		}

		.site-preview__header-content {
			flex-grow: 1;
			display: flex;
			justify-content: space-between;
			.site-preview__header-title-summary {
				word-wrap: anywhere;
				flex-grow: 1;
				display: flex;
				flex-direction: column;

				.site-preview__header-title {
					font-style: normal;
					font-weight: 500;
					font-size: rem(16px);
					line-height: 16px;
					color: var(--studio-black);
					margin-bottom: 4px;
				}

				.site-preview__header-summary {

					.site-preview__header-summary-link {
						display: flex;
						align-items: center;
						font-size: rem(13px);
						font-weight: 400;
						color: var(--studio-gray-70);
						line-height: 13px;
						width: fit-content;
						text-decoration: none;

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

			}
		}
	}

}
