@mixin close($width, $thick, $color, $radius: 0) {
  $sqrt2: 1.41;
  display: inline-block;
  position: relative;
  z-index: 1;
  width: $width;
  height: $width;
   &:before,
   &:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 10;
    width: $width * $sqrt2;
    height: $thick;
    background: $color;
    border-radius: $radius;
  }
  &:before {
    transform: translate(-50%, -50%) rotate(45deg);
  }
   &:after {
    transform: translate(-50%, -50%) rotate(-45deg);
  }
}

.icon-close {
  @include close(30px, 4px, #000, 3px);
  background: rgba(red, 0.3);
}
.icon-close2 {
  @include close(80px, 3px, #f00, 2px);  
  background: rgba(red, 0.3);
}
.icon-close3 {
  @include close(50px, 1px, #00f);
  background: rgba(red, 0.3);
}