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

.separator-demo-block {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-3);
  width:          100%;
  max-width:      24rem;
}

.separator-demo-block h4 {
  margin:    0;
  font-size: var(--text-ui);
}

.separator-demo-block p {
  margin:    0;
  color:     var(--ink-soft);
  font-size: var(--text-ui);
}

.separator-demo-links {
  display:     flex;
  align-items: center;
  gap:         var(--space-3);
  height:      var(--space-5);
  font-size:   var(--text-ui);
}

.separator-demo-menu {
  display:     flex;
  align-items: stretch;
  gap:         var(--space-4);
  font-size:   var(--text-ui);
}

.separator-demo-menu > div {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-0-5);
}

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

.separator-demo-list {
  display:        flex;
  flex-direction: column;
  width:          100%;
  max-width:      20rem;
  font-size:      var(--text-ui);
}

.separator-demo-list > div:not(.separator) {
  display:         flex;
  justify-content: space-between;
  padding:         var(--space-2) 0;
}

.separator-demo-list span:last-child {
  color: var(--ink-dim);
}

.separator-demo-heavy {
  --separator-width: var(--space-1);
  --separator-color: var(--accent);

  width:     100%;
  max-width: 20rem;
}

.separator-demo-links.is-tall {
  height: var(--space-20);
}

@media (width < 48rem) {
  .separator-demo-menu > .separator-demo-md {
    display: none;
  }
}