hr,
.divider {
    --divider-width: 100%;
    --divider-margin: 1.5rem;
    --divider-gap: 1rem;
    --divider-border-color: var(--color-grey);
    --divider-text-color: var(--color-grey-alt);
}

hr,
.divider:empty {
    display: inline-block;
    border-color: var(--divider-border-color);
    border-width: 0;
    border-style: var(--border-style);
    border-top-width: var(--border-width);
    margin: var(--divider-margin) 0;
    width: var(--divider-width);
}

.divider:not(:empty) {
    display: grid;
    grid-template-columns: 1fr max-content 1fr;
    place-content: center;
    place-items: center;
    color: var(--divider-text-color);
    gap: var(--divider-gap);
    width: 100%;
}

.divider.text-left:not(:empty) {
    grid-template-columns: max-content 1fr;
}

.divider.text-right:not(:empty) {
    grid-template-columns: 1fr max-content;
}

.divider:not(:empty):not(.text-left)::before,
.divider:not(:empty):not(.text-right)::after {
    content: '';
    display: block;
    border-color: var(--divider-border-color);
    border-width: 0;
    border-style: var(--border-style);
    border-top-width: var(--border-width);
    width: var(--divider-width);
}

.divider:not(:empty):not(.text-left)::before {
    justify-self: end;
}

.divider:not(:empty):not(.text-right)::after {
    justify-self: start;
}


/* 
    Divider width 
*/
.divider-short {
    --divider-width: 6rem;
}

.divider-medium {
    --divider-width: 10rem;
}

.divider-long {
    --divider-width: 14rem;
}

.divider-full {
    --divider-width: 100%;
}


/* 
    Divider margins 
*/
.divider-compact {
    --divider-margin: 1rem;
}

.divider-comfortable {
    --divider-margin: 2rem;
}