@import "@automattic/color-studio/dist/color-variables";
@import "@automattic/components/src/styles/typography";
@import "@wordpress/base-styles/breakpoints";

@mixin promote-post-i2-font {
	color: $studio-gray-60;
	font-family: $font-sf-pro-text;
	font-weight: 400;
	font-size: 0.875rem;
	font-style: normal;
	letter-spacing: -0.15px;
	line-height: 1.43;
}

@mixin blazepress-data-row-font-mobile {
	color: var(--studio-gray-40);
	font-size: 0.75rem;
	font-weight: 400;
	line-height: 1.5;
}

@mixin blazepress-data-row-font-buttons-mobile {
	color: var(--studio-gray-60);
	font-size: 0.75rem;
	font-weight: 500;
	line-height: 1.5;
}

@mixin blazepress-data-row {
	&data-row {
		align-items: center;
		display: flex;
		width: 100%;

		&-mobile {
			display: none;
			margin-top: 20px;

			.post-item__actions-mobile {
				display: flex;
				align-items: flex-end;
				justify-content: space-between;
			}

			.post-item__stats-mobile {
				@include blazepress-data-row-font-mobile;
				align-items: center;
				display: flex;
				justify-content: space-between;
				width: 100%;
			}

			.campaign-item__stats-mobile {
				align-self: start;
				@include blazepress-data-row-font-mobile;
			}
		}
	}
}

@mixin blazepress-search-component {
	.search-component {
		border: 1px solid #ddd;
		border-radius: 4px;
		margin-bottom: 32px;

		&.is-open {
			width: 100%;

			svg,
			form,
			.search-component__input-fade {
				border-radius: 4px;
			}

			input.search-component__input[type="search"] {
				@include promote-post-i2-font;

				border-radius: 4px;
				color: var(--studio-gray-100); // Change text color
				width: 100%;

				// Prevent zoom in iPhone/Safari (ios only)
				@supports (-webkit-overflow-scrolling: touch) {
					font-size: 1rem;
				}
			}

			&.promote-post-i2__search-bar-search {
				height: 44px;
			}
		}
	}
}

@mixin blazepress-animated-skeleton {
	background-color: hsl(200, 20%, 90%);
	animation: skeleton-loading 1s linear infinite alternate;

	@keyframes skeleton-loading {
		0% {
			background-color: #eceded;
		}
		100% {
			background-color: #e6e7e7;
		}
	}
}

.notouch .promote-post-i2 .section-nav-tab__link:hover {
	background-color: transparent;
}

// Grabbed from wp-calypso/client/my-sites/sidebar/style.scss
@media screen and (max-width: 660px) {
	.theme-default {
		// client/layout/style.scss
		.layout__content {
			min-height: initial;
		}

		.focus-content:not(.has-no-sidebar) .layout__content {
			padding: 47px 0 0;
		}

		// client/layout/sidebar/style.scss
		.sidebar {
			position: absolute;
			padding-bottom: 120px;
		}
	}
}

body.is-section-promote-post-i2 {
	.layout__content {
		position: relative;
		margin: 0;
		padding: calc(32px + 24px) 0 32px var(--sidebar-width-max);

		.main {
			margin: 0;

			&.is-wide-layout {
				max-width: 100%; // 1040px

				.section-nav-tabs {
					width: 100%;

					.section-nav-tabs__list {
						align-items: start;
						display: flex;
						margin: 0 64px;
						max-width: 1040px;
						width: auto;

						@media (min-width: 481px) {
							height: 55px;
							align-items: center;
						}

						@media screen and (max-width: $break-medium) {
							overflow: auto;

							/* Hide scrollbar for Chrome, Safari and Opera */
							&::-webkit-scrollbar {
								display: none;
							}
							/* Hide scrollbar for IE, Edge and Firefox */
							-ms-overflow-style: none;  /* IE and Edge */
							scrollbar-width: none;  /* Firefox */
						}
					}

					// Hide dropdown version of tabs
					&.is-dropdown {
						margin: 0;

						.select-dropdown.section-nav-tabs__dropdown {
							display: none;
						}
					}
				}

				.promote-post-i2__divider {
					width: 100%;
					border-top: 1px solid rgba(0, 0, 0, 0.05);
					margin-top: 32px;
				}
				.promote-post-i2__header-subtitle_mobile,
				.promote-post-i2__search-bar-wrapper,
				.promote-post-i2__aux-wrapper,
				.posts-list__table,
				.campaigns-list__table,
				.payments-list__table,
				.posts-list__loading-container,
				.campaigns-total-stats__container,
				.blaze-credits-container,
				.promote-post-i2__table,
				.campaigns-list__loading-container {
					margin: 0 64px;
					max-width: 1040px;
					width: calc(100% - 128px);
				}
				.campaigns-list__table {
					td > div {
						cursor: pointer;
					}
				}
			}

			.advertising__page-header {
				// Without a banner
				.formatted-header__title {
					color: $studio-gray-100;
					font-family: $font-sf-pro-display;
					font-style: normal;
					font-weight: 500;
					font-size: 1.5rem;
					letter-spacing: 0.36px;
					line-height: 1.33;
				}

				// With a banner
				&_has-banner .formatted-header__title {
					font-family: $font-sf-pro-text;
					font-size: 0.875rem;
					letter-spacing: -0.15px;
					line-height: 1.43;
				}
			}
		}
	}
}

