@mixin color-bgcolor-set($color, $background) {
  color: $color !important;
  background-color: $background !important;
}


@mixin generate-browser-prefix($prop,$val) {
  -webkit-#{$prop}: $val;
  -moz-#{$prop}: $val;
  -ms-#{$prop}: $val;
  #{$prop}: $val;
}

@mixin generate-media-max-breakpoint($name, $breakpoints: $media-max-breakpoints) {
  @if (map-get($breakpoints,$name) !=0) {
    @media (max-width: map-get($breakpoints, $name)) {
      @content;
    }
  }
}
@mixin generate-media-min-breakpoint($name, $breakpoints: $media-min-breakpoints) {
  @if (map-get($breakpoints,$name) !=0) {
    @media (min-width: map-get($breakpoints, $name)) {
      @content;
    }
  } @else {
    @content;
  }
}

@mixin generate-keyframes($name) {
  @keyframes #{$name} {
    @content;
  }
  @-webkit-keyframes #{$name} {
    @content;
  }
  @-moz-keyframes #{$name} {
    @content;
  }
  @-o-keyframes #{$name} {
    @content;
  }

}

// Button mixin

@mixin button-icon-variant($width, $height, $lheight) {
  width: $width;
  height: $height;
  line-height: $lheight;
}

//Grid

@mixin grid-row-box-model($margin,$padding) {
  margin-left: $margin;
  margin-right: $margin;
  [class*=col-] {
    padding-left: $padding;
    padding-right: $padding;
  }
}

//Border
@mixin boder-radius-variant($directions,$val) {
  $direction: '';
  @each $key in $directions {
    $direction: #{$direction}-#{map-get($border-direction-map,$key)}
  }
  boder#{$direction}-radius: $val
}

//Layout
@mixin margin-variant($prop) {
  @each $key,$val in $margin-size-map {
    &-#{$key} {
      #{$prop}: $val;
    }
  }
}@mixin padding-variant($prop) {
  @each $key,$val in $padding-size-map {
    &-#{$key} {
      #{$prop}: $val;
    }
  }
}