[PATCH yew-widget-toolkit-assets 1/4] navigation rail: style the expand button

[Dominik Csapak <d.csapak@proxmox.com>]

Style the optional expand button the widget toolkit's NavigationRail
renders at the top of the rail. The action icon defaults to the accent
color, which would compete with the selected item, so draw it in the
rail's own foreground color instead. Following Material, the expanded
variant aligns it at the inline start, lined up with the item icons.
Also remove the background circle color that stems from the ActionIcon.

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 scss/_navigation_rail.scss | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/scss/_navigation_rail.scss b/scss/_navigation_rail.scss
index 588fab7..9bb664a 100644
--- a/scss/_navigation_rail.scss
+++ b/scss/_navigation_rail.scss
@@ -17,6 +17,16 @@
 
     @include elevation-background-color($level: 0);
 
+    .pwt-navigation-rail-expand-button {
+        .pwt-action-icon {
+            // the accent color is reserved for the selected item
+            color: var(--pwt-color-on-surface);
+
+            // hide the background for the action icon
+            @include state-layer($base: transparent, $color: transparent);
+        }
+    }
+
     .pwt-navigation-rail-tabs {
         display: flex;
         flex-direction: column;
@@ -99,6 +109,13 @@
         min-width: 220px;
         max-width: 360px;
 
+        // the expanded rail lines its content up at the inline start, the margin matches the item
+        // padding so the button keeps sitting above the item icons
+        .pwt-navigation-rail-expand-button {
+            align-self: flex-start;
+            margin-inline-start: var(--pwt-spacer-2);
+        }
+
         .pwt-navigation-rail-tabs {
             align-self: stretch;
 
-- 
2.47.3