// clearfix helper
@mixin clearfix {
    &:before, &:after {
        content: "";
        display: table;
    }
    &:after {
        clear: both;
    }
}

@mixin rtl() {
    html[dir="rtl"] & {
        @content;
    }
}

// Skin mode
@function black($opacity) {
    @return rgba(black, $opacity)
}
@function white($opacity) {
    @return rgba(white, $opacity)
}


//$screen_lg: 80em;   // max 1280px
//$screen_md: 64em;   // max 1024px
//$screen_sm: 48em;   // max 768px
//$screen_xs: 35.5em; // up to 568px

// Mobile first responsive
@mixin mq($media) {
    @if $media == min-xs {
        @media screen and (min-width: $screen_xs) { @content; }
    }
    @else if $media == max-xs {
        @media screen and (max-width: $screen_xs) { @content; }
    }

    @if $media == min-sm {
        @media screen and (min-width: $screen_sm) { @content; }
    }
    @else if $media == max-sm {
        @media screen and (max-width: $screen_sm) { @content; }
    }

    @else if $media == min-md {
        @media screen and (min-width: $screen_md) { @content; }
    }
    @else if $media == max-md {
        @media screen and (max-width: $screen_md) { @content; }
    }

    @else if $media == min-lg {
        @media screen and (min-width: $screen_lg) { @content; }
    }
    @else if $media == max-lg {
        @media screen and (max-width: $screen_lg) { @content; }
    }
}


/************************
   Device Query
*************************/

@mixin for_device( $device_name ){
    @if map-has-key( $gl-devices-list, $device_name) {
        @media #{map-get( $gl-devices-list, $device_name)} {
            @content;
        }
    }@else {
        @if map-has-key( $gl-mq-list, $device_name) {
            @media #{map-get($gl-mq-list, $device_name)} {
                @content;
            }
        }
    }
}

