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

#recent-selector {
	display: flex;
	flex-direction: column;
	color: #e6e6e6;
	width: 100%;
	height: 100%;

	.pagetransition();

	& > header {
		width: 100%;
		color: #e6e6e6;
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: auto;
		background-image: linear-gradient(45deg, #202223, #2a2c2d);
		padding: 15px;
		box-sizing: border-box;

		& #version {
			font-size: 8pt;
			color: #e6e6e6;
			border: 1px solid #292b2c;
			padding: 5px;
			border-radius: 7px;
			background: #191a1b;
			vertical-align: middle;
		}

		& div {
			& * {
				letter-spacing: 0.5px;
			}

			& a {
				color: #e6e6e6;
				text-decoration: none;
				cursor: pointer;
			}

			& h4 {
				font-weight: 500;
				margin: 0;
				color: #c78964;
			}

			&:nth-child(2n) {
				height: 25px;
			}
		}
	}

	& > main {
		display: flex;
		justify-content: center;
		width: 100%;
		height: 100%;

		& .error-area {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: rgba(0, 0, 0, 0.5);
			z-index: 2;
			-webkit-backdrop-filter: blur(3px) grayscale(0.6);
			backdrop-filter: blur(3px) grayscale(0.6);
			cursor: pointer;

			&.enter {
				opacity: 0;
			}

			&.enter-active {
				opacity: 1;
				transition: opacity 0.5s;
			}

			&.exit {
				opacity: 1;
			}

			&.exit-active {
				opacity: 0;
				transition: opacity 0.5s;
			}

			& #error-box {
				min-width: 350px;
				max-width: 500px;
				height: 100px;
				color: #fff;
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				background-color: #131313;
				padding: 10px 15px;
				border-radius: 7px;
				border: 1px solid #ff1800;
				border-left: 7px solid #ff1800;

				.lookMumIamAppearing(0.3s, ease-in-out, 0.3s);

				& h2 {
					margin-top: 0;
				}
			}
		}

		& .centered-column {
			width: 600px;
			height: 100%;
			display: flex;
			justify-content: space-evenly;
			flex-direction: column;
			align-items: center;

			& section {
				width: 100%;
				display: flex;

				&:nth-of-type(2n + 1) {
					flex-grow: 0;
					flex-shrink: 0;
					align-items: center;
					height: 25vh;
					margin-top: 90px;

					& #choices-box {
						width: 100%;
						height: 160px;
						display: flex;
						border-radius: 10px;
						background-image: linear-gradient(-45deg, #242627, #2a2c2d);
						box-shadow: 0px 2px 5px 0px rgb(33, 37, 38);
						position: relative;
						overflow: hidden;

						&.loading {
							&::before {
								content: "";
								position: absolute;
								top: 0;
								bottom: 0;
								left: -10%;
								width: 30px;
								background: linear-gradient(
									to left,
									transparent 0%,
									rgba(199, 137, 100, 0.5) 50%,
									transparent 100%
								);
								cursor: progress;
								z-index: 11;
								animation: scanning 1s ease-in-out 0s forwards infinite;

								@keyframes scanning {
									from {
										left: -10%;
									}
									to {
										left: 100%;
									}
								}
							}

							& > div,
							& > label {
								cursor: progress;

								&:hover {
									background-color: inherit;
									color: inherit;
								}
							}
						}

						& > div,
						& > label {
							flex-grow: 1;

							color: #e6e6e6;
							display: flex;
							align-items: center;
							justify-content: center;
							font-size: 14pt;
							cursor: pointer;
							background-color: transparent;
							transition: all 0.5s ease-in-out;

							&:nth-child(2n) {
								border-radius: 0 10px 10px 0;
							}

							&:nth-child(2n + 1) {
								border-radius: 10px 0 0 10px;
								border-right: 2px dashed #484848;
							}

							&:hover {
								background-color: rgb(32, 34, 35);
								color: #c78964;

								& > svg {
									fill: #c78964;
								}
							}

							& > svg {
								transition: fill 0.5s ease-in-out;
								fill: #e6e6e6;
							}
						}

						& > label {
							position: relative;

							&:hover {
								& sub {
									color: #c78964;
								}
							}

							& sub {
								transition: color 0.5s ease-in-out;
								position: absolute;
								bottom: 7px;
								color: #7d7d7d;
								font-size: 7pt;
							}
						}
					}
				}

				&:nth-of-type(2n) {
					flex-grow: 1;
					flex-shrink: 1;
					height: 50vh;
					margin-top: 50px;

					& .recents-box {
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: flex-start;
						width: 100%;

						& header {
							display: flex;
							justify-content: space-between;
							align-items: center;
							height: 50px;
							width: 100%;
							margin-bottom: 20px;

							transition: border-bottom-color 0.5s ease-in-out;
							border-bottom: 1px solid #484848;
							border-bottom-color: #484848;
							padding-bottom: 10px;

							&.refreshing {
								animation: bounce-loading 0.5s ease-in-out infinite alternate;
							}

							@keyframes bounce-loading {
								from {
									border-bottom-color: #484848;
								}
								to {
									border-bottom-color: #c78964;
								}
							}

							& h2 {
								margin: 0;
							}

							& button {
								background: none;
								// border: 2px solid #bbbbbb;
								border: 0;
								width: 80px;
								height: 100%;
								color: #e6e6e6;
								font-size: 11pt;
								cursor: pointer;
								transition: all 0.2s ease-in-out;
								background-color: #27292a;

								&[disabled] {
									border-color: #5a5a5a !important;
									color: #5a5a5a !important;
									cursor: initial;
								}

								&:not([disabled]):focus {
									outline: 1px solid #c78964;
								}

								&:not([disabled]):hover {
									background-color: rgb(32, 34, 35);
									color: #c78964;
								}

								&.editing {
									background-color: rgb(32, 34, 35);
									color: #c78964;
									outline: 1px solid #c78964;
								}
							}
						}

						& main {
							overflow-y: hidden;
							display: flex;
							width: 100%;
							border-radius: 7px;
							margin-bottom: 10px;
							background-image: linear-gradient(-45deg, #242627, #2a2c2d);
							box-shadow: 0px 2px 5px 0px rgb(33, 37, 38);

							& ul {
								.scrollableWithoutScrollbars(y);

								padding: 0;
								margin: 0;
								width: 100%;
								box-shadow: rgb(33, 37, 38) 0px 2px 20px 6px;

								display: flex;
								flex-direction: column;
								list-style-type: none;
								color: #e6e6e6;

								& li {
									display: flex;
									align-items: center;
									cursor: pointer;
									background-color: transparent;
									position: relative;

									&:not(:last-child) {
										border-bottom: 1px solid #4e4e4e;
									}

									& img {
										max-height: 70px;
										margin: 0 15px;
									}

									& .left {
										display: flex;
										align-items: center;
										min-height: 70px;
										width: 100%;
										padding: 10px 5px;
										display: flex;
										align-items: center;
										box-sizing: border-box;
										transition: all 0.5s ease-in-out;

										&:hover {
											background-color: rgb(32, 34, 35);
											color: #c78964;
										}
									}

									& .right {
										& span.delete {
											position: absolute;
											right: 0;
											top: 0;
											bottom: 0;
											width: 0;
											margin: 0;
											display: flex;
											justify-content: center;
											align-items: center;
											background-color: #752e2e;
											color: #e6e6e6;
											overflow: hidden;
											transition: all 0.5s ease-in-out;

											&.open {
												width: 80px;
											}

											&:hover {
												background-color: #9a3e3e;
											}
										}
									}
								}
							}

							& > span {
								padding: 15px;
							}
						}
					}
				}
			}
		}
	}

	& #list {
		flex-grow: 1;

		display: grid;
		grid-template-columns: repeat(auto-fill, 210px);
		grid-gap: 30px;
		margin: 0 30px;

		.scrollableWithoutScrollbars(y);

		& div {
			cursor: pointer;

			&.new {
				height: 337px;
				display: flex;
				justify-content: center;
				align-items: center;
				width: 210px;
				border: 1px dashed #e6e6e6;
				border-radius: 7px;
			}

			& span {
				margin-top: 10px;
				display: block;
			}
		}
	}
}
