Fipamo/public/assets/css/dash/notifications.css

header > nav[role="top-nav"] {
  display: grid;
  text-align: right;
  grid-template-columns: 50px auto auto;
  height: 100%;
  position: relative;
  background: var(--white);
  border-radius: 3px;
  transform-style: preserve-3d;
  transform-origin: 100% 50%;
  transform: rotateX(0deg);
  transition: all 0.1s ease-out;
  perspective: 500px;
  backface-visibility: hidden;
  box-shadow: 2px 2px 0 rgba(var(--primary-rgb) / 30%);
}

header > div[role="notify"] {
  display: grid;
  height: 100%;
  position: relative;
  background: var(--black);
  border-radius: 3px;
  transform-style: preserve-3d;
  transform-origin: 100% 50%;
  transform: rotateX(180deg);
  transition: all 0.3s ease-out;
  perspective: 500px;
  backface-visibility: hidden;
  margin-top: -50px;
  box-shadow: 2px 2px 0 rgba(var(--primary-rgb) / 30%);
}

header > div[role="notify"] > div[role="notify-message"] {
  display: flex;
  height: 86%;
}

header > div[role="notify"] > div[role="notify-message"] div {
  display: inline-block;
  transition: all 0.2s linear;
}

header
  > div[role="notify"]
  > div[role="notify-message"]
  > div[role="notify-text"] {
  color: var(--white);
  border-radius: 5px;
  height: 79%;
  margin-top: 8px;
  opacity: 0;
}

header
  > div[role="notify"]
  > div[role="notify-message"]
  > div[role="notify-icons"] {
  margin: 5px;
  width: 40px;
  opacity: 0;
}

header
  > div[role="notify"]
  > div[role="notify-message"]
  > div[role="notify-text"]
  span {
  display: block;
  padding: 5px;
}

header > div[role="notify"] > div[role="notify-message"] i {
  display: none;
  color: var(--white);
}

i[role="notify-working"] {
  animation: 2s infinite linear spin;
  height: 40px;
  width: 40px;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}