@import "/ui/styles/_theme.scss";

.toast {
	pointer-events: all;
	position: absolute;
	right: 24px;
	bottom: 24px;
	max-width: 640px;
	flex-direction: row;
	align-items: center;
	gap: 14px;
	padding: 14px 18px;
	background-color: $bg-1;
	border: 1px solid $line-strong;
	z-index: 200;

	.toast-icon {
		flex-shrink: 0;
	}

	.toast-body {
		flex-direction: column;
		flex-grow: 1;
		gap: 4px;
		cursor: pointer;
	}

	.toast-title {
		font-family: $font-primary;
		font-size: $fs-4;
		font-weight: 400;
		color: $text;
		letter-spacing: 2px;
		text-transform: uppercase;
	}

	.toast-message {
		font-family: $font-mono;
		font-size: $fs-2;
		color: $text-dim;
		letter-spacing: 0.3px;
	}

	.toast-copy {
		align-items: center;
		justify-content: center;
		padding: 6px;
		background-color: $bg-2;
		border: 1px solid $line-strong;
		flex-shrink: 0;
		cursor: pointer;
		transition: background-color 0.12s ease, border-color 0.12s ease;

		&:hover { background-color: $bg-elev; border-color: $accent; }
	}

	&.toast-default { border-left: 3px solid $line-strong; }
	&.toast-ok      { border-left: 3px solid $success;     .toast-icon { color: $success; } }
	&.toast-info    { border-left: 3px solid $info;   .toast-icon { color: $info; } }
	&.toast-warn    { border-left: 3px solid $accent;  .toast-icon { color: $accent; } }
	&.toast-danger  { border-left: 3px solid $danger; .toast-icon { color: $danger; } }
}