@import "../../variables";

.collection {
    position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background: $green;
	z-index: 13;
	display:flex;
	justify-content:center;
	align-items: flex-start;
	overflow:auto;

	&-pan {
		position:relative;
		border-right: solid 1px $light-grey;
	}

	&#{&}-enter {
		top: -100%;
		&-active {
			top: 0%;
			transition: top .2s ease-out;
		}
	}

	&#{&}-leave {
		top: 0%;
		&-active {
			top: -100%;
			transition: top .2s ease-out;
		}
	}

	&-container {
		position:relative;
		border-radius: 4px;
		flex:0 0 70%;
		padding: 0;
		margin: 90px;
		background:$white;
		display:flex;
		flex-flow: column nowrap;

		@media(min-width: 1650px) {
			flex:0 0 60%;
		}
	}

	&-content {
		display:flex;
		flex-flow: row nowrap;
		flex:1;
		max-height: 70vh;
	}
}
