/* 
# Expansion Panel Sidebar Nav ( Default ) */

	.sft-cpb-expansion-panel-sidebar-nav {}


	/* 
		This can be thought of as the composable structure definition ( CSD )

		Markup and css structure should generally look like the following.
		Parts of the following are generated by Angular when it's rendered.
		Parts of the following also have mixed in augmentation css code. 

		Classes and HTML elements that are marked with an asterisk indicate that those classes are created and inserted by Angular. 
		They are being shown here for the purpose of being able to hook into them via css if need be. 
		They are not being shown for indicating that one needs to add the class. Angular will add it. 

		<div class="sft-cpb-expansion-panel-sidebar-nav">

			<h4> Main section name </h4>

			<mat-accordion class="mat-accordion* ">

				<mat-expansion-panel class="mat-expansion-panel* mat-elevation-z0 mb-0 ">
					
					<mat-expansion-panel-header class="

						mat-expansion-panel-header*
						ng-trigger*
						ng-trigger-expansionHeight*
						mat-expansion-toggle-indicator-after*
						ng-star-inserted*
						mat-expanded* <-- This class is removed when the panel is collapsed

					">

						<mat-panel-title>
							Section name
						</mat-panel-title>
			
					</mat-expansion-panel-header>


					<div class="
						mat-expansion-panel-content* 
						ng-trigger* 
						ng-trigger-bodyExpansion* 
					
					">*

						<div class="mat-expansion-panel-body* ">*

							<nav>
								<mat-nav-list dense class="mat-nav-list* mat-list-base* ">
					
									// This is what you write:
									<a class="mat-list-item* active* " mat-list-item routerLink="/" routerLinkActive="active">Active section</a>

									<a class="mat-list-item* " mat-list-item routerLink="/" routerLinkActive="active">Section that is not active</a>
									<a class="mat-list-item* " mat-list-item routerLink="/" routerLinkActive="active">Section that is not active</a>
									<a class="mat-list-item* " mat-list-item routerLink="/" routerLinkActive="active">Section that is not active</a>

									// And this is how it looks when Angular renders it:

									<a class="mat-list-item* active* " mat-list-item routerLink="/" routerLinkActive="active">Active section</a>

										<div class="mat-list-item-content* ">* 

											<div class="mat-list-item-ripple* mat-ripple* "></div>

											// Then there's another weird div here, with nothing inside of it. 
											// The text label appears in the DOM after this element
											<div class="mat-list-text* "> </div>

											An Awesome Link!

										</div>


									</a>

								</mat-nav-list>
							</nav>

						</div>

					</div>


				</mat-expansion-panel>
			</mat-accordion>
	
	*/



	.sft-cpb-expansion-panel-sidebar-nav h4 {
		font-size: .875em;
	}

	/* 
	*/

	
	.sft-cpb-expansion-panel-sidebar-nav .mat-expansion-panel-header {
		padding-left: 1.875rem;

		height: auto !important;
		padding-top: .75rem !important;
		padding-bottom: .75rem !important;

		font-size: 1rem !important;
	}

		.sft-cpb-expansion-panel-sidebar-nav .mat-expansion-panel-header mat-panel-title {
			font-size: .875rem;
		}


		.sft-cpb-expansion-panel-sidebar-nav .mat-expansion-panel-content {
			background-color: var(--sft-transparent-black-0005);
		}

			.sft-cpb-expansion-panel-sidebar-nav .mat-expansion-panel-content .mat-expansion-panel-body {
				padding-left: 0;
				padding-right: 0;

				padding: 0;
			}


				.sft-cpb-expansion-panel-sidebar-nav .mat-nav-list {
					padding-top: .82rem;
					padding-bottom: .82rem;
					
				}

					.sft-cpb-expansion-panel-sidebar-nav .mat-list-item {
						font-size: 1rem;

						height: auto !important;
						padding-top: 0 !important;
						padding-bottom: 0 !important;					
					}

					.sft-cpb-expansion-panel-sidebar-nav .mat-list-item.active-link {
						/*background-color: var(--sft-opaque-warm-primary-color-500);
						mix-blend-mode: multiply;*/

						background-color: #eddcd8;
						color: #c64835;

						border-left-style: solid;
						border-left-width: 2px;
						border-left-color: var(--sft-opaque-warm-primary-color-500);
					}


						.sft-cpb-expansion-panel-sidebar-nav .mat-list-item .mat-list-item-content {
							font-size: .875rem;

							height: auto !important;
							padding-top: .75rem !important;
							padding-bottom: .75rem !important;
							
							padding-left: 1.875rem;
						}




/* */


.sft-cpb-expansion-panel-sidebar-nav .mat-expansion-panel + nav .mat-nav-list.mat-list-base {
	padding-top: 0;
}

.sft-cpb-expansion-panel-sidebar-nav .mat-expanded.mat-expansion-panel-spacing + nav .mat-nav-list.mat-list-base {
	padding-top: .82rem;
}