Divider

$divider__height                  : 8px !default;
$divider__height--before          : 100% !default;
$divider__width--before           : 30% !default;
$divider__1--margin-bottom        : 1rem !default;
$divider__2--margin-bottom        : 2rem !default;
$divider__3--margin-bottom        : 3rem !default;
$divider__4--margin-bottom        : 4rem !default;
$divider__5--margin-bottom        : 5rem !default;
$divider__6--margin-bottom        : 6rem !default;
$divider__7--margin-bottom        : 7rem !default;
$divider__8--margin-bottom        : 8rem !default;
$divider__9--margin-bottom        : 9rem !default;
$divider__10--margin-bottom       : 10rem !default;
$divider__background-color        : transparent !default;
$divider__background-color--before: transparent !default;

.divider {
    display: flex;
    height: $divider__height;
    background-color: $divider__background-color;
    &::before {
        content: '';
        width: $divider__width--before;
        height: $divider__height--before;
        background-color: $divider__background-color--before;
    }
    &--1 {
        margin-bottom: $divider__1--margin-bottom;
    }
    &--2 {
        margin-bottom: $divider__2--margin-bottom;
    }
    &--3 {
        margin-bottom: $divider__3--margin-bottom;
    }
    &--4 {
        margin-bottom: $divider__4--margin-bottom;
    }
    &--5 {
        margin-bottom: $divider__5--margin-bottom;
    }
    &--6 {
        margin-bottom: $divider__6--margin-bottom;
    }
    &--7 {
        margin-bottom: $divider__7--margin-bottom;
    }
    &--8 {
        margin-bottom: $divider__8--margin-bottom;
    }
    &--9 {
        margin-bottom: $divider__9--margin-bottom;
    }
    &--10 {
        margin-bottom: $divider__10--margin-bottom;
    }
}