@import "../../helpers";
.sf-collected-product {
  position: relative;
  box-sizing: border-box;
  display: flex;
  max-width: var(--collected-product-width);
  padding: var(--collected-product-padding, var(--spacer-xs));
  background: var(--collected-product-background);
  z-index: var(--collected-product-z-index);
  &::after {
    content: "";
  }
  &:hover {
    --collected-product-background: var(--c-white);
  }
  &__remove {
    position: absolute;
    opacity: var(--collected-product-remove-opacity);
    right: var(--collected-product-remove-right, var(--spacer-xs));
    transition: var(--collected-product-remove-transition);
    &:focus {
      --collected-product-remove-opacity: 1;
    }
    &--circle-icon {
      top: var(--collected-product-remove-top);
      display: var(--collected-product-remove-circle-icon-display, none);
      transform: var(--collected-product-remove-circle-icon-transform);
      background: var(--c-primary);
      .sf-icon {
        --icon-color: var(--c-white);
      }
    }
    &--text {
      bottom: var(--collected-product-remove-bottom, var(--spacer-xs));
      display: var(--collected-product-remove-text-display);
    }
  }
  &__more-actions {
    position: absolute;
    top: var(--collected-product-remove-top);
    right: var(--collected-product-remove-right, var(--spacer-xs));
  }
  &__aside {
    order: -1;
    position: relative;
    flex: 0 0 8.75rem;
    line-height: 0;
  }
  &__image {
    background: var(--collected-product-image-background, var(--c-light));
  }
  &__quantity-wrapper {
    position: absolute;
    box-sizing: border-box;
    right: 0;
    bottom: 0;
    z-index: 1;
    padding: var(--spacer-sm);
  }
  &__quantity-selector {
    --quantity-selector-background: var(--c-light);
  }
  &__main {
    flex: 1;
    margin: var(--collected-product-main-margin, 0 0 0 var(--spacer-sm));
    display: flex;
    flex-direction: var(--collected-product-main-flex-direction, column);
  }
  &__details,
  &__actions {
    display: flex;
    flex-direction: column;
  }
  &__title {
    display: inline-block;
    margin: var(--collected-product-title-margin, 0 var(--spacer-base) var(--spacer-sm) 0);
    color: var(--collected-product-title-color, var(--c-link));
    --link-text-decoration: none;
    @include font(
      --collected-product-title-font,
      var(--font-weight--normal),
      var(--font-size--base),
      1.6,
      var(--font-family--secondary)
    );
  }
  @include for-desktop {
    --collected-product-width: 21.875rem;
    --collected-product-padding: var(--spacer-xs);
    --collected-product-remove-top: var(--spacer-xs);
    --collected-product-remove-right: 0;
    --collected-product-remove-circle-icon-transform: translate3d(50%, 0, 0);
    --collected-product-remove-opacity: 0;
    --collected-product-remove-transition: opacity 150ms ease-in-out;
    --collected-product-remove-circle-icon-display: flex;
    --collected-product-remove-text-display: none;
    &::after {
      --collected-product-transition: box-shadow 150ms ease-in-out;
    }
    &__configuration {
      display: var(--collected-product-configuration-display, flex);
      flex-direction: column;
      justify-content: var(
        --collected-product-configuration-justify-content,
        flex-end
      );
      align-items: var(--collected-product-configuration-align-items, flex-start);
      flex: 2;
      margin: var(--collected-product-configuration-margin, 1rem 0 0 0);
    }
    &__actions {
      display: var(--collected-product-actions-display, none);
      justify-content: var(
        --collected-product-actions-justify-content,
        flex-end
      );
      align-items: var(--collected-product-actions-align-items, flex-start);
      flex: 2;
    }
    &:hover {
      --collected-product-actions-display: flex;
      --collected-product-z-index: 1;
      --collected-product-remove-opacity: 1;
      --collected-product-configuration-display: none;
      &::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: -1;
        box-shadow: var(
          --collected-product-box-shadow,
          0px 4px 11px rgba(29, 31, 34, 0.1));
      }
    }
    &__aside {
      flex: 0 0 8.75rem;
    }
    &__image {
      mix-blend-mode: darken;
    }
    &__details {
      flex: 1;
    }
    &--detailed {
      --collected-product-width: 100%;
      --collected-product-remove-opacity: 1;
      --collected-product-remove-circle-icon-display: none;
      --collected-product-remove-bottom: auto;
      --collected-product-remove-right: var(--spacer-xs);
      --collected-product-remove-text-display: inline;
      --collected-product-actions-justify-content: flex-start;
      --collected-product-main-flex-direction: row;
      --collected-product-actions-align-items: flex-start;
      &:hover {
        --collected-product-box-shadow: none;
      }
    }
  }
}