/* =============================================================================
	 Toast / notification stack
	 Raised surface, a tinted icon chip per variant. It floats, so it casts a shadow.
	 Depends on: tokens.css
	 ============================================================================= */

/* Stack container */
.shiftora-toast-stack {
	position:             fixed;
	inset-block-start:    calc(var(--shiftora-admin-bar-offset) + var(--shiftora-space-4));
	inset-inline-end:     var(--shiftora-space-4);
	z-index:              var(--shiftora-z-toast);
	display:              flex;
	flex-direction:       column;
	gap:                  var(--shiftora-space-3);
	pointer-events:       none;
	max-inline-size:      22rem;
	inline-size:          100%;
}

/* Individual toast */
.shiftora-toast {
	display:          flex;
	align-items:      flex-start;
	gap:              var(--shiftora-space-3);
	padding:          var(--shiftora-space-3) var(--shiftora-space-4);
	background-color: var(--shiftora-color-bg-raised);
	border:           1px solid var(--shiftora-color-border);
	border-radius:    var(--shiftora-radius-xl);
	box-shadow:       var(--shiftora-shadow-xl);
	backdrop-filter:  blur(8px);
	pointer-events:   all;
	animation:        shiftora-toast-in 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes shiftora-toast-in {
	from {
		opacity:  0;
		translate: 1rem 0;
	}
	to {
		opacity:  1;
		translate: 0 0;
	}
}

.shiftora-toast.is-leaving {
	animation: shiftora-toast-out 200ms ease forwards;
}

@keyframes shiftora-toast-out {
	to {
		opacity:    0;
		translate:  1rem 0;
		block-size: 0;
		padding:    0;
		margin:     0;
	}
}

.shiftora-toast__icon {
	flex-shrink:     0;
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	inline-size:     1.5rem;
	block-size:      1.5rem;
	border-radius:   var(--shiftora-radius-full);
	background:      var(--shiftora-color-info-bg);
	color:           var(--shiftora-color-info-text);
}

.shiftora-toast__icon svg {
	inline-size: 0.875rem;
	block-size:  0.875rem;
}

.shiftora-toast__content {
	flex:            1;
	min-inline-size: 0;
}

.shiftora-toast__title {
	font-size:   var(--shiftora-font-size-sm);
	font-weight: var(--shiftora-font-weight-semibold);
	color:       var(--shiftora-color-text);
}

.shiftora-toast__message {
	font-size:          var(--shiftora-font-size-sm);
	line-height:        var(--shiftora-line-height-normal);
	color:              var(--shiftora-color-text);
	padding-block-start: 1px;
}

.shiftora-toast__close {
	flex-shrink:     0;
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	inline-size:     1.5rem;
	block-size:      1.5rem;
	background:      none;
	border:          none;
	border-radius:   var(--shiftora-radius-sm);
	cursor:          pointer;
	padding:         0;
	color:           var(--shiftora-color-text-muted);
	transition:      color var(--shiftora-transition-fast), background-color var(--shiftora-transition-fast);
}

.shiftora-toast__close svg {
	inline-size: 0.875rem;
	block-size:  0.875rem;
}

.shiftora-toast__close:focus-visible {
	outline:        2px solid var(--shiftora-color-border-focus);
	outline-offset: 1px;
}

.shiftora-toast__close:hover {
	color:            var(--shiftora-color-text);
	background-color: var(--shiftora-color-bg-surface-alt);
}

/*
 * The variant colors the icon chip, which also carries the shape. The message
 * stays in body text.
 */
.shiftora-toast--success .shiftora-toast__icon { background: var(--shiftora-color-success-bg); color: var(--shiftora-color-success-text); }
.shiftora-toast--warning .shiftora-toast__icon { background: var(--shiftora-color-warning-bg); color: var(--shiftora-color-warning-text); }
.shiftora-toast--danger  .shiftora-toast__icon { background: var(--shiftora-color-error-bg);   color: var(--shiftora-color-error-text); }