feat(styles/components): item styles

Author: MM25Zamanian

packages/styles/src/components/item.css

@@ -0,0 +1,58 @@
+@layer components {
+  .gecut-list-item {
+    &.interactive {
+      @apply focus-ring-inner state-onSurface;
+    }
+    &.multiline {
+      .gecut-list-item-content {
+        @apply min-h-12;
+      }
+    }
+    &.supporting-text-two-line {
+      .gecut-list-item-leading {
+        @apply items-start;
+      }
+      .gecut-list-item-supporting-text {
+        @apply line-clamp-2;
+      }
+    }
+
+    & &-body {
+      @apply flex gap-4 py-3 px-4;
+    }
+
+    & &-leading {
+      @apply empty:hidden flex items-center shrink-0;
+    }
+    & &-content {
+      @apply flex flex-col min-h-8 grow justify-center;
+    }
+    & &-trailing {
+      @apply empty:hidden flex justify-center items-center shrink-0 gap-4;
+    }
+
+    & &-headline {
+      @apply text-onSurface text-bodyLarge text-start line-clamp-1;
+    }
+    & &-supporting-text {
+      @apply text-onSurfaceVariant text-bodyMedium line-clamp-1 text-start;
+    }
+
+    & &-trailing-supporting-text {
+      @apply text-onSurfaceVariant text-labelSmall;
+    }
+
+    & &-slot-avatar-character {
+      @apply bg-tertiaryContainer text-onTertiaryContainer uppercase size-10 flex items-center justify-center text-bodyLarge rounded-full;
+    }
+    & &-slot-thumbnail {
+      img {
+        @apply w-full h-full object-cover;
+      }
+
+      @apply size-14 rounded elevation-1;
+    }
+
+    @apply relative flex flex-col shrink-0 select-none list-none w-full bg-transparent text-onSurface overflow-hidden rounded-lg disabled:cursor-default disabled:pointer-events-none;
+  }
+}