/* Kontainer Flexbox untuk Centering */
/*.flash-message-container {
	position	         : fixed; //Tetap di layar 
	top		         : 0;
	left		         : 0;
	width		         : 100%;
	z-index	         : 9999;
	display				: flex;     //Perintah Flexbox
	justify-content   : center;   //Kunci Centering Horizontal
	padding-top	      : 2rem;     //Beri sedikit jarak dari atas
	pointer-events	   : none;     //SANGAT PENTING: Agar kontainer tidak bisa di-klik
}*/

.flash-message {
   width          : 80%;
   max-width      : 50ch;
   padding        : 0 2rem 1rem;
   border         : none;
   border-radius  : 0.50rem;
   box-shadow     : 0 0 1em rgb(0 0 0 / .3);
   align-items    : center;
   gap            : 1rem;
   margin-bottom  : 1rem;
   pointer-events : auto;
   z-index        : 9999;
   top            : 5rem; 
}
.flash-message-header{
   display           : flex;
   justify-content   : flex-end;
}
.flash-message-body{
   display     : flex;
   align-items : center;
}
.flash-message p { margin: 0; flex-grow: 1;}
.flash-message-close, .dialog-close { 
   background: none; 
   border: none; 
   cursor: pointer; 
   outline: none;}

.flash-message-border--sukses { 
   border-top     : 5px solid var(--color-green);/*#28a745*/ 
   border-bottom  : 5px solid var(--color-green);/*#28a745*/ 
   background     : var( --color-grey-light );
}
.flash-message-icon--sukses{
   --icon-color: var(--color-green);
}
.flash-message-border--error { 
   border-top     : 5px solid var(--color-red);/*#dc3545*/ 
   border-bottom  : 5px solid var(--color-red);/*#dc3545*/ 
   background     : var( --color-grey-light );
}
.flash-message-icon--error{
   --icon-color: var(--color-red);
}
.flash-message-border--info { 
   border-top     : 5px solid var(--color-yellow);/*#17a2b8*/ 
   border-bottom  : 5px solid var(--color-yellow);/*#17a2b8*/ 
   background     : var( --color-grey-light );
}


/* --- ANIMASI (Lebih Sederhana) --- */
.flash-message[open] {
   animation: fadeInDown 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.flash-message.hiding {
   animation: fadeOutUp 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) forwards;
}

@keyframes fadeInDown {
	from {
		opacity		: 0;
		transform	: translateY(-50%); /* Hanya perlu animasi vertikal */
	}
	to {
		opacity		: 1;
		transform	: translateY(0);
	}
}

@keyframes fadeOutUp {
	from {
		opacity		: 1;
		transform	: translateY(0);
	}
	to {
		opacity		: 0;
		transform	: translateY(-50%);
	}
}