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

@uls-rewrite-font-size-small: 12px;
@uls-rewrite-font-size-medium: 14px;
@uls-rewrite-font-size-large: 20px;

@uls-rewrite-horizontal-padding: @spacing-75;
@uls-rewrite-body-padding: @spacing-50 @uls-rewrite-horizontal-padding;
// The Codex search input padding is: @spacing-50 + @spacing-50 + @size-icon-medium .
// The ULS body already has horizontal padding.
// We subtract the body padding from the search input padding to align them perfectly.
@uls-rewrite-language-item-padding-start: calc( @spacing-50 + @spacing-50 + @size-icon-medium - @uls-rewrite-horizontal-padding );
@uls-rewrite-missing-languages-padding-start: calc( @spacing-50 + @spacing-50 + @size-icon-medium );
@uls-rewrite-quick-actions-trigger-clearance: @spacing-150;

// Layout & Dimensions
@uls-rewrite-max-height: 312px;
@uls-rewrite-width-low: 240px;
@uls-rewrite-width-medium: 400px;
@uls-rewrite-width-high: 560px;

// Breakpoints
@uls-rewrite-breakpoint-tablet: 768px;
@uls-rewrite-breakpoint-mobile: ( @uls-rewrite-breakpoint-tablet - 1px );

// Z-indexes
@uls-rewrite-z-index-search-ghost: 1;
@uls-rewrite-z-index-search-active: 2;

// Grid configuration
@uls-rewrite-medium-density-columns: 2;
@uls-rewrite-high-density-columns: 3;
@uls-rewrite-high-density-group-size: 15; // 5 rows of 3 columns

