@import "media";

$defaultSizes: (
    'off': 0,
    'xxxl': 56px,
    'xxl': 48px,
    'xl': 40px,
    'lg': 32px,
    'md': 24px,
    '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)} {
            #{$prefix}: #{nth(map-values($sizes), $i)};
            @if ($prefix != $param){
              #{$param}: #{nth(map-values($sizes), $i)};
            }
        }
    }
}

@mixin setMarginHorizontal($direction: 'right', $sizes:$defaultSizes) {
    @for $i from 1 to length($sizes)+1 {
        &--margin-#{nth(map-keys($sizes), $i)} {
            margin-#{$direction}: #{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)};
                margin-right: 0;
            }
        }
        @at-root .one-ui-wrapper--direction-row > & {
            &--margin-#{nth(map-keys($sizes), $i)} {
                margin-right: #{nth(map-values($sizes), $i)};
            }
        }
        $columnSizes:(xsm, sm, md, lg, xlg,);
        @each $columnSize in $columnSizes {
            @at-root .one-ui-wrapper--direction-row.one-ui-wrapper--mediaColumn-#{$columnSize} > & {
                &--margin-#{nth(map-keys($sizes), $i)} {
                    @include media('',$columnSize){
                        margin-bottom: #{nth(map-values($sizes), $i)};
                        margin-right: 0;
                    }

                }
            }
        }
    }
    @include media('','md'){
        @at-root .one-ui-wrapper--direction-column > & {
            &--margin-xxl {
                margin-bottom: 24px;
                margin-right: 0;
            }
        }
        $columnSizes:(xsm, sm);
        @each $columnSize in $columnSizes {
            @at-root .one-ui-wrapper--direction-row.one-ui-media--column-#{$columnSize} > & {
                &--margin-xxl, &--margin-lg {
                    @include media('',$columnSize){
                        margin-bottom: 24px;
                        margin-right: 0;
                    }

                }
            }
        }
    }

}

@mixin setAlign() {
    &--align {
        &-left {
            justify-content: flex-start;
        }

        &-center {
            justify-content: center;
        }

        &-right {
            justify-content: flex-end;
        }
    }
}

$radiusSizes: (
    'off': 0,
    'xs': 2px,
    'sm': 4px,
    'md': 6px,
    'lg': 8px,
    'xl': 10px
);
@mixin setRadius($size:'',$param:'border-radius') {
    @if ($size == '') {
        @each $key, $size in $radiusSizes {
            &--radius-#{$key} {
                border-radius: $size;
            }
        }
    } @else {
        border-radius: map-get($radiusSizes, $size);
    }
}