.delimiter {
    --rocket-delimiter-border-color: var(--rocket-color-grey-300);
    --rocket-delimiter-content-bg-color: var(--rocket-body-background);

    width: 100%;
    margin: 1.5rem 0;
    border-color: var(--rocket-delimiter-border-color);
    border-style: solid;
    border-width: 0 0 1px;

    &--with-content {
        --rocket-delimiter-border-color: var(--rocket-color-grey-500);

        @include size(100%, 1.5rem);

        position: relative;
        text-align: center;
        border: 0;

        &::before {
            position: absolute;
            top: 50%;
            left: 50%;
            z-index: -1;
            width: calc(100% - 2rem);
            height: 1px;
            text-align: center;
            background-color: var(--rocket-delimiter-border-color);
            transform: translate(-50%, -50%);
            content: "";
        }

        &::after {
            color: var(--rocket-delimiter-border-color);
            text-transform: uppercase;
            background-color: var(--rocket-delimiter-content-bg-color);
            content: attr(data-content);
            padding-inline: $rocket-spacing-size-4;
        }
    }

    &--xs {
        margin: 0.5rem 0;
    }
}