@mantine/core/styles/Modal.css

React components library focused on usability, accessibility and developer experience

.m_9df02822 {
  --modal-size-xs: 320px;
  --modal-size-sm: 380px;
  --modal-size-md: 440px;
  --modal-size-lg: 620px;
  --modal-size-xl: 780px;
  --modal-size: var(--modal-size-md);

  --modal-y-offset: 5dvh;
  --modal-x-offset: 5vw;
}

  .m_9df02822[data-full-screen] {
    --modal-border-radius: 0 !important;
  }

  .m_9df02822[data-full-screen] .m_54c44539 {
      --modal-content-flex: 0 0 100%;
      --modal-content-max-height: auto;
      --modal-content-height: 100dvh;
    }

  .m_9df02822[data-full-screen] .m_1f958f16 {
      --modal-inner-y-offset: 0;
      --modal-inner-x-offset: 0;
    }

  .m_9df02822[data-centered] .m_1f958f16 {
      --modal-inner-align: center;
    }

.m_d0e2b9cd {
  border-start-start-radius: var(--modal-radius, var(--mantine-radius-default));
  border-start-end-radius: var(--modal-radius, var(--mantine-radius-default));
}

.m_54c44539 {
  flex: var(--modal-content-flex, 0 0 var(--modal-size));
  max-width: 100%;
  max-height: var(--modal-content-max-height, calc(100dvh - var(--modal-y-offset) * 2));
  height: var(--modal-content-height, auto);
  overflow-y: auto;
}

.m_54c44539[data-full-screen] {
    border-radius: 0;
  }

.m_54c44539[data-hidden] {
    opacity: 0 !important;
    pointer-events: none;
  }

.m_1f958f16 {
  display: flex;
  justify-content: center;
  align-items: var(--modal-inner-align, flex-start);
  padding-top: var(--modal-inner-y-offset, var(--modal-y-offset));
  padding-bottom: var(--modal-inner-y-offset, var(--modal-y-offset));
  padding-inline: var(--modal-inner-x-offset, var(--modal-x-offset));
}