/*
Inline and back links
 */

.sidebar {
	.disabled {
		color: $color-gray-medium !important;
		fill: $color-gray-medium !important;
		pointer-events: none;
	}

	.link-inline,
	.link-collapsed {
		border-left: 3px solid transparent;

		&.stroke-based-icon {
			stroke: $color-teal-light;
		}

		&.stroke-based-icon.active {
			stroke: $color-white;
		}
	}

	.link-inline,
	.link-back,
	.account-home-link {
		@include typography('Rubik', 16px, 22px, $color-teal-light);
		@include hover($color-white);
		align-items: center;
		display: flex;
		fill: $color-teal-light;
	}

	.account-home-link {
		padding: 25px $side-nav-horizontal-padding 0;
		width: $side-nav-expanded-width;

		.left-icon {
			height: 25px;
			margin-right: 15px;
			width: 25px;
		}
	}

	.link-back {
		padding: 25px $side-nav-horizontal-padding 0;

		.left-icon {
			height: 12px;
			margin-right: 15px;
			width: 12px;
		}

		&:hover {
			& > svg {
				animation: left-bounce 0.6s;
			}
		}
	}

	.link-inline {
		padding: 10px $side-nav-horizontal-padding;
		width: $side-nav-expanded-width;

		&.highlight {
			color: $color-white;
			border-left: solid 3px $color-teal-light;
		}

		.left-icon {
			height: 25px;
			margin-right: 15px;
			min-height: 25px;
			min-width: 25px;
			width: 25px;

			&.fill-white {
				fill: $color-white;
			}
		}		

		&.stroke-based-icon {
			@include stroke-hover($color-white);
		}
	}

	.link-collapse,
	.link-expand {
		align-items: center;
		background: $color-slate;
		border: none;
		border-top: 1px solid $color-gray-medium;
		display: flex;
		fill: $color-gray-medium;
		justify-content: center;
		text-transform: uppercase;

		.left-icon {
			height: 40px;
			width: 40px;
		}
	}

	.link-collapse {
		@include typography('Rubik', 14px, 0, $color-gray-medium);
		padding: 20px 0;

		.left-icon {
			margin-right: 15px;
		}

		&.alt-style {
			background: $color-slate-dark;
		}
	}

	.link-expand {
		@include typography('Rubik', 14px, 14px, $color-gray-medium);
		flex-direction: column;
		padding: 6px 0 20px;

		.left-icon {
			margin-right: 0;
		}

		&.alt-style {
			background: $color-slate-dark;
		}
	}

	.link-icon {
		cursor: pointer;
	}

	/* Active link */

	.active {
		background: $color-slate-dark;
		border-color: $color-teal-light;
		color: $color-white;
		fill: $color-white;

		&.link-collapsed {
			fill: $color-white;
		}

		&.light {
			background: $color-slate;
			border-left: solid 3px $color-teal-light;
			color: $color-white;
			fill: $color-white;
		}

		&[disabled] {
			background: none;
			border-left: 0;
			color: $color-gray-dark;
			fill: $color-gray-dark;
			padding-left: 30px;
		}
	}
}

