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

.sites-overview {
	.current-section {
		padding: 0 16px;
	}
}

.sites-overview__container {
	display: flex;
	flex-direction: column;
	// The -76px is to undo the padding of layout.has-no-masterbar (32px), .layout__content (32px) and .sites-overview_container (6px + 6px)
	min-height: calc(100vh - 76px);
	padding: 6px 0;
}

.sites-overview__content-wrapper {
	max-width: 1500px;
	margin: auto;
	@include break-xlarge {
		padding: 0;
	}
}
.sites-overview__tabs {
	// We need these negative margin values because we want to make the container full-width,
	// but our element is inside a limited-width parent.
	margin: 0 -32px;
	padding: 0 48px;
}

.sites-overview__add-site-issue-license-buttons {
	// We need these negative margin values because we want to make the container full-width,
	// but our element is inside a limited-width parent.
	margin: 0 -48px 8px;
	padding: 8px 48px;

	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__content {
	// We need these negative margin values because we want to make the container full-width,
	// but our element is inside a limited-width parent.
	margin: 0 -32px -32px;
	padding: 8px 48px;
	flex: 1 1 100%;
	@include break-large {
		padding: 16px 48px;
		background: rgba(255, 255, 255, 0.5);
		margin: 0 -32px -38px;
	}
}
.sites-overview__page-title-container {
	display: none;

	@include breakpoint-deprecated( ">660px" ) {
		display: flex;
		justify-content: space-between;
		flex-direction: column;
	}

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

	&.is-sticky {
		position: fixed;
		width: calc(100% - var(--sidebar-width-max));
		left: var(--sidebar-width-max);
		top: var(--masterbar-height);
		background-color: rgba(246, 247, 247, 0.95);
		box-shadow: 2px 2px 2px 0 rgb(0 0 0 / 8%);
		z-index: 1001;
		height: 74px;

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

		.sites-overview__licenses-buttons {
			margin-right: 48px;
			margin-block: auto;
		}
	}
}

.sites-overview__page-title {
	color: var(--studio-gray-80);
	margin-block-end: 8px;
	font-weight: 600;
}

.sites-overview__page-subtitle {
	font-size: 0.875rem;
	color: var(--studio-gray-60);
	margin-bottom: 8px;
}

.sites-overview__viewport {
	margin-left: auto;
}

.sites-overview__licenses-buttons {
	margin-left: auto;

	button,
	a {
		font-size: 1rem;
	}

	.sites-overview__licenses-buttons-cancel {
		text-decoration: underline;
		margin-inline-end: 32px;
		text-underline-offset: 3px;
	}
}

.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(--studio-white);
	box-sizing: border-box;
	border-radius: 12px; /* stylelint-disable-line scales/radii */
	font-weight: 500;
	font-size: 0.75rem;
	vertical-align: middle;
	color: var(--studio-gray-80);
	border: 1px solid var(--studio-gray-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(--studio-gray-80);
		color: var(--studio-white);
	}

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

	&.is-selected {
		background: var(--studio-jetpack-green-50);
		color: var(--studio-white);
		border: none;
	}

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

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

.sites-overview__grey-icon {
	vertical-align: middle;
	color: var(--studio-gray-40);
}
.sites-overview__icon-active {
	vertical-align: middle;
	color: var(--studio-gray-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(--studio-jetpack-green-40);
}
.sites-overview__stats-trend__down {
	fill: var(--studio-red-50);
}
.sites-overview__stats-trend__same .empty-icon {
	vertical-align: middle;
	height: 8px;
	width: 8px;
	border-radius: 50%;
	background: var(--studio-gray-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(--studio-gray-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(--studio-gray-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(--studio-gray-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(--studio-blue-50);
		visibility: hidden;
		margin: auto 0;

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

.sites-overview__overlay {
	display: block;
	position: absolute;
	height: 49px;
	width: 20px;
	background: linear-gradient(to right, rgba(255, 255, 255, 0.8) 30%, rgba(255, 255, 255, 1) 100%);
	inset-block-start: 0;
	inset-inline-end: 75px;
}
.sites-overview__vertical-align-middle {
	vertical-align: middle;
}
.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(--studio-white);
	width: 5%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.sites-overview__error-message {
	font-size: 0.75rem;
	color: var(--studio-white);
	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(--studio-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(--studio-black);
	display: inline-block;
	line-height: 17px;
	height: 18px;
	padding: 2px 1px;
}
.sites-overview__tooltip {
	.popover__arrow {
		&::before {
			border-bottom-color: var(--studio-gray-60) !important;
			inset-block-start: 1px !important;
		}
	}
	.popover__inner {
		background: var(--studio-gray-60);
		color: var(--studio-white);
		padding: 10px 12px;
		border: none;
	}
}
.sites-overview__status-critical {
	color: var(--studio-red-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(--studio-red-50);
	border-color: var(--studio-red-50);
	color: var(--color-text-inverted);
}
.sites-overview__status-warning {
	background-color: var(--studio-yellow-20);
	border-color: var(--studio-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(--studio-white);
	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(--studio-red-50);
}

.sites-overview__critical {
	@extend .sites-overview__column-content;
	padding: 15px;
	color: var(--studio-red-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(--studio-green-50), var(--studio-green-0));
	}

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

	&.boost-score-bad {
		@include boost-score-style(var(--studio-red-50), var(--studio-red-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;
}

.sites-dataviews__favorite-btn-wrapper {
	position: relative;

	.site-set-favorite__favorite-icon {
		visibility: hidden;
		color: var(--color-primary);
	}

	button.site-set-favorite__favorite-icon {
		position: unset;
	}

	&:hover {
		.site-set-favorite__favorite-icon {
			visibility: visible;
		}
	}
}
