@layer components {
  [data-ui="separator"] {
    --separator-color: var(--color-surface-variant);

    &[data-orientation="vertical"] {
      --separator-width: 1px;
      --separator-height: 100%;
    }

    &[data-orientation="horizontal"] {
      --separator-width: 100%;
      --separator-height: 1px;
    }

    &[data-variant="line"] {
      width: var(--separator-width);
      height: var(--separator-height);
      background-color: var(--separator-color);
    }

    &[data-variant="solid-text"],
    &[data-variant="underline"] {
      width: 100%;
      font: var(--font-label-md);
      color: var(--color-on-surface-variant);
      text-transform: uppercase;
      border-radius: var(--radius-xs);

      &[data-variant="solid-text"] {
        padding: var(--spacing-6) calc(var(--spacing-16) + var(--spacing-4));
        background-color: var(--color-surface);
      }

      &[data-variant="underline"] {
        padding: var(--spacing-2);
        border-bottom: 2px solid var(--separator-color);
      }
    }

    &[data-variant="content"] {
      width: 100%;
      display: flex;
      gap: var(--spacing-10);
      align-items: center;
      font: var(--font-label-sm);
      color: var(--color-on-surface-variant);
      white-space: nowrap;

      &[data-orientation="vertical"] {
        flex-direction: column;
        align-items: center;
        height: 100%;
      }

      &::before,
      &::after {
        display: block;
        width: var(--separator-width);
        height: var(--separator-height);
        content: "";
        background-color: var(--color-surface-variant);
      }
    }
  }
}
Prop	Type	Default
`variant`	`"line" \| "solid-text" \| "content" \| "underline"`	`"line"`
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`
On this page
