@mixin breakpoint($device) {
  @if ($device == xs) {
    // until 767px, use if there is definitions for mobile only, otherwise mobile first approach
    @media only screen and (max-width: $screen-xs-max) {
      @content;
    }
  } @else if ($device == sm) {
    // from 768px
    @media only screen and (min-width: $screen-sm-min) {
      @content;
    }
  } @else if ($device == md) {
    // from 992px
    @media only screen and (min-width: $screen-md-min) {
      @content;
    }
  } @else if ($device == lg) {
    // from 1200px - open end
    @media only screen and (min-width: $screen-lg-min) {
      @content;
    }
  } @else {
    @warn 'The provided value #{$device} is not a vaild value';
  }
}

@mixin custom-breakpoint($max-width) {
  @media only screen and (max-width: $max-width) {
    @content;
  }
}

@mixin font-size($pixel) {
  font-size: ($pixel / 16) + rem;
}

@mixin tui-btn-color($btn-background-color, $btn-text-color, $btn-highlight-color) {
  background: lighten($btn-background-color, 15%) linear-gradient($btn-highlight-color, $btn-background-color);
  border: 0;
  color: $btn-text-color;

  &:focus,
  &:hover,
  &:active {
    @if ($btn-text-color == $color-link-blue) {
      color: $color-link-blue-hover;
    } @else {
      color: $btn-text-color;
    }
    background: $btn-highlight-color;
    text-decoration: none;
  }

  &[disabled],
  &[disabled]:hover {
    background: $color-white;
    color: rgba($text-color, .9);
    border: 1px solid rgba($text-color, .5);
  }
}

@mixin tui-btn-ghost($ghost-color) {
  border: 1px solid $ghost-color;
  background: transparent;
  color: $ghost-color;

  &:hover,
  &.btn:hover,
  &:focus,
  &:active {
    color: $ghost-color;
    text-decoration: none;
    background: rgba($ghost-color, .1);
  }

  &:active {
    background: transparent;

    &:focus,
    &:hover {
      background: rgba($ghost-color, .1);
    }
  }
}

// compass image-url replacement function
$image-folder-path: '../img/' !default;

@function image-url($image-src) {
  @return url('#{$image-folder-path}#{$image-src}');
}

//from bootstrap
// Keep images from scaling beyond the width of their parents.
@mixin img-responsive($display: block) {
  display: $display;
  max-width: 100%; // Part 1: Set a maximum relative to the parent
  height: auto; // Part 2: Scale the height according to the width, otherwise you get stretching
}

@mixin multiline-ellipsis($lines: 3, $font-size: $font-size-base, $line-height: $line-height-base, $margins: 0) {
  display: block; // Fallback for non-webkit
  display: -webkit-box;
  max-height: $font-size * $line-height * $lines + $margins; // Fallback for non-webkit
  -webkit-line-clamp: $lines;

  /* autoprefixer: ignore next */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

@mixin clearfix() {
  &:before,
  &:after {
    content: ' ';
    display: table;
  }

  &:after {
    clear: both;
  }
}