@media (min-width: 750px) {
  @media (hover: hover) and (pointer: fine) {
    .card:hover .quick-add-inline__form-wrapper {
      opacity: 1;
      pointer-events: auto;
    }
  }
}

.quick-add-inline__form-wrapper {
  width: 100%;
  display: flex;
  /* background-color: c(white); */
  transition: opacity var(--duration-short) var(--ease-in-quad);
  opacity: 0;
  gap: calc(var(--spacing-unit) * 1 * 0.1rem);
  justify-content: space-between;
  align-items: center;
  position: absolute;
  pointer-events: none;
  left: 0;
  bottom: 0;
  z-index: 2;

  .product-form__input {
    display: flex;
    border: none;
    padding: 0;
    margin: 0;
  }

  .product-form__input--button input[type="radio"] {
    + label {
      padding: calc(var(--spacing-unit) * 1 * 0.1rem);
    }
  }

  .quick-add-inline__variant-picker {
    width: 100%;

    .product-form__input input.disabled,
    .product-form__input input.disabled + label {
      pointer-events: none;
    }
  }

  .product-form__input-options {
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    grid-column: none;
    grid-area: none;
  }

  .quick-add-inline__submit {
    font-size: var(--fontSize-small);
    white-space: nowrap;
    cursor: pointer;
    background-color: transparent;
    border: none;
    padding: 0 calc(var(--spacing-unit) * 0.5 * 0.1rem);
    margin: 0;

    &.loading {
      opacity: 0.5;
    }

    &[disabled] {
      color: oklch(var(--lch-disabled));
      pointer-events: none;
    }
  }
}

.quick-add-inline__colors {
  --swatch-gap: 0.8rem;
  --swatch-input--size: 1.6rem;

  position: relative;
  z-index: 2;
}