#development-notification {
  position: fixed;
  bottom: -100px;
  left: 20px;
  --peek-size: 48px;
  background-color: #21242C;
  color: #F0F2F4;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  gap: 12px;
  transform: translateX(0);
  transition: bottom 0.5s ease-in-out, transform 0.4s ease;
  z-index: 9999;
}

#development-notification.show {
  bottom: 20px;
}

#development-notification i {
  margin: 0;
}

#development-notification p {
  margin: 0;
}

#development-notification .link-hover {
  cursor: pointer;
}

#development-notification .notification-toggle {
  margin-left: 8px;
}

#development-notification.collapsed {
  transform: translateX(calc(-100% + var(--peek-size)));
}

#development-notification.collapsed .notification-toggle {
  margin-left: 0;
}