@use '../assets';

#app-mount {
	.form-3gdLxP {
		box-sizing: border-box;
		padding: var(--spacing) var(--spacing) var(--spacing)
			calc(var(--spacing-double) + var(--avatar-size-sm));
		border-top: 1px solid var(--base-border);
		display: flex;
		align-items: center;
		background: var(--background-light);
		height: auto;
		margin: 0;
		position: relative;
		z-index: 1;
		&::before {
			content: none;
		}
		& > div:not(.typing-2J1mQU),
		[aria-controls] {
			width: 100%;
		}
		.buttonContainer-KMz3Ex {
			margin: 0;
		}

		.divider-2rZFJK {
			display: none;
		}
	}

	// Notifications Form
	.wrapper-2SplAX {
		margin: 0;
		padding: 0;
		background: transparent;
		height: calc(var(--avatar-size) - 2px);
		.content-2M_BlY {
			height: auto;
			margin: 0;
			img {
				display: none;
			}
			.title-Do_30w {
				font-size: var(--font-size);
				color: var(--text-normal);
				line-height: normal;
			}
			.size12-oc4dx4 {
				line-height: normal;
				color: var(--text-muted);
			}
		}
	}

	// Attach files
	.attachWrapper-3slhXI {
		border-right: 1px solid var(--base-border);
		width: 44px;
		button {
			mask: url(assets.$icon_attach) center/14px no-repeat;
			background: var(--text-muted);
			width: 44px;
			height: 100%;
			cursor: var(--cursor);
			margin-left: 0;
			padding: 0;
			div {
				display: none;
			}
			&:hover {
				background: var(--text-focus);
			}
		}
	}
	// No attachment
	.sansAttachButton-1ERHue {
		padding-left: 0;
	}
	.channelTextArea-1FufC0 {
		margin-bottom: 0;
		background-color: transparent;
		box-sizing: border-box;
		margin-left: 0;
		&.highlighted-1sGU_w,
		.focused-PMHa7m {
			box-shadow: none;
		}
	}
	.placeholder-1_mJY1 {
		font-size: var(--font-size);
		padding: 0 var(--spacing);
		color: var(--text-muted);
		font-weight: var(--font-weight-normal);
		line-height: normal;
		display: flex;
		align-items: center;
		top: 0;
		width: 98%;
		min-height: 24px;
	}
	.scrollableContainer-15eg7h {
		padding: 0;
		padding-left: 0;
		width: 100%;
		border-radius: 0;
		background: transparent;
		max-height: unset;
		overflow: visible;
		&::-webkit-scrollbar {
			display: none;
		}
	}
	.inner-NQg18Y {
		background-color: var(--background);
		border: 1px solid var(--base-border);
		border-radius: var(--border-radius);
		transform: translateZ(0);
		box-sizing: border-box;
		height: unset;
		&:focus-within {
			border-color: rgb(var(--accent), 1);
			box-shadow: 0 0 0 2px rgb(var(--accent), 0.25);
		}
	}
	.hasReply-16cIUP .inner-NQg18Y {
		border-radius: 0 0 var(--border-radius) var(--border-radius);
	}
	.textArea-2CLwUE {
		min-height: var(--avatar-size-sm);
		height: auto;
		&.fontSize16Padding-XoMpjI {
			padding: 4px var(--spacing);
			color: var(--text-normal);
			font-size: var(--font-size);
			line-height: normal;
			min-height: unset;
		}
	}
	.slateTextArea-27tjG0 {
		font-size: var(--font-size);
		padding: 4px var(--spacing) 0;
		color: var(--text-normal);
		font-weight: var(--font-weight-normal);
		line-height: normal;
		top: 0;
		width: 98%;
	}
	.buttons-uaqb-5 {
		height: auto;
		margin: 0;
		padding: 0 var(--spacing-half);
		.buttonWrapper-3YFQGJ {
			// display: none;
		}
		button {
			transform: scale(0.75);
			transform-origin: center right;
			margin: 0;
		}
		.emojiButton-3FRTuj {
			cursor: var(--cursor);
			.sprite-2lxwfc {
				height: 22px;
				width: 22px;
				filter: none !important;
				transform: none !important;
				background: var(--text-muted);
				mask: url(assets.$icon_smiley_alt) center/20px no-repeat;
			}
			&:hover .sprite-2lxwfc,
			.sprite-2lxwfc[style*='grayscale(0%)'] {
				background: var(--text-normal);
			}
		}
	}
	.button-3BaQ4X {
		padding: 0;
	}
	// Users typing
	.base-3bcbY3 {
		opacity: 0.65;
		position: absolute;
		left: unset;
		right: var(--spacing);
		height: var(--input-height);
		width: fit-content;
		background: var(--background);
		border: 1px solid var(--base-border);
		border-radius: var(--button-border-radius) var(--button-border-radius) 0 0;
		top: calc(var(--input-height) * -1 - 2px);
		transition: 50ms linear;
		padding: 0 var(--spacing-half);
		display: flex;
		justify-content: center;
		border-bottom: none;
		.text-3S7XCz {
			line-height: normal;
			color: var(--text-muted);
			font-size: var(--font-size-sm);
			font-weight: var(--font-weight-normal);
			margin-left: 0;
			strong {
				font-weight: var(--font-weight-semibold);
				color: var(--text-normal);
			}
		}
		svg {
			display: none;
		}
		.cooldownWrapper-2k1jHK {
			color: var(--text-normal) !important;
			font-size: var(--font-size-sm);
			line-height: normal;
			font-weight: var(--font-weight-semibold);
			&[style*='240'] {
				color: rgb(var(--status-red)) !important;
			}
		}
	}
	form:hover .base-3bcbY3 {
		opacity: 1;
		&:hover {
			opacity: 1;
		}
	}

	// Reply
	.replyBar-1oi75v {
		background: transparent;
	}
	.container-A2jo65 {
		background: var(--background-alt);
		border-radius: var(--border-radius) var(--border-radius) 0 0;
		border: 1px solid var(--base-border);
		border-bottom: none;
		.text-1pxItg {
			margin-left: var(--spacing);
		}
	}
	.mentionButton-3C5YMI {
		padding: 4px 6px;
		font-size: var(--font-size-sm);
	}
	.mentionIcon-7MlVnE {
		width: 12px;
		height: 12px;
	}
	.separator-8ngZ3p {
		height: 26px;
		background: var(--base-border);
	}
	.closeButton-3IEry2 {
		padding: 4px 6px;
		svg {
			mask: url(assets.$icon_cross) center/cover;
			background: var(--text-normal);
		}
		path {
			display: none;
		}
	}

	// GIF & Gift buttons
	.buttons-uaqb-5 .button-f2h6uQ:not(.emojiButton-3FRTuj) {
		display: none;
	}

	.channelAttachmentArea-1wlgJV {
		padding: var(--spacing) 0;
		margin: 0;
	}
	.upload-3GTSF9 {
		border-radius: var(--border-radius);
		background: var(--background);
		border: 1px solid var(--base-border);
		padding: var(--spacing-half);
		min-height: 120px;
		max-height: 150px;
		min-width: 140px;
		max-width: 140px;
		box-sizing: border-box;
		padding: 0;
	}
	.imageContainer-1aUqU8 {
		margin: 0;
		padding: var(--spacing-half);
	}
	.filenameContainer-Djm-OO {
		margin: 0;
		padding: 0 var(--spacing-half) var(--spacing-half);
	}
	.filename-3PA55E {
		margin: 0;
		font-size: var(--font-size-sm);
	}
	.actionBarContainer-3l5PQn {
		position: unset;
	}
	.actionBar-3pDeKY {
		position: relative;
		transform: none;
	}
	.wrapper-2vIMkT {
		border-radius: 0;
		border-top: 1px solid var(--base-border);
		background: transparent;
		box-shadow: none;
		display: flex;
		[role='button'] {
			flex: 1;
			cursor: var(--cursor);
		}
	}
}
