Figure 1. Animation demonstrating state layer implementation.
Shadows are used to show elevation, and their numbers should correspond roughly to their z-index. But this is just a guideline. General rules tell us shadows get larger and softer the higher up an element is raised. That means .shadow-xs basically looks like an outline, while .shadow-xl looks like a very dramatic drop shadow.
You can't use color variables with box shadows because you have to use rgba in order to control their opacity, and color variables are defined as hex codes.
.shadow-sm {
align-items: flex-start;
box-shadow: 0 0 1px 0 var(--light__shadow_lkv);
flex: 0 auto;
grid-column-gap: 10px;
grid-row-gap: 10px;
justify-content: flex-start;
position: relative;
z-index: 1;
}
.shadow-md {
align-items: flex-start;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.11),
0 0 1px #727272;
flex: 0 auto;
grid-column-gap: 10px;
grid-row-gap: 10px;
justify-content: flex-start;
position: relative;
z-index: 2;
}
.shadow-lg {
align-items: flex-start;
box-shadow: 0 11px 15px -3px rgba(0, 0, 0, 0.11),
0 2px 6px rgba(0, 0, 0, 0.07), 0 0 1px #727272;
flex: 0 auto;
grid-column-gap: 10px;
grid-row-gap: 10px;
justify-content: flex-start;
position: relative;
z-index: 3;
}
.shadow-xl {
align-items: flex-start;
box-shadow: 0 20px 25px rgba(0, 0, 0, 0.09), 0 5px 11px rgba(0, 0, 0, 0.12),
0 0 1px #727272;
flex: 0 auto;
grid-column-gap: 10px;
grid-row-gap: 10px;
justify-content: flex-start;
position: relative;
z-index: 4;
}
.shadow-2xl {
align-items: flex-start;
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.23), 0 9px 18px rgba(0, 0, 0, 0.1),
0 0 1px #727272;
flex: 0 auto;
grid-column-gap: 10px;
grid-row-gap: 10px;
justify-content: flex-start;
position: relative;
z-index: 5;
}