@import (reference) '../../styles/variables';
@import (reference) '../../styles/mixins';

:root {
	--em-color-color: #084298;
	--em-color-bg: #cfe2ff;
	--em-color-border: #b6d4fe;
	--em-border-radius: 0.375rem;
	--em-padding: calc(1rem / 2) 1rem;
	--em-font-size: 1rem;
}

.jodit-ui-messages {
	position: absolute;
	z-index: 3;
	right: 0;
	bottom: 0;
	overflow: visible;
	width: 0;
	height: 0;
}

.jodit-ui-message {
	position: absolute;
	right: calc(var(--padding-default) / 2);
	bottom: 0;
	display: block;
	padding: var(--em-padding);
	border: 1px solid var(--em-color-border);
	background: var(--em-color-bg);
	border-radius: var(--em-border-radius);
	color: var(--em-color-color);
	cursor: pointer;
	font-size: var(--em-font-size);
	opacity: 0;
	transition: opacity 0.1s linear, bottom 0.3s linear, transform 0.1s ease-out;
	white-space: pre;

	&_active_true {
		opacity: 1;
	}

	&:active {
		transform: scale(0.76);
	}

	&_variant_secondary {
		--em-alert-color: #41464b;
		--em-alert-bg: #e2e3e5;
		--em-alert-border-color: #d3d6d8;
	}

	&_variant_error,
	&_variant_danger {
		--em-color-color: #842029;
		--em-color-bg: #f8d7da;
		--em-color-border: #f5c2c7;
	}

	&_variant_success {
		--em-color-color: #0f5132;
		--em-color-bg: #d1e7dd;
		--em-color-border: #badbcc;
	}
}