// 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:list';
@use 'sass:map';
@use 'sass:math';

.formatted {
	// @include u-draw-baseline( 0 );

	p, ul, ol, blockquote, pre {
		@include font.u-baseline( 0 );
	}

	h1 {
		@include font.u-baseline( 4 );

		& + dl {
			margin-top: spacing.u-spacing( 0 );
		}

		@include globals.u-responsive-mobile {
			font-size: 1.9em;
		}
	}

	dd {
		margin-bottom: spacing.u-spacing( 0 );
	}

	// temporary, should not be needed after typography redesign
	h1:first-of-type {
		$rhythm: map.get( font.$u-baseline-levels, 4 );
		width: 100%;

		padding-top: list.nth( $rhythm, 3 ) - 0.5em;
		margin-bottom: list.nth( $rhythm, 4 ) - 0.5em;

		& + h2 {
			padding-top: 0;
		}
	}

	h2 {
		@include font.u-baseline( 3 );
		padding-bottom: .2em;
		border-bottom: 1px solid color.u-color( 'separator' );
		font-weight: 400;

		@include globals.u-responsive-mobile {
			font-size: 1.5em;
		}
	}

	h2:first-of-type {
		clear: both;
	}

	h3 {
		@include font.u-baseline( 2 );
		font-weight: 400;
	}

	h4 {
		@include font.u-baseline( 1 );
		@include font.u-baseline-margin( 2 );
		@include font.u-baseline-padding( 2 );
		font-weight: 400;
	}

	h5 {
		@include font.u-baseline( 0 );
		font-weight: 400;
	}

	.info-box {
		& > h2, & > h3, & > h4 {
			padding-top: 0;
		}
	}

	strong, b {
		font-weight: 600;
	}

	i, em {
		font-style: italic;
	}

	pre {
		overflow: hidden;
	}

	code {
		font-family: font.$u-font-face-mono;
		font-size: .866666em; // 13px
		padding: spacing.u-spacing( 2 );
	}

	:not( pre ) > code:not( .highlight ) {
		& {
			// It's a darker shade of color.u-color( 'background-hue' ) so it looks good in info-boxes.
			// See #230.
			background: rgba( 202, 205, 207, 0.3 );
			padding: spacing.u-spacing( -4 ) spacing.u-spacing( -3 );
			border-radius: 3px;
		}

		// See #223.
		&::after {
			// To reduce the width of that space to 0px.
			letter-spacing: -1em;
			content: "\00a0";
		}

		// See #223.
		&::before {
			// To reduce the width of that space to 0px.
			letter-spacing: -1em;
			content: "\00a0";
		}
	}

	a code:not( .highlight ) {
		color: color.u-color( 'link' );
	}

	.highlight {
		background: #2b2c26;
		color: #f8f8f2;

		a {
			color: color.u-color( 'text-invert' );
		}
	}

	.highlight code {
		background: none;
		padding: 0;
		font-size: 1em;
	}

	blockquote {
		border-left: 1px solid color.u-color( toggler );
		padding-left: 10px;
		padding-top: 0;
		font-style: italic;
	}

	kbd {
		display: inline-block;
		background: color.u-color( 'background-dark' );
		border: solid 1px color.u-border-color( 'background-hue', 5% );
		border-bottom-color: color.u-border-color( 'background-hue', -5% );
		box-shadow: inset 0 -1px 0  color.u-border-color( 'background-hue', -5% );
		font-size: .866666em; // 13px
		padding: spacing.u-spacing( -3 ) spacing.u-spacing( -2 );
		line-height: 1em;
		vertical-align: middle;
		border-radius: 3px;
	}

	ul, ol {
		margin-left: 2 * spacing.u-spacing( 2 );

		@include font.u-baseline-margin( 0 );

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

	ul, ol {
		ul, ol {
			padding-top: 0;
			margin-bottom: 0;

			&:last-of-type {
				margin-bottom: math.div( spacing.u-spacing( 0 ), 3 );
			}
		}

		li {
			&:last-of-type {
				margin-bottom: 0;
			}
		}
	}

	p img {
		display: block;
		margin: spacing.u-spacing( 3 ) auto;
		box-sizing: content-box;
	}

	iframe:not( .cke_wysiwyg_frame ) {
		display: block;
		margin: spacing.u-spacing( 3 ) auto;
	}

	ol {
		list-style-type: decimal;
	}

	table {
		margin: spacing.u-spacing( 3 ) 0;
		width: 100%;

		/* See: #794. Long code or snippet without any white-space is breaking table. */
		code {
			word-break: break-word;
			white-space: normal;
		}
	}

	td, th {
		border: 1px solid color.u-border-color( 'background-dark', 20% );
		padding: 6px 12px;
	}

	th {
		font-weight: bold;
	}

	abbr {
		position: relative;
		cursor: default;
		text-decoration: none;
		border-bottom: 1px dotted #000;
	}

	abbr::before {
		content: attr(title);
		display: none;
		position: absolute;
		bottom: calc( -100% - 15px );
		left: 50%;
		transform: translateX( -50% );
		padding: 3px 5px;
		font-size: 0.9em;
		font-weight: bold;
		border-radius: 3px;
		color: #fff;
		background: black;
		white-space: nowrap;
	}

	abbr::after {
		content: '';
		display: none;
		position: absolute;
		bottom: -5px;
		left: 50%;
		transform: translateX( -50% );
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 0 5px 5px 5px;
		border-color: transparent transparent #000 transparent;

	}

	abbr:hover::before,
	abbr:hover::after {
		display: block;
	}
}

/* See: https://github.com/ckeditor/ckeditor5/issues/1977. */
.formatted {
	[dir=rtl] {
		ul, ol {
			margin-left: 0;
			margin-right: 2 * spacing.u-spacing( 2 );

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