.container { position: relative; pointer-events: none; user-select: none; transform-style: preserve-3d; perspective: 1000px; } .preview { position: relative; display: flex; align-items: center; width: 300px; min-height: 80px; padding: var(--theme-spacing-md); color: var(--theme-colors-foreground); background: var(--theme-colors-background); border: 1px solid var(--theme-colors-border); border-radius: var(--theme-radius-lg); backdrop-filter: blur(12px) saturate(180%); } .content { display: flex; gap: var(--theme-spacing-md); align-items: center; width: 100%; } .image-container { position: relative; flex-shrink: 0; width: 48px; height: 48px; overflow: hidden; border-radius: var(--theme-radius-md); box-shadow: 0 8px 16px rgb(0 0 0 / 25%), 0 0 0 1px rgb(255 255 255 / 5%); transform: translateZ(15px) scale(1.05); transition: transform 0.2s ease-out; } .image { width: 100%; height: 100%; object-fit: cover; } .image-overlay { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(135deg, rgb(255 255 255 / 10%) 0%, rgb(0 0 0 / 10%) 100%); } .icon-container { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 48px; height: 48px; background: linear-gradient( 135deg, var(--theme-colors-surface) 0%, var(--theme-colors-background) 100% ); border: 1px solid var(--theme-colors-border); border-radius: var(--theme-radius-md); box-shadow: 0 8px 16px rgb(0 0 0 / 25%), 0 0 0 1px rgb(255 255 255 / 5%); transform: translateZ(15px) scale(1.05); transition: transform 0.2s ease-out; } .text-container { display: flex; flex: 1; flex-direction: column; gap: var(--theme-spacing-xs); min-width: 0; user-select: none; } .name { overflow: hidden; text-overflow: ellipsis; font-size: var(--theme-font-size-sm); font-weight: 600; line-height: 1.4; color: var(--theme-colors-foreground); white-space: nowrap; } .count { font-size: var(--theme-font-size-sm); font-weight: 500; line-height: 1.2; color: var(--theme-colors-foreground-muted); }