@use '../mixins';
@use '../assets/mono';

#app-mount {
	.privateChannels__35e86 {
		background: transparent;
	}
	.scroller__99e7c {
		background: transparent;
		padding: 8px 2px 8px 8px !important;
		div[style='height: 8px;'] {
			display: none;
		}
	}

	.searchBar__35e86 {
		height: var(--toolbar-height);
		box-shadow: none;
		border-bottom: 1px solid var(--border-mid);
		box-sizing: border-box;
		padding: 0 8px;
		button {
			@include mixins.btn;
			@include mixins.btnSecondary;
		}
	}

	.channel__972a0 {
		max-width: unset;
		margin: 0 0 4px 0;
		padding: 0;

		.layout__20a53 {
			height: 48px;
			padding: 0 18px;
			cursor: var(--cursor);
		}

		.interactive_bf202d {
			cursor: var(--cursor);
			background: transparent;
			&::before {
				content: '';
				border-radius: 50px;
				position: absolute;
				top: 50%;
				translate: 0 -50%;
				width: var(--pill-width);
				height: var(--pill-height);
				scale: 0;
				left: 0;
				opacity: 0;
				background: var(--pill-unread);
				transition: var(--pill-transition);
			}
			&:not(.selected_bf202d):has(.highlighted__20a53)::before {
				scale: 1 0.65;
				opacity: 1;
			}
		}

		.content__20a53 {
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: center;
		}

		&:hover .interactive_bf202d {
			background: var(--bg-interactive-high);
		}
		.selected_bf202d {
			background: var(--bg-interactive-high);
			&::before {
				scale: 1;
				opacity: 1;
				background: var(--accent);
			}
			&:hover {
				background: var(--bg-interactive-high-hover);
			}
		}
	}

	.link__972a0 {
		cursor: var(--cursor);
		&[href='/channels/@me'] .linkButtonIcon__972a0 {
			mask: url(mono.$people) center/cover;
			background: var(--interactive-normal);
			g {
				display: none;
			}
		}
	}
}
