@keyframes animateTop {
  from {
    bottom: 0;
  }

  to {
    bottom: 40px;
  }
}

@keyframes animateBottom {
  from {
    bottom: 40px;
  }

  to {
    bottom: -150px;
  }
}

.animateTop {
  animation: animateTop .5s forwards;
}

.animateBottom {
  animation: animateBottom .5s forwards;
}

.snack-bar-notification {
  background: $white;

  &-popup {
    padding: 8px 40px;
    position: relative;
    line-height: 1.57143;
    font-weight: 500;

    .notification__close {
      position: absolute;
      right: 8px;
      top: 8px;
      color: #8b8b8b;
      cursor: pointer;

      svg {
        width: 11px;
        height: 18px;
      }
    }
  }

  &__icon {
    position: absolute;
    left: 8px;
    top: 7px;
    font-size: 1rem;
  }

  &-success {
    background: $notification-success-bg;
    color: $green;

    .notification__icon {
      svg {
        color: $green;
        font-weight: 900;
      }
    }
  }

  &-error {
    background: $notification-failure-bg;
    color: $red;

    .notification__icon {
      svg {
        color: $red;
        font-weight: 900;
      }
    }
  }

  &-warning {
    background: $notification-warn-bg;

    .notification__icon {
      svg {
        color: $orange;
        font-weight: 900;
      }
    }
  }

  &-modal {
    display: none;
    min-height: 100%;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
    background: $black-transparent35;
  }

  &-wrapper {
    width: 100%;
    padding: 0 25px;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 0);

    &-inner {
      background: $white;
      padding: 5px;

      .popup {
        border: 0;
      }
    }
  }

  &_visible {
    width: 100%;
    padding-bottom: 20px;
  }

  &_hidden {
    display: none;
  }

  .autoclose {
    display: none;
  }
}

@include media-breakpoint-up(sm) {
  .snack-bar-notification {
    &-wrapper {
      width: 500px;
    }
  }
}