@use "../../variables";
@use "./SlidableItems";
@use "./Looks";
@use "./LineClamp";
@use "./Cards";
@use "./Buttons";

$base-style-was-included: false;

/// Base style used across all Depict components (product listing page, search, category, recommendations). Can only be included once - subsequent includes will yield no css.
@mixin BaseStyle() {
  .depict {
    @if not $base-style-was-included {
      $base-style-was-included: true !global; // !global is important, or the deduplication won't work
      button {
        border: none; // Disable default button border
      }
      div:empty {
        // Undo default shopify styling which makes our images not load
        display: block;
      }
      a {
        color: variables.get-text-icon-color("base", "default");
        text-decoration: none; // disable default link underline, it looks very ugly and pages don't tend to have this on their own content even though they haven't disabled it globally
      }
      &,
      & * {
        // both the sliders and the size filter stuff and probably more all expect box-sizing to be border-box, so set it for everything
        box-sizing: border-box;
      }
      // Charles argues here that legibility is more important than fancyness in the SDK; so turn off fancy character joining features
      font-feature-settings:
        "clig" off,
        "liga" off;
      color: variables.get-text-icon-color("base", "default");

      @include ShopifyContainedImage();
      @include SlidableItems.SlidableItems();
      @include Looks.Looks();
      @include LineClamp.LineClamp();
      @include Cards.Cards();
      @include Buttons.PrimaryButton();
    }
  }
}

@mixin ShopifyContainedImage() {
  .s-image-container {
    position: relative;
    width: 100%;
  }

  .s-responsive-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    position: absolute;
    inset: 0;
  }
}