.uls-rewrite {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: @z-index-overlay;
	background-color: @background-color-base;
	display: flex;
	flex-direction: column;
	color: @color-base;
	font-size: @uls-rewrite-font-size-medium;

	.cdx-button {
		font-size: @uls-rewrite-font-size-medium;
	}

	.uls-quick-action-trigger {
		position: absolute;
		bottom: @spacing-25;
		inset-inline-end: @spacing-25;
	}

	.uls-rewrite__header {
		background-color: @background-color-base;

		.uls-rewrite__search-wrapper {
			position: relative;

			.cdx-search-input {
				width: 100%;

				input[ type='search' ] {
					font-size: @uls-rewrite-font-size-medium;
					padding-block: @spacing-50;
					padding-inline-end: @uls-rewrite-horizontal-padding;
					/** Don't set padding-inline-start to avoid overriding codex values that are used to align the icon properly */
					max-height: none;
					background-color: transparent;
				}
			}

			.cdx-text-input {
				min-width: auto;
			}

			.uls-rewrite__search-ghost {
				position: absolute;
				top: 0;
				left: 0;
				pointer-events: none;
				z-index: @uls-rewrite-z-index-search-ghost;
			}

			.uls-rewrite__search-active {
				position: relative;
				z-index: @uls-rewrite-z-index-search-active;
			}
		}

		.uls-rewrite__header__mobile {
			padding: @spacing-75 @uls-rewrite-horizontal-padding;
			font-weight: bold;
			display: flex;
			align-items: center;
			border-bottom: @border-width-base solid @border-color-subtle;
			box-shadow: @box-shadow-small-bottom;

			span {
				flex-grow: 1;
			}
		}

		.uls-rewrite__header__panel {
			display: flex;
			align-items: center;
			padding: @spacing-25 @spacing-50;
			border-bottom: @border-width-base solid @border-color-subtle;

			@media ( max-width: @uls-rewrite-breakpoint-mobile ) {
				padding: @spacing-75 @uls-rewrite-horizontal-padding;
			}

			&-title {
				font-weight: bold;
				flex-grow: 1;
			}
		}
	}

	.uls-rewrite__entrypoint-action-button {
		max-width: 100%;
		white-space: normal;
		word-break: break-word;

		.cdx-icon {
			flex-shrink: 0;
		}

		// Increase specificity to override the unnecessary padding added by Codex.
		// See: https://github.com/wikimedia/design-codex/blob/d4656038d94974fb2dec7550dbe8de46490cddff/packages/codex/src/themes/mixins/public/link.less#L73
		span.cdx-icon.cdx-icon {
			padding-left: 0;
		}
	}

	.uls-rewrite__body {
		padding: @uls-rewrite-body-padding;
		overflow-y: auto;
		flex-grow: 1;

		.uls-rewrite__missing-languages {
			background-color: @background-color-interactive-subtle;
			padding-block: @spacing-50;
			padding-inline: @uls-rewrite-missing-languages-padding-start @uls-rewrite-horizontal-padding;
			/** To make it span the entire width of the body **/
			margin-inline: -@uls-rewrite-horizontal-padding;
			margin-top: -@spacing-50;
			margin-bottom: @spacing-50;
			color: @color-subtle;
			display: flex;
			align-items: center;
			justify-content: space-between;
			cursor: pointer;

			&:hover {
				background-color: @background-color-interactive--hover;
			}

			&__label {
				flex-grow: 1;

				strong {
					color: @color-base;
				}
			}

			.cdx-icon {
				margin-inline-start: @spacing-50;
			}
		}

		.uls-rewrite__section-title {
			font-weight: bold;
			color: @color-subtle;
			padding-block: @spacing-50;
			padding-inline: @uls-rewrite-language-item-padding-start @uls-rewrite-quick-actions-trigger-clearance;
			margin: 0;
			font-size: @uls-rewrite-font-size-medium;
		}

		.uls-rewrite__no-results,
		.uls-rewrite__no-languages {
			padding-block: @spacing-50;
			padding-inline: @uls-rewrite-language-item-padding-start @uls-rewrite-quick-actions-trigger-clearance;

			h3 {
				font-size: @uls-rewrite-font-size-large;
				padding-top: 0;
			}
		}

		.uls-rewrite__body__language-list {
			margin: 0;
			padding: 0;
			// Margin, not padding: keeps the clearance strip outside the list box so the
			// cursor leaving an item fires the list's mouseleave and clears the highlight.
			margin-inline-end: @uls-rewrite-quick-actions-trigger-clearance;
			display: grid;
			grid-template-columns: 1fr;
		}

		.uls-rewrite__language-item {
			position: relative;
			display: grid;
			grid-template-columns: [start] @uls-rewrite-language-item-padding-start [content] 1fr [end] 24px;
			grid-template-rows: auto auto;
			padding: @spacing-50 0;
			cursor: pointer;
			margin-bottom: 0;
			overflow-wrap: break-word;
			white-space: normal;
			min-width: 0;
			list-style: none;
			align-items: start;
			direction: inherit;
			text-align: start;

			// Ensure all direct element children go to the content column by default.
			// This prevents multiple slot elements from spilling into marker gutters.
			& > * {
				grid-column: content;
				grid-row: 1;
				text-align: -webkit-match-parent;
				text-align: match-parent;
			}

			&::before,
			&::after {
				grid-row: 1;
				display: flex;
				align-items: center;
				justify-content: center;
				place-self: center;
			}

			&::before {
				grid-column: start;
			}

			&::after {
				grid-column: end;
			}

			a {
				text-decoration: none;

				// When an anchor tag is used in the slot, make it fill the whole item
				// so that modifier-based clicks (e.g. Ctrl+Click) work as expected.
				// See: https://css-tricks.com/links-inside-of-larger-clickable-areas/
				&::after {
					content: '';
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
				}
			}

			&.uls-rewrite__language-item--selected {
				background-color: @background-color-progressive-subtle;
				color: @color-progressive;
				font-weight: @font-weight-semi-bold;
			}

			&.uls-rewrite__language-item--highlighted {
				background-color: @background-color-interactive-subtle--hover;
			}

			&--description {
				grid-row: 2;
				display: block;
				color: @color-subtle;
				font-size: @uls-rewrite-font-size-small;
			}

			&.uls-rewrite__language-item--unavailable {
				color: @color-subtle;
				cursor: not-allowed;
			}
		}
	}

	.uls-rewrite__missing-languages-panel {
		&__description {
			margin-bottom: @spacing-100;
			line-height: @line-height-medium;
		}
	}

	.uls-rewrite__quick-actions-panel {
		&__action {
			margin-bottom: @spacing-75;
		}
	}

	@media ( min-width: @uls-rewrite-breakpoint-tablet ) {
		// Reset from Fixed Full Screen to Absolute/Popup
		position: absolute;
		top: auto;
		left: auto;
		right: auto;
		bottom: auto;
		border: @border-width-base solid @border-color-subtle;
		box-shadow: @box-shadow-drop-medium;
		border-radius: @border-radius-base;
		max-height: @uls-rewrite-max-height;

		// --- Density: Low (0-9) ---
		// Inherits 1 column from mobile default.
		&.uls-rewrite--density-low {
			width: @uls-rewrite-width-low;
		}

		// --- Density: Medium (10-29) ---
		&.uls-rewrite--density-medium {
			width: @uls-rewrite-width-medium;

			.uls-rewrite__section--suggested .uls-rewrite__body__language-list,
			.uls-rewrite__section--variants .uls-rewrite__body__language-list {
				grid-template-columns: repeat( @uls-rewrite-medium-density-columns, 1fr );
			}
		}

		// --- Density: High (30+) ---
		&.uls-rewrite--density-high {
			width: @uls-rewrite-width-high;
			// density-high and medium have the same section structure, so we need to
			// repeat the selector here
			// stylelint-disable-next-line no-descending-specificity
			.uls-rewrite__body__language-list {
				grid-template-columns: repeat( @uls-rewrite-high-density-columns, 1fr );

				.uls-rewrite__language-item {
					&:nth-child( @{uls-rewrite-high-density-group-size}n + 1 ),
					&:nth-child( @{uls-rewrite-high-density-group-size}n + 2 ),
					&:nth-child( @{uls-rewrite-high-density-group-size}n + 3 ) {
						margin-top: @spacing-150;
					}

					// Reset the very first row (items 1, 2, 3) so they don't have a gap at the top
					&:nth-child( -n+@{uls-rewrite-high-density-columns} ) {
						margin-top: 0;
					}
				}
			}
		}
	}
}

.uls-rewrite-no-scroll {
	overflow: hidden;
}