.quick-add {
  position: relative;
}

.quick-add-modal {
  box-sizing: border-box;
  opacity: 0;
  position: absolute;
  visibility: hidden;
  z-index: -1;
  margin: 0 auto;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.quick-add-modal[open] {
  opacity: 1;
  visibility: visible;
  z-index: 1;
}

.quick-add-modal__content[class] {
  height: 100%;
  border: 0;
}

.quick-add-modal__content-info {
  height: 100%;
}

.quick-add-modal__content-info {
  display: flex;
  flex-direction: column;

  variant-radios,
  variant-selects {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    row-gap: var(--space-6);
    position: relative;

    &:has(.product-form__input--dropdown) {
      overflow: auto;
    }

    @media screen and (max-width: 749px) {
      background-color: rgb(255, 253, 247);
      padding: var(--space-4);
    }

    @media screen and (min-width: 750px) {
      padding-block: var(--space-8);
      margin-inline: var(--space-15);
    }
  }

  .product-form__input {
    display: block;
    min-width: 0;
    overflow: hidden;

    input[type="radio"] + label {
      border-radius: 100%;
      vertical-align: top;
    }
  }

  .form__label {
    display: none;
  }

  .button {
    width: 100%;
  }

  .button,
  .product-form__input {
    margin-bottom: 0;
  }

  .product-form__input {
    padding: 0;
    display: flex;
    height: 100%;
    flex-direction: column;
    justify-content: space-around;
  }

  .radio-container {
    margin-bottom: 0;
    background: none;
  }

  .radio-container__inner {
    display: flex;
    gap: var(--space-7);
    margin-top: var(--space-5);
  }

  @media screen and (min-width: 1800px) {
    .radio-container__inner {
      flex-wrap: wrap;
      row-gap: var(--space-2);
    }
  }

  .selected-option-wrapper {
    margin: 0;
    font-size: var(--text-size-xs);

    span {
      font-weight: bold;
    }
  }
}

.quick-add__size-select {
  opacity: 0;
  visibility: hidden;
  position: absolute;
  left: 0;
  bottom: 100%;
  width: 100%;
  border: solid var(--space-pixel) rgb(var(--color-yellow));
  background-color: rgb(var(--color-white));
  transition: all var(--duration-short) ease;
}

.quick-add__size-select.active {
  opacity: 1;
  visibility: visible;
  z-index: 1;
}

.quick-add__size-select button {
  position: relative;
  width: 100%;
  border: none;
  background-color: rgb(var(--color-yellow-50));
  box-shadow: none;
  padding: var(--space-1);
  font-family: var(--font-body-family);
  cursor: pointer;
  color: rgb(var(--color-black));
}

.quick-add__size-select button:hover {
  background-color: rgb(var(--color-white));
  font-weight: var(--font-weight-bold);
}

.quick-add__size-select > product-form + product-form {
  display: block;
  margin-top: var(--space-pixel);
}

.quick-add__size-select button.loading > *:not(.loading-overlay__spinner) {
  opacity: 0;
}

.quick-add__size-select button .loading-overlay__spinner {
  display: inline-flex;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  stroke: rgb(var(--color-black));
}