@use 'variables';

.ch-modal-overlay {
  position: fixed;
  display: flex;
  justify-content: center;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #000000da;

  overflow-y: scroll;
}

.ch-modal {
  background-color: #161823;
  width: 50vw;

  @media (max-width: 1024px) {
    width: 65vw;
  }

  @media (max-width: 768px) {
    width: 90vw;
  }

  margin-top: 10%;
  padding: 32px 40px;
  border-radius: calc(variables.$border-radius * 2);

  .modal-footer {
    display: flex;
    flex-direction: row;
    width: 100%;
    flex-wrap: nowrap;
    padding-top: 16px;
    gap: 16px;

    > * {
      width: 100%;
    }
  }

  .modal-body {
    padding-top: 16px;
  }
}

.ch-centered-modal-overlay {
  align-items: center;
}

.ch-centered-modal {
  margin-top: 0;
}