@use '../base/paragraphs' as *;
@use '../base/links' as *;
@use '../base/lists' as *;
@use '../base/inline-code' as *;
@use '../base/descriptions-list' as *;

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

	&__item {
		position: relative;
		padding: var(--spacing-6) var(--spacing-6) var(--spacing-6) 0;
		border-top: 1px solid var(--color-gray-400);

		&:has(.collapsing-list__item-chevron) {
			padding-left: var(--spacing-6);
		}

		&-chevron {
			position: absolute;
			top: var(--spacing-7);
			left: var(--spacing-1);
			transform: translateY(1px);
			transition: transform var(--duration-normal) ease;
		}

		&--open {
			.collapsing-list__item-chevron {
				transform: rotate(90deg);
			}
		}
	}

	&__intro {
		&:has(.collapsing-list__item-chevron) {
			cursor: pointer;
		}

		h3 {
			margin: 0;
		}
	}

	&__description {
		overflow: hidden;
		transition: height var(--duration-normal) var(--smootherstep);

		> * {
			&:first-child {
				margin-top: var(--spacing-4);
			}
		}

		&--open {
			height: auto;
		}
	}

	&__content {
		h4 {
			font-size: 1.125rem;

			&:has(+ dl, + ul) {
				margin-bottom: var(--spacing-2);
			}
		}
	}

	&-wrapper {
		&.is-empty {
			&:before {
				content: "No items to display for the current filtering criteria.";
				display: block;
				margin: var(--spacing-4) 0;

				font-family: var(--font-family-text);
				font-weight: var(--font-weight-thin);
				line-height: var(--line-height-base);
				letter-spacing: var(--letter-spacing-base);
				color: var(--color-text-primary);
				font-style: italic;
			}

			> * {
				display: none;
			}
		}
	}
}

.collapsing-list__content,
.main-description {
	p {
		@extend .b-paragraph;
	}

	a {
		@extend .b-link;
	}

	ul,
	ol {
		@extend .b-list;
		@extend .b-list--unordered;

		li {
			@extend .b-list__item;
		}
	}

	ul {
		@extend .b-list--unordered;
	}

	ol {
		@extend .b-list--ordered;
	}

	p > code,
	dt > code {
		@extend .b-inline-code;
	}

	dl {
		@extend .b-description;
		margin-left: var(--spacing-4);
	}

	dt {
		@extend .b-description__term;
	}

	dd {
		@extend .b-description__details;
	}
}

.collapsing-list__content {
	dd {
		margin-left: var(--spacing-8);
	}
}

.main-description + .see-source {
	margin-top: var(--spacing-3);
}
