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: calc(var(--z-index-modal) - 1);
}

.quick-add-modal__modal {
  height: 100vh;
}

@media (min-width: 960px) {
  .quick-add-modal__modal {
    background-color: transparent;
  }

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

  .quick-add-modal__modal-content {
    -webkit-overflow-scrolling: touch;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scroll-snap-type: y mandatory;
    scrollbar-width: thin;
    width: 100vw;
    height: 100vh;
    max-width: 100vw;
    max-height: 100vh;
  }

  .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) {
  .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;
  }
}