.nut-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: $overlay-bg-color;
}

.nut-overflow-hidden {
  overflow: hidden !important;
}

.nut-overlay-fade-enter-active {
  animation: nut-fade-in;

  .wrapper {
    .content {
      background-color: $overlay-content-bg-color;
      color: $overlay-content-color;
    }
  }
}

.nut-overlay-fade-leave-active {
  animation: nut-fade-out;
}

.nut-overlay-first-render {
  display: none;
}

.nut-overlay-hidden-render {
  display: none;
}

@keyframes nut-fade-in {
  0% {
    opacity: 0;
  }

  1% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes nut-fade-out {
  0% {
    opacity: 1;
  }

  1% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}