/* -- Separator component ---------------------------------------- */

@layer components {
  /* One element, three looks:
     - empty: a plain line (1px, --border) - horizontal, or vertical with
       data-orientation="vertical" (inside a flex row)
     - with text inside: the text sits ON the line - two pseudo-element lines
       left and right of it (above and below when vertical)
     Knobs: data-variant (line color), data-size (thickness), data-gap (space
     between text and lines), data-align="start|end" (text position),
     data-orientation-md / -lg="vertical" (switch to a vertical line from
     48 / 64rem). --_line / --_thick / --_gap are private. */
  .separator {
    --_line: var(--border);
    --_thick: 1px;
    --_gap: 0.75rem;
    border: none;
    margin: 0;
    flex-shrink: 0;
    background: var(--_line);

    /* Horizontal (default) */
    height: var(--_thick);
    width: 100%;

    /* Vertical */
    &[data-orientation="vertical"] {
      height: auto;
      width: var(--_thick);
      align-self: stretch;
    }

    /* Decorative - hidden from assistive technology */
    &[aria-hidden="true"],
    &[role="none"] {
      /* No visual change - purely semantic */
    }

    /* -- Text on the line ------------------------------------ */
    &:not(:empty) {
      display: flex;
      align-items: center;
      gap: var(--_gap);
      height: auto;
      background: none;
      font-size: 0.75rem;
      font-weight: 500;
      line-height: 1.25rem;
      letter-spacing: 0.02em;
      color: var(--muted-foreground);
      white-space: nowrap;

      &::before,
      &::after {
        content: "";
        flex: 1 1 0;
        height: var(--_thick);
        background: var(--_line);
      }

      /* text position along the line */
      &[data-align="start"]::before {
        display: none;
      }
      &[data-align="end"]::after {
        display: none;
      }

      /* a bare glyph - an asterism, a dinkus, a fleuron - without the lines.
         VERIFIED: (separator.e2e "data-line=none") no pseudo lines, centred */
      &[data-line="none"] {
        justify-content: center;

        &::before,
        &::after {
          display: none;
        }
      }

      &[data-orientation="vertical"] {
        flex-direction: column;
        width: auto;
        align-self: stretch;

        &::before,
        &::after {
          width: var(--_thick);
          height: auto;
          min-height: 0.5rem;
        }
      }
    }

    /* -- Colors (the line; the text stays muted) -------------- */
    &[data-variant="neutral"] {
      --_line: var(--foreground);
    }
    &[data-variant="primary"] {
      --_line: var(--primary);
    }
    /* the tweakcn --secondary / --accent are pale surfaces, too faint for a
       line: the theme's vivid chart colors instead (like the status dot) */
    &[data-variant="secondary"] {
      --_line: var(--chart-2);
    }
    &[data-variant="accent"] {
      --_line: var(--chart-4);
    }
    &[data-variant="destructive"],
    &[data-variant="error"] {
      --_line: var(--destructive);
    }
    /* success / warning / info: literals - the token set has no such pairs */
    &[data-variant="success"] {
      --_line: #16a34a;
    }
    &[data-variant="warning"] {
      --_line: #f59e0b;
    }
    &[data-variant="info"] {
      --_line: #0ea5e9;
    }

    /* -- Thickness -------------------------------------------- */
    &[data-size="sm"] {
      --_thick: 1px;
    }
    &[data-size="md"] {
      --_thick: 2px;
    }
    &[data-size="lg"] {
      --_thick: 4px;
    }
    &[data-size="xl"] {
      --_thick: 8px;
    }

    /* -- Gap between the text and the lines ------------------- */
    &[data-gap="none"] {
      --_gap: 0;
    }
    &[data-gap="sm"] {
      --_gap: 0.375rem;
    }
    &[data-gap="md"] {
      --_gap: 0.75rem;
    }
    &[data-gap="lg"] {
      --_gap: 1.5rem;
    }
    &[data-gap="xl"] {
      --_gap: 2.5rem;
    }

    /* -- Responsive: a vertical line from a breakpoint up (DaisyUI's
       lg:divider-horizontal). The PARENT must turn into a row at the
       same width - the separator only follows it. */
    @media (min-width: 48rem) {
      &[data-orientation-md="vertical"] {
        height: auto;
        width: var(--_thick);
        align-self: stretch;

        &:not(:empty) {
          flex-direction: column;
          width: auto;

          &::before,
          &::after {
            width: var(--_thick);
            height: auto;
            min-height: 0.5rem;
          }
        }
      }
    }
    @media (min-width: 64rem) {
      &[data-orientation-lg="vertical"] {
        height: auto;
        width: var(--_thick);
        align-self: stretch;

        &:not(:empty) {
          flex-direction: column;
          width: auto;

          &::before,
          &::after {
            width: var(--_thick);
            height: auto;
            min-height: 0.5rem;
          }
        }
      }
    }
  }

  /* -- Labeled separator (the older wrapper form) --------------
     Still supported; text inside .separator itself is the simpler form. */
  .separator-label {
    display: flex;
    align-items: center;
    gap: 0.75rem;

    & .separator {
      flex: 1;
    }

    & span {
      font-size: 0.75rem;
      font-weight: 500;
      color: var(--muted-foreground);
      text-transform: uppercase;
      letter-spacing: 0.05em;
      white-space: nowrap;
      flex-shrink: 0;
    }
  }

  /* -- Accessibility ----------------------------------------- */
  @media (forced-colors: active) {
    /* system colors would erase the line (a background) - keep it */
    .separator {
      forced-color-adjust: none;
      --_line: CanvasText;
      color: CanvasText;
    }
  }

  @media (prefers-contrast: more) {
    .separator:not([data-variant]) {
      --_line: var(--foreground);
    }
    .separator:not([data-size]) {
      --_thick: 2px;
    }
  }
}