src/static/scripts/components/global/userDropDown/_userDropDown.scss
@use "../../../../style/vars";
@use "../../../../style/shadow";

.userDropDown {
	position: relative;

	> * {
		background: vars.$background-el1;
		border-radius: 1.3rem;
	}

	&.expanded {
		> button {
			min-width: 15rem;

			&::before {
				transform: rotate(180deg);
			}
		}

		> div {
			visibility: visible;
			opacity: 1;
			transform: scale(1) translateY(0);
		}
	}

	> button {
		height: 2.6rem;
		padding: 0 3.3rem 0 1rem;
		border: 1px solid vars.$border-heavy-color;
		min-width: 10rem;
		@media (max-width: vars.$smaller-screen-max-width) {
			min-width: 7rem;
		}
		text-align: left;
		transition: all 0.25s cubic-bezier(0.6, 0, 0.4, 1.0);

		&::before {
			content: "";
			position: absolute;
			top: 0.3rem;
			right: 1rem;
			width: 2rem;
			height: 2rem;
			background-image: url("/img/downArrow.svg");
			background-size: contain;
		}
	}

	> div {
		position: absolute;
		left: 0;
		top: 0;
		margin-top: 2.6rem + .5rem;
		width: 100%;
		max-height: 60vh;
		overflow-x: hidden;
		overflow-y: auto;
		padding: 1rem;
		visibility: hidden;
		opacity: 0;
		transform: scale(.9) translateY(-1.5rem);
		transition: all .25s ease;
		@extend %shadow-sharp;
		border: 1px solid vars.$border-color;

		> .actionBar {
			display: flex;
			justify-content: space-between;
			align-items: center;
			flex-wrap: wrap;

			.item {
				--dim: 2rem;

				img {
					width: 1.5rem;
					height: 1.5rem;
				}

				.unreadBadge {
					position: absolute;
					top: -.25rem;
					right: -.25rem;
					background: vars.$primary-contrast;
					color: vars.$text-on-primary;
					min-width: 1rem;
					padding: 0 .125rem;
					height: 1rem;
					border-radius: .5rem;
					font-size: 0.7rem;
					line-height: 1rem;
					text-align: center;
				}
			}
		}

		.userSelector {
			.allUsersList {
				position: relative;
				padding-top: .5rem;

				&:not(.expand) {
					display: none;
				}

				&.expand::before {
					content: "";
					position: absolute;
					top: 0.3rem;
					left: 0;
					width: 100%;
					height: 1px;
					background: vars.$divider-color;
					opacity: .5;
				}
			}

			.userOption {
				display: flex;
				height: 2rem;
				justify-content: space-between;
				align-items: center;
				position: relative;

				.mainArea {
					display: flex;
					align-items: center;
					flex-grow: 1;
					max-width: calc(100% - 1.65rem);

					> div {
						overflow: hidden;
						text-overflow: ellipsis;
					}

					&::after {
						content: "";
						position: absolute;
						width: 100%;
						height: 100%;
						padding: .1rem .4rem;
						margin-left: -0.4rem;
						border-radius: 2rem;
						background: transparent;
						opacity: 0.75;
						transition: all .25s ease;
						z-index: -1;
					}

					&:hover::after {
						background: vars.$switcher-bg-hover;
					}

					&:active::after {
						opacity: 0.75;
						background: vars.$switcher-bg-selected;
					}

				}

				&.selected .mainArea::after {
					opacity: 1;
					background: vars.$switcher-bg-active;
				}

				&:not(:first-child) {
					margin-top: .35rem;
				}

				&:not(:last-child) {
					margin-bottom: .35rem;
				}

				img {
					height: 1.65rem;
					margin-right: .5rem;
					border-radius: 50%;
				}

				.subBtn {
					--img: url("/img/transparent.svg");
					background-image: var(--img);
					background-size: cover;
					width: 1.65rem;
					height: 1.65rem;
					--dim: 1.9rem;
				}
			}
		}

		.separated {
			position: relative;

			&:not(:last-child) {
				margin-bottom: .5rem;
				padding-bottom: .5rem;

				&::before {
					content: "";
					position: absolute;
					bottom: 0;
					left: 1rem;
					height: 1px;
					width: calc(100% - 2rem);
					background: vars.$divider-color;
				}
			}
		}

		> .subGroup {
			> .sub {
				> a {
					text-overflow: ellipsis;
					overflow: hidden;
					display: block;
				}
			}

			.newMulti {
				height: 2rem;
				display: flex;
				align-items: center;

				img {
					width: 1.65rem;
					height: 1.65rem;
					margin-right: .5rem;
				}

				div {
					white-space: nowrap;
					transition: all .25s ease;
				}

				&:hover div {
					color: vars.$primary;
					filter: brightness(1.25);
				}
			}
		}
	}

	.filterSearch {
		margin: 0.25rem 0 0.5rem 0;
		background: vars.$background-el2;
		padding: .25rem .5rem;
		border-radius: .5rem;
		caret-color: #999;
	}
}
