header > nav > div[role="notifications"] {
  width: 100%;
}

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

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

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

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

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

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

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

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