@use "../../../styles/base/utilities";

[data-fs-product-grid] {
  // --------------------------------------------------------
  // Design Tokens for ProductGrid
  // --------------------------------------------------------

  // Default properties
  --fs-product-grid-gap-mobile        : var(--fs-grid-gap-0);
  --fs-product-grid-gap-tablet        : var(--fs-product-grid-gap-mobile);
  --fs-product-grid-gap-desktop       : var(--fs-grid-gap-2);

  --fs-product-grid-columns-mobile    : 2;
  --fs-product-grid-columns-tablet    : 4;
  --fs-product-grid-columns-desktop   : var(--fs-product-grid-columns-tablet);

  // --------------------------------------------------------
  // Structural Styles
  // --------------------------------------------------------

  display: grid;
  grid-template-columns: repeat(var(--fs-product-grid-columns-mobile), 1fr);
  grid-gap: var(--fs-product-grid-gap-mobile);

  @include utilities.media(">=tablet") {
    grid-template-columns: repeat(var(--fs-product-grid-columns-desktop), 1fr);
    grid-gap: var(--fs-product-grid-gap-tablet);
    padding-bottom: var(--fs-product-grid-gap-tablet);
  }

  @include utilities.media("<notebook") {
    padding-bottom: var(--fs-product-grid-gap-mobile);
  }

  @include utilities.media(">=notebook") {
    grid-gap: var(--fs-product-grid-gap-desktop);
    padding-bottom: var(--fs-product-grid-gap-desktop);
  }
}