@import 'mediawiki.skin.variables.less';

.wikibase-faceted-search {
	&__topbar,
	&__sidebar {
		margin-bottom: @spacing-100;
	}

	&__topbar {
		font-size: @font-size-medium; // Make sure settings button is the same size as tabs
		overflow-x: auto;

		.cdx-tabs__header {
			column-gap: @spacing-50;
		}

		.cdx-tabs__list {
			flex-grow: 1;
		}

		.wikibase-faceted-search__instance {
			display: flex;
			align-items: center;
			gap: @spacing-25;
		}

		.wikibase-faceted-search__settings-button {
			flex-shrink: 0;

			/* Turn into icon only button in narrow viewport */
			@media ( max-width: @max-width-breakpoint-mobile ) {
				font-size: 0;
				gap: 0;
			}
		}
	}

	&__icon {
		&--check {
			.cdx-mixin-css-icon( @cdx-icon-check );
		}

		&--filter {
			.cdx-mixin-css-icon( @cdx-icon-funnel );
		}

		&--settings {
			.cdx-mixin-css-icon( @cdx-icon-edit, @param-size-icon: @size-icon-small );
		}
	}

	// Common
	&__facets {
		position: sticky;
		top: @spacing-100;

		@media ( min-width: @min-width-breakpoint-tablet ) {
			max-height: calc( 100vh - @spacing-100 * 2 );
			overflow-y: auto;
		}

		@media ( max-width: @max-width-breakpoint-tablet ) {
			display: none;

			&.wikibase-faceted-search__dialog {
				display: block;
			}
		}

		&-dialog-button.cdx-button {
			width: 100%;
			max-width: none;

			@media ( min-width: @min-width-breakpoint-desktop ) {
				display: none;
			}
		}

		&-header {
			position: sticky;
			top: 0;
			z-index: @z-index-sticky;
			padding: @spacing-75;
			border-bottom: @border-subtle;
			font-weight: @font-weight-bold;
			background-color: @background-color-base;
		}

		.cdx-accordion {
			&__content {
				font-size: inherit;
			}

			.cdx-accordion__header {
				font-size: inherit;
				font-weight: @font-weight-bold;
			}
		}
	}

	&__facet-mode.cdx-select {
		min-width: auto;
		width: 100%;
		margin-bottom: @spacing-100;
	}

	// List facet
	&__facet-items {
		&-overflow {
			position: relative;
			margin-top: @spacing-75;
			padding-bottom: @min-size-interactive-pointer; // Make room for the summary button

			&-buttons {
				position: absolute;
				bottom: 0;
				left: 0;
				right: 0;
				display: block;

				.cdx-button {
					width: 100%;
					max-width: none;
				}
			}

			&-button-hide.cdx-button {
				display: none;
			}

			&[ open ] {
				padding-bottom: @min-size-interactive-pointer + @spacing-75;

				.wikibase-faceted-search__facet-items-overflow {
					&-button-show.cdx-button {
						display: none;
					}

					&-button-hide.cdx-button {
						display: inline-flex;
					}
				}
			}
		}
	}

	&__facet-item {
		.cdx-label {
			flex-grow: 1;
		}

		.cdx-label__label__text {
			display: flex;
			align-items: center;
		}

		&-range {
			display: grid;
			gap: @spacing-50;
			// stylelint-disable-next-line @stylistic/declaration-colon-space-after
			grid-template-areas:
				'min max'
				'apply apply';

			&-min {
				grid-area: min;
			}

			&-max {
				grid-area: max;
			}

			&-apply {
				grid-area: apply;

				// Need the specificity to override cdx-button
				&.cdx-button {
					max-width: none;
				}
			}

			.cdx-text-input {
				min-width: auto; // remove min-width set by cdx-text-input
			}
		}

		&--selected {
			font-weight: bold;
		}
	}

	&__facet-label {
		&-text {
			flex-grow: 1;
		}

		&-count {
			color: @color-subtle;
			font-size: @font-size-x-small;
			flex-shrink: 0;
		}
	}
}

// HACK: Creating a multi-column layout
.mw-body-content:has( .wikibase-faceted-search__topbar ) {
	display: grid;
	// stylelint-disable-next-line @stylistic/declaration-colon-space-after
	grid-template-areas:
		'searchform'
		'topbar'
		'sidebar'
		'results';

	@media ( min-width: @min-width-breakpoint-desktop ) {
		// stylelint-disable-next-line @stylistic/declaration-colon-space-after
		grid-template-areas:
			'searchform searchform'
			'topbar topbar'
			'results sidebar';
		grid-template-columns: minmax( 0, auto ) 240px;
		column-gap: @spacing-150;
	}

	.mw-search-form-wrapper {
		grid-area: searchform;
	}

	.searchresults {
		grid-area: results;
	}

	.wikibase-faceted-search {
		&__topbar {
			grid-area: topbar;
		}

		&__sidebar {
			grid-area: sidebar;
		}
	}

	// Need the specificity to override #mw-content-text .mw-search-results
	&#mw-content-text .mw-search-results {
		margin-top: 0;
	}

	.mw-search-results-container,
	.mw-search-results-info {
		width: 100%;
	}

	.mw-search-results-container {
		word-break: break-word;
	}
}