.pds-modal__backdrop {
  align-items: flex-start;
  /* stylelint-disable-next-line pine-design-system/no-hardcoded-colors */
  background-color: rgba(0, 0, 0, 0.4);
  border: 0;
  display: flex;
  height: 100%;
  inset: 0;
  justify-content: center;
  margin: 0;
  max-height: 100%;
  max-width: 100%;
  opacity: 0;
  padding: 0;
  position: fixed;
  transition: opacity var(--pine-motion-duration-base) var(--pine-motion-easing-in), visibility var(--pine-motion-duration-base) var(--pine-motion-easing-in);
  visibility: hidden;
  width: 100%;
  z-index: var(--pine-z-index-modal);
}
@supports (backdrop-filter: blur(3px)) {
  .pds-modal__backdrop {
    backdrop-filter: blur(3px);
  }
}
pds-modal .pds-modal__backdrop {
  z-index: var(--pine-z-index-priority);
}
.pds-modal__backdrop::backdrop {
  background: transparent;
}
.pds-modal__backdrop.open {
  opacity: 1;
  transition-timing-function: var(--pine-motion-easing-out);
  visibility: visible;
}

.pds-modal {
  background: var(--pine-color-background-overlay);
  border-radius: var(--pine-dimension-sm);
  box-shadow: var(--pine-box-shadow-400);
  display: flex;
  flex-direction: column;
  margin: var(--pine-dimension-md);
  max-height: none;
  width: 100%;
}
.pds-modal.pds-modal--scrollable {
  max-height: calc(100vh - (5vh + 96px));
}
@supports (height: 100dvh) {
  .pds-modal.pds-modal--scrollable {
    max-height: calc(100dvh - (5dvh + 96px));
  }
}
@media (min-width: 992px) {
  .pds-modal {
    margin-block-start: 6vh;
  }
  @supports (height: 100dvh) {
    .pds-modal {
      margin-block-start: 6dvh;
    }
  }
}
@media (min-width: 1200px) {
  .pds-modal {
    margin-block-start: 8vh;
  }
  @supports (height: 100dvh) {
    .pds-modal {
      margin-block-start: 8dvh;
    }
  }
}

.pds-modal--sm {
  max-width: 520px;
}

.pds-modal--md {
  max-width: 700px;
}

.pds-modal--lg {
  max-width: 900px;
}

.pds-modal--fullscreen {
  border-radius: 0;
  height: 100%;
  margin: 0;
  max-height: 100vh;
  max-width: 100%;
}
@supports (height: 100dvh) {
  .pds-modal--fullscreen {
    max-height: 100dvh;
  }
}
.pds-modal--fullscreen.pds-modal--scrollable {
  max-height: 100vh;
}
@supports (height: 100dvh) {
  .pds-modal--fullscreen.pds-modal--scrollable {
    max-height: 100dvh;
  }
}

.pds-modal--fullscreen .pds-modal-content {
  flex: 1;
}

.pds-modal--scrollable pds-modal-content {
  border-block-end: 1px solid transparent;
  border-block-start: 1px solid transparent;
  overflow-y: auto;
}

.pds-modal:not(.pds-modal--scrollable) pds-modal-content {
  overflow-y: visible;
}