.hr-fade {
  height: 1px;
  width: 100%;

  @include themify($themes) {
    color: themed('hr-color');
    background-image: linear-gradient(
      90deg,
      transparent,
      themed('hr-color') 50%,
      transparent 100%
    );
  }  
}

.hr-slash {
  width: 100%;
  height: 7px;
  background-size: 10px 10px;
    
  @include themify($themes) {
    color: themed('hr-color');
    background-image: linear-gradient(-45deg,
      transparent,
      transparent 25%,
      currentColor 25%,
      currentColor 50%,
      transparent 50%,
      transparent 75%,
      currentColor 75%
    );    
  } 
}

.hr-dots {
  @include themify($themes) {
    $color: themed('hr-color');
    color: $color;
    width: 100%;
    border-width: 0 0 7px;
    border-style: solid;
    border-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 1" width="8" height="4"><circle fill="#{$color}" cx="1" cy="0.5" r="0.5"/></svg>') 0 0 100% repeat;   
  }
}