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

$search-categories-padding-block: 16px;
$search-categories-height: 40px;

.search-categories {

	display: flex;
	align-items: center;
	gap: 12px;
	padding: $search-categories-padding-block 0 0;

	.components-search-control {
		width: 100%;
		max-width: 265px;

		&.components-search-control--mobile {
			width: none;
		}
	}

	.search-categories__vertical-separator {
		border: 0.5px solid var(--studio-gray-5);
		height: 14px;
	}

	.search-categories__categories {
		flex: 1;
		margin: 0;
		max-width: none;

		.scrollable-horizontal-navigation__left-button-wrapper,
		.scrollable-horizontal-navigation__right-button-wrapper {
			margin: 0;

			&:not(.display-none) {
				display: flex;
				align-items: center;
			}

			button {
				display: flex;
				align-items: center;
				border: 0;
				padding-top: 0;
				padding-bottom: 0;
				position: static;

				.gridicon {
					top: 0;
					margin: 0;
				}
			}
		}

		.scrollable-horizontal-navigation__tabs {
			position: static;
			border: 0;
			margin: 0;
			padding: 0;
		}

		.segmented-control__link {
			border: 0 !important;
			margin: 0 2px !important;
			padding-top: 7px;
			padding-bottom: 7px;
			transition: none;

			&:focus-visible {
				box-shadow: 0 0 0 1px var(--color-primary-light) inset;
			}
			&:active {
				box-shadow: none;
			}
		}

		.segmented-control__item:first-child .segmented-control__link {
			margin-left: 0 !important;
		}

		.segmented-control__item:last-child .segmented-control__link {
			margin-right: 0 !important;
		}

		.segmented-control__item.is-selected .segmented-control__link {
			&,
			&:focus,
			&:hover {
				background-color: var(--studio-gray-80) !important;
				color: var(--studio-gray-0) !important;
			}
		}
	}

	.categories__menu {
		padding: 0;
	}

	@include break-medium {
		position: sticky;
		top: 0;
		z-index: 20;

		&.fixed-top {
			padding: $search-categories-padding-block 32px;
			margin: 0 -32px;
			box-sizing: border-box;
			border-bottom: 1px solid var(--studio-gray-5);
			background-color: var(--studio-white);
		}

		// The parent `layout__content` has the `overflow: hidden;` so we need to use fixed position.
		.plugins-browser--site-view &.fixed-top {
			position: fixed;
			top: var(--masterbar-height);
			padding: $search-categories-padding-block 24px;
			margin: 0 auto;
			box-sizing: border-box;
			border-bottom: 0;

			.layout__secondary ~ .layout__primary & {
				left: var(--sidebar-width-max);
				right: 0;
				max-width: 1040px;
			}

			&::after {
				content: '';
				position: absolute;
				bottom: 0;
				left: 50%;
				transform: translateX(-50%);
				width: calc(100vw - var(--sidebar-width-max));
				height: 0;
				border-bottom: 1px solid var(--studio-gray-5);
			}
		}
	}
}

.search-categories__sticky-placeholder {
	height: 0;

	@include break-medium {
		// This is the height + padding of the .search-categories box when it's not fixed to the top
		// We add this whitespace so the content doesn't jump when the search box becomes fixed
		height: calc(#{$search-categories-height} + #{$search-categories-padding-block});
	}
}
