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

## 默认类名表格
  
<CssTable name="diff" />
  
## 样例
  
<Demo></Demo>
  
## Css 结构


### 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
.diff {
  @apply relative grid w-full overflow-hidden;
  container-type: inline-size;
  grid-template-columns: auto 1fr;
}

.diff-resizer {
  @apply relative top-1/2 z-[1] h-12 w-[25rem] min-w-[1rem] max-w-[calc(100cqi-1rem)] resize-x overflow-hidden opacity-0;
  transform-origin: 100% 100%;
  scale: 4;
  translate: 1.5rem -1.5rem;
  clip-path: inset(calc(100% - 0.75rem) 0 0 calc(100% - 0.75rem));
}

.diff-resizer,
.diff-item-1,
.diff-item-2 {
  @apply relative col-start-1 row-start-1;
}

.diff-item-1:after {
  @apply pointer-events-none absolute bottom-0 right-px top-1/2 z-[1] h-8 w-8 content-[''];
  translate: 50% -50%;
}

.diff-item-2 {
  @apply overflow-hidden;
}

.diff-item-1 > *,
.diff-item-2 > * {
  @apply pointer-events-none absolute bottom-0 left-0 top-0 h-full w-[100cqi] max-w-none object-cover object-center;
}

```

</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
.diff-item-1:after {
  @apply bg-base-100/50 border-base-100 outline-base-content/5 rounded-full border-2 shadow-sm outline outline-offset-[-3px] backdrop-blur;
  translate: 50% -50%;
}

.diff-item-2 {
  @apply border-base-100 border-r-2;
}

```

</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>



