/* SPDX-License-Identifier: AGPL-3.0-or-later */

.actionBarContainer {
	position: absolute;
	bottom: calc(100% - 0.25rem - 12px);
	right: 0;
	z-index: var(--z-index-elevated-1);
	padding: 0 0.875rem 0.375rem 2rem;
}

.actionBar {
	composes: toolbar from '@app/features/ui/action_toolbar/ActionToolbar.module.css';
	--message-action-bar-surface: var(--settings-surface-background, var(--form-surface-background));
	--message-action-bar-border: var(--settings-border-color, var(--background-modifier-accent));
	--message-action-bar-hover-background: var(--settings-hover-background, var(--surface-interactive-hover-bg));
	--message-action-bar-hover-border: var(
		--settings-hover-border-color,
		color-mix(in srgb, var(--background-modifier-accent) 72%, var(--text-tertiary))
	);
	--message-action-bar-selected-background: var(--settings-selected-background, var(--surface-interactive-selected-bg));
	--message-action-bar-selected-border: var(
		--settings-selected-border-color,
		color-mix(in srgb, var(--background-modifier-accent) 72%, var(--text-tertiary))
	);
	--message-action-bar-danger-text: var(
		--settings-danger-text,
		color-mix(in srgb, var(--status-danger) 78%, var(--text-primary) 22%)
	);
	--message-action-bar-danger-background: var(
		--settings-danger-background,
		color-mix(in srgb, var(--status-danger) 6%, var(--surface-interactive-hover-bg))
	);
	--message-action-bar-danger-border: var(
		--settings-danger-border-color,
		color-mix(in srgb, var(--status-danger) 32%, transparent)
	);
	--action-toolbar-surface: var(--message-action-bar-surface);
	--action-toolbar-border: var(--message-action-bar-border);
	position: relative;
}

.button {
	composes: item from '@app/features/ui/action_toolbar/ActionToolbar.module.css';
}

.button[hidden] {
	display: none;
}

:global(:where(html.window-focused, html.unfocused-fully-interactive):not(.window-focus-activation-guard))
	.button:not(.active):not(.danger):hover {
	color: var(--text-primary);
	background: var(--message-action-bar-hover-background);
}

.button.active {
	color: var(--text-primary);
	background: var(--message-action-bar-selected-background);
}

.button.danger {
	color: var(--message-action-bar-danger-text);
}

:global(:where(html.window-focused, html.unfocused-fully-interactive):not(.window-focus-activation-guard))
	.button.danger:not(.active):hover {
	color: var(--message-action-bar-danger-text);
	background: var(--message-action-bar-danger-background);
}

.button.danger.active {
	color: var(--message-action-bar-danger-text);
	background: var(--message-action-bar-danger-background);
}

.actionBarIcon {
	width: 1.125rem;
	height: 1.125rem;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
}

.actionBarIcon > svg {
	width: 1.125rem;
	height: 1.125rem;
	display: block;
	flex: 0 0 auto;
	object-fit: contain;
}

.tooltipContent {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.25rem;
}

.tooltipHint {
	color: var(--text-primary-muted);
	font-size: 0.75rem;
}

.emojiImage {
	height: 1.125rem;
	width: 1.125rem;
}

img.emojiImage {
	object-fit: contain;
}