@use '../assets';

#app-mount .chat-2ZfjoI {
	// Old messages
	.jumpToPresentBar-1cEnH0 {
		opacity: 1;
		left: calc(var(--spacing) - 2px);
		bottom: 0;
		border-radius: 0;
		min-height: auto;
		background: var(--background);
		padding: 0;
		cursor: var(--cursor);
		position: absolute;
		z-index: 10;
		box-shadow: var(--elevation-1);
		width: fit-content;
		.barButtonMain-2GIx4o {
			display: none;
		}
		.barButtonAlt-TQoCdZ {
			font-size: var(--font-size-sm);
			color: var(--text-normal);
			font-weight: var(--font-weight);
			padding: 0 var(--spacing);
			border: 1px solid var(--base-border);
			border-bottom: none;
			cursor: var(--cursor);
			border-radius: var(--border-radius) var(--border-radius) 0 0;
			&:hover {
				background: var(--background-modifier-hover);
			}
			&:active {
				background: var(--background-modifier-active);
			}
			& > svg {
				display: none;
			}
		}
		&:active {
			margin: 0;
		}
	}

	// New messages
	.newMessagesBar-1hF-9G {
		left: 0;
		right: 0;
		border-radius: 0;
		background: var(--background-light);
		border-bottom: 1px solid var(--base-border);
		box-shadow: none;
		opacity: 1;
		z-index: 100;
		min-height: auto;
		cursor: var(--cursor);
		&:active {
			padding: 0;
		}
		button {
			cursor: var(--cursor);
			&.barButtonMain-2GIx4o {
				color: var(--text-normal);
				font-size: var(--font-size);
				font-weight: var(--font-weight-normal);
				height: 29px;
				padding: 0 var(--spacing);
				display: flex;
				align-items: center;
				justify-content: space-between;
				&::after {
					content: '';
					width: 16px;
					height: 16px;
					background: rgb(var(--status-yellow));
					mask: url(assets.$icon_modified) center/contain no-repeat;
					position: relative;
					display: inline-block;
				}
			}
			&.barButtonAlt-TQoCdZ {
				display: none;
			}
		}
	}

	// Load more messages
	.hasMore-3e72_v {
		margin: 0;
		box-shadow: none;
		background: var(--background);
		border-top: 1px solid var(--base-border);
		border-bottom: 1px solid var(--base-border);
		border-radius: 0;
	}

	// Message Error Load
	.messagesErrorBar-1IQ1rH {
		opacity: 1;
		position: absolute;
		top: 50%;
		left: 50%;
		flex-direction: column;
		background: var(--background);
		border-radius: var(--border-radius);
		box-shadow: var(--elevation-1);
		border: 1px solid var(--base-border);
		height: fit-content;
		width: 340px;
		height: 290px;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: var(--spacing-double);
		pointer-events: none;
		margin-left: -170px;
		margin-top: -145px;
		animation: modal 150ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
		.barButtonMain-2GIx4o {
			font-size: 0;
			padding: 0;
			overflow: visible;
			margin: var(--spacing) 0;
			height: auto;
			line-height: normal;
			&::after {
				content: 'Uh oh.';
				font-size: var(--font-size-xxl);
				font-weight: var(--font-weight-light);
				color: var(--text-normal);
			}
		}
		&::before {
			content: '';
			width: 100px;
			height: 100px;
			background: var(--text-muted);
			mask: url(assets.$illustration_1) center/contain no-repeat;
			margin-bottom: var(--spacing);
		}
		&::after {
			content: 'There was a problem loading messages for this channel. Make sure you have a stable internet connection, then try agian.';
			font-size: var(--font-size);
			color: var(--text-muted);
			text-transform: none;
			text-align: center;
			line-height: normal;
			margin-bottom: var(--spacing);
		}
	}
	.messagesErrorBar-nyJGU7 .barButtonAlt-TQoCdZ,
	.messagesErrorBar-nyJGU7 .spinner-3xAPm0 {
		order: 1;
		pointer-events: all;
		font-size: var(--font-size);
		font-weight: var(--font-weight-normal);
		cursor: var(--cursor);
		min-height: var(--input-height);
		height: var(--input-height);
		line-height: normal;
		transition: none;
		padding: 0 var(--spacing);
		border-radius: var(--button-border-radius);
		color: var(--white);
		background-color: rgb(var(--accent));
		&:hover {
			box-shadow: inset 0 0 0 100vmax rgb(255, 255, 255, 0.1);
		}
		&:focus {
			box-shadow: 0 0 0 2px rgb(var(--accent), 0.25), inset 0 0 0 100vmax rgb(255, 255, 255, 0.1);
		}
	}
}
