@keyframes sui-o-notification--show {
  0% {
    opacity: 0;
    transform: translate(calc(100% + #{$sui-space-lg}));
  }

  100% {
    opacity: 1;
    transform: translate(0%);
  }
}

@keyframes sui-o-notification--hide {
  0% {
    opacity: 1;
    transform: translate(0%);
  }

  100% {
    opacity: 0;
    transform: translate(calc(100% + #{$sui-space-lg}));
  }
}

@keyframes sui-o-notification--toggle {
  0% {
    opacity: 0;
    transform: translate(calc(100% + #{$sui-space-lg}));
  }

  5% {
    opacity: 1;
    transform: translate(0%);
  }

  95% {
    opacity: 1;
    transform: translate(0%);
  }

  100% {
    opacity: 0;
    transform: translate(calc(100% + #{$sui-space-lg}));
  }
}

@keyframes sui-o-notification--loader {
  0% {
    width: calc(100% + #{$sui-size-border} * 4);
  }

  100% {
    width: 0;
  }
}