theme-quick-add-modal summary[disabled] {
  cursor: not-allowed;
  opacity: 0.3;
}

theme-quick-add-modal summary.loading .icon-quickview {
  color: transparent;
}

.quick-add-modal {
  display: block;
}

.quick-add-modal__details {
  --z-index: var(--z-index-modal);
}

.quick-add-modal__modal {
  width: 100vw;
  height: 100vh;
  height: 100svh;
  max-width: 100vw;
  max-height: 100vh;
  max-height: 100svh;
  margin: 0;
  overflow: hidden;
  background-color: rgb(var(--color-background, 255 255 255));
}

/* Override base modal fit-content sizing so quick-add is always fullscreen on desktop. */
@media (min-width: 960px) {
  [data-theme-modal] > details > summary + .quick-add-modal__modal,
  [data-mount-modal] > summary + .quick-add-modal__modal {
    inset: 0;
    width: 100vw;
    height: 100vh;
    height: 100svh;
    max-width: 100vw;
    max-height: 100vh;
    max-height: 100svh;
    margin: 0;
    border-radius: 0;
    overflow: hidden;
    background-color: rgb(var(--color-background, 255 255 255));
  }

  .quick-add-modal__modal-content:empty {
    display: block;
  }

  .quick-add-modal__modal-content {
    position: relative;
    -webkit-overflow-scrolling: touch;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scroll-snap-type: y mandatory;
    scrollbar-width: thin;
    width: 100%;
    height: 100%;
    max-height: 100%;
    background-color: rgb(var(--color-background, 255 255 255));
  }

  .quick-add-modal__modal-content::before,
  .quick-add-modal__modal-content::after {
    content: '';
    z-index: 5;
    position: absolute;
    inset-block-end: 0;
    inset-inline-start: 0;
    height: 0%;
    width: 50%;
    background-color: rgb(var(--color-background));
    transition: height 1s cubic-bezier(.19, 1, .22, 1);
  }

  .quick-add-modal__modal-content::after {
    inset-inline-start: auto;
    inset-inline-end: 0;
    background-color: rgb(var(--color-image-background));
  }

  details[opening] .quick-add-modal__modal-content::before,
  details[opening] .quick-add-modal__modal-content::after,
  details[opened] .quick-add-modal__modal-content::before,
  details[opened] .quick-add-modal__modal-content::after {
    height: 100%;
  }

  details[opening] .quick-add-modal__modal-content::after,
  details[opened] .quick-add-modal__modal-content::after {
    transition-delay: 0.3s;
  }

  details[open] .quick-add-modal__modal-content.hide-cover::before,
  details[open] .quick-add-modal__modal-content.hide-cover::after {
    height: 0%;
    inset-block-start: 0;
    inset-block-end: auto;
  }

  .quick-add-modal__modal-close {
    position: absolute;
    inset-block-start: 20px;
    inset-inline-end: 20px;
  }

  .quick-add-modal__modal-loading {
    display: none;
  }
}

@media (max-width: 959px) {
  [data-theme-modal] > details > summary + .quick-add-modal__modal,
  [data-mount-modal] > summary + .quick-add-modal__modal {
    overflow: hidden;
  }

  .quick-add-modal__modal-content {
    -webkit-overflow-scrolling: touch;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    height: 100%;
    max-height: 100%;
  }

  .quick-add-modal__modal-header {
    padding-block: 24px 0;
    padding-inline: 20px;
  }

  .quick-add-modal__modal-close {
    position: absolute;
  }

  .quick-add-modal__modal-loading {
    padding: 14px 22px;
    background-color: rgb(var(--color-background));
    transition: opacity 0.3s ease;
  }

  .quick-add-modal__modal-loading.hiding {
    opacity: 0;
  }

  .quick-add-modal__modal-loading .icon {
    animation: animation-circling 0.5s linear infinite 0.3s;
  }

  .quick-add-modal__modal-loading.hidden .icon {
    animation: none;
  }
}