/* Drawers.css */
.moon-drawer {
	&.moon-drawer-rendered {
		transition: transform 0.35s ease-out;
		-webkit-transition: -webkit-transform 0.35s ease-out;
	}
	z-index: 10;
}
.moon-drawer-partial-client {
	padding: 36px 18px 18px;
}
.moon-drawer-client {
	position: relative;
	padding: 18px;
}

.moon-drawers {
	overflow: hidden;
}

.moon-drawers-activator {
	z-index: 100;
	font-family: @moon-icon-font-family;
	font-size: 42px;
	// adjust the caret to line-up with the bottom edge of the activator bar
	line-height: @moon-icon-font-size / 2 - 3;
	// Height must be less than or equal to the distance from the edge of the screen to the content
	// area inside the next container, for spotlight to be able to find this control.
	height: 0px;
	position: absolute;
	width: 100%;

	&:before {
		content: '';
		display: block;
		height: @moon-drawers-activator-bar-height;
		background-color: @moon-drawer-bg-color;
	}
	.moon-drawers-activator-icon {
		margin: -15px auto 0;
		width: @moon-drawer-nub-width;
		height: @moon-drawer-nub-height;
		border-radius: 0 0 @moon-drawer-nub-height @moon-drawer-nub-height;
		display: block;
		background-color: @moon-drawer-bg-color;
		background-repeat: no-repeat;
		background-position: center center;
		background-size: contain;
		content: @moon-icon-arrowsmalldown;
		color: @moon-drawer-activator-font-color;
		text-align: center;
		font-size: inherit;
		line-height: inherit;
	}

	/* The activator & nub are white when a drawer is open */
	&.open {
		&:before,
		.moon-drawers-activator-icon {
			color: @moon-drawer-activator-open-font-color;
			background-color: @moon-drawer-open-bg-color;
		}
	}

	// Cursor is hovering over the activator, but it hasn't moved yet.
	/* Activator is spotlight focused */
	&.spotlight {
		&:before,
		.moon-drawers-activator-icon {
			color: @moon-spotlight-text-color;
			background-color: @moon-spotlight-color;
		}
	}
}

/* Drawer Handles */
.moon-drawers-handle-container {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;

	.moon-drawers-handles {
		text-align: center;
		padding: 48px 0 12px;
	}

	.moon-drawers-handle {
		display: inline-block;
		text-align: start;
		width: 240px;
	}
}

.moon-drawers-drawer-container {
  transition: transform 0.35s ease-out;
  -webkit-transition: -webkit-transform 0.35s ease-out;
}

.moon-drawers-client {
	position: relative;
	height: 100%;
	width: 100%;
	transition: transform 0.35s ease-out;
	-webkit-transition: -webkit-transform 0.35s ease-out;
}

/* If a video player or other controls are behind the drawers, let events pass straight through to them. */
.moon-drawers > * {
	pointer-events: all;
}
.moon-drawers,
.moon-drawers-client {
	pointer-events: none;
}
.moon-drawers-client > * {
	pointer-events: all;
}