.sidebar {
	z-index: 1;
	display: flex;
	flex-direction: column;
	width: rem(240);
	background-color: $c-grey-00;

	&.sidebar--large {
		width: 100%;
		@include gt(360px) {
			width: rem(360);
		}
	}
}

html.skill .sidebar {
	top: 0;
	height: 100%;
}

.sidebar--left {
	display: none;
	border-right: 1px solid $c-border-light;

	@include lte('medium') {
		// NOTE: This classname may change
		&.sidebar--is-mobile-expanded {
			position: absolute;
			top: rem(48);
			bottom: 0;
			left: 0;
			display: flex;
		}
	}

	@include gt('medium') {
		display: flex;
	}
}

.sidebar--right {
	display: none;
	border-left: 1px solid $c-border-light;

	@include lte(990px) {
		// NOTE: This classname may change
		&.sidebar--is-mobile-expanded {
			position: absolute;
			top: rem(48);
			bottom: 0;
			right: 0;
			display: flex;
		}
	}

	@include gt(990px) {
		display: flex;
	}
}

.sidebar-header {
	display: flex;
	justify-content: space-between;

	&.sidebar-header--mobile {
		@include gt(990px) {
			display: none;
		}
	}
}

.sidebar-header__title {
	@include type-style-h2;
	margin-top: rem(4);
	font-weight: $font-weight-bold;
}

.sidebar-header__action-wrapper {
	min-width: rem(36);
	min-height: rem(36);
}

.sidebar__inner {
	flex: 1;
	overflow-x: hidden;
	overflow-y: scroll;
}

.sidebar__items {
	padding-top: spacing('tight');
}

.sidebar-item,
.sidebar__sub-list-item {
	.btn {
		@include type-style-body-sm;
		color: $c-text-light;

		&.sidebar-item__action--is-current {
			color: $c-primary;
		}
	}
}

.sidebar-item__back-link {
	border-top: 1px solid $c-border-light;
}

.sidebar-item,
.sidebar__footer {
	@include type-style-body-sm-em;
}

.sidebar-item__inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: rem(40);
	padding-right: spacing('tight');

	@include gt('medium') {
		.sidebar--is-collapsed & {
			padding-right: 0;
		}
	}
}

.sidebar-collapse {
	display: none;
	flex: 0 0 auto;
	justify-content: flex-end;
	border-top: 1px solid $c-border-light;

	.btn__icon {
		fill: $c-text-icon;
		transform: rotate(180deg);

		.sidebar--is-collapsed & {
			transform: none;
		}
	}

	.sidebar--right & {
		justify-content: flex-start;

		.btn__icon {
			transform: none;
		}
	}

	.sidebar--right.sidebar--is-collapsed & {
		.btn__icon {
			transform: rotate(180deg);
		}
	}

	@include gt('medium') {
		display: flex;
	}
}

.sidebar__search-wrapper {
	padding: spacing('tight');

	@include gt('small') {
		display: none;
	}
}

.sidebar-item__icon {
	width: rem(16);
	height: rem(16);
	stroke: $c-text-icon;
	fill: none;

	.sidebar & + * {
		margin-left: spacing('tight');
	}

	@include gt('medium') {
		.sidebar.sidebar--is-collapsed & + * {
			margin-left: 0;
		}
	}

	&.sidebar-item__icon--fill {
		stroke: none;
		fill: $c-text-icon;
	}
}

.sidebar-item__link {
	display: inline-flex;
	align-items: center;
	padding: spacing('tight') 0.725 * spacing('base');
	color: inherit;
	text-decoration: none;
}

.sidebar__collapse-btn.btn.btn-small.btn-icon-only {
	width: rem(40);
	height: rem(40);
}

.sidebar-item--is-current {
	> .sidebar-item__inner {
		color: $c-primary;
	}
}

.sidebar-item--is-current,
.sidebar-item--is-current-parent {
	.sidebar-item__icon {
		stroke: $c-primary;

		&.sidebar-item__icon--fill {
			stroke: none;
			fill: $c-primary;
		}
	}
}

.sidebar__sub-list {
	font-weight: $font-weight-normal;
	color: $c-text-light;

	.sidebar__sub-list-item > .sidebar-item__inner {
		padding-left: rem(26);
	}

	.sidebar__sub-list {
		.sidebar__sub-list-item > .sidebar-item__inner {
			padding-left: rem(42);
		}
	}
}

.sidebar__sub-list-item {
	&:not(.sidebar__sub-list-header).sidebar-item--is-current-parent
		> .sidebar-item__inner {
		color: $c-text;
		background-color: rgba($c-text, 0.03);
	}
	&.sidebar__sub-list-header.sidebar-item--is-current-parent
		> .sidebar-item__inner {
		color: $c-primary;
	}
}

.sidebar__sub-list-header > .sidebar-item__inner {
	border-bottom: 1px solid $c-border-light;
}

.sidebar__footer {
	padding-bottom: spacing('base');
	border-top: 1px solid $c-border-light;

	.sidebar--is-collapsed & {
		padding-bottom: 0;
	}
}

.sidebar__footer-text {
	padding: spacing('extra-tight') spacing('base');
	font-weight: $font-weight-normal;
	color: $c-text-light;

	a {
		text-decoration: underline;
	}
}

.sidebar__footer-link {
	color: inherit;
	text-decoration: none;

	+ * {
		margin-left: spacing('tight');
	}
}

.sidebar.sidebar--is-collapsed {
	@include gt('medium') {
		width: rem(40);

		.sidebar-item__text,
		.sidebar__sub-list {
			width: 0;
			overflow: hidden;
		}

		.sidebar-item__action,
		.sidebar__footer-text,
		.sidebar-item .btn,
		.sidebar__content {
			display: none;
		}

		.sidebar__collapse-btn {
			transform: rotate(180deg);
		}

		.sidebar-item__link {
			justify-content: center;
			width: 100%;
			padding: spacing('tight');
		}
	}
}

.sidebar-section {
	padding: spacing('tight') spacing('tight') 0;

	&.sidebar-section--show-only-on-mobile {
		display: block;

		@include gt('medium') {
			display: none;
		}
	}

	&.sidebar-section--centered {
		text-align: center;
	}

	&.sidebar-section--horizontal-loose {
		padding-left: rem(24);
		padding-right: rem(24);
	}

	&.sidebar-section--vertical-loose {
		padding-top: rem(24);
	}

	&.sidebar-header {
		padding: spacing('tight');
		border-bottom: 1px solid $c-border-light;
	}
}