@mixin clearfix() {
  &::after {
    display: block;
    content: "";
    clear: both;
  }
}

@mixin color2css($map) {
  @each $key, $color in $map {
    .#{$key}_txt {
      color: $color;
    }
    .#{$key}_bg {
      background-color: $color;
    }
  }
}

@mixin user-select($p) {
  user-select: $p;
}

@mixin angle3($pos,$width,$color) {
  $angle3-h:border-top,border-bottom;
  $angle3-v:border-left,border-right;
  $angle3-map: (
    'top':('pos':'bottom','other':$angle3-v),
    'bottom':('pos':'top','other':$angle3-v),
    'left':('pos':'right','other':$angle3-h),
    'right':('pos':'left','other':$angle3-h)
  ) !default;

  display: inline-block;
  width: $width;
  height: $width;
  overflow: hidden;

  $target-map:map_get($angle3-map,$pos);
  border-#{map_get($target-map,'pos')}: $width solid $color;
  @each $value in map_get($target-map,'other') {
    #{$value}:$width solid transparent;
  }
}