.separator {
    width: 100%;
    border: 0;
    display: flex;
    overflow: visible;
}

.separator::after {
    content: '';
    display: block;
    height: 0;
    width: 100%;
    border-width: 1px 0 0;
    border-style: none;
    border-color: var(--border-color);
}

/* line styles */
.separator--solid::after {
    border-style: solid;
}

.separator--dashed::after {
    border-style: dashed;
}

.separator--dotted::after {
    border-style: dotted;
}

.separator--gradient::after {
    height: 1px;
    background-image: linear-gradient(to right, transparent, var(--border-color), transparent);
}

.separator--shadow::after {
    height: 12px;
    box-shadow: inset 0 12px 12px -12px var(--border-color);
}

.separator--gap-only::after {
    content: unset;
    display: none;
}

/* margin/gap styles */
.separator--small {
    height: 2rem;
}

.separator--large {
    height: 4rem;
}

/* separator position */
.separator--top {
    align-items: flex-start;
}

.separator--center {
    align-items: flex-start;
}

.separator--bottom {
    align-items: flex-start;
}