$divider-background-color: $grey-lighter !default
$divider-font-size: $size-7 !default
$divider-color: $grey-light !default

.is-divider, .is-divider-vertical
    display: block
    position: relative

.is-divider[data-content]::after, .is-divider-vertical[data-content]::after
    background: $divider-background-color
    color: $divider-color
    content: attr(data-content)
    display: inline-block
    font-size: $divider-font-size
    padding: 0 .8rem
    -webkit-transform: translateY(-1rem)
    -ms-transform: translateY(-1rem)
    transform: translateY(-1rem)
    text-align: center
    @each $name, $pair in mergeColorMaps($colors, $shades)
        $color: nth($pair, 1)
        $color-invert: nth($pair, 2)
        .is-#{$name}.is-divider[data-content]::after, .is-#{$name}.is-divider-vertical[data-content]::after
            background: $color
            color: darken($color-invert, 25%)

.is-divider
    border-top: .1rem solid $divider-background-color
    height: .1rem
    margin: 2rem 0
    text-align: center

.is-divider-vertical
    display: block
    padding: 2rem
    position: relative
    &::before
        border-left: .1rem solid $divider-background-color
        bottom: 1rem
        content: ""
        display: block
        left: 50%
        position: absolute
        top: 1rem
        -webkit-transform: translateX(-50%)
        -ms-transform: translateX(-50%)
        transform: translateX(-50%)
    &[data-content]::after
        left: 50%
        padding: .4rem 0
        position: relative
        top: 50%
        -webkit-transform: translate(-50%, -50%)
        -ms-transform: translate(-50%, -50%)
        transform: translate(-50%, -50%)
