@import '@wordpress/base-styles/breakpoints';
@import '@wordpress/base-styles/mixins';

:root {
	--color-light-backdrop: var( --studio-white );
}

.main.hosting-dashboard-layout.sites-dashboard {
	.hosting-dashboard-layout-column {
		.hosting-dashboard-layout-column__container {
			display: flex;
			flex-direction: column;
			height: 100%;
		}
	}

	.site-actions__actions-large-screen {
		display: block;
		margin-left: 10px;
		margin-right: 10px;
	}

	.site-actions__actions-small-screen {
		position: unset;
		margin-left: 10px;
		margin-right: 10px;
	}

	.hosting-dashboard-layout__top-wrapper {
		padding-block-start: 16px;
	}

	.sites-dataviews__site {
		.button {
			flex-shrink: 0;
		}
		.sites-dataviews__site-name {
			padding: 0;
		}
	}
	@media ( min-width: $break-large ) {
		background: inherit;

		&.sites-dashboard__layout:not( .preview-hidden ) .sites-overview__page-title {
			font-size: 1.25rem;
			font-weight: 500;
		}

		&.sites-dashboard__layout:not( .preview-hidden ) .sites-overview__page-subtitle {
			display: none;
		}
	}

	@media ( max-width: $break-large ) {
		.section-nav__mobile-header {
			padding: 13px;
		}

		&.sites-dashboard__layout {
			.sites-overview {
				overflow: hidden;

				.sites-overview__page-title-container {
					display: flex;
				}

				#sites-overview-add-sites-button {
					a.button.split-button__main {
						width: auto;
						height: auto;
						font-size: rem( 12px );
						line-height: 24px;
						padding: 0 12px;
					}
				}

				.current-section button {
					margin-top: 12px;
					padding: 14px 8px;
				}

				a.sites-overview__issue-license-button {
					display: flex;
					font-size: rem( 12px );
					justify-content: center;
					align-items: center;
					height: 28px;
					flex-grow: 0;
				}

				.sites-overview__tabs {
					border-bottom: 1px solid var( --color-accent-5 );
				}
			}
		}

		.hosting-dashboard-item-view__content {
			padding: 10px 10px 88px; /* 88px matches the padding from PR #39201. */

			.backup__page .main {
				/* Prevents the backup page from overriding our padding and overflow settings. */
				padding-bottom: 88px; /* 88px matches the padding from PR #39201. */
				overflow: hidden;
			}
		}
	}

	@media ( max-width: $break-wide ) {
		&.sites-dashboard__layout:not( .preview-hidden ) {
			flex-direction: column;
			gap: 0;

			.sites-overview__container {
				min-height: 0;
				overflow: hidden;
			}

			.sites-overview {
				width: unset;
				display: none;
			}
		}
	}

	@media ( min-width: $break-large ) {
		&.sites-dashboard__layout:not( .preview-hidden ) {
			.sites-overview {
				padding: 0;

				// FIXME: Remove this style, as the list view will likely be removed in the future.
				.hosting-dashboard-layout__header-title {
					font-size: rem( 20px );
					font-weight: 500;
					letter-spacing: normal;
				}
			}

			.sites-overview__issue-license-button-short-caption {
				height: 28px;
				width: auto;
				line-height: 11px;
				font-size: rem( 12px );
			}

			.sites-overview__page-subtitle {
				display: none;
			}

			.sites-overview__tabs {
				border-bottom: 1px solid var( --color-accent-5 );
				padding: 0 24px;
			}

			.sites-overview__page-title {
				font-size: rem( 20px );
				font-weight: 500;
			}

			.sites-overview__issue-license-button {
				display: flex;
				font-size: rem( 12px );
				justify-content: center;
				align-items: center;
				height: 28px;
			}
		}
	}

	&.sites-dashboard__layout:not( .preview-hidden ) {
		.components-base-control {
			margin-right: 6px;
		}

		.site-preview__open {
			display: none;
		}
	}

	&.sites-dashboard__layout {
		.activity-card-list .activity-card .activity-card__time {
			background: none;
		}

		.sites-overview__add-site-issue-license-buttons {
			display: flex;
			grid-gap: 8px;

			&.is-with-split-button {
				flex-direction: row;

				> a {
					flex-grow: 1;
				}

				.split-button {
					display: flex;
				}

				.split-button__main {
					flex-grow: 1;
				}

				@media ( max-width: $break-small ) {
					> a {
						flex-grow: 0;
					}
				}
			}
		}

		.sites-overview__add-new-site {
			white-space: nowrap;
		}

		.sites-overview {
			height: 100%;

			// FIXME: This styles can be removed once the flyout panel is removed.
			width: 400px;
			flex: unset;
			transition: all 0.2s;
		}

		@media only screen and ( min-width: $break-large ) {
			.sites-overview {
				padding: 24px 18px;
			}
		}

		.sites-overview__container {
			min-height: calc( 100vh - 90px );
		}

		.sites-overview__page-title {
			font-size: rem( 24px );
		}

		.hosting-dashboard-item-view {
			flex-grow: 1;
			width: auto;
			transition: flex-grow 0.2s;
			background: var( --color-light-backdrop );
			max-height: calc( 100vh - 32px - var( --masterbar-height ) );
			border-radius: 8px;
			@media ( max-width: $break-small ) {
				max-height: calc( 100vh - var( --masterbar-height ) );
			}
			.hosting-dashboard-item-view__navigation {
				box-shadow: none;
				border-bottom: 1px solid var( --color-border-subtle );
				padding-top: 1px;

				&.is-hidden {
					border-bottom: none;
					padding-top: none;
				}
			}
		}

		.site-preview__open {
			display: block;
		}

		&.preview-hidden {
			// FIXME: This styles can be removed once the flyout panel is removed.
			.sites-overview {
				flex-grow: 1;
				transition: flex-grow 0.2s;
			}

			.hosting-dashboard-item-view {
				max-width: 0;
				padding: 0;
			}

			@media only screen and ( min-width: $break-large ) {
				.sites-overview {
					padding: 0;
				}
			}
		}

		@media ( max-width: 660px ) {
			.sites-overview__page-heading {
				display: none;
			}
		}
	}

	.sites-overview__add-site-issue-license-buttons {
		display: flex;
		flex-direction: column;
		gap: 8px;

		> a,
		> button {
			font-size: 1rem;
			box-sizing: border-box;
			max-height: 40px;
		}

		@include break-large {
			flex-direction: row;
		}
	}

	.sites-overview__add-site-issue-license-buttons.is-with-split-button {
		flex-direction: row;

		> a {
			flex-grow: 1;
		}

		.split-button {
			display: flex;
		}

		.split-button__main {
			flex-grow: 1;
		}

		@include break-small {
			> a {
				flex-grow: 0;
			}
		}
	}

	.sites-overview__add-new-site {
		white-space: nowrap;
	}

	.sites-overview__column-action-button {
		max-width: 100%;
		display: inline-flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		width: fit-content;
		height: 22px;
		background: var( --color-light-backdrop );
		box-sizing: border-box;
		border-radius: 12px; /* stylelint-disable-line scales/radii */
		font-weight: 500;
		font-size: 0.75rem;
		vertical-align: middle;
		color: var( --color-accent-80 );
		border: 1px solid var( --color-accent-5 );
		padding: 2px 11px;
		cursor: pointer;
		white-space: nowrap;

		span {
			margin: 0 0.2em;
		}
		svg {
			margin-inline-start: -0.4em;
		}
		&:hover:not( .is-link ) {
			background: var( --color-accent-80 );
			color: var( --color-light-backdrop );
		}

		&:visited:not( :hover ) {
			color: var( --color-accent-80 );
		}

		&.is-selected {
			background: var( --color-jetpack-50 );
			color: var( --color-light-backdrop );
			border: none;
		}

		&.is-link {
			border: none;
			background: none;
			text-decoration: underline;
			outline: none;
			margin: 0;
			padding: 0;

			&:hover {
				color: var( --color-accent-80 );
			}
		}
	}

	.sites-overview__grey-icon {
		vertical-align: middle;
		color: var( --color-accent-40 );
	}
	.sites-overview__icon-active {
		vertical-align: middle;
		color: var( --color-accent-5 );
	}
	.sites-overview__stats-trend__up,
	.sites-overview__stats-trend__down {
		vertical-align: middle;
		display: inline-flex;
		margin-inline-start: -5px;
	}
	.sites-overview__stats-trend__up {
		fill: var( --color-jetpack-40 );
	}
	.sites-overview__stats-trend__down {
		fill: var( --color-scary-50 );
	}
	.sites-overview__stats-trend__same .empty-icon {
		vertical-align: middle;
		height: 8px;
		width: 8px;
		border-radius: 50%;
		background: var( --color-accent-5 );
		display: inline-flex;
		margin-inline-end: 5px;
		@media screen and ( max-width: $break-xlarge ) {
			margin-block-start: 8px;
		}
	}
	.sites-overview__stats .shortened-number,
	.sites-overview__stats-trend .shortened-number {
		vertical-align: middle;
		color: var( --color-accent-80 );
		font-size: 0.75rem;
	}
	.sites-overview__stats-trend svg {
		position: relative;
		inset-block-start: 0.3rem;
		@media screen and ( max-width: $break-xlarge ) {
			inset-block-start: 0.27rem;
		}
	}
	.sites-overview__disabled {
		color: var( --color-accent-5 );
		cursor: not-allowed;
		opacity: 0.5;
		button {
			pointer-events: none;
		}
	}
	.sites-overview__row-text {
		display: inline-block;
		font-weight: 500;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: clip;
		vertical-align: middle;
		color: var( --color-accent-100 );
		align-items: center;
		@include break-zoomed-in {
			width: calc( 100% - 120px );
			margin-inline-start: 8px;
			margin-inline-end: 5px;
			font-size: 1rem !important;
		}
	}

	.site-host-info {
		display: inline-block;
		margin-inline-end: 10px;
		min-width: 40px;
		text-align: center;

		.wordpress-logo {
			display: inline-block;
			fill: var( --color-primary-50 );
			visibility: hidden;
			margin: auto 0;

			&.is-visible {
				visibility: visible;
			}
		}
	}

	.sites-overview__error-container {
		background: #414141;
		margin: 0 -6px;
		display: flex;
		align-items: center;
		height: 40px;
		position: relative;
	}
	.sites-overview__error-icon {
		background: #d94f4f;
		padding: 11px;
		color: var( --color-light-backdrop );
		width: 5%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.sites-overview__error-message {
		font-size: 0.75rem;
		color: var( --color-light-backdrop );
		padding: 0.5em;
		margin: auto 0;
	}
	.sites-overview__error-message-large-screen {
		display: none;
		@include break-wide {
			display: inline-block;
		}
	}
	.sites-overview__error-message-small-screen {
		display: inline-block;
		@include break-wide {
			display: none;
		}
	}
	.sites-overview__error-message-link {
		font-size: 0.75rem;
		color: var( --color-text-white ) !important;
		padding: 6px;
		position: absolute;
		inset-inline-end: 16px;
		text-decoration: underline;
		font-weight: 500;
	}
	.sites-overview__badge {
		font-size: 0.75rem !important;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		vertical-align: middle;
		@include break-wide {
			max-width: 70px;
		}
		@include break-wide() {
			max-width: fit-content;
		}
	}

	.sites-overview__stats {
		color: var( --color-text-black );
		display: inline-block;
		line-height: 17px;
		height: 18px;
		padding: 2px 1px;
	}
	.sites-overview__tooltip {
		.popover__arrow {
			&::before {
				border-bottom-color: var( --color-accent-60 ) !important;
				inset-block-start: 1px !important;
			}
		}
		.popover__inner {
			background: var( --color-accent-60 );
			color: var( --color-text-white );
			padding: 10px 12px;
			border: none;
		}
	}
	.sites-overview__status-critical {
		color: var( --color-scary-50 );
		position: absolute;
		inset-inline-end: 42px;
		inset-block-start: 50%;
		transform: translateY( -50% );
		display: inline-flex;
	}
	.sites-overview__status-count {
		position: absolute;
		inset-inline-end: 42px;
		inset-block-start: 50%;
		transform: translateY( -50% );
		border-radius: 50%;
		border-width: 2px;
		border-style: solid;
		width: 24px;
		height: 24px;
		text-align: center;
		font-size: 0.75rem;
		line-height: 20px;
		box-sizing: border-box;
	}
	.sites-overview__status-failed {
		background-color: var( --color-scary-50 );
		border-color: var( --color-scary-50 );
		color: var( --color-text-inverted );
	}
	.sites-overview__status-warning {
		background-color: var( --color-yellow-20 );
		border-color: var( --color-yellow-20 );
		color: var( --color-warning-80 );
	}
	@keyframes highlight-tab-animation {
		0% {
			background: var( --color-neutral-70 );
		}
		100% {
			background: unset;
		}
	}
	@keyframes highlight-tab-animation-count {
		0% {
			color: var( --color-text-inverted );
		}
		100% {
			color: unset;
		}
	}
	@keyframes highlight-tab-animation-icon {
		0% {
			fill: var( --color-text-inverted );
		}
		100% {
			fill: unset;
		}
	}
	.sites-overview__highlight-tab.section-nav {
		animation: highlight-tab-animation 0.4s linear;
		.section-nav__mobile-header-text {
			animation: highlight-tab-animation-count 0.4s linear;
		}
		.section-nav__mobile-header .gridicon {
			animation: highlight-tab-animation-icon 0.4s linear;
		}
	}
	.sites-overview__no-sites {
		text-align: center;
		font-size: 1.5rem;
		margin-top: 16px;
	}

	.sites-overview__issue-licenses-button-small-screen {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		padding: 1rem;
		background: var( --color-light-backdrop );
		box-shadow: 0 -1px 2px rgba( 0, 0, 0, 0.12 );
		z-index: 20;

		.sites-overview__licenses-buttons-issue-license {
			width: 70%;
			max-width: 275px;
		}

		@include break-mobile {
			text-align: right;
		}

		@include breakpoint-deprecated( '>660px' ) {
			left: var( --sidebar-width-min );
			padding: 0.5rem;
		}
	}

	.sites-overview__column-content {
		font-size: 0.75rem !important;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		vertical-align: middle;
	}

	.sites-overview__warning {
		@extend .sites-overview__column-content;
		color: var( --color-warning-50 );
	}

	.sites-overview__failed {
		@extend .sites-overview__column-content;
		color: var( --color-scary-50 );
	}

	.sites-overview__critical {
		@extend .sites-overview__column-content;
		padding: 15px;
		color: var( --color-scary-50 );
	}

	@mixin boost-score-style( $color, $background-color ) {
		@extend .sites-overview__column-content;
		color: $color;
		background-color: $background-color;

		&:hover,
		&:active,
		&:focus {
			color: $color;
			background-color: $background-color;
		}
	}

	a.sites-overview__boost-score {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		width: 24px;
		height: 24px;
		font-weight: 500;
		user-select: none;

		&.boost-score-good {
			@include boost-score-style( var( --color-jetpack-50 ), var( --color-jetpack-0 ) );
		}

		&.boost-score-okay {
			@include boost-score-style( var( --color-yellow-50 ), var( --color-yellow-0 ) );
		}

		&.boost-score-bad {
			@include boost-score-style( var( --color-scary-50 ), var( --color-scary-0 ) );
		}
	}

	.width-fit-content {
		width: fit-content !important;
	}

	.site-content__small-screen-view {
		.sites-overview__icon-active {
			position: relative;
			left: 4px;
		}
	}

	.fixed-site-column {
		max-width: 140px !important;
		min-width: 140px !important;
	}

	.cursor-pointer {
		cursor: pointer;
	}

	.is-loading {
		opacity: 0.5;
	}

	.margin-top-16 {
		margin-top: 16px;
	}
}

/* Once LicenseLightboxJetpackManageLicense is ported to A4A, this can be removed */
.is-section-a8c-for-agencies-sites {
	.license-lightbox__jetpack-manage-license-title {
		display: none;
	}
}

.sites-dashboard__empty {
	display: flex;
	flex-direction: column;
	gap: 24px;
	align-items: center;

	margin: 24px auto;
	padding: 64px 0;
	max-width: 700px;
	text-align: center;
}

.sites-dashboard__empty-message {
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
}

.sites-dashboard__empty-actions {
	display: flex;
	flex-direction: row;
	gap: 8px;

	margin: 0 auto;

	> .button {
		display: flex;
		align-items: center;
		justify-content: center;
	}
}

/*
 * For Domain and Email related pages under site context.
 */
.wpcom-site .hosting-dashboard-layout.domains-overview.main .hosting-dashboard-item-view {
	.hosting-dashboard-item-view__content {
		padding: 0;
		padding-bottom: 48px;

		@include break-medium {
			padding: 24px;
		}

		@include break-large {
			padding: 32px 24px 24px;
		}
	}
}
