@use "sass:map";
@use "sass:math";
@use "sass:meta";
@use "sass:string";
@use "variables";

@mixin colBasic(){
    flex: 0 0 auto;
    padding: math.div(variables.$gridColGutterY, 2) math.div(variables.$gridColGutterX, 2);
}

@mixin makeGrid($breakpoint: ''){
    @if $breakpoint{
        $breakpoint: string.insert($breakpoint, '-', 0);
    } @else{
        $breakpoint: '';
    }

    .row--start#{$breakpoint}{ justify-content: flex-start; text-align: start; }
    .row--center#{$breakpoint}{ justify-content: center; text-align: center; }
    .row--end#{$breakpoint}{ justify-content: flex-end; text-align: end; }
    .row--top#{$breakpoint}{ align-items: flex-start; }
    .row--middle#{$breakpoint}{ align-items: center; }
    .row--bottom#{$breakpoint}{ align-items: flex-end; }
    .row--around#{$breakpoint}{ justify-content: space-around; }
    .row--between#{$breakpoint}{ justify-content: space-between; }
    .row--reverse#{$breakpoint}{ flex-direction: row-reverse; }
    
    .col--first#{$breakpoint}{ order: -1; }
    .col--last#{$breakpoint}{ order: 1; }

    @if $breakpoint != ''{
        .col#{$breakpoint}{
            flex-grow: 1;
            flex-basis: 0;
            max-width: 100%;
            @include colBasic();
        }
    }

    .offset#{$breakpoint}-0{
        margin-left: 0%;
    }

    @for $i from 1 through variables.$gridColsNb{
        .col#{$breakpoint}-#{$i}{
            @include colBasic();
            max-width: math.percentage(math.div($i, variables.$gridColsNb));
            flex: 0 0 math.percentage(math.div($i, variables.$gridColsNb));
        }
        .offset#{$breakpoint}-#{$i}{
            margin-left: math.percentage(math.div($i, variables.$gridColsNb));
        }
    }

    .col--noPT#{$breakpoint}{ padding-top: 0 !important; }
    .col--noPL#{$breakpoint}{ padding-left: 0 !important; }
    .col--noPR#{$breakpoint}{ padding-right: 0 !important; }
    .col--noPB#{$breakpoint}{ padding-bottom: 0 !important; }
}

@mixin respondTo($bkp){
    $breakpoint: map.get(variables.$breakpoints, $bkp);
    $breakpointMin : map.get($breakpoint, min);
    $breakpointMax : map.get($breakpoint, max);

    @if meta.type-of($breakpointMax) == 'number'{
        @media (max-width: $breakpointMax){
            @content;
        }
    }@else{
        @media (min-width: $breakpointMin){
            @content;
        }
    }
}

@mixin respondToPx($bkp){
    @media (max-width: $bkp*1px){
        @content;
    }
}

@mixin fontSize($fontSize, $lineHeight: null, $bfs: variables.$baseFontSize){
    font-size: math.div($fontSize * 1px, $bfs) * 1rem;
    @if $lineHeight{
        line-height: math.div($lineHeight, $fontSize);
    }@else{
        line-height: variables.$baseLineHeight;
    }
}

@function strip-unit($value) {
    @if meta.type-of($value) != "number" {
        @error "Invalid `#{meta.type-of($value)}` type. Choose a number type instead.";
    } @else if meta.type-of($value) == "number" and not is-unitless($value) {
        @return math.div($value, $value * 0 + 1);
    }

    @return $value;
}

@function vwCol($col, $modifier: math.div(variables.$gridColGutterX, 2)){
    $oneColVw: math.div(variables.$containerWidth, variables.$gridColsNb);
    $c: ($oneColVw * $col) - $modifier;
    @return #{$c};
}

@mixin linkStyle() {
    &, &:visited{
        color: variables.$cPrimary;
        text-decoration: none;
        transition: color 0.15s linear;
    }

    @include hover{
        color: variables.$cDark;
    }
}

@mixin hover() {
    @media (hover: hover) {
        &:hover{
            @content;
        }
    }
}