
import CssTable from '../../components/CssTable'
import Demo from '../../components/demo/chat/index.mdx'

## Default Class Table
  
<CssTable name="chat" />
  
## Demo
  
<Demo></Demo>
  
## Css Schema


### Base

<div className="collapse">
<input type="checkbox" /> 
<div class="collapse-title px-0">
<span class="btn">Click to Show Base Schema</span>
</div>
<div class="collapse-content"> 

```css
.chat {
  @apply grid grid-cols-2 gap-x-3 py-1;
}
.chat-image {
  @apply row-span-2 self-end;
}
.chat-header {
  @apply row-start-1 text-sm;
}
.chat-footer {
  @apply row-start-3 text-sm;
}
.chat-bubble {
  @apply relative block w-fit px-4 py-2;
  max-width: 90%;
}
.chat-bubble:before {
  @apply absolute bottom-0 h-3 w-3;
  background-color: inherit;
  content: "";
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
}
.chat-start {
  @apply place-items-start;
  grid-template-columns: auto 1fr;
}
.chat-start .chat-header {
  @apply col-start-2;
}
.chat-start .chat-footer {
  @apply col-start-2;
}
.chat-start .chat-image {
  @apply col-start-1;
}
.chat-start .chat-bubble {
  @apply col-start-2;
}
.chat-start .chat-bubble:before {
  mask-image: url("data:image/svg+xml,%3csvg width='3' height='3' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m 0 3 L 3 3 L 3 0 C 3 1 1 3 0 3'/%3e%3c/svg%3e");
}
[dir="rtl"] .chat-start .chat-bubble:before {
  mask-image: url("data:image/svg+xml,%3csvg width='3' height='3' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m 0 3 L 1 3 L 3 3 C 2 3 0 1 0 0'/%3e%3c/svg%3e");
}
.chat-end {
  @apply place-items-end;
  grid-template-columns: 1fr auto;
}
.chat-end .chat-header {
  @apply col-start-1;
}
.chat-end .chat-footer {
  @apply col-start-1;
}
.chat-end .chat-image {
  @apply col-start-2;
}
.chat-end .chat-bubble {
  @apply col-start-1;
}
.chat-end .chat-bubble:before {
  mask-image: url("data:image/svg+xml,%3csvg width='3' height='3' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m 0 3 L 1 3 L 3 3 C 2 3 0 1 0 0'/%3e%3c/svg%3e");
}
[dir="rtl"] .chat-end .chat-bubble:before {
  mask-image: url("data:image/svg+xml,%3csvg width='3' height='3' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m 0 3 L 3 3 L 3 0 C 3 1 1 3 0 3'/%3e%3c/svg%3e");
}

```

</div>
</div>



### Styled

<div className="collapse">
<input type="checkbox" /> 
<div class="collapse-title px-0">
<span class="btn">Click to Show Styled Schema</span>
</div>
<div class="collapse-content"> 

```css
.chat-bubble {
  @apply bg-neutral text-neutral-content rounded-box;
  min-height: 2.75rem;
  min-width: 2.75rem;
}
.chat-bubble-primary {
  @apply bg-primary text-primary-content;
}
.chat-bubble-success {
  @apply bg-success text-success-content;
}
.chat-bubble-warning {
  @apply bg-warning text-warning-content;
}
.chat-bubble-error {
  @apply bg-error text-error-content;
}
.chat-bubble-neutral {
  @apply bg-neutral text-neutral-content;
}
.chat-start .chat-bubble {
  @apply rounded-bl-none;
}
.chat-start .chat-bubble:before {
  left: -0.749rem;
}
.chat-end .chat-bubble {
  @apply rounded-br-none;
}
.chat-end .chat-bubble:before {
  left: 99.9%;
}

```

</div>
</div>



### Utils

<div className="collapse">
<input type="checkbox" /> 
<div class="collapse-title px-0">
<span class="btn">Click to Show Utils Schema</span>
</div>
<div class="collapse-content"> 

```css

```

</div>
</div>



