.sp-divider {
    display: table;
    white-space: nowrap;
    text-align: center;
    background: 0 0;
    width: 100%;
    margin: 24px 0;

    &.__text {

        &::after,
        &::before {
            transform: translateY(50%);
        }
    }

    &-text {
        padding: 0 16px;

    }

    &.--left {
        &::after {
            width: 90%;
        }

        &::before {
            width: 10%;
        }
    }

    &.--right {
        &::after {
            width: 10%;
        }

        &::before {
            width: 90%;
        }
    }

    &.--dashed {

        &::after,
        &::before {
            border-top-style: dashed;
        }
    }

    &.--vertical {
        margin: 0 8px;
        display: inline-block;
        height: 0.9em;
        width: 1px;
        vertical-align: middle;
        position: relative;
        top: -0.06em;
        background: #e8eaec;
    }

    &.--plain {
        color: #55585e !important;
        font-weight: 400 !important;
        font-size: 14px !important;
    }

    &::after {
        width: 50%;
        top: 50%;
        left: 0;
        content: "";
        display: table-cell;
        position: relative;
        border-top: 1px solid #e8eaec;
        transform: translateY(-50%);
    }

    &::before {
        width: 50%;
        top: 50%;
        right: 0;
        content: "";
        display: table-cell;
        position: relative;
        border-top: 1px solid #e8eaec;
        transform: translateY(-50%);
    }


}