.gl.divider
  align-items center
  display flex
  font-weight 600
  justify-content center
  margin-bottom $indent
  margin-top @margin-bottom
  text-transform uppercase
  width 100%
  overflow hidden

  &::before
  &::after
    content ''
    height 1px
    background hsla($color-text, .6)
    width 50%
    margin-left 6px
    margin-right @margin-left

  &:empty

    &::before
    &::after
      margin-left 0
      margin-right @margin-left

  &:not(:empty)

    > *
      flex-shrink 0

  > .chevron
    height 10px
    left 50%
    position absolute
    top 50%
    transform translate(-50%, -50%)
    width @height

    &::before
      border-style solid
      border-width 1px 1px 0 0
      content ''
      display inline-block
      height @height
      transform rotate(-45deg)
      vertical-align top
      width @height

    &.bottom

      &::before
        top 0
        transform rotate(135deg)

  &.inverted

    &::before
    &::after
      background hsla(#fff, .15)

  &.primary
    $color = $color-primary-lighter

    &::before
    &::after
      background $color

    > .chevron
      color $color

  &.light

    &::before
    &::after
      background $color-pale

  &.indented
    margin-bottom $indent * 2
    margin-top @margin-bottom

    &[class*='very indented']
      margin-bottom $indent * 4
      margin-top @margin-bottom

  &.tight
    margin-bottom ($indent / 2)
    margin-top @margin-bottom

  &.fitted
    margin-bottom 0
    margin-top @margin-bottom

  &.hidden
    opacity 0

  &.light

    &::before
    &::after
      background $color-grey-lighter