/*
  Place your custom style overrides here.
  Checkout /src/assets/global.scss for an overview of all globally available css variables you
    can override

  NOTE: The main application's styling is included through JavaScript. Therefore, it gets added to
    the head _after_ this file. If you want to override the globally used CSS variables, you can either
    use !important, or increase the specificity from :root
*/

/* 
Add collapse functionality to .main-bar 
*/

.menu-section > h3 {
	position: relative;
	cursor: pointer;
	padding-left: 10px;
	transition: color 0.3s;
}
.menu-section > h3:hover,
.menu-section > h3:focus,
.menu-section > h3.is-open {
	color: var(--sidebar-text-color);
}

.menu-section > h3:after {
	display: block;
	content: "+";
	height: 1em;
	line-height: 1em;

	position: absolute;
	right: 5px;
	top: 50%;
	margin-top: -0.5em;
}
.menu-section > h3.is-open:after {
	display: block;
	content: "-";
}

.menu-section > nav {
	height: 0;
	overflow: hidden;
	opacity: 0;
}
.menu-section > nav.is-open {
	height: auto;
	overflow: hidden;
	opacity: 1;
	/* transition: opacity 0.3s; */
}

/* 
Add minimal border to increase palette swatch visibility
*/

.palette .color {
	border: 1px solid #cccccc;
}