@import 'tailwindcss/components';
@import './commerce/drawer.css';

@layer components {
  .product-card-image {
    /* Using tailwind requires us to support the `--tw-gradient-stops` css variable, so I've hardcoded it for now */
    /* @apply bg-gradient-to-r; */

    background-image: linear-gradient(
      135deg,
      hsl(0deg 0% 91%) 0%,
      hsl(344deg 0% 91%) 11%,
      hsl(344deg 0% 92%) 22%,
      hsl(344deg 0% 93%) 33%,
      hsl(344deg 0% 94%) 44%,
      hsl(344deg 0% 94%) 56%,
      hsl(344deg 0% 95%) 67%,
      hsl(344deg 0% 96%) 78%,
      hsl(344deg 0% 97%) 89%,
      hsl(0deg 0% 98%) 100%
    );
  }
}