@import "compass/css3";
// Strip unit from a number value
// Usage :
//    strip-units(16px);
// Will return "16" (as a number)
@function strip-units($number) {
    @return $number / ($number * 0 + 1);
}

// Write font-size rules for each given breakpoint, the font-size is calculated for each 
// breakpoint
//
// Usage :
//    $resos: $screenSmall, $screenMedium, $screenXlarge;
//    @include fit-text(5.2px, $resos);
//
// * $base-size: base size to use in calcul;
// * $resolutions: list of breakpoint width sizes to break on;
// * $default-size: default width size to use for the default property;
// * $min-size: minimal font size value, if a computed value is higher, the minimal 
//   value is used instead;
// * $ratio: use ratio in calcul with the base-size
// * $unit: the unit to use in the font-size property, must be like "1px" or "1em" etc..
@mixin fit-text($base-size, $resolutions, $default-width: 1920, $min-size: 0, $ratio: 0.0075, $unit: 1px) {
    font-size: $base-size*($default-width * $ratio);
    
    @each $breakpoint-item in $resolutions {
        $thisFontSize : strip-units($base-size*(strip-units($breakpoint-item)*$ratio));
        @media (max-width: $breakpoint-item) {
            @if $thisFontSize > $min-size {
                    font-size: $thisFontSize*$unit;
            } @else {
                font-size: $min-size*$unit;
            }
        }
    }
}

@mixin glowing($color, $backgroundColor: #ffffff, $radius: null, $radiusbox: full, $h-offset: 0, $v-offset: 0, $blur: 0, $spread: 0){
    @if $backgroundColor {
        background-color:$backgroundColor;
    }
    @if $radius {
        @if $radiusbox == full {
            @include border-left-radius($radius);
            @include border-right-radius($radius);
        } @else if $radiusbox == left {
            @include border-left-radius($radius);
        } @else if $radiusbox == right {
            @include border-right-radius($radius);
        }
    }
    @if $blur > 0 or $spread > 0 {
        @include single-box-shadow($color, $h-offset, $v-offset, $blur, $spread);
    }
}

// Mixin to make positionning
@mixin positionning($name: absolute, $top: null, $right: null, $bottom: null, $left: null) {
    position: $name;
    @if $top {
        top: $top;
    }
    @if $right {
        right: $right;
    }
    @if $bottom {
        bottom: $bottom;
    }
    @if $left {
        left: $left;
    }
}

@mixin link-box-glowing($glow-color: #909090, $top: null){
    padding: 15px 20px 15px 20px;
    font-size: 20px;
    font-weight: 700;
    color: #000000;
    text-transform: uppercase;
    display: none;
    
    background-color:#ffffff;
    border: 1px solid $white;
    @include single-box-shadow($glow_color, 0, 0, 10px, 3px);
    
    display: block;
    @include positionning(absolute, $right: 0, $top: $top);
    @include border-right-radius(0);
    padding: 25px 30px;
    font-size: 35px;
    border-right: 0;
}

// Base stuff to add for content with Foundation
@mixin global-addons(){
    // Image en bloc centré
    img.centered{
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
    // Etire proportionellement l'image à la largeur de son conteneur
    img.expanded{
        width: 100%;
        height: auto;
    }

    // Pour afficher le nom d'une marque avec une Police dédiée et le symbole du 
    // copyright inséré
    /*.brand{
        font-family: 'Radley', serif;
        font-weight: 400;
        font-size: 1.2em;
        
        &:after{
            content: "®";
            font-size: 0.3em;
            vertical-align: super;
        }
    }*/
    // Pas d'insertion du symbole de copyright dans un paragraphe dont la police est 
    // problablement trop petite pour l'afficher correctement
    /*p .brand{
        &:after{
            content: "";
        }
    }*/
}

// Base stuff to add for content with Foundation
@mixin foundation-content-base(){
    
    .nontabular-table{
        vertical-align:top;
    }
    .table-fiftyfifty td{
        width: 50%;
    }
    
    h1, h2, h3, h4, h5, h6{ font-weight: 400; }
    h1{ font-size: 30px; }
    h2{ font-size: 26px; }
    h3{ font-size: 21px; }
    h4{ font-size: 18px; }
}
