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

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

@mixin blazepress-campaign-filter-item {
	font-family: $font-sf-pro-display;
	font-size: 0.875rem;
	font-weight: 500;
	letter-spacing: 0.16px;
	line-height: 1.42;
}

.promote-post-i2__search-bar-wrapper {
	margin-bottom: 20px;
	display: flex;
	flex-direction: row;
	.promote-post-i2__search-bar-search.search-component {
		max-width: 264px;
	}
	.promote-post-i2__search-bar-options {
		display: flex;

		.promote-post-i2__search-bar-dropdown {
			.select-dropdown__header {
				border: none;
				height: 44px;
			}
			&.select-dropdown {
				&.order-by .select-dropdown__container {
					min-width: 200px;
				}
				&.post-type .select-dropdown__container {
					min-width: 160px;
				}
				&.campaigns-filter .select-dropdown__container {
					min-width: 160px;
				}

				&.campaigns-order-by .select-dropdown__container {
					min-width: 100px;
				}
			}
		}

	}

	.segmented-control {
		border-radius: 4px;
		border: 1px solid #ddd;
		height: 44px;
		.segmented-control__item,
		&.is-primary .segmented-control__item.is-selected {
			background-color: #fff;
		}

		.segmented-control__item .segmented-control__link {
			border: none;
			height: 34px;
			margin: 5px 0;
			padding: 0 16px;

			.segmented-control__text {
				@include blazepress-campaign-filter-item;

				color: var(--studio-gray-60);
			}
		}

		&.control-woo {
			min-width: 460px;
		}

		&.is-primary {
			.segmented-control__item.is-selected {
				.segmented-control__link {
					background-color: #f6f7f7 !important;
					border: none;
					border-radius: 2px;
					box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
					height: 20px;
					margin: 4px 0;
					padding: 8px 16px;

					.segmented-control__text {
						@include blazepress-campaign-filter-item;

						color: var(--studio-gray-100);
					}
				}
			}

			// Add extra 4px margin to the left/right for the first/last item respectively.
			.segmented-control__item.is-selected,
			.segmented-control__item {
				&:first-child {
					.segmented-control__link {
						margin-left: 4px;
					}
				}

				&:last-child {
					.segmented-control__link {
						margin-right: 4px;
					}
				}
			}

			.segmented-control__item.is-selected + .segmented-control__item .segmented-control__link {
				border-left: none;
			}

			.segmented-control__item:not(.is-selected) .segmented-control__link:hover {
				background-color: #f6f7f7 !important;
				border: none;
				border-radius: 2px;
				box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
				height: 20px;
				margin: 4px 0;
				padding: 8px 16px;
				.segmented-control__text {
					@include blazepress-campaign-filter-item;

					color: var(--studio-gray-100);
				}
			}

			.segmented-control__item:not(.is-selected .segmented-control__link:hover) {
				&:first-child {
					.segmented-control__link {
						margin-left: 4px;
					}
				}

				&:last-child {
					.segmented-control__link {
						margin-right: 4px;
					}
				}
			}
		}
	}

	.notouch .segmented-control.is-primary .segmented-control__item.is-selected .segmented-control__link:hover {
		background-color: #fff; // Remove hover from active filter item
	}
}

.accessible-focus .promote-post-i2__search-bar-wrapper {
	.select-dropdown:not(.is-open) .select-dropdown__container:focus .select-dropdown__header {
		box-shadow: inset 0 0 0 2px var(--color-primary-light);
	}
	.segmented-control__item.is-selected{
		.segmented-control__link:focus {
			background-color: var(--color-primary) !important;
			.segmented-control__text {
				color: var(--color-surface);
			}
		}
	}

	.segmented-control__item .segmented-control__link {
		&:focus {
			box-shadow: inset 0 0 0 2px var(--color-primary-light);
		}
	}
}

@mixin blazepress-search-bar-mobile {
	.main.promote-post-i2 .promote-post-i2__search-bar-wrapper {
		display: flex;
		flex-direction: column;
		position: relative;

		.promote-post-i2__search-bar-search.search-component {
			margin-bottom: 12px;
			max-width: 100%;
		}

		.promote-post-i2__search-bar-options {
			width: 100%;
			justify-content: space-between;
		}

		.promote-post-i2__search-bar-dropdown {
			margin: 0;

			.select-dropdown__header {
				background: transparent;

				&-text {
					margin-right: 12px;
				}
			}

			.select-dropdown__options {
				border: 1px solid var(--color-neutral-10);
			}
		}
	}

	body.is-section-promote-post-i2:not(.is-sidebar-collapsed) .main.promote-post-i2 {
		.promote-post-i2__search-bar-wrapper .segmented-control.is-primary .segmented-control__item.is-selected {
			margin: 0;
		}

		.promote-post-i2__search-bar-wrapper .segmented-control.is-compact .segmented-control__link {
			padding: 0 16px;
		}
	}

	.segmented-control {
		.segmented-control__item,
		.segmented-control__item.is-selected {
			.segmented-control__link {
				height: 12px;
				margin: 0;
			}
		}
	}
}

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