.promote-post-i2 {
	&__top-bar {
		align-items: center;
		display: flex;
		font-family: $font-sf-pro-text;
		justify-content: space-between;
		margin: 0 64px 16px 64px;

		.formatted-header.is-left-align,
		.formatted-header.is-right-align {
			margin: 0;
		}

		@media (min-width: 661px) {
			.formatted-header.is-left-align,
			.formatted-header.is-right-align,
			.formatted-header__title {
				margin: 0;
			}
		}

		.posts-list-banner__learn-more {
			padding: 6px 12px;
			margin-right: 8px;
			border: 1px solid var(--studio-gray-10);
			// padding: 13px 16px; // TODO: Make sure we need it this way

			.inline-support-link__nowrap {
				color: var(--studio-gray-80);
			}

			&:hover {
				border-color: var(--color-neutral-20);
			}
		}

		&-buttons {
			display: flex;
			margin-left: 10px;

			.button,
			.is-primary {
				border-radius: 4px;
			}

			.is-primary {
				box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
			}
		}

	}

	&__payment-blocked-notice {
		display: flex;
		align-items: center;
		margin: 24px;
		margin-left: auto;
		margin-right: auto;
		max-width: 1040px;
		width: calc(100% - 128px);
		justify-content: center;

		@media screen and (max-width: ($break-medium + 287px)) {
			width: calc(100% - 32px);
		}
	}

	.promote-post-i2__header-subtitle {
		&_desktop {
			display: block;
		}

		&_mobile {
			display: none;
		}
	}

	.section-nav .section-nav__panel {
		border-top: 0;
	}

	.posts-list-banner__learn-more {
		margin-top: 0;
		margin-right: 8px;

		&:focus {
			outline: none;
		}

	}

	.accessible-focus {
		.posts-list-banner__learn-more {
			&:focus {
				color: var(--color-accent);
				box-shadow: 0 0 0 1px var(--color-accent-light);
				outline: none;
			}
		}
	}

	.section-nav {
		margin-bottom: 32px;
		box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.05);

		.is-selected .section-nav-tab__link {
			background-color: transparent;
			color: $studio-gray-100;
		}

		.accessible-focus {
			.section-nav-tab__link {
				&:focus {
					box-shadow: inset 0 0 0 2px var(--color-primary-light)
				}
			}
		}


		.section-nav-tab__link .count {
			background: var(--studio-gray-0);
			color: $studio-gray-80;
		}

		.section-nav__mobile-header {
			box-sizing: border-box;
			color: var(--color-neutral-70);
			cursor: pointer;
			display: flex;
			font-size: .875rem;
			font-weight: 600;
			height: 46px;
			line-height: 16px;
			padding: 15px;
			width: 100%;
		}

		@media (min-width: 481px) {
			.section-nav__mobile-header {
				display: none;
			}
		}

		.section-nav-group {
			display: block;
		}

		@media (max-width: 480px) {
			.section-nav-group {
				display: none;
			}

			&.is-open {
				.section-nav-group {
					display: block;

					.section-nav-tabs__list {
						display: flex;
						flex-direction: column;
						height: auto;
						align-items: start;
					}
				}
			}
		}
	}

	.promote-post-i2__debt-notifier {
		color: $studio-gray-100;
		padding-top: 16px;
	}

	.section-nav-tab {
		@media (min-width: 481px) {
			margin-right: 16px;

			&.payments {
				margin-right: 0;
				margin-left: auto;
			}
		}

		&__link {
			padding: 16px 0;

			@media (min-width: 481px) {
				padding: 16px 5px;
			}

			.section-nav-tab__text {
				@include promote-post-i2-font;
				color: $studio-gray-100;
				display: inline;
				flex: none;
				width: auto;

				span {
					vertical-align: middle; // Position tabs Posts and Campaigns vertically equal
				}

				.count {
					border: none;
					border-radius: 2px;
					color: $studio-gray-80;
					font-family: $font-sf-pro-text;
					font-weight: 500;
					font-size: 0.875rem;
					line-height: 1.41; // Position tabs Posts and Campaigns vertically equal
					padding: 0 8px;
					display: none;

					@media (min-width: 481px) {
						display: inline-block;
					}
				}
			}
		}

		&.pull-right {
			margin-left: auto;
			margin-right: 0;

			@media screen and (max-width: $break-medium) {
				margin: 0 0 0 auto; // Align Credits tab to the right
			}
		}
	}
	@media (min-width: 481px) {
		.section-nav-tab.is-selected {
			border-bottom: 3px solid var(--color-neutral-70);
			height: 53px;
		}
	}

	@include blazepress-search-component;

	&__search-bar-wrapper {
		.form-text-input.search__input {
			@include promote-post-i2-font;

			color: $studio-gray-100;
			height: calc(100% - 4px) !important;
			margin: 2px 2px 2px 0;
		}

		.search__icon-navigation {
			margin: 2px 0 2px 2px;
		}
	}

	.select-dropdown__header {
		border-color: #ddd !important;
		border-radius: 4px;
	}

	.promote-post-i2__warnings-wrapper {
		display: flex;
		flex-direction: column;
		gap: 16px;
		padding-bottom: 32px;

		.calypso-notice {
			margin-bottom: 0;
		}
	}
}

