/* WIDTH */ 

$widthvalues: (0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 75, 100, 125, 150, 200, 250, 300, 350, 400, 450, 500, 600, 700, 800, 900, 1000, 1024);

@each $width in $widthvalues {
    .w-#{$width} {
        width: #{$width}px;
    }

    .max-w-#{$width} {
        max-width: #{$width}px;
    }

    .min-w-#{$width} {
        min-width: #{$width}px;
    }

    .h-#{$width} {
        height: #{$width}px;
    }

    .max-h-#{$width} {
        max-height: #{$width}px;
    }

    .min-h-#{$width} {
        min-height: #{$width}px;
    }

    @media(max-width: $breakpoint-phone) {
        .sm-w-#{$width} {
            width: #{$width}px;
        }
    
        .sm-max-w-#{$width} {
            max-width: #{$width}px;
        }
    
        .sm-min-w-#{$width} {
            min-width: #{$width}px;
        }
    
        .sm-h-#{$width} {
            height: #{$width}px;
        }
    
        .sm-max-h-#{$width} {
            max-height: #{$width}px;
        }
    
        .sm-min-h-#{$width} {
            min-height: #{$width}px;
        }
    }

    @media(min-width: $breakpoint-phone) and (max-width: $breakpoint-tablet) {
        .md-w-#{$width} {
            width: #{$width}px;
        }
    
        .md-max-w-#{$width} {
            max-width: #{$width}px;
        }
    
        .md-min-w-#{$width} {
            min-width: #{$width}px;
        }
    
        .md-h-#{$width} {
            height: #{$width}px;
        }
    
        .md-max-h-#{$width} {
            max-height: #{$width}px;
        }
    
        .md-min-h-#{$width} {
            min-height: #{$width}px;
        }
    }

    @media(min-width: $breakpoint-tablet) {
        .lg-w-#{$width} {
            width: #{$width}px;
        }
    
        .lg-max-w-#{$width} {
            max-width: #{$width}px;
        }
    
        .lg-min-w-#{$width} {
            min-width: #{$width}px;
        }
    
        .lg-h-#{$width} {
            height: #{$width}px;
        }
    
        .lg-max-h-#{$width} {
            max-height: #{$width}px;
        }
    
        .lg-min-h-#{$width} {
            min-height: #{$width}px;
        }
    }
}


.w-full {
    width: 100% !important;
}

.h-full {
    height: 100% !important;
}

/* POSITIONING */

.ta-r {
    text-align: right;
}
.ta-l {
    text-align: left;
}
.ta-c {
    text-align: center;
}
.ta-j {
    text-align: justify;
}

/* SPACINGS */ 
.m-auto {
    margin: auto;
}

$spaceamounts: (0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 75, 100, 125, 200, 300);
$sides: (top, bottom, left, right);

@each $space in $spaceamounts {

    .m-#{$space} {
        margin: #{$space}px !important;
    }
    .p-#{$space} {
        padding: #{$space}px !important;
    }

    @each $side in $sides {
        .m-#{str-slice($side, 0, 1)}-#{$space} {
            margin-#{$side}: #{$space}px !important;
        }

        .p-#{str-slice($side, 0, 1)}-#{$space} {
            padding-#{$side}: #{$space}px !important;
        }
    }
}

/* TEXT SIZE */

.small {
    font-size: 0.8em;
}