$separator-size: 5px;
$separator-border-style: solid;
$separator-border-color: #bada55;
$separator-space-top: 25px;
$separator-space-bottom: 80px;

.separator {
  margin-top: $separator-space-top;
  margin-bottom: $separator-space-bottom;
  border: 0;
}

.separator--line {
  border: 0;
  border-bottom: $separator-size $separator-border-style $separator-border-color;

  width: 0;
  animation: separator-width 1s ease-out forwards;
}
@keyframes separator-width {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}

@mixin dot {
  $dot-size: 7px;
  content: "";
  background-color: $separator-border-color;
  display: block;
  height: $dot-size;
  width: $dot-size;
  border-radius: 50%;
}
.separator--dots {
  overflow: visible;
  border: 0;
  @include dot();
  position: relative;
  &:before {
     @include dot();
     position: absolute;
     left: -32px;
     animation: dot-move-left 1s ease-out forwards;
  }
    &:after {
     @include dot();
     position: absolute;
     left: 32px;
     animation: dot-move-right 1s ease-out forwards;
  }
}

@keyframes dot-move-right {
  0% {
    left: 0;
  }
  100% {
    left: 32px;
  }
}
@keyframes dot-move-left {
  0% {
    left: 0;
  }
  100% {
    left: -32px;
  }
}


.separator--dotter {
  border: 0;
  border-bottom: $separator-size dotted $separator-border-color;

  width: 0;
  animation: separator-width 1.5s ease-out forwards;
}