@mixin _icon_plus($color){
  color: $color;
  position: absolute;
  margin-left: 3px;
  margin-top: 10px;

  &:before {
    content: '';
    position: absolute;
    width: 15px;
    height: 1px;
    background-color: currentColor;
  }
  &:after {
    content: '';
    position: absolute;
    width: 15px;
    height: 1px;
    background-color: currentColor;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
  }
}

@mixin _icon_close($color){
    color: $color;
    position: absolute;
    margin-top: 0;
    margin-left: 0;
    width: 21px;
    height: 21px;
  &:before {
    content: '';
    position: absolute;
    top: 10px;
    width: 21px;
    height: 1px;
    background-color: currentColor;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }
  &:after {
    content: '';
    position: absolute;
    top: 10px;
    width: 21px;
    height: 1px;
    background-color: currentColor;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
  }
}

.icon {
  &.plus {
    @include _icon_plus(#000);
  }
  &.close{
    @include _icon_close(#000)
  }
}