// Copyright (c) 2017-2025, CKSource Holding sp. z o.o. All rights reserved.
// For licensing, see LICENSE.md.

@use 'helpers/color';
@use 'helpers/font';
@use 'helpers/globals';
@use 'helpers/spacing';
@use 'sass:map';
@use 'sass:math';

.main__content {
	@include globals.u-box;
	max-width: 100%;
	min-width: globals.$u-content-min-width + 2 * globals.$u-content-margin;
	flex: 1;
	padding: spacing.u-spacing( 4 ) 0 3 * spacing.u-spacing( 2 );
	position: relative;

	@include globals.u-responsive-wide {
		padding-right: globals.$u-sidebar-width;
	}

	@include globals.u-responsive-tablet {
		min-width: unset;
	}

	@include globals.u-responsive-mobile {
		padding: spacing.u-spacing( 0 ) 0;
	}

	&-inner {
		position: relative;
		margin: 0 auto;
		padding: {
			left: 0;
			right: 0;
		}
		max-width: 100%;

		@include globals.u-responsive-narrow {
			max-width: globals.$u-content-max-width + 2 * globals.$u-content-margin;
			padding: {
				left: globals.$u-content-margin;
				right: globals.$u-content-margin;
			}
		}

		@include globals.u-responsive-wide {
			width: auto;
			margin: {
				left: globals.$u-content-margin;
				right: globals.$u-content-margin;
			}
		}

		@include globals.u-responsive-wide-plus {
			width: globals.$u-content-max-width;
			margin: 0 auto;
		}

		@include globals.u-responsive-tablet {
			max-width: 100%;
			padding: {
				left: spacing.u-spacing( 3 );
				right: spacing.u-spacing( 3 );
			}
		}

		@include globals.u-responsive-mobile {
			padding: {
				left: spacing.u-spacing( 0 );
				right: spacing.u-spacing( 0 );
			}
		}

		img {
			max-width: 100%;
			height: auto;
		}

		@include globals.u-responsive-wide-plus {
			img {
				max-width: globals.$u-content-max-width;
			}
		}


		h1 {
			&:first-of-type {
				margin-bottom: math.div( spacing.u-spacing( 0 ), 2 );
			}
		}

	.types {
			margin-bottom: spacing.u-spacing( 2 );
		}
		/* #351 Npm badge should be aligned to the left instead of centered. */
		a[href*="npmjs.com"] {
			img {
				margin: spacing.u-spacing( -2 ) 0 spacing.u-spacing( 3 );
			}
		}
	}

	.api-header {
		display: flex;
		align-items: center;
		margin: 0;
		padding: 1.2em 0 1.8em 0;

		&__title {
			width: 100%;
		}

		img {
			height: 2.7em;
			margin-right: spacing.u-spacing( 3 );
		}

		h1 {
			/* #494. Break long named API elements in the main header. */
			word-break: break-word;

			$rhythm: map.get( font.$u-baseline-levels, 4 );

			padding: 0;
			margin: 0;
		}

		.header__import {
			font-size: 0.9em;
			padding: 0;
			margin: -0.4em 0 0 0;
			color: color.u-color( 'text', 50% );

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

	h1.main__content-title {
		// @include font.u-font-mono;
		// Never separate the icon from the title.
		// white-space: nowrap;
		display: inline-block;

		img {
			height: 1.1em;
			vertical-align: middle;
			position: relative;
			top: -.1em;
			margin-right: spacing.u-spacing( -2 );

			@include globals.u-responsive-mobile {
				margin-right: spacing.u-spacing( -4 );
			}
		}
	}

	.collapsing-list {
		max-width: initial;
		min-width: initial;

		/* #469. Method name in the API collapsing list should be styled differently. */
		a.member-name,
		span.member-name {
			font-weight: bold;
		}
	}

	.collapsing-list__term,
	.collapsing-list dt,
	.secondary-navigation {
		code {
			background: none;
			padding: 0;
		}
	}

	.typedef-callback {
		h4 {
			@include font.u-baseline-padding( 0 );
		}

		dl {
			padding: 0 0 0 spacing.u-spacing( 3 );
		}

		dt code {
			background: none;
			padding: 0;
		}

		dd {
			min-height: spacing.u-spacing( 1 );
			margin: 0;

			p {
				padding-left: spacing.u-spacing( 3 );
			}
		}
	}

	.github-contrib {
		position: absolute;
		right: 0;
		top: 0;

		// https://github.com/cksource/umberto/issues/348
		@include globals.u-responsive-narrow {
			right: globals.$u-content-margin;
		}

		// We dont' need these buttons on mobile: https://github.com/cksource/umberto/issues/538
		@include globals.u-responsive-mobile {
			display: none;
		}

		img {
			height: 20px;
			width: 20px;
			opacity: 0.7;
			margin: 0;

			&:hover {
				opacity: 1.0;
			}
		}

		a {
			display: inline-block;
			margin-left: 10px;
		}
	}
}
