.hr
  +clearfix
  background-color: $color-black-300
  border: $zero
  height: 1px
  width: 100%

  &.hr--is-large
    height: 2px

  &.hr--is-dashed
    background-color: inherit !important // sass-lint:disable-line no-important
    border-top: dashed 1px $color-black-300  !important // sass-lint:disable-line no-important
    height: $zero !important // sass-lint:disable-line no-important

    &.hr--is-large
      border-top: dashed 2px $color-black-300 !important // sass-lint:disable-line no-important
