// ------------------------------
//　ユーティリティ
// ------------------------------
@mixin visually-hidden(){
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  border: 0;
  clip: rect(0 0 0 0);
}

@mixin font-size($sizeValue){
  font-size: $sizeValue + px;
  // font-size: ($sizeValue / 10) * 1rem;
}

@mixin opacity($opacity){
  opacity: $opacity;
}

@mixin box-sizing($boxmodel){
  box-sizing: $boxmodel;
}

// ------------------------------
// clearfix
// ------------------------------
@mixin clearfix(){
  &:before,
  &:after {
    display: table;
    content: " ";
  }
  &:after {
    clear: both;
  }
}

// ------------------------------
//　ボーダー
// ------------------------------
@mixin dotted($position: left,$color:rgba(#000, 1.0), $stripe: 1, $spacing: 4, $width:1) {
  border: none;
  @if $position == left or $position == right {
    background: -webkit-linear-gradient(top, $color 0%, $color $stripe/($stripe+$spacing)*100%, transparent $stripe/($stripe+$spacing)*100%, transparent 100%);
    background: linear-gradient(to bottom, $color 0%, $color $stripe/($stripe+$spacing)*100%, transparent $stripe/($stripe+$spacing)*100%, transparent 100%);
    background-repeat: repeat-y;
    background-size: ($width)*1px ($stripe+$spacing)*1px;
    background-position: $position ($stripe)*1px;
  } @else if $position == top or $position == bottom {
    background: -webkit-linear-gradient(right, $color 0%, $color $stripe/($stripe+$spacing)*100%, transparent $stripe/($stripe+$spacing)*100%, transparent 100%);
    background: linear-gradient(to left, $color 0%, $color $stripe/($stripe+$spacing)*100%, transparent $stripe/($stripe+$spacing)*100%, transparent 100%);
    background-repeat: repeat-x;
    background-size: ($stripe+$spacing)*1px ($width)*1px;
    background-position: ($stripe)*1px $position;
  }
}

// ------------------------------
//　タイポグラフィ
// ------------------------------
@mixin heading-large($entry,$decoration) {
  @if $entry == true {
    margin: 0 $grid-space $entry-element-margin-bottom-md $grid-space;
  } @else {
    margin: 0 0 $entry-element-margin-bottom-md 0;
  }
  color: #333;
  @if $decoration == true {
    padding: 5px 10px;
    @include font-size(22);
    @include dotted($position: bottom,$color:$secondary-color, $stripe: 1, $spacing: 5, $width:1);
    border-left: 8px solid $primary-color;
  } @else {
    @include font-size(26);
  }
}

@mixin heading-medium($entry,$decoration) {
  @if $entry == true {
    margin: 0 $grid-space 20px $grid-space;
  } @else {
    margin: 0 0 20px 0;
  }
  @include font-size(20);
  color: #333;
  @if $decoration == true {
    position: relative;
    @include font-size(20);
    background: -webkit-linear-gradient(top, transparent 70%, $primary-color 0);
    background: linear-gradient(transparent 70%, $primary-color 0);
  }
}

@mixin heading-small($entry,$decoration) {
  @if $entry == true {
    margin: 0 $grid-space 20px $grid-space;
  } @else {
    margin: 0 0 20px 0;
  }
  @include font-size(18);
}

// マーカー
@mixin marker($color: $primary-color, $height: 45%){
  position: relative;
  font-weight: normal;
  font-style: normal;
  background: linear-gradient(transparent $height, $color 0);
}



// ------------------------------
//　テキストの切り捨て
// ------------------------------
@mixin truncation(){
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}


// ------------------------------
//　画像
// ------------------------------
//レスポンシブイメージ
@mixin responsive-image() {
  display: block;
  max-width: 100%;
  height:auto;
}


// ------------------------------
// 三角形
// ------------------------------
/// @param $direction - Triangle direction, either `top`, `right`, `bottom` or `left`
/// @param $color [currentcolor] - Triangle color
/// @param $width [10px] - Triangle width
/// @param $height [10px] - Triangle height
@mixin triangle ($direction: bottom, $color:currentcolor, $width:10px, $height:10px) {
  display: inline-block;
  width: 0px;
  height: 0px;
  content: "";

  @if $direction == top {
    border-top: 0;
    border-left: $width solid transparent;
    border-right: $width solid transparent;
    border-bottom: $height solid $color;
  } @else if $direction == right {
    border-right: 0;
    border-top: $width solid transparent;
    border-bottom: $width solid transparent;
    border-left: $height solid $color;
  } @else if $direction == bottom {
    border-bottom: 0;
    border-left: $width solid transparent;
    border-right: $width solid transparent;
    border-top: $height solid $color;
  } @else {
    border-left: 0;
    border-top: $width solid transparent;
    border-bottom: $width solid transparent;
    border-right: $height solid $color;
  }

}
