hr {
  _.current_selector = 'color'

  add-extends('width-80')
  border: none
  border-bottom: $Borders.size $Borders.type $Borders.default_color

  for $color-name, $color-value in $Colors.all {
    add-value($color-name, 'color-border-' + $color-name)
  }
}

+add-selector('bg') {
  _.current_selector = 'bg'

  for $color-name, $color-value in $Colors.all {
    add-value($color-name, 'color-background-' + $color-name)
  }
}

+add-selector('responsive', '') {
  width: 100%
  height: auto;
}

+add-selector('shadow') {
  _.current_selector = 'shadow'
  $color = $Colors.theme.dark

  shadow-values()

  for $i in 0..$Core.logic_max {
    +add-value($i) {
      shadow-values($i)
    }
  }
}