hr {
  @include hr;

  &.hr--primary {
    background: linear-gradient(to right, rgba($page-bg, 0) 0%, $primary 20%, $primary 80%, rgba($page-bg, 0) 100%);
  }

  &.hr--secondary {
    background: linear-gradient(to right, rgba($page-bg, 0) 0%, $secondary 20%, $secondary 80%, rgba($page-bg, 0) 100%);
  }

  &.hr--tertiary {
    background: linear-gradient(to right, rgba($page-bg, 0) 0%, $tertiary 20%, $tertiary 80%, rgba($page-bg, 0) 100%);
  }

  //&.hr--rainbow {
  //  background: linear-gradient(to right, rgba($page-bg, 0) 0%, $primary 20%, $secondary 80%, rgba($page-bg, 0) 100%);
  //}
}