.wrapper {
  align-items: center;
  display: flex;
  justify-content: center;
  position: fixed;
  height: 100vh;
  width: 100vw;
  top: 0;
  left: 0;
  z-index: 12;
}

.overlay {
  isolation: isolate;
  position: fixed;
  z-index: 9;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.alert {
  animation: $duration-modal-open cubic-bezier(0.16, 1, 0.3, 1) 0s 1 normal none
    running openModalDesktop;
  background: var(--dialog-bg);
  border-radius: $unit;
  display: flex;
  flex-direction: column;
  gap: $unit-2x;
  min-width: 20vw;
  max-width: 30vw;
  padding: $unit * 4;

  @include breakpoint(tablet) {
    max-width: inherit;
    max-width: 60vw;
  }

  @include breakpoint(phone) {
    max-width: inherit;
    width: 70vw;
  }

  .description {
    font-size: $font-regular;
    line-height: 1.4;
    white-space: pre-line;

    strong {
      font-weight: $bold;
    }
  }

  .buttons {
    display: flex;
    align-self: flex-end;
    gap: $unit;

    @include breakpoint(phone) {
      flex-direction: column-reverse;
      align-self: center;
      width: 100%;

      & > * {
        width: 100%;
      }
    }
  }

  @keyframes openModalDesktop {
    0% {
      opacity: 0;
      transform: scale(0.96);
    }

    100% {
      // opacity: 1;
      transform: scale(1);
    }
  }
}