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

.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(phone) {
    max-width: inherit;
    width: 60vw;
  }

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

    strong {
      font-weight: $bold;
    }
  }

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