// ----------------------------------------------------------------------------
// THE LOTTERYWEST THEME MIXINS
// ----------------------------------------------------------------------------

// ----------------------------------------------------------------------------
// BREAKPOINTS
// the brealpoint mixin uses vars set in _variables.scss
// usage:
// @include breakpoint(mobile){
//    div {border:1px solid red;}
// }
// ----------------------------------------------------------------------------

//mobile first
@mixin breakpoint($point,$adjustment:0px){
    @if(map-has-key($breakpoints,$point)){
        $break:map-get($breakpoints,$point);
        @media screen and (min-width:#{$break + $adjustment}){ @content;}
    }
    @else{
        @content;
        //@warn "No breakpoint found with key. #{$point}";
    }
}

//mobile last
@mixin breakpointreverse($point,$adjustment:0px){
    @if(map-has-key($breakpoints,$point)){
        $break:map-get($breakpoints,$point);
        @media screen and (max-width:#{$break - 1 + $adjustment}){@content;}
    }
    @else{
        @content;
        //@warn "No breakpoint found with key. #{$point}";
    }
}

// ----------------------------------------------------------------------------
// CREATE CONSISTENT HEADING SIZES
// So we dont get a h6 the same size as a h1.
// $start is the h6 font size in %, $gap is the percentage to increase for
// each heading
// ----------------------------------------------------------------------------

@mixin headingsizes($start:100,$gap:20){
    @for $i from 1 through 6 {
        h#{$i}{
            $size:$start+((6-$i)*$gap)*1%;
            $line:($i+10)/10*1em;
            font-size:$size;
            //line-height:$line;
            line-height:1.1;
        }
    }
}

// ----------------------------------------------------------------------------
// COLUMNS
// easily create column layouts
// usage:
// div {
//     @include cols(1,2,mobile);
//     @include cols(1,3,tablet);
// }
// would mean the divs form 2 rows and take up 1 space each on tablet breakpoint
// and then form 3 rows and take up 1 space each on tablet breakpoint
// ----------------------------------------------------------------------------

@mixin col-container($gutter:20px,$break:false){
    @include breakpoint(unquote("#{$break}")){
        display:flex;
        flex-wrap:wrap;
        //justify-content:space-between;
        //outline:1px solid blue;
        width:auto;
        margin-left:-($gutter)/2;
        margin-right:-($gutter)/2;
        &:after {
            content:"";
            display:table;
            clear:both;
        }
    }
}

@mixin cols($no:1,$max:12,$break:false,$gutter:20px,$margin:20px,$debug:false){
    //dont go over the max
    @if($no >= $max){
        $no:$max;
    }
    //calc width
    $width:((100/$max)*$no)*1%;
    //if breakpoint set only include on that breakpoint
    @include breakpoint(unquote("#{$break}")){
        display:flex;
        flex-direction:column;
        flex-basis:calc(#{$width} - #{$gutter});
        width:calc(#{$width} - #{$gutter});
        margin-bottom:$margin;
        float:left;
        //reset prev nth-of-type rules
        &:nth-child(1n){
            margin-left:$gutter/2;
            margin-right:$gutter/2;
            clear:none;
            //outline:1px solid red;
        }
        //if at beginning of row
        &:nth-child(#{$max}n-#{($max - 1)}){
            clear:left;
            //outline:1px solid green;
        }
    }
}

// This mixin is a duplicate of the cols mixin but has a reduced left margin to allow
// IE 11 to render the divs together in a 2 column layout.
// Cols is used all over the site so duplicating seemed ok in order not to have to retest
// all areas.
@mixin cols-pod-ie($no:1,$max:12,$break:false,$gutter:20px,$margin:20px,$debug:false){
    //dont go over the max
    @if($no >= $max){
        $no:$max;
    }
    //calc width
    $width:((100/$max)*$no)*1%;
    //if breakpoint set only include on that breakpoint
    @include breakpoint(unquote("#{$break}")){
        display:flex;
        flex-direction:column;
        flex-basis:calc(#{$width} - #{$gutter});
        width:calc(#{$width} - #{$gutter});
        margin-bottom:$margin;
        float:left;
        //reset prev nth-of-type rules
        &:nth-child(1n){
            margin-left:$gutter/2-2;
            margin-right:$gutter/2;
            clear:none;
            //outline:1px solid red;
        }
        //if at beginning of row
        &:nth-child(#{$max}n-#{($max - 1)}){
            clear:left;
            //outline:1px solid green;
        }
    }
}

// ----------------------------------------------------------------------------
// TRUNCATE TEXT
// ----------------------------------------------------------------------------

@mixin truncate($lineCount:1,$lineHeight:1.2em,$bgColor:white){
    overflow:hidden;
    position:relative;
    line-height:$lineHeight;
    max-height:$lineHeight * $lineCount;
    //text-align:justify;
    margin-right:-1em;
    padding-right:1em;
    &:before {
        content:"...";
        position:absolute;
        right:0;
        bottom:0;
    }
    &:after {
        content:"";
        position:absolute;
        right:0;
        width:1em;
        height:1em;
        margin-top:0.2em;
        background:$bgColor;
    }
}

// ----------------------------------------------------------------------------
// CREATE A CSS TRIANGLE
// ----------------------------------------------------------------------------

@mixin triangle($size:20px,$color:red,$dir:up){
      width:0;
      height:0;
      display:block;
      border:$size solid transparent;
      @if($dir == up){
           border-bottom:$size solid $color;
      }
      @elseif($dir == down){
          border-top:$size solid $color;
      }
      @elseif($dir == left){
          border-right:$size solid $color;
      }
      @elseif($dir == right){
          border-left:$size solid $color;
      }
}

// ----------------------------------------------------------------------------
// TOGGLE BUTTONS
// create a toggle button
// ----------------------------------------------------------------------------

@mixin toggle-button($open:"x",$close:"+",$size:100%,$line-height:16px){
    display:block;
    cursor:pointer;
    > * {
        font-size:100%;
        font-weight:normal;
        margin:0px;
        padding:10px;
        &:before {
            content:$close;
            display:inline-block;
            width:16px;
            height:16px;
            border:2px solid color(brandprimary);
            color:color(brandprimary);
            line-height:$line-height;
            text-align:center;
            margin:0 10px 0 0;
            border-radius:100%;
            font-weight:bold;
            font-size:$size;
        }
    }
    &.state--active,
    &.reveal-toggle--active {
        background:color(brandprimary);
        > * {
            color:#fff;
            &:before {
                content:$open;
                color:#fff;
                border-color:#fff;
            }
        }
    }
}

// ----------------------------------------------------------------------------
// FLASH ANIMATION
// make an element flash using animation
// ----------------------------------------------------------------------------

@mixin flash($from:white,$to:red,$speed:2s){
    $rand:random(500);
    @at-root {
        @keyframes flash-#{$rand} {
            0% {
                 background-color:$to;
                 color:$from;
            }
            50% {
                background-color:$from;
                color:$to;
            }
            100% {
                background-color:$to;
                color:$from;
            }
        }
    }
    background-color:$to;
    color:$from;
    animation:flash-#{$rand} $speed infinite;
}

// ----------------------------------------------------------------------------
// PULSE ANIMATION
// make an element pulse using animation
// ----------------------------------------------------------------------------

@mixin pulse($color:red,$size:20,$scale:1.1,$speed:2s){
    $rand:random(500);
    @at-root {
        @keyframes pulsate-#{$rand} {
            0% {
                transform:scale($scale);
                box-shadow:0px 0px $size+px $color;
            }
            50% {
                transform:scale(1);
                box-shadow:0px 0px ($size/2)+px $color;
            }
            100% {
                transform:scale($scale);
                box-shadow:0px 0px $size+px $color;
            }
        }
    }
    box-shadow:0px 0px $size+px $color;
    transform:scale($scale);
    animation:pulsate-#{$rand} $speed infinite;
}

// ----------------------------------------------------------------------------
// ADD PREFIXES
// prefix a css rule ie @include prexix("box-shadow","1px 1px 1px red");
// @NOTE: Depriciated. This is no longer needed as we are ow prefixing using grunt.
// ----------------------------------------------------------------------------

@mixin prefix($rule,$value,$vendors:-moz- -ms- -o- -webkit-){
    @each $vendor in $vendors {
        #{$vendor+$rule}:$value;
    }
    #{$rule}:$value;
}

// ----------------------------------------------------------------------------
// BUTTONS
// this is in a mixin so we can use @extend from within media queries
// ----------------------------------------------------------------------------

@mixin button(){
    background:none;
    color:color(brandprimary);
    border:none;
    border:2px solid color(brandprimary);
    border-radius:25px;
    display:inline-block;
    width:auto;
    font-size:100%;
    transition:all 0.5s;
    line-height:1.1em;
    min-width:60px;
    text-align:center;
    box-sizing:border-box;
    padding:6px 12px 6px 12px;
    cursor:pointer;
    font-family:$headingfont;
    text-decoration:none !important;
    box-shadow:3px 3px 3px rgba(0,0,0,0.1);
    position:relative;
    font-weight: bold;
    @include breakpoint(desktop){
        padding:12px 25px 12px 25px;
        min-width:80px;
    }
    &:hover {
        background:color(brandprimary);
        color:color(white);
    }
    //&:active {
    //    &:after {
    //        content:"";
    //        display:inline-block;
    //        width:15px;
    //    }
    //    &:before {
    //        content:"";
    //        width:15px;
    //        height:15px;
    //        display:inline-block;
    //        position:absolute;
    //        top:50%;
    //        right:15px;
    //        transform:translateY(-50%);
    //        background:no-repeat center;
    //        background-size:cover;
    //    }
    //}
    &:disabled {
        opacity: .2;
        cursor: default;
    }
}
// ----------------------------------------------------------------------------
// JS Rollback mobile menu
// ----------------------------------------------------------------------------
 @mixin menu-checked-styles($name){
        #menu-#{$name} {
            &:checked {
                & + #reveal-#{$name} {
                    height: 100%; visibility:visible; opacity:1;
                }
            }
        }
    }

    $menu-names: games,results, membership, lotterywest, grants, more;

    @each $name in $menu-names {
        @include menu-checked-styles($name);
    }

// ----------------------------------------------------------------------------
// JS Rollback mobile menu
// ----------------------------------------------------------------------------
 @mixin faq-checked-styles($faq){
        #faq-#{$faq} {
            &:checked {

                & + #secondary-#{$faq} {
                    display:block;
                }
            }
        } &:checked .no-js-faqs{
           background-color:grey;
        }
    }

    $menu-faq: games, playing-online, players-membership, checking-if-youve-won, responsible-gaming, retailers, grants;

    @each $faq in $menu-faq {
        @include faq-checked-styles($faq);
    }