@use "../jkl";

@layer jokul.theme {
    :root,
    [data-size] {
        --jkl-unit-0: 0;
        --jkl-unit-10: var(--jkl-unit-base);
        --jkl-unit-15: calc(var(--jkl-unit-base) * 1.5);
        --jkl-unit-20: calc(var(--jkl-unit-base) * 2);
        --jkl-unit-25: calc(var(--jkl-unit-base) * 2.5);
        --jkl-unit-30: calc(var(--jkl-unit-base) * 3);
        --jkl-unit-35: calc(var(--jkl-unit-base) * 3.5);
        --jkl-unit-40: calc(var(--jkl-unit-base) * 4);
        --jkl-unit-50: calc(var(--jkl-unit-base) * 5);
        --jkl-unit-60: calc(var(--jkl-unit-base) * 6);
        --jkl-unit-70: calc(var(--jkl-unit-base) * 7);
        --jkl-unit-80: calc(var(--jkl-unit-base) * 8);
        --jkl-unit-90: calc(var(--jkl-unit-base) * 9);
        --jkl-unit-100: calc(var(--jkl-unit-base) * 10);
        --jkl-unit-130: calc(var(--jkl-unit-base) * 13);
        --jkl-unit-210: calc(var(--jkl-unit-base) * 21);
        --jkl-unit-02: calc(var(--jkl-unit-base) * .25);
        --jkl-unit-05: calc(var(--jkl-unit-base) * .5);
        --jkl-spacing-0: 0;
        --jkl-spacing-2: #{jkl.rem(2px)};
        --jkl-spacing-4: #{jkl.rem(4px)};
        --jkl-spacing-8: #{jkl.rem(8px)};
        --jkl-spacing-12: #{jkl.rem(12px)};
        --jkl-spacing-16: #{jkl.rem(16px)};
        --jkl-spacing-20: #{jkl.rem(20px)};
        --jkl-spacing-24: #{jkl.rem(24px)};
        --jkl-spacing-28: #{jkl.rem(28px)};
        --jkl-spacing-32: #{jkl.rem(32px)};
        --jkl-spacing-40: #{jkl.rem(40px)};
        --jkl-spacing-48: #{jkl.rem(48px)};
        --jkl-spacing-56: #{jkl.rem(56px)};
        --jkl-spacing-64: #{jkl.rem(64px)};
        --jkl-spacing-72: #{jkl.rem(72px)};
        --jkl-spacing-80: #{jkl.rem(80px)};
        --jkl-spacing-104: #{jkl.rem(104px)};
        --jkl-spacing-168: #{jkl.rem(168px)};
        --jkl-spacing-none: 0;
        --jkl-spacing-xxs: calc(var(--jkl-unit-base) * .5);
        --jkl-spacing-xs: var(--jkl-unit-base);
        --jkl-spacing-s: calc(var(--jkl-unit-base) * 2);
        --jkl-spacing-m: calc(var(--jkl-unit-base) * 3);
        --jkl-spacing-l: calc(var(--jkl-unit-base) * 5);
        --jkl-spacing-xl: calc(var(--jkl-unit-base) * 8);
        --jkl-spacing-2xl: calc(var(--jkl-unit-base) * 13);
    }

    [data-size="small"] {
        --jkl-unit-base: #{jkl.rem(5px)};
    }

    :root,
    [data-size="medium"] {
        --jkl-unit-base: #{jkl.rem(8px)};
    }

    [data-size="large"] {
        --jkl-unit-base: #{jkl.rem(11px)};
    }
}