@use '../mixins';

#app-mount {
	.peopleColumn__133bf {
		position: relative;
	}
	.peopleList__5ec2f {
		padding-bottom: calc(var(--bottombar-height) * 1.5);
	}
	.container__133bf {
		background: var(--bg-alt);
	}
	.tabBody__133bf::before {
		content: none;
	}

	.searchBar__5ec2f {
		margin: 0;
		position: absolute;
		bottom: 12px;
		right: 12px;
		left: 0;
		z-index: 1;
		height: var(--bottombar-height);
		background: var(--bg-main);
		padding: 10px 10px 10px 14px;
		border: 1px solid var(--border-high);
		border-left: none;
		border-radius: 0 var(--rounded) var(--rounded) 0;

		.inner__999f6 {
			background: var(--bg-alt);
			border-radius: var(--rounded);
			flex-direction: row-reverse;
			padding: 0 10px;
			overflow: hidden;
			&::before {
				content: '';
				height: 1px;
				width: 100%;
				background: var(--textbox-underline);
				position: absolute;
				left: 0;
				bottom: 0;
			}
			&:focus-within {
				background: var(--bg-content-alt);
				&::before {
					height: 2px;
					background: var(--accent);
				}
			}
		}
		.input__48d49 {
			padding: 0 10px;
			margin: 0;
		}
	}

	.title__1472a {
		margin: 16px;
	}
	.peopleListItem_cc6179 {
		height: auto !important;
		margin: 0 4px 4px 16px;
		padding: 8px 16px;
		border-radius: var(--rounded);
		cursor: var(--cursor);
		border: none;
		position: relative;

		&::before {
			content: '';
			display: block;
			height: 0;
			width: var(--pill-width);
			background: var(--accent);
			border-radius: 50px;
			transition: var(--pill-transition);
			opacity: 0;
			position: absolute;
			left: 0;
			top: 50%;
			transform: translateY(-50%);
			z-index: 1;
		}

		.actionButton_f8fa06 {
			@include mixins.btn;
			@include mixins.btnSecondary;
			width: auto;
			height: auto;
		}

		&:hover {
			background: var(--bg-interactive-high);
		}
		&.active_cc6179 {
			background: var(--bg-interactive-high);
			&::before {
				height: var(--pill-height);
				opacity: 1;
			}
		}
	}

	// Add friend
	.addFriendInputWrapper__72ba7 {
		padding: 0;
		border: none;
		background: transparent;
		margin-top: 16px;
	}
}
