.merlin__drawer {
	margin: 0;
	max-height: 0;
	opacity: 0;
	overflow: hidden;
    pointer-events: none;
    transition: transform 600ms cubic-bezier(0.75, 0, 0.25, 1), padding 600ms cubic-bezier(0.75, 0, 0.25, 1), opacity 300ms linear 600ms, max-height 700ms cubic-bezier(0.33, 0, 0.2, 1) 0ms;

	li {
		margin:  0;
		opacity: 0;
		padding: 4px 0;
		position: relative;
		text-align: center;
		transform: translate3d(0, -15px, 0);
		transition: 0.25s ease;

		&:last-child {
			padding-bottom: 0;
		}

		@for $i from 10 through 1 {
	        &:nth-of-type(#{$i}) {
	            transition-delay: #{$i * .02}s;
	        }
	   	}
	}

	&--open & {
		max-height: 400px;
		opacity: 1;
		pointer-events: inherit;
		transform: translateY(0%);
		transition: transform 600ms cubic-bezier(0.75, 0, 0.25, 1), padding 600ms cubic-bezier(0.75, 0, 0.25, 1), opacity 300ms linear 200ms, max-height 900ms cubic-bezier(0.33, 0, 0.2, 1) 100ms;

		li {
			opacity: 1;
			transform: translate3d(0, 0, 0);
			transition: 0.4s ease;

			@for $i from 1 through 10 {
		        &:nth-of-type(#{$i}) {
		            transition-delay: #{$i * .15}s;
		        }
		   	}
		}
	}

	// All the elements affected when the drawer is opened and closed.
	&--open {

		.merlin__button--next {
			animation: colorchange 1s infinite alternate 1000ms;
		}

		.merlin__button--loading {
			animation: none;
		}

		#skip {
			display: none;
			opacity: 0;
			visibility: hidden;
			z-index: -1;
		}

		#close {
			display: inline-block;
			opacity: 1;
			visibility: visible;
			z-index: 1;
		}
	}
}