.panel {
	background-color: $background-white;
	border-radius: $border-radius;
	box-shadow: $box-shadow;
	margin-bottom: 1em;

	&.hasHighlight {
		.panel-element {
			color: $foreground-darkgray;

			&.highlighted {
				color: $foreground-black;
			}
		}
	}

	&.expanded {
		height: 100%;
	}

	&.with-hero-card {
		margin-top: -1em;
		padding-top: 1em;
	}

	.panel-header {
		align-items: center;
		background-color: $background-white;
		border-top-left-radius: $border-radius;
		border-top-right-radius: $border-radius;
		box-shadow: $box-shadow;
		display: flex;
		font-size: 1.07em;
		font-weight: 700;
		padding: 1em;
		position: sticky;
		top: 0;

		.aside {
			color: $foreground-darkgray;
			padding-left: 6px;
		}

		.right {
			margin-left: auto;
		}
	}

	.panel-element {
		align-items: center;
		border-bottom: 1px solid $foreground-lightgray;
		color: inherit;
		cursor: pointer;
		display: flex;
		font-size: .98em;
		font-weight: 500; // TODO: @kenhoff - figure out why we have to set this explicitly, rather than with 'bolder'
		margin: 0 1em;
		padding: 1em 0;
		text-decoration: inherit;
		white-space: nowrap;
		transition-duration: 0.2s;
		transition-property: margin-left;

		&:hover{
			margin-left: 15px;
		}

		i {
			font-size: 0.8em;
		}

		> * {
			margin-right: 1em;

			&:last-child {
				margin-right: unset;
				text-align: right;
			}

			&:nth-child(2) {
				flex-grow: 1;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}

		.clickable {
			color: $foreground-green;
			cursor: pointer;
			font-size: 80%;
			font-weight: 600;
			letter-spacing: 0.1em;
			padding: 0.5em;
			text-transform: uppercase;

			&.active {
				background-color: $background-green;
				border-radius: 4px;
				color: white;
			}
		}

		// note from @kenhoff - this should really be moved outside of the panel element (later)
		.muted {
			color: $foreground-darkgray;
		}

		img {
			height: 16px;
			width: 16px;
		}

		&:last-child {
			border-bottom: none;
		}

		&.clickable {
			cursor: pointer;
		}
	}

	.expander {
		cursor: pointer;
		display: flex;
		flex-direction: row;
		justify-content: center;
		margin: 0 1em;
		padding: 0.5em 0;
		position: relative;
	}

	a {
		color: inherit;
		text-decoration: inherit;
	}
}
