html{
    font-size: 10px;
    body{
        font-size: 14px;
    }
}


$defaultSizes: (
    'xxl': 56px,
    'xl': 48px,
    'lg': 40px,
    'md': 32px,
    'sm': 16px,
    'xs': 8px,
    'xxs': 4px,
);
@mixin setSize($prefix:padding,$param:$prefix,$sizes: $defaultSizes) {
    @for $i from 1 to length($sizes)+1 {
        &--#{$prefix}-#{nth(map-keys($sizes), $i)} {
            #{$param}: #{nth(map-values($sizes), $i)}
        }
    }
}

@mixin setMargin($sizes:$defaultSizes){
    @for $i from 1 to length($sizes)+1 {
        @at-root .one-ui-wrapper--direction-column > &{
            &--margin-#{nth(map-keys($sizes), $i)} {
                margin-bottom: #{nth(map-values($sizes), $i)}
            }
        }
        @at-root .one-ui-wrapper--direction-row > &{
            &--margin-#{nth(map-keys($sizes), $i)} {
                margin-right: #{nth(map-values($sizes), $i)}
            }
        }
    }
}
$uiSizes: (
    'xxxl': 64px,
    'xxl': 56px,
    'xl': 48px,
    'lg': 40px,
    'md': 32px,
    'sm': 16px,
    'xs': 8px,
    'xxs': 4px,
);
@for $i from 1 to length($uiSizes)+1 {
    @at-root .one-ui-wrapper--direction-column > {
        [data-ui-margin=#{nth(map-keys($uiSizes), $i)}] {
            margin-bottom: #{nth(map-values($uiSizes), $i)}
        }
    }
    @at-root .one-ui-wrapper--direction-row > {
        [data-ui-margin=#{nth(map-keys($uiSizes), $i)}] {
            margin-right: #{nth(map-values($uiSizes), $i)}
        }
    }
    [data-ui-padding=#{nth(map-keys($uiSizes), $i)}] {
        padding: #{nth(map-values($uiSizes), $i)}
    }
}


$uiColors: (
    'dark': color(dark),
    'dark-5': color(dark,5),
    'grey': color(grey,1),
    'grey-2': color(grey,2),
    'grey-3': color(grey,3),
    'grey-4': color(grey,4),
    'grey-5': color(grey,5),
    'grey-6': color(grey,5),
    'key': color(key,1),
    'key-translucent': color(key,1,.1),
    'green': color(green,1),
    'green-translucent': color(green,1,.2),
    'red': color(red,1),
    'red-translucent': color(red,1,.1),
    'yellow': color(yellow,1),
    'yellow-translucent': color(yellow,1,.2),
    'blue': color(blue,1),
    'blue-translucent': color(blue,1,.2),
    'violet': color(violet,1),
    'violet-translucent': color(violet,1,.1),
);
@for $i from 1 to length($uiColors)+1 {
    [data-ui-color=#{nth(map-keys($uiColors), $i)}]{
        color: #{nth(map-values($uiColors), $i)};
    }
    [data-ui-bg=#{nth(map-keys($uiColors), $i)}]{
        background-color: #{nth(map-values($uiColors), $i)};
    }
}