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

[data-fs-product-shelf] {
  // --------------------------------------------------------
  // Design Tokens for Product Shelf
  // --------------------------------------------------------

  --fs-product-shelf-items-gap              : var(--fs-grid-gap-1);
  --fs-product-shelf-items-padding-top      : var(--fs-spacing-0);
  --fs-product-shelf-items-padding-bottom   : var(--fs-spacing-3);

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

  width: 100%;

  [data-fs-product-shelf-items] {
    position: relative;
    display: flex;
    column-gap: var(--fs-product-shelf-items-gap);
    align-items: stretch;
    overflow-x: auto;

    [data-fs-product-shelf-item] { width: 100%; }

    @include utilities.media(">=tablet") {
      padding-top: var(--fs-product-shelf-items-padding-top);
      padding-bottom: var(--fs-product-shelf-items-padding-bottom);
      overflow-x: auto;
    }
  }
}