@charset "utf-8";
@import (optional, reference) "var.less";
/*Divider*/
AX-LINE {
    --_size-line: 1px;
    --_dir-start: right;
    --_dir-end: left;
    --_color-start: var(--_c-text-bd);
    --_color-center: var(--_c-ignore);
    --_offset-start: 2em;
    --_break: 0px;
    display: block;
    clear: both;
    [rep=wrap]{
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        overflow: hidden;
    }
    [rep=start],
    [rep=end] {
        height: var(--_size-line);
        background-color: var(--_color-start);
        flex: auto;
    }
    [rep=label] {
        color: var(--_color-center);
        margin: auto var(--_m);
    }
    &:where([align=start]:has([rep=label])) [rep=start],
    &:where([align=end]:has([rep=label])) [rep=end] {
        flex: none;
    }
    &:where([align=start]:not([v]):has([rep=label])) [rep=start],
    &:where([align=end]:not([v]):has([rep=label])) [rep=end] {
        width: var(--_offset-start);
    }
    &[type=dashed] [rep=start] {
        background: linear-gradient(to var(--_dir-start), var(--_color-start) 0%, var(--_color-start) 50%, transparent 50%, transparent 100%);
        background-position: left center;
    }
    &[type=dashed] [rep=end] {
        background: linear-gradient(to var(--_dir-end), var(--_color-start) 0%, var(--_color-start) 50%, transparent 50%, transparent 100%);
        background-position: right center;
    }
    &[type=dashed] [rep=start],
    &[type=dashed] [rep=end] {
        background-size: calc(var(--_size-line)*10) var(--_size-line);
        background-repeat: repeat-x;
    }
    &[type=slash] [rep=start],
    &[type=slash] [rep=end] {
        background: linear-gradient(45deg, var(--_color-start) 0, var(--_color-start) 25%, transparent 25%, transparent 50%, var(--_color-start) 50%, var(--_color-start) 75%, transparent 75%, transparent);
        background-size: .6rem .6rem;
    }
    &[size=sm] [rep=start],
    &[size=sm] [rep=end] {
        --_size-line: 2px;
    }
    &[size=md] {
        font-size: var(--_sz-title);
    }
    &[size=md] [rep=start],
    &[size=md] [rep=end] {
        --_size-line: 4px;
    }
    &[size=lg] {
        font-size: var(--_fs-lg);
    }
    &[size=lg] [rep=start],
    &[size=lg] [rep=end] {
        --_size-line: 8px;
    }
    &[theme=prim] {
        --_color-start: var(--_c-prim-bd);
        --_color-center: var(--_c-prim);
    }
    &[theme=error] {
        --_color-start: var(--_c-error-bd);
        --_color-center: var(--_c-error);
    }
    &[theme=succ] {
        --_color-start: var(--_c-succ-bd);
        --_color-center: var(--_c-succ);
    }
    &[theme=info] {
        --_color-start: var(--_c-info-bd);
        --_color-center: var(--_c-info);
    }
    &[theme=warn] {
        --_color-start: var(--_c-warn-bd);
        --_color-center: var(--_c-warn);
    }
    &[theme=issue] {
        --_color-start: var(--_c-issue-bd);
        --_color-center: var(--_c-issue);
    }
    &[theme=text] {
        --_color-start: var(--_c-text-bd);
        --_color-center: var(--_c-text);
    }
    &[v] {
        --_dir-start: bottom;
        --_dir-end: top;
        width: var(--_size-line);
        height: 100%;
        [rep=wrap]{
            width: inherit;
            height:inherit;
            flex-direction: column;
        }
        &:has([rep=label]) {
            width: var(--_sz-body);
        }
        [rep=label] {
            writing-mode: vertical-rl;
            margin: var(--_m) auto;
        }
        [rep=start],
        [rep=end] {
            width: var(--_size-line);
            height: auto;
        }
        &:where([align=start]:has([rep=label])) [rep=start],
        &:where([align=end]:has([rep=label])) [rep=end] {
            height: var(--_offset-start);
        }
        &[type=dashed] [rep=start],
        &[type=dashed] [rep=end] {
            background-size: var(--_size-line) calc(var(--_size-line)*10);
            background-repeat: repeat-y;
        }
    }
    &:where(:not([v])) {
        margin-top: var(--_break);
        margin-bottom: var(--_break);
    }
    &:where([v]) {
        margin-left: var(--_break);
        margin-right: var(--_break);
    }
    &[break=xxs] {
        --_break: var(--_sz-min);
    }
    &[break=xs] {
        --_break: var(--_sz-space);
    }
    &[break=sm] {
        --_break: var(--_sz-font);
    }
    &[break=md] {
        --_break: var(--_sz-list);
    }
    &[break=lg] {
        --_break: var(--_sz-body);
    }
    &[break=xl] {
        --_break: var(--_sz-input);
    }
    &[break=xxl] {
        --_break: var(--_sz-header);
    }
}
