@use '../abstract/_all';
@use '../abstract/breakpoints';
@use '../abstract/setup';

.modalx-transparent.modalx-backdrop {
  pointer-events: none;
  background: transparent;

  .modalx {
    pointer-events: none;
  }

  .modalx-content {
    border: 1px solid setup.$c-middle-grey;
  }
}

.modalx-xxs {
  max-width: 320px;

  @media (min-width: breakpoints.$break-sm) {
    max-width: 445px;
  }
}

.modalx-xs {
  max-width: 295px;
}

.modalx-sm {
  max-width: 445px;
}

.modalx-md {
  max-width: 595px;
}

.modalx-lg {
  max-width: 899px;
}

.modalx-xl {
  max-width: 950px;
}

.modalx-0 {
  padding: 0;
  .modalx-body {
    overflow: hidden;
  }
}

.modalx-16 {
  .modalx-body {
    padding: 48px 16px 16px;

    @media (min-width: breakpoints.$break-sm) {
      padding-top: 64px;
    }
  }
}

.modalx-16-16 {
  .modalx-body {
    padding: 16px;
  }
}

.modalx-24 {
  .modalx-body {
    padding: 48px 16px 16px;

    @media (min-width: breakpoints.$break-sm) {
      padding: 64px 24px 24px;
    }
  }
}

.modalx-32 {
  .modalx-body {
    padding: 48px 16px 16px;

    @media (min-width: breakpoints.$break-sm) {
      padding: 64px 32px 32px;
    }
  }
}

.modalx-40 {
  .modalx-body {
    padding: 40px 16px 16px;

    @media (min-width: breakpoints.$break-sm) {
      padding: 40px;
    }
  }
}

.modalx-0-24 {
  .modalx-body {
    padding: 0;

    @media (min-width: breakpoints.$break-sm) {
      padding: 64px 24px 24px;
    }
  }
}

.modalx-fullmobile {
  @media (max-width: #{breakpoints.$break-sm - 1}) {
    margin: 0 !important;
    max-width: initial;
    width: 100%;
    app-shared-ui-modal {
      min-height: auto;
      margin: 0;
    }
    .modalx-body {
      margin: 0;
      max-width: 100vw;
      min-height: 100vh;
    }
  }
}

.modalx-fullviewport {
  @media (max-width: #{breakpoints.$break-sm - 1}) {
    margin: 0;
    max-width: initial;
  }
}

.modalx-centered {
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  min-height: calc(100% - (0.5rem * 2));

  @media (min-width: breakpoints.$break-sm) {
    min-height: calc(100% - (1.75rem * 2));
  }
}