.notification-manager
{
   display: flex;
   position: fixed;
   z-index: 9999;
   bottom: 4px;
   left: 4px;
   flex-direction: column-reverse;
   gap: 4px;
}

notification-item
{
   --Border: #ffffff30;
   --Color: var(--system-white);
   --Icon: var(--system-white);
   --Info-Color: var(--system-white);
   --Success-Color: var(--system-white);
   --Error-Color: var(--system-white);
   --Info-Background: var(--color-accent-2);
   --Success-Background: var(--system-success);
   --Error-Background: var(--system-danger);
   --Info-Icon: var(--Icon);
   --Success-Icon: var(--Icon);
   --Error-Icon: var(--Icon);

   display: flex;

   border-radius: 4px;
   background-Color: var(--Info-Background);

   min-width: 316px;
   max-width: 371px;

   padding: 16px;
   box-sizing: border-box;
}

/* STATUS COLORS */
notification-item[status="200"]
{
   background-Color: var(--Success-Background);
}
notification-item[status="500"]
{
   background-Color: var(--Error-Background);
}
notification-item > .status-icon
{
   display: none;
   width: 24px;
   height: 24px;
   margin-right: 12px;
}
notification-item[status="100"] > .status-icon[status="100"],
notification-item[status="200"] > .status-icon[status="200"],
notification-item[status="500"] > .status-icon[status="500"]
{
   display: block;
}
notification-item > .close-icon
{
   width: 20px;
   height: 20px;
   margin-left: 12px;
   cursor: pointer;
}
notification-item > .close-icon *
{
   fill: var(--Icon);
}

/* ANIMATIONS */
notification-item[show]
{
   transition: transform var(--animation-speed) ease-in-out;
}
notification-item[show="false"]
{
   transform: translateX(calc(-100% - 4px));
}
notification-item[show="true"]
{
   transform: translateX(0%);
}


/* SIMPLE CONTENT STYLING */
notification-item > .content
{
   width: calc(100% - 80px);
   padding-right: 12px;
   border-right: 1px solid var(--Border);
   overflow: hidden;
}
notification-item.simple > .content > h1
{
   color: var(--Color);
   font-size: 13px;
   font-style: normal;
   font-weight: 700;
   line-height: 140%;
}
notification-item.simple > .content > p
{
   color: var(--Color);
   font-size: 13px;
   font-style: normal;
   font-weight: 500;
   line-height: 140%;
}

notification-item[status="100"] > .content > h1,
notification-item[status="100"] > .content > p
{
   color: var(--Info-Color);
}
notification-item[status="200"] > .content > h1,
notification-item[status="200"] > .content > p
{
   color: var(--Success-Color);
}
notification-item[status="500"] > .content > h1,
notification-item[status="500"] > .content > p
{
   color: var(--Error-Color);
}

notification-item[status="100"] .status-icon[status="100"] *
{
   fill: var(--Info-Icon);
}
notification-item[status="200"] .status-icon[status="200"] *
{
   fill: var(--Success-Icon);
}
notification-item[status="500"] .status-icon[status="500"] *
{
   fill: var(--Error-Icon);
}