body {
  background-color: var(--color-bg);
  color: var(--color-text);
  margin: 0;
  padding: var(--block-space);

  &.development {
    background-image: linear-gradient(135deg, var(--color-red-muted) 0, transparent 20em);
    background-repeat: no-repeat;
  }

  &.staging {
    background-image: linear-gradient(135deg, var(--primary-color) 0, transparent 20em);
    background-repeat: no-repeat;
  }
}

#app-wrapper.just-logged-in {
  animation: app-entrance 1s cubic-bezier(0.22, 1, 0.36, 1) both;
}

#app-wrapper.just-logged-in #nav,
#app-wrapper.just-logged-in #sidebar-left,
#app-wrapper.just-logged-in #sidebar-right {
  animation: app-entrance-slide 2s cubic-bezier(0.22, 1, 0.36, 1) both;
}

#app-wrapper.just-logged-in #nav {
  animation-delay: 0.2s;
}

#app-wrapper.just-logged-in #sidebar-left {
  animation-delay: 0.4s;
}

#app-wrapper.just-logged-in #sidebar-right {
  animation-delay: 0.6s;
}

#app-wrapper.just-logged-in #main-content {
  animation: app-entrance-slide 2s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: 0.8s;
}

@keyframes app-entrance {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes app-entrance-slide {
  from {
    opacity: 0;
    transform: translateY(2rem);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

[popover] {
  background-color: var(--color-bg);
  color: var(--color-text);
}