import { Meta, Story } from "@storybook/addon-docs";

<Meta
  title="Foundation/Helpers/HoverFocusAndOtherStates"
  parameters={{
    viewMode: "docs",
    previewTabs: {
      canvas: { hidden: true },
    },
  }}
/>

# Hover

Add the `hover:` prefix to apply a utility on hover.

The `hover:` variant is enabled for the following properties.

- Color
- Background Color
- Border Color
- Box Shadows

### Color

<table className="story-demo-table w-96">
  <thead>
    <tr>
      <td className="w-28"></td>
      <td>Hover color utility class</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <div className="flex items-center justify-center">
          <b className="hover:neeto-ui-text-success-500">Aa</b>
        </div>
      </td>
      <td>
        <code>hover:neeto-ui-text-success-500</code>
      </td>
    </tr>
  </tbody>
</table>

### Background Color

<table className="story-demo-table w-96">
  <thead>
    <tr>
      <td className="w-28"></td>
      <td>Hover background color utility class</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td className="text-center">
        <div className="flex items-center justify-center w-full">
          <div class="flex w-12 h-12 cursor-pointer neeto-ui-bg-gray-100 hover:neeto-ui-bg-success-500"></div>
        </div>
      </td>
      <td>
        <code>hover:neeto-ui-bg-success-500</code>
      </td>
    </tr>
  </tbody>
</table>

### Border Color

<table className="story-demo-table w-96">
  <thead>
    <tr>
      <td className="w-28"></td>
      <td>Hover border color utility class</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td className="text-center">
        <div className="flex items-center justify-center w-full">
          <div class="flex w-12 h-12 border cursor-pointer neeto-ui-border-gray-200 hover:neeto-ui-border-gray-500"></div>
        </div>
      </td>
      <td>
        <code>hover:neeto-ui-border-gray-500</code>
      </td>
    </tr>
  </tbody>
</table>

### Box Shadow

<table className="story-demo-table w-96">
  <thead>
    <tr>
      <td className="w-28"></td>
      <td>Hover box shadow utility class</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td className="text-center">
        <div className="flex items-center justify-center w-full">
          <div class="flex w-12 h-12 cursor-pointer neeto-ui-shadow-xs hover:neeto-ui-shadow-m"></div>
        </div>
      </td>
      <td>
        <code>hover:neeto-ui-shadow-m</code>
      </td>
    </tr>
  </tbody>
</table>

# Focus

Add the `focus:` prefix to apply a utility on focus.

The `focus:` variant is enabled for the following properties.

- Color
- Background Color
- Border Color
- Box Shadows

# Focus-visible

Add the `focus-visible:` prefix to apply a utility on focus-visible.

The `focus-visible:` variant is enabled for the following properties.

- Color
- Background Color
- Border Color
- Box Shadows
