.alert-viva {
    animation-duration: 1000ms;
    opacity: 0;
    height: 0;
    overflow: hidden;
    &.show {
      animation-name: slideDown;
      animation-fill-mode: forwards;
      opacity: 1;
      height: auto;
      padding-inline: calc(var(--spacing) * 20);
      padding-block: calc(var(--spacing) * 8);
    }
    &.hide {
      animation-name: slideUp;
      animation-fill-mode: forwards;
      opacity: 1;
      height: auto;
      padding-inline: calc(var(--spacing) * 20);
      padding-block: calc(var(--spacing) * 8);
    }
  }

  @keyframes slideDown {
    0% {
      transform: translateY(-100%);
      opacity: 0;
    }
    100% {
      transform: translateY(0);
      opacity: 1;
    }
  }
  @keyframes slideUp {
    0% {
      transform: translateY(0);
      opacity: 1;
    }
    100% {
      transform: translateY(-100%);
      opacity: 0;
    }
  }