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

$sqrt_2: 1.41421356237;

// X icon SCSS mixin
@mixin iconCancel($size: 21px, $thick: 2px, $color: #000, $padding: 0, $display: inline-block, $position: relative) {
  position: $position;
  display: $display;
  width: $size + $padding*2;
  height: $size + $padding*2;

  &:before, &:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: round($size*$sqrt_2 - $thick);
    height: $thick;
    background-color: $color;
  }

  &:before {
    -webkit-transform: translate(-50%, -50%) rotate(45deg);
    transform: translate(-50%, -50%) rotate(45deg);
  }

  &:after {
    -webkit-transform: translate(-50%, -50%) rotate(135deg);
    transform: translate(-50%, -50%) rotate(135deg);
  }
}

.has_bg {
  background-color: pink;
}

// 기본형
.icon_cancel { 
  @include iconCancel(); 
}

// 예시
.icon_cancel_ex1 { 
  @include iconCancel($size: 50px, $thick: 10px, $color: #666, $padding: 0, $display: inline-block, $position: relative); 
}

.icon_cancel_ex2 { 
  @include iconCancel($size: 30px, $thick: 5px, $color: #000, $padding: 10px, $display: inline-block, $position: relative); 
}

.icon_cancel_ex3 { 
  @include iconCancel($size: 20px, $thick: 2px, $color: #444, $padding: 15px, $display: inline-block, $position: relative); 
  
  background-color: #ddd;
  border-radius: 50%;
}