header > nav.top-nav {
  display: grid;
  text-align: right;
  grid-template-columns: 50px auto auto;
  height: 100%;
  position: relative;
  background: var(--secondary);
  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.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.notify > div.notify-message {
  display: flex;
  height: 86%;
}

header > div.notify > div.notify-message div {
  display: inline-block;
  transition: all 0.2s linear;
}

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

header > div.notify > div.notify-message > div.notify-icons {
  margin: 5px;
  width: 40px;
  opacity: 0;
}

header > div.notify > div.notify-message > div.notify-text span {
  display: block;
  padding: 5px;
}

header > div.notify > div.notify-message i {
  display: none;
  color: var(--white);
}

i.notify-working {
  animation: 2s infinite linear spin;
  height: 40px;
  width: 40px;
}

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