@import './var.scss';

:root {
    --divider-margin: #{$divider-margin};
    --divider-text-color: #{$divider-text-color};
    --divider-font-size: #{$divider-font-size};
    --divider-line-height: #{$divider-line-height};
    --divider-border-color: #{$divider-border-color};
    --divider-border-width: #{$divider-border-width};
    --divider-content-padding: #{$divider-content-padding};
    --divider-content-left-width: #{$divider-content-left-width};
    --divider-content-right-width: #{$divider-content-right-width};
}

.jing-divider {
    display: flex;
    align-items: center;
    margin: var(--divider-margin);
    color: var(--divider-text-color);
    font-size: var(--divider-font-size);
    line-height: var(--divider-line-height);
    border-color: var(--divider-border-color);
    border-style: solid;
    border-width: 0;

    &::before,
    &::after {
        display: block;
        flex: 1;
        height: 1px;
        border-color: inherit;
        border-style: inherit;
        border-width: var(--divider-border-width) 0 0;
    }

    &::before {
        content: '';
    }

    &--hairline {
        &::before,
        &::after {
            transform: scaleY(0.5);
        }
    }

    &--dashed {
        border-style: dashed;
    }

    &--content-center,
    &--content-left,
    &--content-right {
        &::before {
            margin-right: var(--divider-content-padding);
        }
        &::after {
            margin-left: var(--divider-content-padding);
            content: '';
        }
    }

    &--content-left {
        &::before {
            max-width: var(--divider-content-left-width);
        }
    }

    &--content-right {
        &::after {
            max-width: var(--divider-content-right-width);
        }
    }
}