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

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

[dir='rtl'] .nut-overlay,
.nut-rtl .nut-overlay {
  left: auto;
  right: 0;
}

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

.nut-overlay-slide {
  @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;
    }
  }

  &-enter-active,
  &-appear-active {
    animation-fill-mode: both;
    animation-name: nut-fade-in;
    animation-duration: $overlay-animation-duration;
  }

  &-exit-active {
    animation-fill-mode: both;
    animation-name: nut-fade-out;
    animation-duration: $overlay-animation-duration;
  }
}