:host {
  --_color: var(--separator-color-subtle);
  --_size: var(--separator-size-thin);
  --_inset: 0px;

  display: block;
  box-sizing: border-box;
  inline-size: 100%;
  block-size: auto;
  /*
   * Figma pads the rule 2px above and below (775:36509), so the box is 4px
   * tall at every thickness. Inset adds to it on the cross axis.
   */
  padding-block: calc(var(--separator-padding-block) + var(--_inset));
  color: var(--separator-label-color);
}

/* A labelled separator is as tall as its label; the lines centre on it. */
:host(.has-label) {
  padding-block: var(--_inset);
}

/* -- Variant (color) ----------------------------------------------------- */

:host([variant='subtle']) {
  --_color: var(--separator-color-subtle);
}

:host([variant='mild']) {
  --_color: var(--separator-color-mild);
}

:host([variant='strong']) {
  --_color: var(--separator-color-strong);
}

/* -- Size (thickness) ---------------------------------------------------- */

:host([size='extra-thin']) {
  --_size: var(--separator-size-extra-thin);
}

:host([size='thin']) {
  --_size: var(--separator-size-thin);
}

:host([size='medium']) {
  --_size: var(--separator-size-medium);
}

:host([size='thick']) {
  --_size: var(--separator-size-thick);
}

/* -- Inset --------------------------------------------------------------- */

:host([inset]) {
  --_inset: var(--separator-inset-spacing);
}

/* -- Orientation: vertical ---------------------------------------------- */

:host([orientation='vertical']) {
  display: inline-block;
  inline-size: auto;
  block-size: 100%;
  /* Inset on a vertical separator runs on the inline (cross) axis. */
  padding-block: 0;
  padding-inline: var(--_inset);
}

/* -- Plain rule (no label) ---------------------------------------------- */

.line {
  display: block;
  background-color: var(--_color);
  border: 0;
}

/*
 * The horizontal rule is a zero-height line with the stroke centred on it, as
 * Figma draws it (775:36509): a box-shadow spread of half the thickness on each
 * side. A box's own height snaps to whole CSS pixels in Chrome, even at 2x — a
 * 0.5px background paints as 1px and a 1.5px one as 2px — while a shadow paints
 * at device resolution, so Extra Thin and Medium keep their weight. The host
 * clips the spread at the rule's two ends.
 */
:host(:not([orientation='vertical'])) {
  overflow-x: clip;
}

:host(:not([orientation='vertical'])) .line {
  inline-size: 100%;
  block-size: 0;
  background-color: transparent;
  box-shadow: 0 0 0 calc(var(--_size) / 2) var(--_color);
}

:host([orientation='vertical']) .line {
  inline-size: var(--_size);
  block-size: 100%;
  min-block-size: 1em;
}

/* -- Labeled separator -------------------------------------------------- */

.layout {
  display: flex;
  align-items: center;
  gap: var(--separator-label-gap);
  inline-size: 100%;
}

:host([orientation='vertical']) .layout {
  flex-direction: column;
  block-size: 100%;
  inline-size: auto;
}

.label {
  display: inline-flex;
  align-items: center;
  gap: var(--separator-label-gap);
  flex: 0 0 auto;
  padding-inline: var(--separator-label-padding-inline);
  font-family: var(--font-family-primary);
  font-size: var(--separator-label-font-size);
  font-weight: var(--separator-label-font-weight);
  line-height: var(--separator-label-line-height);
  color: var(--separator-label-color);
  white-space: nowrap;
}

:host([orientation='vertical']) .label {
  padding-inline: 0;
  padding-block: var(--separator-label-padding-inline);
  writing-mode: vertical-rl;
  white-space: nowrap;
}

.layout .line {
  flex: 1 1 auto;
}

:host(:not([orientation='vertical'])) .layout .line {
  inline-size: auto;
}

:host([orientation='vertical']) .layout .line {
  inline-size: var(--_size);
  block-size: auto;
}

/* -- Slotted label content fall-through --------------------------------- */

::slotted(*) {
  color: var(--separator-label-color);
  font: inherit;
}