/*
 * Framework
*/
html {
	box-sizing: border-box;
	// Not ideal but it works
	scroll-padding-top: 6rem;
}

html,
body {
	min-height: 100vh;
	padding: 0;
	margin: 0;
	color: var( --color-base );
	accent-color: var( --color-progressive );
	background: var( --color-surface-0 );
}

// Apply border-box universally unless overwritten
*,
*::before,
*::after {
	box-sizing: inherit;
}

:focus {
	outline-color: var( --color-progressive );
}

// For some reason just overriding the outline-color is not enough
:focus-visible {
	outline: 2px solid var( --color-progressive );
	outline-offset: 1px;
}

input,
select,
textarea {
	color: var( --color-emphasized );
	background-color: transparent;
	border: 1px solid var( --border-color-interactive );
}

select option {
	background-color: var( --color-surface-1 );
}

textarea {
	width: 100%;
}

blockquote {
	margin: var( --space-md );
	color: var( --color-subtle );

	cite {
		display: block;
		margin-top: var( --space-sm );

		&::before {
			content: '— ';
		}
	}
}

button {
	font-family: var( --font-family-base );
}

sup,
sub {
	line-height: 1;
}

th {
	font-weight: var( --font-weight-semibold );
}

td {
	> p,
	> ul,
	> ol {
		&:first-child {
			margin-top: 0; // Remove margin for the first element in td
		}
	}
}

.hidden {
	.hidden();
}

.nowrap {
	white-space: nowrap;
}

.citizen-button {
	padding: 0;
	appearance: none;
	cursor: pointer;
	background: transparent;
	border: 0;
}

/*
 * Content
*/
.mw-body,
.parsoid-body {
	direction: ltr;
}

// TODO: Think of better places to put indicators;
.mw-indicators {
	display: flex;
	align-items: center;
	padding-left: 10px;
	margin-left: 10px;
	font-size: var( --font-size-small );
	border-left: 1px solid var( --border-color-base );
}

.mw-indicator {
	filter: var( --filter-invert );
}

#mw-indicator-mw-helplink a {
	font-size: 0; /* Hide the text because the color is weird */
}

video {
	max-width: 100%; // Prevent overflow
}

.skin-theme-clientpref-night {
	.mw-indicator {
		// Have to hardcode the color since the filter breaks the color
		a {
			color: @color-primary;

			&:hover {
				color: @color-primary--hover;
			}

			&:active {
				color: @color-primary--active;
			}
		}
	}
}

@media ( hover: none ) {
	a,
	button,
	label {
		// Remove the 300ms delay in click event (T118509)
		/* stylelint-disable-next-line plugin/no-unsupported-browser-features */
		touch-action: manipulation;
	}
}

@media ( max-width: @max-width-breakpoint-tablet ) {
	.mw-body,
	.parsoid-body {
		overflow-x: hidden; // fallback if clip is not supported
		overflow-x: clip; // avoid breaking layout in smaller screen sizes
	}
}

@media ( min-width: @min-width-breakpoint-tablet ) {
	// Delay scroll animation won't happen on load
	// Use it only for larger viewport as it is very costly
	// on mobile devices
	html.citizen-animations-ready {
		scroll-behavior: smooth;
	}
}