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

$font-sf-pro-display: "SF Pro Display", $sans;
$font-sf-pro-text: "SF Pro Text", $sans;

.main.promote-post-i2 {
	.search {
		height: 44px;
	}

	.segmented-control {
		background-color: transparent;
		border-radius: 4px;
		margin-left: 16px;
		overflow: hidden;

		.segmented-control__link {
			align-items: center;
			display: flex;
			height: 34px;
			justify-content: center;
		}
	}

	.empty-promotion-list__title {
		font-size: 1.5rem;
	}
}

.promote-post-i2__table {
	th {
		@include promote-post-i2-font;
		padding-bottom: 8px;
	}

	.campaign-item {
		&__data,
		&__user,
		&__status,
		&__ends,
		&__budget,
		&__impressions,
		&__clicks,
		&__conversion {
			padding-right: 16px;
		}

		&__data {
			width: 28%;

			.campaign-item__status-mobile {
				display: none;
			}
		}

		&__user {
			width: 13%;
		}

		&__status {
			width: 12%;
		}

		&__ends {
			width: 13%;
		}

		&__budget {
			width: 10%;
		}

		&__spend {
			width: 10%;
		}

		&__clicks {
			width: 6%;
		}

		&__conversion {
			width: 12%;
		}

		&__action {
			width: 2%;

			button {
				color: $studio-black;

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

		&__header-image-skeleton {
			margin-right: 16px;

			@include blazepress-animated-skeleton;
		}

		font-family: $font-sf-pro-text;
		font-style: normal;
		font-weight: 400;
		font-size: 0.875rem;
		line-height: 20px;
		letter-spacing: -0.15px;
		color: #50575e;
		padding-bottom: 8px;
	}

	tr {
		font-size: 1rem;
	}

	td {
		border-top: 1px solid #eee;
		color: $studio-gray-60;
		font-size: 0.875rem;
		letter-spacing: -0.15px;
		line-height: 1.43; /* #EEEEEE if bg is white */
		padding-bottom: 16px;
		padding-right: 16px;
		padding-top: 16px;
		vertical-align: middle;
		text-align: left;
	}

	td:last-child {
		padding-right: 0;
	}

	.promote-post-i2__campaign-item-wrapper {
		color: $studio-gray-100;
		display: flex;
		align-items: center;
		font-weight: 500;

		.campaign-item__skeleton-text {
			width: 142px;
			height: 16px;
			border-radius: 4px;
			margin-top: 8px;
			&.campaign-item__skeleton-text2 {
				width: 97px;
				margin-top: 12px;
			}

			@include blazepress-animated-skeleton;
		}
	}

	.campaign-item__header-image {
		&,
		&-skeleton {
			background-color: #f5f5f5;
			background-repeat: no-repeat;
			background-position: 50% 50%;
			background-size: cover;
			border: 1px solid #eee;
			border-radius: 4px;
			display: block;
			height: 78px;
			margin-right: 16px;
			min-width: 108px;
			width: 108px; // TODO: adjust height and width for mobile devices as well.
		}

		img{
			height: 100%;
			width: 100%;
			object-fit: cover;
			display: block;
		}
	}
}

.promote-post-i2__table,
.campaign-item__header-status {
	.badge {
		border-radius: 4px;
		font-size: 0.75rem;
		line-height: 1.666666666666667;
		white-space: nowrap;

		&.badge--error {
			background-color: #facfd2;
			color: #8a2424;
		}

		&.badge--warning {
			color: #4f3500;
			background-color: #f5e6b3;
		}

		&.badge--success {
			color: #00450c;
			background-color: #b8e6bf;
		}

		&.badge--info {
			color: var(--color-neutral-70);
			background-color: var(--color-neutral-5);
		}

		&.badge--info-blue {
			background-color: #bbe0fa;
			color: #02395c;
		}

		&.badge--info-green {
			color: var(--studio-green-80);
			background-color: rgba(184, 230, 191, 0.64);
		}

		&.badge--info-purple {
			color: var(--studio-woocommerce-purple-80);
			background-color: var(--studio-woocommerce-purple-5);
		}
	}
}

@mixin blazepress-campaigns-table-mobile {
	.promote-post-i2__table {
		tr {
			&:not(:last-child) td {
				border-bottom: 1px solid #eee;
			}
		}

		td {
			border-top: none;
			padding-bottom: 14px;
			padding-right: 0;
		}

		.campaign-item {
			&__user,
			&__status,
			&__ends,
			&__budget,
			&__spend,
			&__clicks,
			&__conversion,
			&__action {
				display: none;
			}

			&__status-mobile {
				display: block;
				margin-top: 8px;
			}
		}

		th.campaign-item__data {
			display: none; // Hide the column name according to the design
		}
	}
}

// Show Mobile view for screens if window width <= 782px
@media screen and (max-width: $break-medium) {
	@include blazepress-campaigns-table-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-campaigns-table-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-campaigns-table-mobile;
	}
}

.promote-post-i2 {
	.promote-post-i2__payment-blocked-notice {
		border: none;
		box-shadow: none;
		max-width: 1040px;
		width: calc(100% - 128px);
		padding: 0;


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

		.calypso-notice__text {
			display: inline-block;
			padding-right: 16px;
		}
	}
}
