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

ul.collapsing-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.collapsing-list {
	margin-top: spacing.u-spacing( 1 );

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

	@keyframes highlight {
		0% {
			background: color.u-color( 'highlight' )
		}
		100% {
			background: none;
		}
	}

	&--empty {
		margin-bottom: spacing.u-spacing( 0 );

		&::before {
			content: "No items to display for current filtering criteria."
		}
	}

	&__content h4 {
		@include font.u-baseline-padding( 0 );
	}
	&__item {
		&--first {
			.collapsing-list__term {
				border-top: 0;
			}
		}
	}

	.collapsing-list__item {
		margin: 0;
	}

	&__term {
		padding-top: spacing.u-spacing( 0 );
		position: relative;
		display: flex;
		border-top: 1px solid color.u-color( 'separator' );

		&--no-excerpt {
			padding: spacing.u-spacing( -3 ) 0;
		}

		&.toggler {
			&--collapsed,
			&--expanded {
				cursor: pointer;

				& + .collapsing-list__description {
					padding-left: spacing.u-spacing(3);
				}

				&::before {
					position: absolute;
					top: spacing.u-spacing(-1);
					left: 0;
				}
			}

			&--collapsed {
				padding: spacing.u-spacing( -3 ) 0 spacing.u-spacing( -3 ) spacing.u-spacing( 3 );

				& + .collapsing-list__description {
					.collapsing-list__excerpt {
						height: font.$u-line-height-base + em;

						/* #791. Wrap excerpt one liner with (...) when collapsed. */
						p {
							text-overflow: ellipsis;
							overflow: hidden;
							white-space: nowrap;
						}
					}

					.collapsing-list__content {
						display: none;
					}

					.collapsing-list__excerpt {
						margin-bottom: spacing.u-spacing( -3 );
					}
				}
			}

			&--expanded {
				padding: spacing.u-spacing( -3 ) 0 spacing.u-spacing( -3 ) spacing.u-spacing( 3 );

				// Do not touch dedicated error code page. See: https://github.com/cksource/umberto/issues/788
				& + .collapsing-list__description:not(.collapsing-list__description--error-page) {
					.collapsing-list__excerpt {
						// Properly display excerpt and `see source` link for expanded description.
						display: flex;
						justify-content: space-between;

						p {
							text-overflow: initial;
							overflow: visible;
							height: auto;
							white-space: inherit;
							margin-bottom: spacing.u-spacing( -3 );
						}
					}

					.collapsing-list__content {
						display: block;
					}

					.see-source {
						display: block;
						float: right;
						margin-left: 50px;
						margin-bottom: 12px;
					}
				}
			}
		}

		&:target {
			animation: highlight 2s;

			& + .collapsing-list__description {
				animation: highlight 2s;
			}
		}

		h3 {
			margin-bottom: 0;
			padding-top: 0;
			width: 100%;

			@include font.u-baseline( 0 );

			code {
				font-weight: 400;
			}

			&:first-of-type {
				flex: 2;
			}

			.badges {
				text-align: right;
				float: right;
				margin-left: spacing.u-spacing( 0 );
			}
		}

		p {
			margin-bottom: 0;
			padding-top: 0;
		}

		&.hidden {
			&::before {
				display: none;
			}

			&.toggler {
				&--collapsed,
				&--expanded {
					cursor: auto;
				}
			}
		}
	}

	&__description {
		//padding: 0 0 0 spacing.u-spacing( 3 );
		overflow: hidden;

		.collapsing-list__excerpt {
			padding-top: 0;

			&--short {
				text-overflow: ellipsis;
				overflow: hidden;
				height: font.$u-line-height-base + em;
				white-space: nowrap;
				margin-bottom: math.div( spacing.u-spacing( 0 ), 2 );
			}
		}

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

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

			.dlheading5,
			.dlheading6 {
				@include font.u-baseline( 0 );
				padding-left: spacing.u-spacing( 3 );
				font-weight: 400;
				color: rgba( color.u-color( 'text-header' ), .9 );
			}
		}
	}

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

	&--filtered {
		.collapsing-list__item {
			display: none;

			&--visible {
				display: block;

				.collapsing-list__term {
					display: flex;
				}
			}
		}
	}

	.collapsing-list__description {
		ul, ol {
			@include font.u-baseline( 0 );
		}
	}

	&__dev-names {
		code#{&}--active {
			display: block;
			color: color.u-color( 'text', 40% );
			font-size: font.u-font-size( -1 );
			cursor: default;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			direction: rtl;
			text-align: left;
			width: 100%;
		}
		& code {
			display: none;
		}
	}
}
