/**
* Mixins to lines.
*/

@mixin dotted-line-horizontal($color: $color-black, $position: bottom) {
  background-image: linear-gradient(
    to right,
    $color 30%,
    rgb(255 255 255 / 0%) 10%
  );
  background-position: $position;
  background-size: 4px 1px;
  background-repeat: repeat-x;
  background-color: transparent;
}

@mixin dotted-line-vertical($color: $color-black, $position: left) {
  background-image: linear-gradient(
    to bottom,
    $color 1%,
    rgb(255 255 255 / 0%) 10%
  );
  background-position: $position;
  background-size: 1px 10px;
  background-repeat: repeat-y;
  background-color: transparent;
}