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

/* Each demo is a small app window; the sidebar is as tall as the window. */
.sidebar-demo {
  --sidebar-height: 30rem;
  width:         100%;
  border:        var(--surface-border-width) solid var(--surface-border);
  border-radius: var(--radius-surface);
}

.sidebar-demo-bar {
  display:       flex;
  align-items:   center;
  gap:           var(--space-2);
  height:        var(--control-height-lg);
  padding:       0 var(--space-3);
  border-bottom: var(--surface-border-width) solid var(--rule);
  flex:          none;
}

.sidebar-demo-bar .divider {
  height: var(--space-4);
}

.sidebar-demo-crumb {
  font-size: var(--text-ui);
  color:     var(--ink-dim);
}

.sidebar-demo-main {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-3);
  padding:        var(--space-4);
}

.sidebar-demo-tiles {
  display:               grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:                   var(--space-3);
}

.sidebar-demo-tile {
  aspect-ratio:  16 / 10;
  border-radius: var(--radius-surface);
  background:    var(--bg-muted);
}

.sidebar-demo-block {
  min-height:    8rem;
  border-radius: var(--radius-surface);
  background:    var(--bg-muted);
}

.sidebar-demo-brand {
  display:     flex;
  align-items: center;
  gap:         var(--space-2);
  min-width:   0;
}

.sidebar-demo-mark {
  display:         grid;
  place-items:     center;
  flex:            none;
  width:           var(--control-height-sm);
  height:          var(--control-height-sm);
  border-radius:   var(--radius-item);
  background:      var(--sb-primary);
  color:           var(--sb-primary-ink);
}

.sidebar-demo-mark .icon {
  width:  var(--icon-size);
  height: var(--icon-size);
}

.sidebar-demo-brand-text {
  display:        flex;
  flex-direction: column;
  min-width:      0;
  line-height:    var(--leading-snug);
}

.sidebar-demo-brand-text strong {
  font-size:   var(--text-ui);
  font-weight: var(--weight-strong);
}

.sidebar-demo-brand-text span {
  font-size: var(--text-caption);
  color:     var(--ink-dim);
}

.sidebar-demo-chevron {
  margin-inline-start: auto;
  transition:          rotate var(--duration-fast) var(--ease-out);
}

.collapsible[data-state="open"] > .sidebar-group > .collapsible-trigger .sidebar-demo-chevron,
.collapsible[data-state="open"] .sidebar-menu-button .sidebar-demo-chevron {
  rotate: 90deg;
}

.sidebar-demo-log {
  font-family: var(--font-mono);
  font-size:   var(--text-xs);
  color:       var(--ink-dim);
}

.sidebar-demo-col {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-3);
  width:          100%;
}

.sidebar-demo-controls {
  display:     flex;
  flex-wrap:   wrap;
  align-items: center;
  gap:         var(--space-2);
}

@media (max-width: 40rem) {
  .sidebar-demo-tiles {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Menus demo: an avatar and a team mark like shadcn's NavUser and TeamSwitcher. */
.sidebar-demo-avatar {
  display:       grid;
  place-items:   center;
  flex:          none;
  width:         var(--control-height-sm);
  height:        var(--control-height-sm);
  border-radius: var(--radius-item);
  background:    var(--bg-muted);
  font-size:     var(--text-caption);
  font-weight:   var(--weight-strong);
  color:         var(--ink);
}

.sidebar-demo-team-mark {
  display:       grid;
  place-items:   center;
  flex:          none;
  width:         var(--space-6);
  height:        var(--space-6);
  border-radius: var(--radius-item);
  box-shadow:    0 0 0 var(--surface-border-width) var(--rule);
}

.sidebar-demo-menu {
  min-width: max(var(--anchor-width, 0px), var(--space-56));
}

.sidebar-demo-anchor {
  width: 100%;
}

/* Theming demo: shadcn's sidebar variables, from tokens. */
.sidebar-demo-themed {
  --sidebar:                    var(--accent-soft);
  --sidebar-foreground:         var(--ink);
  --sidebar-primary:            var(--accent-deep);
  --sidebar-primary-foreground: var(--bg);
  --sidebar-accent:             var(--bg);
  --sidebar-accent-foreground:  var(--ink);
  --sidebar-border:             var(--accent);
  --sidebar-ring:               var(--accent);
  --sidebar-width:              var(--space-56);
}

/* shadcn's group-data-[collapsible=icon]:hidden */
.sidebar[data-collapsible="icon"] .sidebar-demo-hide-icon {
  display: none;
}