// font sizes are going to be px here because this isn't responsive in the same way as the conversation.
// todo: fix that?

.navigation-pane-view {

	.pane {
		background-color: $alex-white;
		position: fixed;
		right: auto;
		left: 0;
		width: 100%;
		z-index: 100;
		box-shadow: 3px 0 32px -3px $alex-text;
		overflow-y: auto;
		height: 100%;

		@media (min-width: 400px) {
			width: 360px;
		}
	}

	button.close {
		height: 40px;
		width: 40px;
		background: url(../img/x.svg) no-repeat center center;
		background-size: 13px;
		position: absolute;
		top: 0;
		right: 0;
		border: 0;
		outline: 0;
		z-index: 1;
	}

	.header {
		height: 120px;
		width: 100%;
		position: relative;

		button {
			border: 0;
			text-transform: uppercase;
			font-weight: 900;
			display: inline-block;
			background: transparent;
			font-size: 13px;

			&.restart-modal-trigger {
				color: $alex-aqua;
				position: absolute;
				top: 60px;
				right: 5px;

				&:hover {
					color: $alex-red;
				}
			}
		}

		.alex-logo {
			height: 40px;
			margin: 16px 0 0 16px;
		}

		.progress-bar-view {
			display: none;
		}

		.nav-pane-triggers {
			background: $alex-blue;
			height: 32px;
			width: 100%;
			padding: 0 0.5em;
			position: absolute;
			bottom: 0;

			button {
				color: $alex-white;
				height: 32px;

				&:hover {
					color: $alex-light-blue;
				}

				&.email-modal-trigger {
					float: right;
				}
			}
		}
	}
}


.module-drawer-item-view {

	.module-drawer-item-container {
		height: 52px;
		background: $alex-light-blue;
		border-bottom: 2px solid $alex-aqua;
		font: $foro;
		color: $alex-blue;
		font-size: 21px;
		padding: 0.5em 0 0 0.65em;
		position: relative;
		-webkit-font-smoothing: auto;

		&:hover {
			background: lighten($alex-light-blue, 5%);
		}
	}

	i {
		display: none;
	}

	.open-module {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;

		button {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: url('../img/go.svg') no-repeat 95% center;
			background-size: 8px;
			border: none;
			outline: none;

			&:hover {
				background-size: 10px;
			}
		}

		a {
			display: none;
		}
	}
}

.plan-selection-summary-view {
	font-weight: 700;
	color: $alex-black;
	font-size: 18px;

	.no-plans {
		display: none;
	}

	ul {
		padding: 0;
		display: none;
		list-style-type: none;

		&:empty {
			display: none;
		}
	}

	li {
		padding: 0.5em 0 0 0.75em;
		line-height: 1.125em;

		&:nth-child(2) {
			font-weight: 300;
			color: $alex-text;
			margin-bottom: 0.5em;
		}

		&:empty {
			display: none;
		}
	}

	.plan-chosen & {
		ul {
			display: block;
			vertical-align: middle;
			padding: 0.25em 0 0.5em;
		}
	}
}