docs: Virtual List Aura style variants and properties (#4940)

Author: web-padawan

articles/components/virtual-list/styling.adoc

@@ -0,0 +1,62 @@
+---
+title: Styling
+page-title: How to style the Virtual List | Vaadin components
+description: Styling API reference for the Virtual List component.
+meta-description: Customize the Virtual List component to align with your application’s theme and branding.
+order: 50
+---
+= Virtual List Styling
+
+== Style Variants
+
+Virtual List supports the following style variants:
+
+[cols="2,3,1"]
+|===
+| Variant | Description | Supported by
+
+|`overflow-indicators`
+|Shows visual indicators at the top and bottom when the content is scrolled
+|Aura, Lumo
+
+|`overflow-indicator-top`
+|Shows visual indicator at the top when the content is scrolled
+|Aura, Lumo
+
+|`overflow-indicator-bottom`
+|Shows visual indicator at the bottom when the content is scrolled
+|Aura, Lumo
+
+|===
+
+.Virtual List Padding
+[TIP]
+Do not set `padding` to the virtual list when using these variants, as it prevents the borders from appearing in the correct positions. Use `--vaadin-virtual-list-padding-block` and `--vaadin-virtual-list-padding-inline` properties instead.
+
+include::../_styling-section-theming-props.adoc[tag=style-properties]
+
+[cols="2,1"]
+|===
+| Property | Supported by
+
+|`--vaadin-virtual-list-padding-block`
+|Aura, Lumo
+
+|`--vaadin-virtual-list-padding-inline`
+|Aura, Lumo
+
+|===
+
+
+include::../_styling-section-intros.adoc[tag=selectors]
+
+
+Root element:: `vaadin-virtual-list`
+
+
+=== States
+
+Content overflow at bottom:: `vaadin-virtual-list+++<wbr>+++**[overflow~="bottom"]**`
+Content overflow at top:: `vaadin-virtual-list+++<wbr>+++**[overflow~="top"]**`
+Content overflow start (left):: `vaadin-virtual-list+++<wbr>+++**[overflow~="start"]**`
+Content overflow end (right):: `vaadin-virtual-list+++<wbr>+++**[overflow~="end"]**`