src/static/scripts/components/misc/dropDown/_dropDown.scss
@use 'sass:math';
@use '../../../../style/vars';
@use '../../../../style/shadow';

.dropDown {
	position: relative;
	display: flex;
	flex-direction: column;

	.dropDownButton {
		padding: 0 1.2rem;
		white-space: nowrap;
	}

	.areaWrapper {
		position: absolute;
		&.dirTop {
			top: 0;

			&.sameLine {
				top: initial;
				bottom: 0;
			}

			.dropDownArea {
				top: initial;
				bottom: 0;
			}
		}

		&.dirBottom {
			bottom: 0;

			&.sameLine {
				bottom: initial;
				top: 0;
			}

			.dropDownArea {
				bottom: initial;
				top: 0;
			}
		}

		&.dirLeft {
			left: 0;

			&.sameLine {
				left: initial;
				right: 0;
			}

			.dropDownArea {
				left: 0;
			}
		}

		&.dirRight {
			right: 0;

			&.sameLine {
				right: initial;
				left: 0;
			}

			.dropDownArea {
				right: 0;
			}
		}

		.dropDownArea {
			position: absolute;
			z-index: 2;
			top: 100%;
			margin-top: 0.5rem;
			width: max-content;
			max-height: min(60vh, 30rem);
			overflow-y: auto;
			background-color: vars.$background-el1;
			border: 1px solid vars.$border-heavy-color;
			border-radius: 1.2rem;
			padding-bottom: 1px;		// for firefox to avoid useless scroll bars
			transform: scale(.9);
			transform-origin: top center;
			will-change: transform;
			transition: all .25s ease;
			@extend %shadow-4;

			&.show {
				transform: scale(1);
				visibility: visible;
				opacity: 1;
			}

			&.remove {
				transform: scale(.9);
				visibility: hidden;
				opacity: 0;
			}
		}
	}

	.dropDownEntry {
		display: flex;
		gap: 1rem;
		padding: 0 .65rem;
		cursor: pointer;
		width: 100%;
		height: 2.4rem;
		line-height: 2.4rem;
		transition: color .25s ease, padding .25s ease, border .25s ease;

		&:not(:last-child) {
			border-bottom: 1px solid vars.$border-heavy-color;
		}

		> :is(.label, .labelImg) {
			transition: transform .25s ease;
		}

		> .label {
			transition: transform .25s ease;
			width: 100%;
			height: 100%;
			text-align: initial;

			> a {
				width: 100%;
				height: 100%;
				display: block;
				color: vars.$text-color;
			}
		}

		&:not(.nonSelectable):hover {
			> :is(.label, .labelImg) {
				transform: translateX(.125rem);
			}

			* {
				color: vars.$primary;
			}
		}

		&.nonSelectable {
			cursor: default;
		}

		.nextMenuWrapper {
			height: 2.4rem;
			width: 2.4rem;
			margin-left: auto;
			margin-right: -.5rem;
			background-image: url("/img/rightArrow.svg");
			background-size: contain;
			background-repeat: no-repeat;
			background-position: center;
		}

		.labelImg {
			width: 1.4rem;
			height: 1.4rem;
			min-width: 1.4rem;
			margin-left: -.25rem;
			align-self: center;
			background-image: var(--img-url);
			background-size: contain;
			background-repeat: no-repeat;
			background-position: center;

			+ .label {
				margin-left: -.5rem;
			}

			&.roundCorners {
				border-radius: 0.7rem;
			}
		}
	}
}
