// Hide indicator when client is noscript
// FIXME: On rare occasion, indicator can appear without the .citizen-sections-enabled class, not sure why
.citizen-section-indicator,
.client-nojs.citizen-sections-enabled .citizen-section-indicator {
	display: none;
}

.citizen-section-heading,
.mw-editsection {
	--size-icon: 1.125rem;
}

.citizen-sections-enabled {
	.citizen-section {
		&-heading {
			cursor: pointer;
			// So that double clicking won't highlight everything
			-webkit-user-select: none;
			user-select: none;

			&--collapsed {
				.citizen-section-indicator {
					transform: rotate3d( 1, 0, 0, 180deg );
				}

				.mw-headline,
				.mw-heading h1,
				.mw-heading h2 {
					opacity: var( --opacity-icon-base );
				}
			}

			.mw-headline,
			.mw-heading h1,
			.mw-heading h2 {
				transition: var( --transition-hover );
				transition-property: opacity;

				&:hover {
					opacity: var( --opacity-icon-base--hover );
				}

				&:active {
					opacity: var( --opacity-icon-base--active );
				}
			}
		}

		&-indicator {
			display: block;
			order: -2;
			width: var( --size-icon );
			height: var( --size-icon );
			margin-right: var( --space-sm );
			cursor: pointer;
			transition: var( --transition-hover );
			transition-property: transform;
		}

		// Fix button alignment
		&-heading,
		> h3,
		> h4,
		> h5,
		> h6 {
			display: flex;
			align-items: center;

			// Right-align the editsection
			.mw-headline {
				flex-grow: 1;
				order: -1;
			}
		}

		&--collapsed {
			display: none;
		}
	}
}

// Fix hover state on touch devices
@media ( hover: none ) {
	.citizen-sections-enabled .citizen-section {
		&-heading .mw-headline,
		&-indicator {
			&:hover,
			&:active {
				opacity: 1;
			}
		}

		&-heading--collapsed .mw-headline {
			&:hover,
			&:active {
				opacity: var( --opacity-icon-base );
			}
		}
	}
}