@import "https://assets.elements.dev/assets/app/shared/ui-catalog/catalog/style.c38e1d7304920e3.css";

.scroll-area-demo-box {
  width:         12rem;
  height:        18rem;
  border:        var(--surface-border-width) solid var(--surface-border);
  border-radius: var(--radius-surface);
  background:    var(--surface-bg);
}

.scroll-area-demo-box.is-short {
  height: 12rem;
}

.scroll-area-demo-wide {
  width:         100%;
  max-width:     24rem;
  border:        var(--surface-border-width) solid var(--surface-border);
  border-radius: var(--radius-surface);
  background:    var(--surface-bg);
}

.scroll-area-demo-grid {
  width:         100%;
  max-width:     24rem;
  height:        14rem;
  border:        var(--surface-border-width) solid var(--surface-border);
  border-radius: var(--radius-surface);
  background:    var(--surface-bg);
}

.scroll-area-demo-list {
  padding: var(--space-4);
}

.scroll-area-demo-list h4 {
  margin:      0 0 var(--space-4);
  font-size:   var(--text-sm);
  font-weight: var(--weight-strong);
}

.scroll-area-demo-tag {
  font-size:     var(--text-sm);
  padding-block: var(--space-2);
  border-bottom: var(--surface-border-width) solid var(--rule-soft);
}

.scroll-area-demo-tag:last-child {
  border-bottom: 0;
}

.scroll-area-demo-art {
  display: flex;
  gap:     var(--space-4);
  padding: var(--space-4);
}

.scroll-area-demo-figure {
  flex:    none;
  margin:  0;
  display: flex;
  flex-direction: column;
  gap:     var(--space-2);
}

.scroll-area-demo-swatch {
  width:         9rem;
  height:        12rem;
  border-radius: var(--radius-control);
  background:    linear-gradient(135deg, var(--accent-soft), var(--bg-muted));
}

.scroll-area-demo-figure figcaption {
  font-size: var(--text-caption);
  color:     var(--ink-dim);
}

.scroll-area-demo-table {
  padding:  var(--space-3);
  display:  grid;
  grid-template-columns: repeat(12, 6rem);
  gap:      var(--space-2);
  font-size: var(--text-sm);
}

.scroll-area-demo-cell {
  padding:       var(--space-2);
  background:    var(--bg-muted);
  border-radius: var(--radius-item);
  text-align:    center;
}

.scroll-area-demo-col {
  display:        flex;
  flex-direction: column;
  align-items:    flex-start;
  gap:            var(--space-2);
}

.scroll-area-demo-label {
  font-family: var(--font-mono);
  font-size:   var(--text-xs);
  color:       var(--ink-dim);
}

.scroll-area-demo-types {
  display:   flex;
  flex-wrap: wrap;
  gap:       var(--space-4);
}

.scroll-area-demo-col {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            var(--space-3);
}

/* Base UI's gradient scroll fade: the mask follows the overflow distances. */
.scroll-area-demo-fade > .scroll-area-viewport {
  mask-image: linear-gradient(
    to bottom,
    transparent 0,
    black min(var(--space-10), var(--scroll-area-overflow-y-start)),
    black calc(100% - min(var(--space-10), var(--scroll-area-overflow-y-end))),
    transparent 100%
  );
}

.scroll-area-demo-probe {
  height: 0;
}