From c087c93930a717af9e5959e56c151a6e565b5ef9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rodrigo=20Gir=C3=A3o=20Serr=C3=A3o?=
 <5621605+rodrigogiraoserrao@users.noreply.github.com>
Date: Tue, 20 Dec 2022 11:16:55 +0000
Subject: [PATCH] Complete references for layer(s).

[skip ci]
---
 docs/styles/layer.md  |  6 +++---
 docs/styles/layers.md | 12 ++++++++----
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/docs/styles/layer.md b/docs/styles/layer.md
index 383e745b2..5c68a5327 100644
--- a/docs/styles/layer.md
+++ b/docs/styles/layer.md
@@ -1,8 +1,8 @@
 # Layer
 
 The `layer` property is used to assign widgets to a layer.
-The value of the `layer` property must be the name of a layer defined using a `layers` declaration.
 Layers control the order in which widgets are painted on screen.
+The value of the `layer` property must be the name of a layer defined using a `layers` declaration.
 More information on layers can be found in the [guide](../guide/layout.md#layers).
 
 ## Syntax
@@ -31,7 +31,7 @@ However, since `#box1` is on the higher layer, it is drawn on top of `#box2`.
 
 === "layers.css"
 
-    ```sass hl_lines="3 15 19"
+    ```sass hl_lines="3 14 19"
     --8<-- "docs/examples/guide/layout/layers.css"
     ```
 
@@ -46,5 +46,5 @@ layer: below;
 
 ```python
 # Draw the widget on the layer called 'below'
-widget.layer = "below"
+widget.styles.layer = "below"
 ```
diff --git a/docs/styles/layers.md b/docs/styles/layers.md
index 9eed3156d..443431120 100644
--- a/docs/styles/layers.md
+++ b/docs/styles/layers.md
@@ -1,16 +1,20 @@
 # Layers
 
 The `layers` property allows you to define an ordered set of layers.
-These `layers` can later be referenced using the `layer` property.
 Layers control the order in which widgets are painted on screen.
+These `layers` can later be referenced using the `layer` property.
 More information on layers can be found in the [guide](../guide/layout.md#layers).
 
 ## Syntax
 
 ```
-layers: <STRING> ...;
+layers: <STRING> . . .;
 ```
 
+Layers that come first in the list are drawn before the layers that come after.
+This means the first layer will be under all other layers and the last layer will be above all other layers.
+See the example below.
+
 ## Example
 
 In the example below, `#box1` is yielded before `#box2`.
@@ -31,7 +35,7 @@ However, since `#box1` is on the higher layer, it is drawn on top of `#box2`.
 
 === "layers.css"
 
-    ```sass hl_lines="3 15 19"
+    ```sass hl_lines="3 14 19"
     --8<-- "docs/examples/guide/layout/layers.css"
     ```
 
@@ -46,5 +50,5 @@ layers: below above;
 
 ```python
 # Bottom layer is called 'below', layer above it is called 'above'
-widget.layers = ("below", "above")
+widget.style.layers = ("below", "above")
 ```