@import (reference) "../App/common.less";

#selector-app {
	flex-grow: 1;
	height: 100%;
	width: 100vw;

	.pagetransition();

	& header {
		align-items: center;
		justify-content: center;
		flex-direction: column;
		display: flex;
		flex-shrink: 0;
		min-height: 100px;
		max-height: 200px;
		height: 30%;
		width: 100vw;

		& > h2 {
			color: #fff;
			font-family: Helvetiva, sans-serif;
			font-size: 1.5em;
			font-weight: 300;
			text-align: center;
		}
	}

	& .selection-window {
		max-width: 1500px;
		margin: 0 auto;
		height: calc(~"100vh - 30%");
		scroll-behavior: smooth;
		.scrollableWithoutScrollbars(y);

		& .pass-list {
			display: flex;
			width: 100%;
			padding: 10px 1%;
			box-sizing: border-box;
			height: -moz-fit-content;
			height: fit-content;
			transition: opacity 0.5s ease-in-out;

			& #slidable {
				.scrollableWithoutScrollbars(x);
				display: inline-flex;
				width: 100%;
				margin: 0 15px;

				/**
				* A class is applied based on the amount of items through
				* Javascript. If we have more than 2 element, we apply
				* .space-first, otherwise .element-first
				*
				*	- 2 elements in "space-between" on width 100vw, would
				*		result in too much space between them. "space-evenly"
				*		is okay.
				*
				*	- More than 2 element (like, 5) in "space-evenly" on a
				*		"small 100vw", would result in centered-like behavior
				*		for children and cutted-off sides. "space-between" is
				*		okay.
				*
				*	- In "even smaller 100vw" (like mobile displays) with 2
				*		elements, space-evenly is not suitable for the same
				*		reason above. "space-between" is meh, but "flex-start"
				*		is perfect. Ahhhhh *touches his face with hands on
				*		the cheeks*
				*/

				@media only screen and (max-width: 500px) {
					justify-content: flex-start !important;
				}

				&.space-first {
					justify-content: space-between;
				}

				&.element-first {
					justify-content: space-evenly;
				}

				& div.select {
					animation: PassFade 0.2s ease-in;
					animation-fill-mode: forwards;
					opacity: 0;
					width: 230px;
					display: flex;
					flex-direction: column;
					position: relative; // for overlay

					cursor: pointer;
					&:nth-child(2) {
						animation-delay: 0.1s;
					}
					&:nth-child(3) {
						animation-delay: 0.2s;
					}
					&:nth-child(4) {
						animation-delay: 0.3s;
					}
					&:nth-child(5) {
						animation-delay: 0.4s;
					}

					&:not(:last-child) {
						margin-right: 3%;
					}

					& > .darkness-realm {
						width: inherit;
						position: relative;
						pointer-events: none;

						& > .pass {
							padding-bottom: 0;
							flex-shrink: 0;
							flex-grow: 1;
							width: inherit;
						}
					}

					& .name {
						text-align: center;
						margin-top: 10px;
						color: #fff;
						transition: opacity 0.5s ease-in-out;
					}
				}

				&.selection-active {
					& div.select {
						&:not(.highlighted) {
							& .darkness-realm::after {
								/**
								* This serves to create an overlay
								* that will obscure the pass
								* when another is selected
								*/

								content: "";
								position: absolute;
								top: 0;
								left: 0;
								right: 0;
								bottom: 0;
								z-index: 2;
								border-radius: 7px;
								background-color: rgba(0, 0, 0, 0.5);
								transition: background-color 0.3s ease-in-out;
							}

							&[data-pass-kind="coupon"] .darkness-realm::after {
								border-radius: unset;
							}

							& > .name {
								opacity: 0.5;
							}
						}

						&.highlighted > .darkness-realm > .pass {
							box-shadow: 0px 3px 10px #000;
						}
					}
				}
			}
		}
	}
}

@keyframes PassFade {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
