@import "../../theme.scss";

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc($default-padding + 12px);
  z-index: 2;

  #modal-content {
    position: relative;
    max-width: 560px;

    .close-button {
      position: absolute;
      top: 10px;
      right: 10px;
      cursor: pointer;

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

    h3 {
      margin-top: 0;
    }

    .modal-actionsWrapper {
      display: flex;
      flex-direction: row-reverse;
      align-items: center;
      gap: 0.75rem;
    }
  }
}