$success: #c8e6c9;
$info: #bbdefb;
$warning: #ffccbc;
$error: #ffcdd2;
$async: $info;

$icons: -generate-icons((
  error: $error,
  warning: $warning,
  info: $info,
  success: $success,
  async: $async
));

.snotify-icon {
  width: 100%;
  height: 100%;
  position: absolute;
  right: 10px;
  top: 50%;
  line-height: 0;
  transform: translate(0, -50%);
  max-height: 48px;
  max-width: 48px;
}

.snotify-icon--error {
  background-image: url('#{map-get($icons, error)}');
}

.snotify-icon--warning {
  background-image: url('#{map-get($icons, warning)}');
}

.snotify-icon--info {
  background-image: url('#{map-get($icons, info)}');
}

.snotify-icon--success {
  background-image: url('#{map-get($icons, success)}');
}

.snotify-icon--async {
  background-image: url('#{map-get($icons, async)}');
  animation: async 3s infinite linear;
  transform-origin: 50% 50%;
}


@keyframes async {
  0% {
    -webkit-transform: translate(0, -50%) rotate(0deg);
    transform: translate(0, -50%) rotate(0deg);
  }
  100% {
    -webkit-transform: translate(0, -50%) rotate(360deg);
    transform: translate(0, -50%) rotate(360deg);
  }
}