@use "sass:color";

@use "vars/vars";
@use "vars/vars-night";

@layer vetools {
	:root {
		--rgb-card-glint--edge: #d5592e;
	}

	:root.ve-night-mode {
		--rgb-card-glint--edge: #ffd21f;
	}

	// region Roller
	.ve-rollbox-mode--default {
		.rollbox-min {
			right: unset;
			left: 7px;
		}

		.rollbox {
			right: unset;
			left: 1em;
		}
	}

	#listcontainer {
		padding-bottom: 24px;
	}
	// endregion

	.decks {
		&__ {
			&h-cards {
				font-size: 20px;
			}

			&wrp-btn-show-card {
				z-index: 1;
				top: 0;
				right: 0;
				opacity: 0;
				pointer-events: none;
				transition: opacity vars.$time-3-frames;
			}

			&wrp-card-face {
				&:hover {
					.decks__wrp-btn-show-card {
						opacity: 1;
						pointer-events: initial;
						transition: opacity vars.$time-3-frames;
					}
				}

				.rd__image {
					transition: filter 0.15s;
				}

				&--drawn {
					.rd__image {
						filter: grayscale(100%) brightness(25%);
						transition: filter 0.15s;
					}
				}

				.rd__wrp-image {
					margin: 0;
				}
			}

			&wrp-card-rows {
				display: flex;

				.rd__image-title {
					display: none;
				}

				&--list {
					flex-direction: column;

					.decks__wrp-row {
						padding-top: vars.$spacer;
						padding-bottom: vars.$spacer;
						border-bottom: 1px solid vars.$rgb-border-grey;
					}

					.decks__wrp-card-face {
						width: 100px;
					}

					.decks__wrp-card-text {
						display: block;
					}
				}

				&--grid {
					flex-wrap: wrap;
					padding-top: vars.$spacer;

					.decks__wrp-row {
						width: 33%;
						padding-bottom: vars.$spacer;
					}

					.decks__wrp-card-face {
						width: 100%;
					}

					.decks__wrp-card-text {
						display: none;
					}
				}
			}
		}

		&-draw__ {
			$time-intro: 500ms;
			$time-flip: 750ms;
			$time-sway: 7s;

			@keyframes anim-sway {
				0% {
					transform: translateX(0) translateY(0);
				}

				25% {
					transform: translateX(1rem) translateY(1rem);
				}

				37.5% {
					transform: translateX(1.15rem) translateY(0.5rem);
				}

				50% {
					transform: translateX(1rem) translateY(0);
				}

				75% {
					transform: translateX(0) translateY(1rem);
				}

				87.5% {
					transform: translateX(-0.15rem) translateY(0.5rem);
				}

				100% {
					transform: translateX(0) translateY(0);
				}
			}

			&stg {
				position: fixed;
				z-index: vars.$z-card-viewer;
				inset: 0;
				width: 100vw;
				height: 100vh;

				&--visible {
					box-shadow: inset 0 0 100vh 100vh #0008;
					transition: box-shadow $time-intro;
				}
			}

			&wrp-sparkle-sway {
				animation-name: anim-sway;
				animation-timing-function: linear;
				animation-iteration-count: infinite;
			}

			&img-sparkle {
				@keyframes anim-sparkle-twinkle {
					0% {
						filter: initial;
					}

					25% {
						filter: blur(1px) brightness(90%) contrast(150%) drop-shadow(0 0 17px #f6f6f6) hue-rotate(5deg) opacity(75%) saturate(80%);
					}

					50% {
						filter: blur(1px) brightness(110%) contrast(75%) drop-shadow(0 0 5px #fff) hue-rotate(-5deg) opacity(75%) saturate(110%);
					}

					100% {
						filter: initial;
					}
				}

				@keyframes anim-sparkle-warp {
					0% {
						transform: rotateX(0) rotateY(0) rotateZ(0);
					}

					25% {
						transform: rotateX(20deg) rotateY(0) rotateZ(90deg);
					}

					50% {
						transform: rotateX(0) rotateY(20deg) rotateZ(180deg);
					}

					75% {
						transform: rotateX(10deg) rotateY(0) rotateZ(270deg);
					}

					100% {
						transform: rotateX(0) rotateY(0) rotateZ(360deg);
					}
				}

				max-width: 67%;
				max-height: 67%;
				top: -25%;
				left: -25%;

				opacity: 0;

				animation-name: anim-sparkle-twinkle, anim-sparkle-warp;
				animation-timing-function: linear, linear;
				animation-iteration-count: infinite, infinite;

				&--visible {
					opacity: 1;
					transition: opacity calc($time-intro / 2);
				}
			}

			&wrp-card {
				@keyframes anim-card-pop-in {
					0% {
						scale: 0;
					}

					65% {
						scale: 1.2;
					}

					100% {
						scale: 1;
					}
				}

				padding: vars.$spacer;
				background: vars.$rgb-name-red;
				border-radius: vars.$spacer;
				box-shadow: 0 0 30px 10px color.adjust(vars.$rgb-name-red, $alpha: - 0.7);

				scale: 0;

				&:hover {
					cursor: none;
				}

				&--visible {
					animation-name: anim-card-pop-in;
					animation-duration: calc($time-intro * 0.67);
					animation-timing-function: ease-in-out;
					animation-iteration-count: 1;
					scale: 1;
				}
			}

			&img-card {
				z-index: 0;
				max-height: 50vh;
				max-width: 60vw;
			}

			&img-card-back {
				z-index: -1;

				width: calc(100% - #{2 * vars.$spacer});
				height: calc(100% - #{2 * vars.$spacer});

				transform: rotateY(180deg);

				transition: z-index $time-flip;
			}

			&wrp-card-sway {
				animation-name: anim-sway;
				animation-duration: $time-sway;
				animation-timing-function: linear;
				animation-iteration-count: infinite;
			}

			&wrp-card-flip {
				transition: transform $time-flip;

				&--flipped {
					transform: rotateY(180deg);

					transition: transform $time-flip;

					.decks-draw__img-card-back {
						z-index: 0;
					}
				}
			}

			&disp-glint {
				z-index: 2;

				inset: 0;

				border-radius: vars.$spacer;
			}

			&wrp-rhs {
				@keyframes anim-rhs-pop-in {
					0% {
						scale: 0;
					}

					60% {
						scale: 0;
					}

					100% {
						scale: 1;
					}
				}

				width: min(30vw, 360px);
				margin-left: 50px;
				scale: 0;

				&--visible {
					animation-name: anim-rhs-pop-in;
					animation-duration: calc($time-intro * 0.8);
					animation-timing-function: ease-in-out;
					scale: 1;
				}
			}

			&wrp-desc {
				max-height: 75vh;
				border-top: 3px solid vars.$rgb-name-red;
				border-bottom: 3px solid vars.$rgb-name-red;
				background-color: #e5c4ba;
				font-size: 1em;
				padding-top: 35px;
				padding-bottom: 40px;
				box-shadow: 0 0 20px 1px #0008;

				.rd__h {
					justify-content: center;
				}

				&::-webkit-scrollbar-thumb {
					background: vars.$rgb-name-red;
				}
			}
		}
	}

	.ve-night-mode .decks {
		&__ {
			&wrp-card-rows {
				&--list {
					.decks__wrp-row {
						border-color: vars-night.$rgb-border-grey--night;
					}
				}
			}
		}

		&-draw__ {
			&wrp-card {
				background-color: vars-night.$rgb-name-red--night;
				box-shadow: 0 0 30px 10px color.adjust(vars-night.$rgb-name-red--night, $alpha: - 0.7);
				color: rgb(255 255 255 / 53%);
			}

			&wrp-desc {
				border-color: vars-night.$rgb-name-red--night;
				background-color: #574930;
				box-shadow: 0 0 10px 0 #000;

				&::-webkit-scrollbar-thumb {
					background: vars-night.$rgb-name-red--night;
				}
			}
		}
	}
}
