@mixin icon($url, $width, $height: $width) {
  width: $width;
  height: $height;
  background: url(#{$url}) no-repeat;
  background-size: 100% 100%;
}

@mixin thin-border($position, $color: #d9d9d9, $size: 100%) {
  position: relative;
  @if $position == top or $position == bottom {
    &::before {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      #{$position}: 0;
      height: 0;
      border-bottom: 1PX solid $color;
      transform: scaleY(0.5);
      z-index: 1;
    }
  } @else {
    &::before {
      content: '';
      position: absolute;
      top: 50%;
      #{$position}: 0;
      width: 0;
      height: $size;
      border-left: 1PX solid $color;
      transform: translateY(-50%) scaleX(0.5);
      z-index: 1;
    }
  }
}

@mixin ellipsis($line: 1) {
  @if $line == 1 {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  } @else {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: $line;
    -webkit-box-orient: vertical;
  }
}

$media-breakpoint-map: (
  sm: $breakpoint-sm,
  md: $breakpoint-md,
  lg: $breakpoint-lg,
  xl: $breakpoint-xl
);

@mixin media-breakpoint-up($size) {
  @media (min-width: map-get($media-breakpoint-map, $size)) {
    @content;
  }
}

@mixin media-breakpoint-down($size) {
  @media (max-width: map-get($media-breakpoint-map, $size) - 0.02) {
    @content;
  }
}

@mixin media-breakpoint-only($size) {
  @if $size == xs {
    @media (max-width: $breakpint-sm - 0.02) {
      @content;
    }
  } @else if $size == sm {
    @media (min-width: $breakpoint-sm) and (max-width: $breakpoint-md - 0.02) {
      @content;
    }
  } @else if $size == md {
    @media (min-width: $breakpoint-md) and (max-width: $breakpoint-lg - 0.02) {
      @content;
    }
  } @else if $size == lg {
    @media (min-width: $breakpoint-lg) and (max-width: $breakpoint-xl - 0.02) {
      @content;
    }
  } @else if $size == xl {
    @media (min-width: $breakpoint-xl) {
      @content;
    }
  }
}