.sg-divider {
    @include sgDivider();

    &__short {
        @include sgDivider();
        width: $short;
    }

    &__vertical {
        width: 0.25rem;
        height: $short;
        background-color: $sgSecondary;
    }

    &__gradient {
        display: block;
        position: relative;

        &:after {
            position: absolute;
            left: 0;
            bottom: 0;
            content: '';
            height: 7px;
            width: 100%;
            background: linear-gradient(to top,transparent,$sgBackground1);
        }

        @include media-breakpoint-between(xs, sm) {

            &.-no-gradient {
                &:after {
                    background: transparent;
                }
            }
        }
    }

    &__text {
        position: relative;
        @include sgDivider();
        text-align: center;

        &--content {
            font-weight: $font-weight-bold;
            text-transform: uppercase;
            padding-left: 10px;
            padding-right: 10px;
            top: -12px;
            background-color: $white;
            font-size: 90%;
            position: absolute;
            left: 50%;
            transform: translate(-50%, 0);
        }
    }
}