@page "/shadows"

<RadzenText TextStyle="TextStyle.H2" TagName="TagName.H1" class="rz-pt-8">
    Shadows
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-pb-4">
    Shadow styles and utility CSS classes.
</RadzenText>

<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
    This page showcases box-shadow utilities with predefined CSS classes (<code>rz-shadow-0</code> through <code>rz-shadow-10</code>) and corresponding CSS variables (<code>--rz-shadow-*</code>) with theme-specific shadow values.
</RadzenText>

<RadzenText Anchor="shadows#shadow-css-classes" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    Utility CSS classes
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Use these CSS classes to set box-shadow to an element e.g. <code>class="rz-shadow-2"</code>. Each theme has its own shadows assigned. Change the theme to preview them.
</RadzenText>
<RadzenExample Example="ShadowsClasses">
    <ShadowsClasses />
</RadzenExample>

<RadzenText Anchor="shadows#shadow-css-variables" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Custom CSS properties (CSS Variables)
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1">
    These are the root theme shadow CSS variables. 
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    You can use CSS variables in styles e.g. <code>style="box-shadow: var(--rz-shadow-2);"</code>
</RadzenText>
<RadzenExample Example="ShadowsVariables">
    <ShadowsVariables />
</RadzenExample>
