body {
  font-family: Helvetica,"Apple SD Gothic Neo",sans-serif;
}

$sqrt_2: 1.41421356237;

// arrow icon SCSS mixin
@mixin iconArrow($direction: 'up', $width: 50px, $height: 50px, $thick: 2px, $color: #222, $display: inline-block, $position: relative){
  position: $position;
  display: $display;
  width: $width;
  height: $height;
    
    &:before {
    content: '';
    position: absolute;
        border-top: $thick solid $color;
        border-left: $thick solid $color;
    
        @if ($direction == 'up' or $direction == 'down') {
        $size: round($width/$sqrt_2 - $thick);
            left: 50%;
            width: $size;
            height: $size;

            @if ($direction == 'up') {
                top: round($width/2);
                -webkit-transform: translate(-50%, -50%) rotate(45deg);
                transform: translate(-50%, -50%) rotate(45deg);
            } @else if ($direction == 'down') {
                bottom: round($width/2);
                -webkit-transform: translate(-50%, 50%) rotate(-135deg);
                transform: translate(-50%, 50%) rotate(-135deg);
            }
        } @else if ($direction == 'left' or $direction == 'right') {
            $size: round($height/$sqrt_2 - $thick);
            top: 50%;
            width: $size;
            height: $size;

            @if ($direction == 'left') {
                left: round($height/2);
                -webkit-transform: translate(-50%, -50%) rotate(-45deg);
                transform: translate(-50%, -50%) rotate(-45deg);
            } @else if ($direction == 'right') {
                right: round($height/2);
                -webkit-transform: translate(50%, -50%) rotate(135deg);
                transform: translate(50%, -50%) rotate(135deg);
            }
        }
    }
  
    &:after {
        content: '';
        position: absolute;
        background-color: $color;

        @if ($direction == 'up' or $direction == 'down') {

            @if ($direction == 'up') {
                top: round($thick/$sqrt_2);
            } @else if ($direction == 'down') {
                bottom: round($thick/$sqrt_2);
            }

            left: 50%;
            width: $thick;
            height: $height - round($thick/$sqrt_2);
            -webkit-transform: translate(-50%, 0);
            transform: translate(-50%, 0);

        } @else if ($direction == 'left' or $direction == 'right') {
            top: 50%;

            @if ($direction == 'left') {
                left: round($thick/$sqrt_2);
            } @else if ($direction == 'right') {
                right: round($thick/$sqrt_2);
            }

            width: $width - round($thick/$sqrt_2);
            height: $thick;
            -webkit-transform: translate(0, -50%);
            transform: translate(0, -50%);
        }
    }
}

.has_bg {
  background-color: pink;
}

// 기본형
.icon_arrow { 
  @include iconArrow(); 
}

// 예시
.icon_arrow_ex1 { 
  @include iconArrow($direction: 'down', $width: 40px, $height: 60px, $thick: 3px, $color: #666, $display: inline-block, $position: relative); 
}

.icon_arrow_ex2 { 
  @include iconArrow($direction: 'left', $width: 100px, $height: 45px, $thick: 10px, $color: #f00, $display: inline-block, $position: relative); 
}

.icon_arrow_ex3 { 
  @include iconArrow($direction: 'right', $width: 30px, $height: 20px, $thick: 2px, $color: #222, $display: inline-block, $position: relative); 
}