<div class="shadow">
  <VariableItem
    :variable-name="'--ads-shadows-xs'"
    :variable-value="'0 0 0 1px rgba(0, 0, 0, 0.05)'"
  >
    <div
      class="shadow__rectangle"
      :style="{
        boxShadow: 'var(--ads-shadows-xs)',
      }"
    />
  </VariableItem>
  <VariableItem
    :variable-name="'--ads-shadows-sm'"
    :variable-value="'0 1px 2px 0 rgba(0, 0, 0, 0.05)'"
  >
    <div
      class="shadow__rectangle"
      :style="{
        boxShadow: 'var(--ads-shadows-sm)',
      }"
    />
  </VariableItem>
  <VariableItem
    :variable-name="'--ads-shadows-base'"
    :variable-value="'0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)'"
  >
    <div
      class="shadow__rectangle"
      :style="{
        boxShadow: 'var(--ads-shadows-base)',
      }"
    />
  </VariableItem>
  <VariableItem
    :variable-name="'--ads-shadows-md'"
    :variable-value="'0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)'"
  >
    <div
      class="shadow__rectangle"
      :style="{
        boxShadow: 'var(--ads-shadows-md)',
      }"
    />
  </VariableItem>
  <VariableItem
    :variable-name="'--ads-shadows-lg'"
    :variable-value="'0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)'"
  >
    <div
      class="shadow__rectangle"
      :style="{
        boxShadow: 'var(--ads-shadows-lg)',
      }"
    />
  </VariableItem>
  <VariableItem
    :variable-name="'--ads-shadows-xl'"
    :variable-value="'0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)'"
  >
    <div
      class="shadow__rectangle"
      :style="{
        boxShadow: 'var(--ads-shadows-xl)',
      }"
    />
  </VariableItem>
  <VariableItem
    :variable-name="'--ads-shadows-2xl'"
    :variable-value="'0 25px 50px -12px rgba(0, 0, 0, 0.25)'"
  >
    <div
      class="shadow__rectangle"
      :style="{
        boxShadow: 'var(--ads-shadows-2xl)',
      }"
    />
  </VariableItem>
  <VariableItem
    :variable-name="'--ads-shadows-outline'"
    :variable-value="'0 0 0 3px rgba(66, 153, 225, 0.6)'"
  >
    <div
      class="shadow__rectangle"
      :style="{
        boxShadow: 'var(--ads-shadows-outline)',
      }"
    />
  </VariableItem>
  <VariableItem
    :variable-name="'--ads-shadows-inner'"
    :variable-value="'inset 0 2px 4px 0 rgba(0,0,0,0.06)'"
  >
    <div
      class="shadow__rectangle"
      :style="{
        boxShadow: 'var(--ads-shadows-inner)',
      }"
    />
  </VariableItem>
  <VariableItem
    :variable-name="'--ads-shadows-none'"
    :variable-value="'none'"
  >
    <div
      class="shadow__rectangle"
      :style="{
        boxShadow: 'var(--ads-shadows-none)',
      }"
    />
  </VariableItem>
  <VariableItem
    :variable-name="'--ads-shadows-dark-lg'"
    :variable-value="'rgba(0, 0, 0, 0.1) 0px 0px 0px 1px, rgba(0, 0, 0, 0.2) 0px 5px 10px, rgba(0, 0, 0, 0.4) 0px 15px 40px'"
  >
    <div
      class="shadow__rectangle"
      :style="{
        boxShadow: 'var(--ads-shadows-dark-lg)',
      }"
    />
  </VariableItem>
</div>