/**
 * Toast — Geist `useToasts` clone.
 *
 * Adapted from https://github.com/geist-org/geist-ui/tree/master/components/use-toasts
 *   - default = white bg (palette.background) + dark text + border + shadow
 *   - 4 placements via CSS vars: bottomRight (default) · bottomLeft · topRight · topLeft
 *   - enter translates from corner; leave translates out + scale(0.85)
 *   - 350ms cubic-bezier(0.1, 0.2, 0.1, 1)
 *   - action buttons inside toast (right side)
 */

@layer components {

	/* --- Region (4 corners) --- */

	.st-toast-region {
		--toast-enter-x: 60px;
		--toast-enter-y: 60px;
		--toast-leave-x: 50px;
		--toast-leave-y: -15px;

		position: fixed;
		inset-block-end: 1.5rem;
		inset-inline-end: 1.5rem;
		display: flex;
		flex-direction: column;
		gap: 0.5rem;
		max-inline-size: calc(100% - 3rem);
		z-index: 2000;
		pointer-events: none;
	}

	.st-toast-region--bottom-left {
		inset-inline-end: auto;
		inset-inline-start: 1.5rem;
		--toast-enter-x: -60px;
		--toast-enter-y: 60px;
		--toast-leave-x: -50px;
		--toast-leave-y: -15px;
	}

	.st-toast-region--top-right {
		inset-block-end: auto;
		inset-block-start: 1.5rem;
		flex-direction: column-reverse;
		--toast-enter-x: 60px;
		--toast-enter-y: -60px;
		--toast-leave-x: 50px;
		--toast-leave-y: 15px;
	}

	.st-toast-region--top-left {
		inset-block-end: auto;
		inset-block-start: 1.5rem;
		inset-inline-end: auto;
		inset-inline-start: 1.5rem;
		flex-direction: column-reverse;
		--toast-enter-x: -60px;
		--toast-enter-y: -60px;
		--toast-leave-x: -50px;
		--toast-leave-y: 15px;
	}

	/* --- Toast item --- */

	.st-toast {
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 0.75rem;
		inline-size: clamp(280px, 90vw, 420px);
		padding: 0.75rem 1rem;
		background: var(--st-bg);
		color: var(--st-text);
		border: 1px solid var(--st-border);
		border-radius: var(--st-radius);
		box-shadow: 0 5px 20px rgb(0 0 0 / 0.12);
		pointer-events: auto;
		opacity: 0;
		transform: translate(var(--toast-enter-x), var(--toast-enter-y));
		transition: all 350ms cubic-bezier(0.1, 0.2, 0.1, 1);
		overflow: hidden;
	}

	.st-toast[data-st-state="open"] {
		opacity: 1;
		transform: translate(0, 0);
	}

	.st-toast[data-st-state="closing"] {
		opacity: 0;
		transform: translate(var(--toast-leave-x), var(--toast-leave-y)) scale(0.85);
	}

	/* --- Type variants (Geist palette) --- */

	.st-toast--secondary { background: #666;     color: #fff; border-color: #666; }
	.st-toast--success   { background: #0070f3;  color: #fff; border-color: #0070f3; }
	.st-toast--warning   { background: #f5a623;  color: #fff; border-color: #f5a623; }
	.st-toast--error     { background: #ee0000;  color: #fff; border-color: #ee0000; }

	/* --- Inner structure --- */

	.st-toast__message {
		flex: 1;
		font-size: 0.875rem;
		line-height: 1.4;
		word-break: break-word;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.st-toast__actions {
		display: flex;
		gap: 0.375rem;
		flex-shrink: 0;
	}

	.st-toast__action {
		padding: 0.25rem 0.625rem;
		border: 1px solid currentColor;
		border-radius: 4px;
		background: transparent;
		color: inherit;
		font-size: 0.8125rem;
		font-weight: 500;
		cursor: pointer;
		transition: background 120ms;
	}

	.st-toast__action:hover {
		background: rgb(127 127 127 / 0.12);
	}
}