/*
 * A 1px edge is the component's own measure; the space around it comes off the scale. The rung sets
 * a property both orientations read.
 */
@layer theme, base, lotics, components, utilities;
@layer lotics.tokens, lotics.reset, lotics.components;

@layer lotics.components {
  .lotics-divider {
    border: 0 solid var(--border);
    /* Shrunk to nothing it stops dividing. */
    flex-shrink: 0;
    /* Declared here so a nested divider inherits no stray space. */
    --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);
  }
}