import { Meta } from '@storybook/addon-docs'

<h1 id="typography">Drop Shadows</h1>

Set of drop shadows for use in the design system.

<Meta title="Design System/Drop Shadows" />

### **Example Usage**

Apply shadow class like any other Tailwind shadow using `shadow-{name}` pattern, for example:

```html
<span class="shadow-neutral-drop-shadow">Text</span>
```

### **Object Drop Shadows**

<div class="flex gap-16 py-12">
  <div class="shadow-1xl px-9 py-6 rounded-xl inline-flex heading-h5 sb-unstyled">
    1xl
  </div>
  <div class="shadow-2xl px-9 py-6 rounded-xl inline-flex heading-h5 sb-unstyled">
    2xl
  </div>
  <div class="shadow-3xl px-9 py-6 rounded-xl inline-flex heading-h5 sb-unstyled">
    3xl
  </div>
</div>

<div class="flex gap-16 py-12">
  <div class="shadow-neutral-drop-shadow px-9 py-6 rounded-xl inline-flex heading-h5 sb-unstyled">
    neutral-drop-shadow
  </div>
  <div class="shadow-neutral-drop-shadow-1xl px-9 py-6 rounded-xl inline-flex heading-h5 sb-unstyled">
    neutral-drop-shadow-1xl
  </div>
  <div class="shadow-neutral-drop-shadow-2xl px-9 py-6 rounded-xl inline-flex heading-h5 sb-unstyled">
    neutral-drop-shadow-2xl
  </div>
  <div class="shadow-neutral-drop-shadow-3xl px-9 py-6 rounded-xl inline-flex heading-h5 sb-unstyled">
    neutral-drop-shadow-3xl
  </div>
</div>

<div class="flex gap-16 py-12">
  <div class="shadow-pink-drop-shadow px-9 py-6 rounded-xl inline-flex heading-h5 sb-unstyled">
    pink-drop-shadow
  </div>
  <div class="shadow-pink-drop-shadow-1xl px-9 py-6 rounded-xl inline-flex heading-h5 sb-unstyled">
    pink-drop-shadow-1xl
  </div>
  <div class="shadow-pink-drop-shadow-2xl px-9 py-6 rounded-xl inline-flex heading-h5 sb-unstyled">
    pink-drop-shadow-2xl
  </div>
  <div class="shadow-pink-drop-shadow-3xl px-9 py-6 rounded-xl inline-flex heading-h5 sb-unstyled">
    pink-drop-shadow-3xl
  </div>
</div>

### **Object Inner Shadows**

<div class="flex gap-16 py-12">
  <div class="shadow-neutral-inner-shadow px-9 py-6 rounded-xl inline-flex heading-h5 sb-unstyled">
    neutral-inner-shadow
  </div>
  <div class="shadow-neutral-inner-shadow-1xl px-9 py-6 rounded-xl inline-flex heading-h5 sb-unstyled">
    neutral-inner-shadow-1xl
  </div>
  <div class="shadow-neutral-inner-shadow-2xl px-9 py-6 rounded-xl inline-flex heading-h5 sb-unstyled">
    neutral-inner-shadow-2xl
  </div>
  <div class="shadow-neutral-inner-shadow-3xl px-9 py-6 rounded-xl inline-flex heading-h5 sb-unstyled">
    neutral-inner-shadow-3xl
  </div>
</div>

### **Object Above Shadows**

<div class="flex gap-16 py-12">
  <div class="shadow-neutral-above-shadow px-9 py-6 rounded-xl inline-flex heading-h5 sb-unstyled">
    neutral-above-shadow
  </div>
  <div class="shadow-neutral-above-shadow-1xl px-9 py-6 rounded-xl inline-flex heading-h5 sb-unstyled">
    neutral-above-shadow-1xl
  </div>
  <div class="shadow-neutral-above-shadow-2xl px-9 py-6 rounded-xl inline-flex heading-h5 sb-unstyled">
    neutral-above-shadow-2xl
  </div>
  <div class="shadow-neutral-above-shadow-3xl px-9 py-6 rounded-xl inline-flex heading-h5 sb-unstyled">
    neutral-above-shadow-3xl
  </div>
</div>

<div class="flex gap-16 py-12">
  <div class="shadow-pink-above-shadow px-9 py-6 rounded-xl inline-flex heading-h5 sb-unstyled">
    pink-above-shadow
  </div>
  <div class="shadow-pink-above-shadow-1xl px-9 py-6 rounded-xl inline-flex heading-h5 sb-unstyled">
    pink-above-shadow-1xl
  </div>
  <div class="shadow-pink-above-shadow-2xl px-9 py-6 rounded-xl inline-flex heading-h5 sb-unstyled">
    pink-above-shadow-2xl
  </div>
  <div class="shadow-pink-above-shadow-3xl px-9 py-6 rounded-xl inline-flex heading-h5 sb-unstyled">
    pink-above-shadow-3xl
  </div>
</div>