@mixin btn-theme($color-text, $color-bg, $inverse: false) {
  color: $color-text;
  @if $inverse {
    background-color: transparent;
    border-color: $color-text;
    &:hover,
    &.__ac {
      color: $color-bg;
      background-color: $color-text;
    }
    &.__disabled {
      &:hover,
      &.__ac {
        color: $color-text;
        background-color: transparent;
      }
    }
  } @else {
    background-color: $color-bg;
    border-color: $color-bg;
    &:hover,
    &.__ac {
      color: $color-bg;
      background-color: transparent;
    }
    &.__disabled {
      &:hover,
      &.__ac {
        color: $color-text;
        background-color: $color-bg;
      }
    }
  }
  &.__disabled {
    cursor: default;
  }
}

@mixin close-btn($color, $width, $size, $bgcolor: false) {
  border-radius: 50%;
  cursor: pointer;
  display: block;
  height: $size;
  position: relative;
  width: $size;
  @extend %no-select;
  @include single-transition(all 0.2s ease false false);
  &:hover {
    @if $bgcolor {
      background-color: $bgcolor;
    }
    //@include transform(rotate(90deg));
  }
  &:before,
  &:after {
    background-color: $color;
    border-radius: ($width/2)+1;
    content: '';
    margin-left: -($width/2);
    position: absolute;
    top: 14%;
    bottom: 14%;
    left: 50%;
    width: $width;
  }
  &:before {
    @include transform(rotate(45deg));
  }
  &:after {
    @include transform(rotate(-45deg));
  }
}

@mixin arr-direction($direction) {
  @if $direction == left {
    border-top-color: transparent !important;
    border-right-color: transparent !important;
  }
  @if $direction == right {
    border-bottom-color: transparent !important;
    border-left-color: transparent !important;
  }
  @if $direction == top {
    border-top-color: transparent !important;
    border-right-color: transparent !important;
  }
  @if $direction == bottom {
    border-top-color: transparent !important;
    border-right-color: transparent !important;
  }
}

@mixin arr($color, $width, $size) {
  border: $width solid $color;
  cursor: pointer;
  display: inline-block;
  height: $size;
  vertical-align: middle;
  width: $size;
  @extend %no-select;
  @include single-transition(all 0.2s ease false false);
  @include transform(rotate(45deg));
}

%arr-s {
  @include arr($base-color-light, 2px, 16px);
}

%arr-m {
  @include arr($base-color-light, 2px, 20px);
}

%arr-l {
  @include arr($base-color-light, 2px, 30px);
}

// sized sprites
@mixin image-size($path) {
  width: image-width($path);
  height: image-height($path);
}

@mixin grid-gutters($gutter) {
  margin-bottom: $gutter;
  margin-left: (-$gutter);
  &:last-of-type,
  &:last-of-type > .grid,
  .grid &.__dir-col {
    margin-bottom: 0;
  }
  &:not(.__dir-col) > .grid_cell {
    margin-left: $gutter;
  }
  &.__dir-col > .grid_cell {
    margin-bottom: $gutter;
    &:last-child {
      margin-bottom: 0;
    }
  }
}


@mixin icon($map, $sprite) {
  background: sprite($map, $sprite) no-repeat;
  @include image-size(sprite-file($map, $sprite));
  content: '';
}

// insert svg
@mixin svg($name, $width, $height) {
  background: url('../img/svg/#{$name}.svg') no-repeat 0 0;
  @include background-size(#{$width}px #{$height}px);
  // background-image: inline-image('svg/#{$name}.svg','image/svg');
  width: #{$width}px;
  height: #{$height}px;
  display: inline-block;
}

@mixin text-overflow {
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// strip the unit from a number without knowing what the unit is first
@function strip-units($number) {
  @return $number / ($number * 0 + 1);
}

@mixin grayscale($param) {
  -webkit-filter: grayscale($param);
  filter: grayscale($param);
  filter: gray;
}

@mixin display-flex {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

@mixin flex-direction($param) {
  @if $param == column {
    -webkit-box-orient: vertical;
  }
  @if $param == row {
    -webkit-box-orient: horizontal;
  }
  -webkit-box-direction: normal;
  -webkit-flex-direction: $param;
  -ms-flex-direction: $param;
  flex-direction: $param;
}

@mixin flex($param) {
  -webkit-box-flex: 1;
  -webkit-flex: $param;
  -ms-flex: $param;
  flex: $param;
}

@mixin align-items($param) {
  @if $param == start or $param == end {
    -webkit-box-align: #{$param};
    -webkit-align-items: flex-#{$param};
    -ms-flex-align: #{$param};
    align-items: flex-#{$param};
  } @else {
    -webkit-box-align: $param;
    -webkit-align-items: $param;
    -ms-flex-align: $param;
    align-items: $param;
  }
}

@mixin align-self($param) {
  @if $param == start or $param == end {
    -webkit-align-self: flex-#{$param};
    -ms-flex-item-align: #{$param};
    align-self: #{$param};
  } @else {
    -webkit-align-self: $param;
    -ms-flex-item-align: $param;
    align-self: $param;
  }
}

@mixin justify-content($param) {
  @if $param == start or $param == end {
    -webkit-box-pack: #{$param};
    -webkit-justify-content: flex-#{$param};
    -ms-flex-pack: #{$param};
    justify-content: flex-#{$param};
  } @else {
    -webkit-box-pack: $param;
    -webkit-justify-content: $param;
    -ms-flex-pack: $param;
    justify-content: $param;
  }
}
