/**
 *  Sizing
 *
 *  Width and Height Classes,
 *  Sizes with percentage will calculate with the Reflex Grid
 *
 *
 */

$sizing_steps: 99 !default;

/**
 *  mixin: sizing
 *
 */
@mixin sizing($class, $style, $i, $value)
{
    .#{$class}-#{$i} {
        #{$style}: $value;
    }
}

/**
 *  mixin: sizing for each breakpoint
 *
 *
 */
@mixin sizing_breakpoints($class, $style, $i, $value)
{
    @include media-xs() {
        @include sizing($class, $style, 'xs-' + $i, $value);
    }

    @include media-sm() {
        @include sizing($class, $style, 'sm-' + $i, $value);
    }

    @include media-md() {
        @include sizing($class, $style, 'md-' + $i, $value);
    }

    @include media-lg() {
        @include sizing($class, $style, 'lg-' + $i, $value);
    }

    @include media-xlg() {
        @include sizing($class, $style, 'xlg-' + $i, $value);
    }
}

.w-0 { width: 0; }
@include sizing_breakpoints('w', 'width', '1', 0);

.h-0 { height: 0; }
@include sizing_breakpoints('h', 'height', '1', 0);

.w-1 { width: 1px;}
@include sizing_breakpoints('w', 'width', '1', 1px);

.h-1 { height: 1px; }
@include sizing_breakpoints('h', 'height', '1', 1px);

.w-100 { width: 100%; }
@include sizing_breakpoints('w', 'width', '100', 100%);

.w-auto { width: auto; }
@include sizing_breakpoints('w', 'width', 'auto', auto);

.h-100 { height: 100%; }
@include sizing_breakpoints('h', 'height', '100', 100%);

.h-auto { height: auto; }
@include sizing_breakpoints('h', 'height', 'auto', auto);

@for $i from 1 through $grid__columns
{
    $value: percentage(($i / $grid__columns));

    @include sizing('w-col', 'width', $i, $value);
    @include sizing_breakpoints('w-col', 'width', $i, $value);

    $value: percentage(($i / $grid__columns));

    @include sizing('h-col', 'height', $i, $value);
    @include sizing_breakpoints('h-col', 'height', $i, $value);
}

@for $i from 1 through $sizing_steps
{
    $value: #{($i * 0.5)}rem;

    @include sizing('w', 'width', $i, $value);
    @include sizing_breakpoints('w', 'width', $i, $value);
}

@for $i from 1 through $sizing_steps
{
    $value: #{($i * 0.5)}rem;

    @include sizing('h', 'height', $i, $value);
    @include sizing_breakpoints('h', 'height', $i, $value);
}