.sidebar-content {
	/* Override colors for static drawer */

	.static-drawer {
		> .currentPage {
			background-color: $color-slate !important;
		}

		.left-icon {
			fill: $color-white !important;
		}
	}

	/* Collapsed links (when the sidebar is collapsed) */

	.link-collapsed {
		@include typography('Rubik', 16px, 22px, $color-teal-light);
		align-items: center;
		display: flex;
		fill: $color-teal-light;
		padding: 10px $side-nav-horizontal-padding;
		width: $side-nav-expanded-width; // this only works because .sidebar has overflow hidden

		.left-icon {
			height: 25px;
			margin-right: 15px;
			min-height: 25px;
			min-width: 25px;
			width: 25px;
		}

		&[disabled] {
			@include typography('Rubik', 16px, 22px, $color-gray-dark);

			.left-icon {
				fill: $color-white;
			}
		}
	}

	.link-drawer .drawer a {
		@include typography('Rubik', 14px, 22px, $color-teal-light);
	}

	.link-slide-out .switcher-content li a {
		@include typography('Rubik', 16px, 22px, $color-teal-light);
	}

	.link-drawer .drawer .active-link > a,
	.link-drawer .drawer a:hover {
		color: $color-white;
	}

	/* Drawer links */

	.link-drawer {
		display: flex;
		flex-direction: column;
		width: $side-nav-expanded-width;

		button {
			background: transparent;
			border: none;
			border-left: 3px solid transparent;
			border-radius: 0;
			text-align: left;

			&.expanded {
				background-color: $color-slate-dark;
				border-left: solid 3px $color-teal-light;
				color: $color-white;
				fill: $color-white;
			}

			&.left-border-disabled {
				border-left: 0;
			}

			&.hidden-label-section {
				height: 0;
				padding: 0;
			}
		}

		> .currentPage {
			background-color: $color-slate-dark;
			color: $color-white;
			fill: $color-white;
		}

		.link-inline.currentPage,
		.link-collapsed.currentPage {
			border-color: $color-teal-light;
		}

		.link-body {
			align-items: center;
			display: flex;
			flex-grow: 1;
		}

		.hidden-nav-link-item {
			display: none;
		}

		.right-icon {
			height: 12px;
			transition: transform 0.6s;
			width: 12px;
		}

		.rotated {
			transform: rotate(180deg);
		}

		.drawer {
			height: 0;
			opacity: 0;
			overflow: hidden;
			padding: 0;
			transition: opacity 0.25s;

			li {
				margin-left: 30px;
				padding: 2px 0;
			}

			.active-link {
				color: $color-white;
				list-style: disc;
				margin-left: 18px;
			}

			.parent-link {
				line-height: 1.3;
				margin-left: 35px;

				&.larger-item-spacing:not(:last-child) {
					padding-bottom: 12px;
				}
			}

			.child-link {
				margin-left: 18px;
			}

			&.open {
				height: auto;
				opacity: 1;
				padding: 0 30px 10px 30px;
				transition: opacity 0.25s;
			}

			&.currentPage {
				background: $color-slate-dark;
			}

			&.background-highlight {
				background-color: $color-slate-dark;
			}

			&.larger-drawer-bottom-padding {
				padding: 0 30px 24px 30px;
			}
		}
	}

	/* Slide-out links */

	.link-slide-out {
		.switcher {
			@include typography('Rubik', 14px, 16px, $color-gray-medium);
			align-items: center;
			display: flex;
			fill: $color-gray-medium;
			flex-direction: row;

			svg {
				height: 12px;
				width: 12px;
			}

			.link-body {
				flex-grow: 1;
			}

			.left-icon {
				margin-right: 10px;
			}

			.right-icon {
				transition: transform 0.6s;

				&.rotated {
					transform: rotate(180deg);
				}
			}
		}

		.switcher-content {
			@include typography('Rubik', 16px, 22px, $color-teal-light);
			background: $color-slate-dark;
			height: 100%;
			left: 0;
			opacity: 0;
			padding: 0 25px;
			position: absolute;
			top: 0;
			transition: z-index 0.6s step-start, opacity 0.6s step-end, left 0.6s;
			width: $side-nav-expanded-width;
			z-index: -1;

			li {
				padding-bottom: 15px;
			}

			.practices-title {
				@include typography('Rubik', 18px, 26px, $color-white);
				font-weight: 500;
				padding: 23px 0;
			}

			&.open {
				left: $side-nav-expanded-width;
				opacity: 1;
				transition: z-index 0.6s step-end, left 0.6s;
				z-index: 1;
			}
		}
	}

	/* Switch Clinician/Practice  */

	.switch-container {
		margin: 20px 0 0 25px;
		width: calc(
			#{$side-nav-expanded-width} - (#{$side-nav-horizontal-padding} * 2)
		);

		.switch-link,
		.button-partition {
			align-items: center;
			color: $color-teal-light;
			display: flex;
			justify-content: space-between;

			.icon {
				fill: $color-teal-light;
				margin-right: 10px;
				width: 15px;
			}

			.right-icon {
				margin-right: 0;
			}
		}

		.switch-link:hover {
			span {
				color: $color-white;
			}

			.icon {
				fill: $color-white;
			}
		}
	}
}

.sidebar .link-inline[disabled] {
	color: $color-gray-dark;

	.left-icon,
	.right-icon {
		fill: $color-gray-dark;
	}

	.left-icon.always-open {
		fill: $color-white;
	}
}

.sidebar-content .link-slide-out .switcher:hover > .right-icon {
	animation: right-bounce 0.6s;
}

.includes-read-only {
	
	.read-only-icon {
		margin-left: 5px;
	}

	.sidebar-inline-link-label {
		display: flex;
		align-items: center;
		font-size: 14px;
	}
}