@mixin border-radius($radius-button) {
  -moz-border-radius: $radius-button;
  -webkit-border-radius: $radius-button;
  border-radius: $radius-button;
}

@mixin transition($transition: all 1s ease) {
  -webkit-transition: $transition;
  -moz-transition: $transition;
  -o-transition: $transition;
  transition: $transition;
}

@mixin optional-at-root($sel) {
  @at-root #{if(not &, $sel, selector-append(&, $sel))} {
    @content;
  }
}

@mixin placeholder {
  @include optional-at-root('::-webkit-input-placeholder') {
    @content;
  }

  @include optional-at-root(':-moz-placeholder') {
    @content;
  }

  @include optional-at-root('::-moz-placeholder') {
    @content;
  }

  @include optional-at-root(':-ms-input-placeholder') {
    @content;
  }
}

@mixin box-shadow($shadow) {
  -webkit-box-shadow: $shadow;
  -moz-box-shadow: $shadow;
  -ms-box-shadow: $shadow;
  -o-box-shadow: $shadow;
  box-shadow: $shadow;
}

@mixin filter-shadow($filter) {
  -webkit-filter: drop-shadow($filter);
  -moz-filter: drop-shadow($filter);
  -ms-filter: drop-shadow($filter);
  -o-filter: drop-shadow($filter);
  filter: drop-shadow($filter);
}
// text rendering
@mixin text-rendering() {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@mixin position($pos: absolute, $top: 0, $lft: 0,$wid: 100%, $hgt: 100%) {
  position: $pos;
  top: $top;
  left: $lft;
  width: $wid;
  height: $hgt;
  @content;
}

@mixin opacity($opacity) {
  opacity: $opacity;
  $opacity-ie: $opacity * 100;
  filter: alpha(opacity=$opacity-ie);
}

@mixin keyframes($animation-name) {
  @-webkit-keyframes #{$animation-name} {
      @content;
  }
  @-moz-keyframes #{$animation-name} {
      @content;
  }
  @-ms-keyframes #{$animation-name} {
      @content;
  }
  @-o-keyframes #{$animation-name} {
      @content;
  }
  @keyframes #{$animation-name} {
      @content;
  }
}
@mixin animation($str) {
  -webkit-animation: #{$str};
  -moz-animation: #{$str};
  -ms-animation: #{$str};
  -o-animation: #{$str};
  animation: #{$str};
}

@mixin button-link() {
  background-color: transparent;
  border: $theme-base-border-style transparent;
  cursor: pointer;
}

@mixin add-sort-direction-icon($color: color(brand-primary, 600), $size: font-size(600)) {
  .sort {
    cursor: pointer;
    color: $color;
    font-size: $size;
    vertical-align: middle;
    text-align: center;
  }

  // from Reactabular
  .sort-none:after {
    opacity: 0;
    content: "\25BE";
  }

  // from Reactabular
  .sort-asc:after {
    content: "\25BE";
    display: inline-block;
    transform: rotateZ(180deg);
  }

  // from Reactabular
  .sort-desc:after {
    content: "\25BE";
  }
}