// Applies a horizontal rule to the left and right of text
// You can change the color of the rule by passing a border color class, like .border-green
// e.g. ----------- Your Text -----------

.text-hr {
  --text-hr-border-color: var(--border-color);
  --text-hr-border-width: 0.125rem; // 2px
  --text-hr-border-style: solid;

  border-color: var(--text-hr-border-color);
  flex: 0 1 auto;

  &,
  &::before,
  &::after {
    align-self: center;
    display: flex;
  }

  &::before,
  &::after {
    border-top: var(--text-hr-border-width) var(--text-hr-border-style);
    border-color: inherit;
    content: '';
    flex-basis: 0;
    flex-grow: 1;
  }

  &:not(:empty)::before {
    margin-right: 1em;
  }

  &:not(:empty)::after {
    margin-left: 1em;
  }
}

// Rule only applied to right of text
// Text ----

.text-hr-right {
  &::before {
    content: unset;
  }
}

// Rule only applied to left of text
// ---- Text

.text-hr-left {
  &::after {
    content: unset;
  }
}