/*
Separator

A one-line rule between content, horizontal or vertical. The line is the
element's background, so it is exactly --separator-width thick and takes
no margin: the layout around it owns the spacing.

  .separator[data-orientation="horizontal"]   full width, one rule high
  .separator[data-orientation="vertical"]     full height of its row
  .separator.is-labeled                       rule, text, rule ("or")
*/

@layer components {

.separator {
  flex:       none;
  align-self: stretch;
  margin:     0;
  border:     0;
  background: var(--separator-color, var(--rule));
}

.separator[data-orientation="horizontal"] {
  width:  100%;
  height: var(--separator-width, var(--surface-border-width));
}

.separator[data-orientation="vertical"] {
  width:      var(--separator-width, var(--surface-border-width));
  height:     auto;
  min-height: 1em;
}

/* Labeled: the background moves onto two flexible rules beside the text. */
.separator.is-labeled {
  display:     flex;
  align-items: center;
  gap:         var(--space-3);
  height:      auto;
  background:  none;
  color:       var(--ink-dim);
  font-family: var(--font-ui);
  font-size:   var(--text-caption);
  text-align:  center;
}

/* A label longer than the line wraps between the rules; each rule keeps a
   minimum length so it never collapses beside a long label. */
.separator.is-labeled::before,
.separator.is-labeled::after {
  content:    "";
  flex:       1 1 0;
  min-width:  var(--space-6);
  height:     var(--separator-width, var(--surface-border-width));
  background: var(--separator-color, var(--rule));
}

.separator.is-labeled[data-orientation="vertical"] {
  flex-direction: column;
  width:          auto;
  white-space:    nowrap;
}

.separator.is-labeled[data-orientation="vertical"]::before,
.separator.is-labeled[data-orientation="vertical"]::after {
  width:      var(--separator-width, var(--surface-border-width));
  min-width:  0;
  height:     auto;
}

/* Forced colors (Windows High Contrast) paints every background as the
   page color, so a background rule vanishes. There the rule is a border of
   the same thickness inside the same box (border-box), which forced colors
   paints in the text color; nothing moves. */
@media (forced-colors: active) {
  .separator,
  .separator.is-labeled::before,
  .separator.is-labeled::after {
    box-sizing: border-box;
  }

  .separator[data-orientation="horizontal"]:not(.is-labeled),
  .separator.is-labeled[data-orientation="horizontal"]::before,
  .separator.is-labeled[data-orientation="horizontal"]::after {
    border-block-start: var(--separator-width, var(--surface-border-width)) solid var(--separator-color, var(--rule));
  }

  .separator[data-orientation="vertical"]:not(.is-labeled),
  .separator.is-labeled[data-orientation="vertical"]::before,
  .separator.is-labeled[data-orientation="vertical"]::after {
    border-inline-start: var(--separator-width, var(--surface-border-width)) solid var(--separator-color, var(--rule));
  }
}

}