@import "../../helpers";
.sf-grouped-product-item {
  position: relative;
  display: var(--grouped-product-item-display);
  box-sizing: border-box;
  padding: var(--grouped-product-item-padding, var(--spacer-xs));
  @include border(--grouped-product-item-border, 0, solid, var(--c-light));
  @include font(
    --grouped-product-item-font,
    var(--font-weight--normal),
    var(--font-size--xs),
    1.6,
    var(--font-family--primary)
  );
  &__aside {
    position: var(--grouped-product-item-aside-position, relative);
    flex: var(--grouped-product-item-flex);
    display: flex;
  }
  &__image {
    background: var(--grouped-product-item-image-background, var(--c-light));
    img {
      mix-blend-mode: darken;
    }
  }
  &__quantity-selector {
    --quantity-selector-background: var(--c-light);
    display: var(--grouped-product-item-quantity-selector-display, flex);
    position: absolute;
    bottom: var(
      --grouped-product-item-quantity-selector-bottom,
      var(--spacer-sm)
    );
    left: var(--grouped-product-item-quantity-selector-left, 50%);
    right: var(--grouped-product-item-quantity-selector-right);
    transform: var(
      --grouped-product-item-quantity-selector-transfrom,
      translate3d(-50%, 0, 0)
    );
    margin: var(--grouped-product-item-quantity-selector-margin);
    z-index: 1;
  }
  &__description {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: var(--grouped-product-item-description-margin);
  }
  &__info {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    margin: var(--grouped-product-item-info-margin);
  }
  &__title {
    color: var(--grouped-product-item-title-color, var(--c-link));
    padding: var(--grouped-product-item-title-margin, var(--spacer-xs) 0);
    display: inline-block;
    --link-text-decoration: none;
    @include font(
      --grouped-product-item-title-font,
      var(--font-weight--normal),
      var(--font-size--base),
      1.6,
      var(--font-family--secondary)
    );
  }
  &__price {
    margin: var(--grouped-product-item-price-margin);
  }
  @include for-desktop {
    --grouped-product-item-display: flex;
    --grouped-product-item-aside-position: static;
    --grouped-product-item-quantity-selector-bottom: var(--spacer-xs);
    --grouped-product-item-quantity-selector-left: auto;
    --grouped-product-item-quantity-selector-right: var(--spacer-xs);
    --grouped-product-item-quantity-selector-transfrom: translate3d(0, 0, 0);
    --grouped-product-item-border-width: 0 0 1px 0;
    --grouped-product-item-flex: 0 0 5.125rem;
    --grouped-product-item-description-margin: 0 0 0 var(--spacer-sm);
    --grouped-product-item-price-margin: 0 0 0 auto;
    &__quantity-selector {
      --quantity-selector-background: var(--c-light);
    }
  }
}
.sf-grouped-product {
  .glide {
    &__slides {
      margin: 0; // todo: fix this this issues global
    }
  }
  @include for-desktop {
    .glide {
      &__slides {
        display: block;
        width: auto;
        transform: unset;
      }
      &__slide {
        &--clone {
          display: none;
        }
      }
    }
  }
  &.without-carousel {
    .glide {
      &__slides {
        display: block;
        width: auto;
        transform: unset;
      }
      &__slide {
        &--clone {
          display: none;
        }
      }
    }
    --grouped-product-item-display: flex;
    --grouped-product-item-aside-position: static;
    --grouped-product-item-quantity-selector-bottom: var(--spacer-xs);
    --grouped-product-item-quantity-selector-left: auto;
    --grouped-product-item-quantity-selector-right: var(--spacer-xs);
    --grouped-product-item-quantity-selector-transfrom: translate3d(0, 0, 0);
    --grouped-product-item-border-width: 0 0 1px 0;
    --grouped-product-item-flex: 0 0 5.125rem;
    --grouped-product-item-description-margin: 0 0 0 var(--spacer-sm);
    --grouped-product-item-price-margin: 0 0 0 auto;
    .sf-grouped-product-item__quantity-selector {
      --quantity-selector-background: var(--c-light);
    }
  }
  &.without-quantity {
    --grouped-product-item-quantity-selector-display: none;
  }
}