@import '../../styles/variables.less';
@import '../../styles/themes/@{so-theme}.less';

@divider-prefix: ~"@{so-prefix}-divider";

.@{divider-prefix} {
    margin: 0;
    padding: 0;
    font-size: @font-size-base;
    border-top: 1px solid @divider-color;

    &-vertical {
        position: relative;
        top: -0.06em;
        display: inline-block;
        height: 0.9em;
        margin: 0 8px;
        vertical-align: middle;
        border-top: 0;
        border-left: @divider-width-base solid @divider-color;
    }

    &-horizontal {
        display: flex;
        clear: both;
        width: 100%;
        min-width: 100%;
        margin: 24px 0;
    }

    &-horizontal&-with-text {
        display: flex;
        margin: 16px 0;
        color: @text-color;
        white-space: nowrap;
        text-align: center;
        border-top: 0;
        border-top-color: @divider-color;

        &::before,
        &::after {
            position: relative;
            top: 50%;
            width: 50%;
            border-top: @divider-width-base solid transparent;
            // Chrome not accept `inherit` in `border-top`
            border-top-color: inherit;
            border-bottom: 0;
            transform: translateY(50%);
            content: '';
        }
    }

    &-horizontal&-with-text-left {
        &::before {
            top: 50%;
            width: @divider-orientation-margin;
        }

        &::after {
            top: 50%;
            width: 100% - @divider-orientation-margin;
        }
    }

    &-horizontal&-with-text-right {
        &::before {
            top: 50%;
            width: 100% - @divider-orientation-margin;
        }

        &::after {
            top: 50%;
            width: @divider-orientation-margin;
        }
    }

    &-inner-text {
        display: inline-block;
        padding: 0 @divider-text-padding;
    }

}