/* space */
/* --ds-line-height is defined in typography.css */
@layer theme {
    :root {
        --ds-space: var(--ds-line-height);
    }
}
@layer base {
    :root {
        --ds-space-d4: calc(var(--ds-space) / 4);
        --ds-space-d3: calc(var(--ds-space) / 3);
        --ds-space-d2: calc(var(--ds-space) / 2);
        --ds-space-x2: calc(2 * var(--ds-space));
        --ds-space-x3: calc(3 * var(--ds-space));
        --ds-space-x4: calc(4 * var(--ds-space));
    }
}
@layer utility {
    @supports (display: flow-root) {
        .ds-space-contain {
            display: flow-root;
        }
    }
    @supports not (display: flow-root) {
        .ds-space-contain {
            padding: 0.05px;
        }
    }
    .ds-no-space {
        margin: 0;
    }
    .ds-space {
        margin: var(--ds-space);
    }
    .ds-space-vertical {
        margin: var(--ds-space) 0;
    }
    .ds-space-horizontal {
        margin-inline-start: var(--ds-space);
        margin-inline-end: var(--ds-space);
    }
    .ds-space-left {
        margin-inline-start: var(--ds-space);
    }
    .ds-space-right {
        margin-inline-end: var(--ds-space);
    }
    .ds-space-top {
        margin-block-start: var(--ds-space);
    }
    .ds-space-bottom {
        margin-block-end: var(--ds-space);
    }

    .ds-space-inside-horizontal,
    .ds-space-inside {
      padding: 0 var(--ds-space);
    }

    /* FIXME: this seems broken check out why */
    .ds-space-inside-vertical::befofe,
    .ds-space-inside-vertical::after,
    .ds-space-inside::before,
    .ds-space-inside::after {
      content: "";
      display: block;
      height: 0;
    }
    .ds-space-inside-vertical::before,
    .ds-space-inside::before {
      margin-block-end: var(--ds-space);
    }
    .ds-space-inside-vertical::after,
    .ds-space-inside::after {
      margin-block-start: var(--ds-space);
    }
}