.promote-post-i2__loading-container {
	text-align: center;
}

.promote-post-i2__header-container {
	display: flex;
	flex-direction: row;
	align-items: center;

	.promote-post-i2__heading {
		flex: 1;
	}
}

.promote-post-i2__footer {
	text-align: center;
	margin: 24px 0;

	a {
		color: var(--studio-gray-60);
		text-decoration: underline;
	}
}

.promote-post-i2__empty-content {
	.empty-content__title {
		font-size: $font-body-large;
		font-weight: bold;
	}

	.empty-content__line {
		font-weight: normal;
		font-size: $font-body;
	}
}

.is-mobile-app-view {

	.blazepress-widget__content {
		margin-top: 0 !important;
	}
	.layout {
		&.has-no-masterbar.is-group-sites.is-section-promote-post-i2 .layout__content {
			padding-top: 0;
		}

		.layout__content .layout__primary {
			.promote-post-i2__top-bar,
			.promote-post-i2__header-subtitle,
			.advertising__page-header,
			.promote-post-i2 .posts-list-banner__container,
			.promote-post-i2 .section-nav,
			.promote-post-i2 .post-item__view-link,
			.promote-post-i2 .campaign-item-breadcrumb,
			.promote-post-i2 .campaign-item-details__support-buttons .contact-support-button {
				display: none;
			}

			.campaign-item-header {
				margin-top: 8px;
			}

			.main {
				padding-bottom: 0;

				.promote-post-i2__search-bar-wrapper {
					padding-top: 16px;

					.promote-post-i2__search-bar-dropdown {
						top: 4rem;
					}
				}
			}
		}
	}
}

