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

/* stylelint-disable no-descending-specificity */

// Visual enhancements disabled
.ext-discussiontools-init-section-bar {
	display: none;
}

.mw-mf .ext-discussiontools-init-section {
	// Need to fix some styles on mobile even when the feature is not enabled
	display: flex;
	align-items: center;

	> h2 {
		flex-grow: 1;
	}
}

.ext-discussiontools-visualenhancements-enabled {
	.ext-discussiontools-init-section {
		// Introduce a block formatting context so that floated "subscribe" links/buttons
		// aren't affected by other floats (T327469). Most skins already include this rule
		// for headings, but we add the floating stuff outside of headings (since T314714).
		// https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
		overflow: hidden;
		// Prevent squishing too much (T335823)
		min-width: 20em;

		.mw-mf& {
			// Prevent the overflow menu's focus ring from being clipped.
			// We have no floated links/buttons on mobile, so this is okay.
			overflow: visible;
		}
	}

	h2.ext-discussiontools-ui-newTopic-sectionTitle {
		font-size: 1.5em;
	}

	// Boost specificity
	.ext-discussiontools-init-section.mw-heading2,
	.ext-discussiontools-init-section {
		margin: 36px 0 12px 0;
		padding: 10px 0 0 0;
		font-weight: bold;
		font-family: sans-serif !important;
		font-size: inherit !important;
		border: 0;
		border-top: @border-width-base @border-style-base @border-color-base;

		h2 {
			margin: 0;
			padding: 0;
			font-weight: bold;
			font-family: sans-serif !important;
			font-size: 1.5em;
			border: 0;
		}

		&-bar {
			display: flex;
			// Use interface language direction (auto-flipped for RTL)
			direction: ltr;
		}

		&-metadata {
			display: flex;
			flex-wrap: wrap;
		}

		&-metaitem {
			font-weight: normal;
			color: @color-subtle;
			// Make same height as "unsubscribe" button
			margin: 7px 0;

			& + .ext-discussiontools-init-section-metaitem {
				margin-left: 12px;
				padding-left: 12px;
				border-left: @border-width-base @border-style-base @border-color-base;
			}
		}
	}

	// [Old Parser HTML] Hide the border-top (section divider) if:
	/* Our section heading is the first element on the page */
	.mw-parser-output > .ext-discussiontools-init-section:first-child,
	/* Our section heading is the first element on the page, except for invisible TOC placeholder */
	.mw-parser-output > meta:first-child + .ext-discussiontools-init-section,
	/* Our section heading directly follows a <h1> heading (which has border-bottom on most skins) */
	h1 + .ext-discussiontools-init-section {
		border-top: 0;
		margin-top: 0;
	}

	// [Parsoid HTML] Hide the border-top (section divider) if:
	/* Our section heading is the first element on the page */
	.mw-parser-output > section:first-child:empty + section > .ext-discussiontools-init-section,
	/* Our section heading directly follows a <h1> heading (which has border-bottom on most skins) */
	h1 + section > .ext-discussiontools-init-section {
		border-top: 0;
		margin-top: 0;
	}

	// This needs to be a separate rule, because the :has() selector is not yet supported by all browsers
	// Support: Firefox <= 120, Chrome <= 105, Safari <= 15.3 (https://caniuse.com/css-has)
	/* Our section heading is the first element on the page, except for invisible TOC placeholder */
	/* stylelint-disable-next-line plugin/no-unsupported-browser-features */
	.mw-parser-output > section:first-child:has( > meta:only-child ) + section > .ext-discussiontools-init-section {
		border-top: 0;
		margin-top: 0;
	}

	// Also re-style topic header input in new topic tool
	h2.ext-discussiontools-ui-newTopic-sectionTitle .oo-ui-inputWidget-input {
		font-weight: bold;
		font-family: sans-serif;
	}

	&.mw-mf h2.ext-discussiontools-ui-newTopic-sectionTitle {
		font-size: 1.125em;
	}

	// Mobile
	&.mw-mf .ext-discussiontools-init-section {
		flex-wrap: wrap;
		/* Legacy parser */
		align-items: flex-start !important;
		border-bottom: 0 !important;
		margin: 5px 0 0 0 !important;
		padding-bottom: 0;
		// The tap-highlight is an odd shape and shows even for cancelled events on -actions,
		// just hide it.
		-webkit-tap-highlight-color: transparent;
		border-top: @border-width-base @border-style-base @border-color-muted;

		h2 {
			width: auto;
			flex-grow: 1;
			// Needed to display multi-line headings correctly (because of flex-wrap on the parent, they
			// would be put on a line of their own otherwise)
			flex-basis: 0;
			/* T311612 */
			font-size: 1.125em;
			/* Parsoid */
			align-items: flex-start !important;
		}

		&-bar,
		&-overflowMenuButton {
			font-size: 0.875em;
		}

		&-overflowMenuButton {
			// Adjust for smaller headings
			margin-top: -4px;
			margin-bottom: -6px;
		}

		/* Legacy parser */
		> .indicator, /* stylelint-disable-line selector-class-pattern */
		/* Parsoid */
		.mf-collapsible-icon {
			margin-top: 4px;
		}

		&-bar {
			width: 100%;
			flex-wrap: wrap;
		}

		&-actions,
		&-metadata {
			width: 100%;
		}

		.client-js & {
			&-actions,
			&-metadata {
				padding-left: 24px;

				@media print {
					padding-left: 0;
				}
			}

			&-overflowMenuButton {
				font-weight: normal;
				display: inline-block;
				margin-right: -5px;
				// Fix height so MenuWidget appears in the correct place with wrapped text (T311558)
				height: 32px;

				@media print {
					display: none !important;
				}
			}

			.mw-editsection {
				// Replaced by the overflow menu
				display: none !important;
			}

			/* stylelint-disable selector-class-pattern */
			/* Legacy parser */
			&.section-heading:not( .open-block ),
			/* Parsoid */
			&[ aria-expanded='false' ],
			/* Parsoid - Section toggle code hasn't loaded yet, but sections are always collapsed by default */
			&:not( [ aria-expanded ] ) {
				.ext-discussiontools-init-section-actions {
					// Hidden until expanded
					display: none;
				}
			}

			/* Legacy parser */
			&.section-heading.open-block,
			/* Parsoid */
			&[ aria-expanded='true' ] {
				margin-bottom: 12px !important;
			}
			/* stylelint-enable selector-class-pattern */
		}

		&-authorCountLabel,
		&-commentCountLabel {
			display: none;
		}
	}

	&.mw-mf .ext-discussiontools-init-section-overflowMenu {
		// Not sure if this should have custom styles like this…
		// They were once accidentally inherited from the heading,
		// before the menu was moved to an overlay.
		font-weight: bold;
		font-size: 0.875em;
	}

	/* Legacy parser */
	&.mw-mf .mf-section-0 + .ext-discussiontools-init-section,
	/* Parsoid */
	&.mw-mf [ data-mw-section-id='1' ] .ext-discussiontools-init-section {
		border-top: 0;
		margin-top: 0;
	}
}
