.accordion {
	--blue-1: #7399C6;

	
	--blue-2: #005288;
	--blue-3: #A7A9AC;
	--grey-1: #E0E1E3;	
	--green-1: #1A8941;
	
	--accent-color: #D3D4D6;
	--active-color: var(--active-colour-override, var(--blue-1));
	--border-width: 2px;

	/* outline: 2px dashed tomato; */
		
	transition: border .3s ease;

	& > .accordion-heading {
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: .5rem;
		cursor: pointer;

		> * {
			margin: 0;
		}

		.minor-heading {
			--font-weight: var(--fw-light);
			--text-transform: none;
		}
			
		& > * { user-select: none; }
		
		& > .heading-icons {
			--width: 3.25rem;
			transition: color .3s ease;
			
			width: var(--width);
			height: 3.625rem;
			align-self: start;
			font-size: 1.25rem;
			
			display: grid;
			grid-template-areas: 'stack';
			place-content: center;
			> * { grid-area: stack; }
			& > .icon {
				transition: color .3s ease, transform .3s ease;
				transform-origin: center;
			}
			.icon--chevron-right {
				transform: rotate(90deg);
			}

			.icon--minus {
				transform: scale(0);
			}
		}
	}

	&[aria-expanded="true"] {
		& > .accordion-heading > .heading-icons > .icon--chevron-right {
			transform: rotate(90deg) scale(-1);
		}
	}
	
	&[aria-expanded="true"] {
		--accent-color: var(--grey-1);
		& > .accordion-heading > .heading-icons {
			& > .icon--plus {
				transform: scale(0);
			}
			& > .icon--minus {
				transform: scale(1);
			}
		}
	}

	& > .accordion-container {
		overflow: hidden;
		height: 0;
	}
	
	--padding: 1rem;
	.accordion-container-inner {
		padding-block: var(--padding);
	}

	.accordion-container-inner {
		.page-container {
			/* Negates the page container class of a nested layout, as there already is a page container wrapping the entire accordion */
			padding: 0;
			max-width: 100%;
			/* display: contents; */
		}
	}
	
	/* Modes */

	&.accordion--default {
		border-bottom: var(--border-width) solid var(--accent-color);
		&:nth-child(1 of &) {
			border-top: var(--border-width) solid var(--accent-color);
		}
		--padding: 1rem;
		.accordion-heading {
			padding-block: .5rem;
		}

		.accordion-container-inner {
			padding-block: var(--padding);
		}
	}

	&.accordion--block {
		--inactive-color: var(--accent-color);
		/* --active-color: var(--green-1); */
		--border-color: var(--inactive-color);
		--icon-color: var(--inactive-color);

		border-bottom: var(--border-width) solid var(--border-color);
		&:nth-child(1 of &) {
			border-top: var(--border-width) solid var(--border-color);
		}
		
		&:has(+ &[aria-expanded="true"], + &:hover) {
			border-bottom-color: var(--active-color);
		}

		& > .accordion-heading {
			justify-content: flex-start;
			& > .heading-icons {
				color: var(--icon-color);
			}
		}

		&[aria-expanded="true"], &:hover {
			--border-color: var(--active-color);
			--icon-color: var(--active-color);
		}

		&[aria-expanded="true"] {
			& > .accordion-heading > .heading-icons > i {
				transform: rotateX(180deg);
			}
		}
		
		&[aria-expanded="true"] {
			& > .accordion-heading > .heading-icons {
				& > .fa-plus {
					transform: scale(0);
				}
				& > .fa-minus {
					transform: scale(1);
				}
			}
		}
	}

	&.accordion--flag {
		& + & {
			margin-top: 1rem;
		}

		.accordion-heading {
			border-bottom: var(--border-width) solid var(--accent-color);

			span {
				padding-block: 0.875rem;
				font-size: 1.75rem;
				text-transform: uppercase;
				user-select: none;
			}
			
			.heading-icons {
				background-color: var(--accent-color);
				transition: background .3s ease;
				color: white;
				width: 3.25rem;
				height: 3.625rem;
				align-self: end;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 1.25rem;
				clip-path: polygon(
					0% 0%,
					100% 15%,
					100% 100%,
					0% 100%
				);
				
				--width: 3.25rem;
				--angle: 10deg;
				width: var(--width);
				--clip-y: calc( tan(var(--angle)) * var(--width) );
				clip-path: polygon(
					0% 0%,
					100% var(--clip-y),
					100% 100%,
					0% 100%
				);

				margin-bottom: -1px; /* To close up the hairline gap caused by the border */
				
				i {
					transition: all .3s ease;
				}
			}
		}
		
		&[aria-expanded="true"], &:hover {
			--accent-color: var(--active-color);
		}
		&[aria-expanded="true"] {
			.heading-icons i {
				transform: rotateX(180deg);
			}
		}

	}

	&.accordion--specs {
		/* --accent-color: var(--blue-1); */
		--accent-color: var(--color-context-primary-surface);
		border-top: 1px solid color-mix(in oklab, var(--accent-color), transparent 75%);
		padding-block: .75em;
		margin-block: 1rem;
		& > .accordion-heading {
			justify-content: flex-start;
			/* justify-content: space-between; */
			gap: 1.5rem;
			& > .heading-icons {
				height: auto;
				width: auto;
				color: var(--accent-color);
			}
		}
		/* &[aria-expanded="true"], &:hover {
			--accent-color: var(--blue-1);
		} */
		&[aria-expanded="true"] {
			.heading-icons i {
				transform: rotateX(180deg);
			}
		}
	}

	&.accordion--folder {
		/* --accent-color: var(--green-1); */
		--accent-color: var(--active-color);
		--background-color: var(--grey-1);
		--angle: 45deg;
		--height: 3rem;
		--padding: 1rem;
		--overlap: calc(var(--height) * .375);
		--clip-x: calc( tan(var(--angle)) * var(--height) );
		margin-block: 1rem;
		
		.accordion-heading {
			justify-content: flex-start;
			align-items: center;
			display: inline-flex;
			background-color: var(--background-color);
			padding: var(--padding) var(--height) var(--padding) var(--padding);
			height: var(--height);
			clip-path: polygon(
				0% 0%,
				calc(100% - var(--clip-x)) 0%,
				100% 100%,
				0% 100%
				);
			& > .heading-icons {
				height: auto;
				width: auto;
				color: var(--accent-color);
				align-self: initial;
			}
		}
			
		@media (width <= 1024px) { /* bp-md */
			.accordion-heading {
				clip-path: none;
				padding: var(--padding) var(--padding);
				display: flex;
				justify-content: space-between;
				height: auto;
			}
		}

		.accordion-container {
			background-color: var(--background-color);
			margin-top: calc(var(--overlap) * -1);
			padding-top: var(--overlap);
		}
		
		.accordion-container-inner {
			padding: var(--padding);
		}

		&[aria-expanded="true"] {
			.heading-icons i {
				transform: rotateX(180deg);
			}
		}

		ul.documents-list {
			list-style: none;
			margin: 0;
			padding: 0;
			display: grid;
			a {
				height: 100%;
				color: inherit;
				text-decoration: none;
			}
			li {
				height: 100%;
				background-color: white;
				padding: var(--padding);
				margin: 0;
				line-height: 1rem;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: start;
				gap: 1rem;
				cursor: pointer;
				transition: all .3s ease;
				user-select: none;
				span.label {
					flex: 1 1 auto;
				}
				i {
					color: var(--active-color);
				}
				&:hover {
					color: white;
					background-color: var(--active-color);
					i {
						color: inherit;
					}
				}
				&:active {
					background-color: color-mix(in hsl, var(--active-color), black 20%);
				}
			}
		}
	}

	&.accordion--minimal {
		--accent-color: var(--blue-1);
		.accordion-heading {
			justify-content: space-between;
			& > .heading-icons {
				flex: 0 0 auto;
				--width: 1rem;
				width: var(--width);
				height: calc(1em * 1.4); /* match the line-height of the heading text for better vertical alignment */
				color: var(--accent-color);
				.icon {
					width: 100%;
					height: 100%;
				}
			}
		}
		&[aria-expanded="true"] {
			.heading-icons i {
				transform: rotateX(180deg);
			}
		}
	}

}