@mixin blazepress-mobile {
	.layout__content {
		main.main.promote-post-i2 {
			&.is-wide-layout {
				.section-nav-tabs__list {
					margin: 0 15px;

					@media (min-width: 481px) {
						margin: 0 16px;
						height: 54px;
					}
				}

				.promote-post-i2__header-subtitle_mobile,
				.promote-post-i2__search-bar-wrapper,
				.promote-post-i2__debt-notifier,
				.posts-list__table,
				.posts-list__loading-container,
				.campaigns-total-stats__container,
				.blaze-credits-container,
				.promote-post-i2__table,
				.campaigns-list__loading-container {
					margin: 0 16px !important;
					width: calc(100% - 32px);
				}

				.promote-post-i2__aux-wrapper {
					margin: 24px 16px 0 16px !important;
					width: calc(100% - 32px);
				}

				.payments-list__table,
				.campaigns-list__table {
					margin: 16px 16px 0 16px !important;
					width: calc(100% - 32px);
				}
			}

			.advertising__page-header {
				.formatted-header__title,
				&_has-banner .formatted-header__title {
					font-size: 1.25rem;
					line-height: 1;
				}
			}
		}
	}

	.promote-post-i2 {
		&__top-bar {
			margin: 16px;

			.posts-list-banner__learn-more {
				display: none;
			}
		}

		.promote-post-i2__header-subtitle {
			&_desktop {
				display: none;
			}

			&_mobile {
				display: block;
				font-size: 1rem;
				line-height: 1.5;
			}
		}

		.section-nav-tab {
			&__link {
				.section-nav-tab__text {
					.count {
						font-size: 0.75rem;
					}
				}
			}
		}

		.select-dropdown__header {
			border: none;
		}

		.segmented-control.is-compact {
			overflow-x: auto;
			&::-webkit-scrollbar {
				display: none;
			}
		}
	}
}

// Show Mobile view for screens if window width <= 782px
@media screen and (max-width: $break-medium) {
	@include blazepress-mobile;
}

// Show Mobile view if sidebar is collapsed and main content width <= 782px
$break-medium-collapsed-menu: $break-medium + 36px;
@media screen and (max-width: $break-medium-collapsed-menu) {
	body.is-section-promote-post-i2.is-sidebar-collapsed {
		@include blazepress-mobile;
	}
}

// Show Mobile view if sidebar is expanded and main content width <= 782px
$break-medium-expanded-menu: $break-medium + 272px;
@media screen and (max-width: $break-medium-expanded-menu) {
	body.is-section-promote-post-i2:not(.is-sidebar-collapsed) {
		@include blazepress-mobile;
	}
}

@media screen and (max-width: 782px) {
	.theme-default.is-section-promote-post-i2 .focus-content .layout__content {
		padding-left: 0;
		padding-right: 0;
		padding-top: 47px;
	}
}

@mixin blazepress-huge {
	.promote-post-i2__top-bar,
	.section-nav-tabs .section-nav-tabs__list,
	.promote-post-i2__search-bar-wrapper,
	.promote-post-i2__table,
	.promote-post-i2__aux-wrapper,
	.promote-post-i2__debt-notifier,
	.campaigns-total-stats__container,
	.blaze-credits-container,
	.posts-list-banner__container .posts-list-banner__content,
	.posts-list-woo-banner__container .posts-list-banner__content,
	.tsp-banner__container {
		margin-left: auto;
		margin-right: auto;
		max-width: 1040px;
	}
}

@media (min-width: $break-huge) {
	body.is-section-promote-post-i2:not(.is-sidebar-collapsed) .layout__content .main.is-wide-layout {
		@include blazepress-huge;
	}
}

$break-huge-collapsed-menu: $break-huge - 222px;
@media (min-width: $break-huge-collapsed-menu) {
	body.is-section-promote-post-i2.is-sidebar-collapsed .layout__content .main.is-wide-layout {
		@include blazepress-huge;
	}
}

@media screen and (max-width: $break-mobile) {
	.layout__content {
		main.main.promote-post-i2 {
			.section-nav-tab.is-selected {
				height: 51px; // Reduce heights increased by adding the bottom border
			}
		}
	}
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.blaze-credits-container {

	display: flex;
	gap: 50px;

	&__label {
		font-size: 0.875rem;
		color: $studio-gray-100;
		font-family: $font-sf-pro-text;
		font-weight: 500;
		margin-top: 34px;
	}

	&__item {
		font-size: 1.75rem;
		color: $studio-gray-100;
		font-family: $font-recoleta;
		font-weight: 400;
		margin-top: 8px;
		margin-bottom: 42px;
	}

	.credits-inline-support-link {
		all: unset;
		box-sizing: content-box;
		cursor: pointer;
		color: var(--color-neutral-30);
	}
}
