/*
 * A 1px edge is the component's own intrinsic measure, not a rung — the SPACE
 * around it is what comes off the scale.
 *
 * The rung sets a property the orientation rules read, because one rung feeds two
 * different axes.
 */
@layer theme, base, lotics, components, utilities;
@layer lotics.tokens, lotics.reset, lotics.components;

@layer lotics.components {
  .lotics-divider {
    border: 0 solid var(--border);
    /* A hairline never gives way: shrunk to nothing it stops dividing. */
    flex-shrink: 0;
    /* `none` IS the resting rung, declared here rather than as a twelfth rule: a
       space only the rungs below set INHERITS into a nested divider that matched
       none of them. */
    --lotics-divider-space: 0;
  }

  .lotics-divider[data-orientation="horizontal"] {
    align-self: stretch;
    border-top-width: 1px;
    margin: var(--lotics-divider-space) 0;
  }

  .lotics-divider[data-orientation="vertical"] {
    align-self: stretch;
    border-left-width: 1px;
    margin: 0 var(--lotics-divider-space);
  }

  .lotics-divider[data-spacing="2"] {
    --lotics-divider-space: var(--lotics-space-2);
  }
  .lotics-divider[data-spacing="4"] {
    --lotics-divider-space: var(--lotics-space-4);
  }
  .lotics-divider[data-spacing="6"] {
    --lotics-divider-space: var(--lotics-space-6);
  }
  .lotics-divider[data-spacing="8"] {
    --lotics-divider-space: var(--lotics-space-8);
  }
  .lotics-divider[data-spacing="10"] {
    --lotics-divider-space: var(--lotics-space-10);
  }
  .lotics-divider[data-spacing="12"] {
    --lotics-divider-space: var(--lotics-space-12);
  }
  .lotics-divider[data-spacing="16"] {
    --lotics-divider-space: var(--lotics-space-16);
  }
  .lotics-divider[data-spacing="24"] {
    --lotics-divider-space: var(--lotics-space-24);
  }
  .lotics-divider[data-spacing="32"] {
    --lotics-divider-space: var(--lotics-space-32);
  }
  .lotics-divider[data-spacing="48"] {
    --lotics-divider-space: var(--lotics-space-48);
  }
}