//-------------------------------------------------------------mixin-media-------//
// transition @include transition(all, 0.3, ease);
@mixin transition($elem: all, $i: 0.3, $type: ease) {
  transition: $elem #{$i}s $type;
}

// media query @include screen(desktop) { color: red; }
$desktopMin: map-get($screenSize, desktop) + 1;
$tabletMin: map-get($screenSize, tablet) + 1;
$mobileMin: map-get($screenSize, mobile) + 1;
$xsMobileMin: map-get($screenSize, xsMobile) + 1;

@mixin screen($size) {
  @if $size==desktop {
    @media screen and (max-width: #{map-get($screenSize, desktop)}) {
      @content;
    }
  }

  @else if $size==desktopMin {
    @media screen and (min-width: #{$desktopMin}) {
      @content;
    }
  }

  @else if $size==tablet {
    @media screen and (max-width: #{map-get($screenSize, tablet)}) {
      @content;
    }
  }

  @else if $size==tabletMin {
    @media screen and (min-width: #{$tabletMin}) {
      @content;
    }
  }

  @else if $size==mobile {
    @media screen and (max-width: #{map-get($screenSize, mobile)}) {
      @content;
    }
  }

  @else if $size==mobileMin {
    @media screen and (min-width: #{$mobileMin}) {
      @content;
    }
  }

  @else if $size==xsMobile {
    @media screen and (max-width: #{map-get($screenSize, xsMobile)}) {
      @content;
    }
  }

  @else if $size==xsMobileMin {
    @media screen and (min-width: #{$xsMobileMin}) {
      @content;
    }
  }
}

//最大寬度 @include screenMax(1440) { color: red; }
@mixin screenMax($sizeWidth) {
  $sizeWidthUse: '(max-width: #{$sizeWidth}px)';

  @media screen and #{$sizeWidthUse} {
    @content;
  }
}

//最小寬度 @include screenMin(1440) { color: red; }
@mixin screenMin($sizeWidth) {
  $sizeWidthUse: '(min-width: #{$sizeWidth}px)';

  @media screen and #{$sizeWidthUse} {
    @content;
  }
}

//px轉rem 使用方式 Rem(px) px直接輸入數字即可
@function Rem($n: $mainFontSize) {
  @return $n / $mainFontSize * 1rem;
}

@mixin itemWidth($gap, $count) {
  width: calc((100% - #{$gap}px * (#{$count} - 1)) / #{$count});
}