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

.profiler-header {
	color: #fff;
	padding-top: 40px;
	background:
		linear-gradient( 180deg, var( --studio-gray-100 ) 25%, rgba( 16, 21, 23, 0 ) 100% ),
		fixed 0 0/16px 16px radial-gradient( var( --studio-gray-60 ) 1px, transparent 0 ),
		var( --studio-gray-100 );

	.profiler-header-wrapper {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 14px;
		align-self: stretch;
		padding-bottom: 20px;
	}

	.profiler-header__badge {
		font-size: $root-font-size;
		text-decoration: none;
		color: var( --studio-white );
		padding: 0;

		&:focus {
			box-shadow: none;
		}

		&:hover {
			text-decoration: none;
		}

		.badge-container {
			&:hover {
				color: var( --studio-gray-5 );
				text-decoration: none;
			}
		}
	}

	.profiler-header__site-url {
		display: flex;
		flex-direction: row;
		align-content: flex-end;
		width: 100%;

		h2 {
			font-size: $font-title-large;
			line-height: $font-title-large;
			font-weight: 500;
		}

		p {
			font-size: $font-body;
			line-height: $font-title-medium;
			color: var( --studio-gray-10 );
			align-self: flex-end;
			margin: -1px 4px;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}

	.profiler-header__action {
		a {
			height: fit-content;
			padding: 0;
			color: #fff;
			font-size: $font-body-small;
			line-height: 20px;
			text-decoration: underline;

			&.components-button {
				&:hover {
					color: var( --studio-gray-5 );
					text-decoration: none;
				}
			}
		}
	}

	.profiler-header__report-site-details {
		display: flex;
		flex-direction: column;
		gap: 14px;
		font-size: $font-body-small;

		&.show-on-mobile {
			@media ( min-width: $break-large ) {
				display: none;
			}
		}
	}

	.wpcom-badge {
		display: flex;
		align-items: center;
		gap: 6px;
	}

	.profiler-navigation-tabs.section-nav {
		background: none;
		box-shadow: none;
		margin: 0;

		.section-nav__mobile-header {
			display: none;
		}

		.section-nav__panel {
			display: flex;
			align-items: center;
			flex-wrap: nowrap;
			overflow-wrap: normal;
			justify-content: space-between;
		}

		.section-nav-tabs {
			width: auto;
		}

		.section-nav-tabs__list {
			// Add padding to display the rounded border and remove the same distance to keep it aligned vertically
			padding-left: 6px;
			margin-left: -6px;
		}

		.section-nav-tab {
			border: 0;
			position: relative;

			.section-nav-tab__link {
				color: #fff;
				font-size: 1rem;
				padding: 0;
				border-radius: 6px 6px 0 0; /* stylelint-disable-line scales/radii */
				svg {
					fill: #fff;
				}

				&:hover {
					color: #fff;
					background: transparent;

					svg {
						fill: #fff;
					}
				}

				.section-nav-tab__text {
					display: flex;
					height: 40px;
					padding: 0 16px;
					align-items: center;
					gap: 10px;
					width: auto;

					span {
						font-size: $font-body-small;
						line-height: $font-body;
						font-weight: 500;
					}
				}
			}

			&.is-selected {
				&::before,
				&::after {
					position: absolute;
					width: 6px;
					height: 6px;
					bottom: 0;
				}

				&::before {
					left: -6px;
					background-image: url( calypso/assets/images/performance-profiler/left-outer-border.svg );
					content: '';
				}

				&::after {
					right: -6px;
					background-image: url( calypso/assets/images/performance-profiler/right-outer-border.svg );
					content: '';
				}

				.section-nav-tab__link {
					color: #000;
					background: #fff;

					svg {
						fill: #000;
					}

					&:hover {
						color: #000;
						fill: #000;
					}
				}
			}
		}

		.profiler-header__navbar-right {
			display: flex;
			align-items: center;
			gap: 16px;
			font-size: $font-body-small;
			margin-left: 25px;

			.report-site-details {
				display: flex;
				align-items: center;
				gap: 32px;

				&.hide-on-mobile {
					@media ( max-width: $break-large ) {
						display: none;
					}
				}
			}

			.share-button {
				cursor: pointer;
				display: flex;
				height: 40px;
				justify-content: center;
				align-items: center;
				gap: 4px;

				.share-icon {
					fill: #fff;
					margin-bottom: -1px;
				}
			}

			.share-button.has-color {
				.facebook {
					fill: var( --color-facebook );
				}

				.x {
					fill: var( --color-x );
				}

				.tumblr {
					fill: var( --color-tumblr );
				}

				.linkedin {
					fill: var( --color-linkedin );
				}
			}
		}
	}
}

#profiler-share-buttons-popover {
	.popover__inner {
		padding: 3px 10px 0;
		border-radius: 8px;
		border-width: 0;

		button {
			padding-right: 4px;
			padding-left: 4px;
		}
	}
	.popover__arrow {
		border-color: #fff;
		border-left-color: transparent;
		border-right-color: transparent;
	}
}
