@charset "utf-8";
@import (optional, reference) "var.less";
/*Range input*/
AX-RANGE {
    --_range-sz-handle: 1.6rem;
    --_range-sz-track: .3rem;
    display: inline-flex;
    flex-direction: column;
    width: var(--_w-input);
    box-sizing: border-box;
    vertical-align: middle;
    position: relative;
    input{
        position: fixed;
        left:-100000px;
    }
    [role=wrap] {
        user-select: none;
        font-size: var(--_sz-ignore);
        height: var(--_sz-input);
        display: flex;
        flex: auto;
        align-items: center;
        justify-content: center;
    }
    [role=body] {
        position: relative;
        flex: auto;
    }
    [role=track] {
        height: var(--_range-sz-track);
        border-radius: var(--_range-sz-track);
        position: relative;
        z-index: 1;
        [role=base] {
            background-color: var(--_c-text-bd);
            width: 100%;
            height: inherit;
            border-radius: inherit;
            transition: background-color var(--_dur-1) ease-out;
            position: relative;
            &:before {
                content: '';
                width: 100%;
                height: calc(var(--_range-sz-track)*5);
                position: absolute;
                left: 0;
                top: calc(-1*var(--_range-sz-track)*2);
            }
        }
        [role=thumb] {
            width: 0;
            height: inherit;
            border-radius: inherit;
            background-color: var(--_c-prim);
            position: absolute;
            left: 0;
            top: 0;
            &:before {
                content: '';
                width: 100%;
                height: calc(var(--_range-sz-track)*5);
                position: absolute;
                left: 0;
                top: calc(-1*var(--_range-sz-track)*2);
            }
        }
    }
    [role=increase],
    [role=decrease] {
        color: #fff;
        background-color: var(--_c-prim);
        font-size: var(--_sz-space);
        font-family: var(--_ff-icon);
        height: var(--_sz-font);
        aspect-ratio: 1/1;
        border-radius: 100%;
        cursor: pointer;
        .v3-flex-center(inline-flex);
    }
    [role=increase] {
        margin-left: var(--_sz-space);
    }
    [role=decrease] {
        margin-right:var(--_sz-space);
    }
    [role=result] {
        margin-left:var(--_sz-space);
        min-width: var(--_sz-body);
        text-align: right;
    }
    [role=handles] {
        >* {
            width: var(--_range-sz-handle);
            height: var(--_range-sz-handle);
            border-radius: var(--_range-sz-handle);
            border: 2px solid var(--_c-prim);
            background-color: #fff;
            box-shadow: none;
            transition: box-shadow var(--_dur-1) linear, background-color var(--_dur-1) linear, border-color var(--_dur-1) linear;
            box-sizing: border-box;
            position: absolute;
            top: calc(-1*var(--_range-sz-handle)/2 + var(--_range-sz-track)/2);
            z-index: 1;
        }
        >:not([disabled]):hover {
            cursor: col-resize;
            box-shadow: 0 0 0 var(--_range-sz-track) var(--_c-prim-sd);
        }
        >[role=from] {
            left: 0;
        }
        >[role=to] {
            left: calc(100% - var(--_range-sz-handle));
            z-index: 2;
        }
        >[role=single] {
            left: 0;
        }
        >[active] {
            z-index: 3;
        }
    }
    [role=bubbles] {
        >* {
            font-size: var(--_sz-ignore);
            line-height: var(--_sz-brief);
            padding: 0 .5rem;
            border-radius: var(--_r);
            position: absolute;
            top: calc(-1*var(--_sz-brief) - (var(--_range-sz-handle) - var(--_range-sz-track))/2 - .6rem);
            z-index: 1;
             visibility: hidden;
        }
        [role=from],
        [role=to],
        [role=single],
        [role=merge] {
            color: #fff;
            background-color: var(--_c-prim);
            transform: translateX(calc(-50% + var(--_range-sz-handle)/2));
            &:before {
                content: "";
                display: block;
                width: 0;
                height: 0;
                margin-left: -3px;
                overflow: hidden;
                border: 3px solid transparent;
                border-top-color: var(--_c-prim);
                position: absolute;
                bottom: -6px;
                left: 50%;
            }
        }
        [role=from] {}
        [role=to] {
            z-index: 2;
        }
        [role=single] {}
        [role=merge] {
            visibility: hidden;
        }
        [role=min],
        [role=max] {
            color: var(--_c-text);
            background-color: var(--_c-text-bg);
        }
        [role=min] {
            left: 0;
        }
        [role=max] {
            right: 0;
        }
        [active] {
            z-index: 3;
        }
    }
    &[limitshow] [role=bubbles]{
        [role=max],
        [role=min] {
           visibility: visible;
        }
    }
    &[valshow] [role=bubbles]{
        [role=from],
        [role=to],
        [role=single] {
           visibility: visible;
        }
    }
    [role=ruler] {
        --_ruler-major: .8rem;
        --_ruler-minor: .4rem;
        width: calc(100% - var(--_range-sz-handle));
        margin: 0 calc(var(--_range-sz-handle)/2);
        position: absolute;
        left: 0;
        top: var(--_range-sz-track);
        ul {
            position: relative;
            padding-inline-start: 0;
        }
        li {
            position: absolute;
            top: 0;
            &:before {
                content: '';
                width: 1px;
                height: var(--_ruler-major);
                background-color: var(--_c-text-fc);
                border-radius: 0;
                overflow: hidden;
                position: absolute;
                top: 0;
                left: 0;
            }
            &:not([data-content]):before {
                height: var(--_ruler-minor);
            }
            &:after {
                content: attr(data-content);
                color: var(--_c-ignore);
                font-size: var(--_sz-ignore);
                line-height: var(--_sz-ignore);
                white-space: nowrap;
                text-align: center;
                position: absolute;
                top: calc(var(--_ruler-major) + .2rem);
                left: 0;
                transform: translateX(-50%);
            }
        }
        div {
            height: .2rem;
            background-color: var(--_c-text-fc);
            position: absolute;
            top: calc(var(--_ruler-minor) - .2rem);
        }
    }
    &:not([disabled])[multiple] [role=thumb]:hover {
        cursor: w-resize;
    }
    &._merge [role=bubbles] {
        [role=from],
        [role=to] {
            visibility: hidden;
        }
        [role=merge] {
            visibility: visible;
        }
    }
    &._tostart [role=bubbles] [role=min] {
        visibility: hidden;
    }
    &._toend [role=bubbles] [role=max] {
        visibility: hidden;
    }
    &:not([disabled]):hover {
        [role=track] [role=base] {
            background-color: var(--_c-prim-bd);
        }
    }
    &[disabled] [role=wrap] {
        user-select: none;
        pointer-events: none;
        [role=decrease],
        [role=increase] {
            color: var(--_c-prim-fc)
        }
        [role=track] [role=thumb] {
            background-color: var(--_c-prim-fc)
        }
        [role=bubbles] [role=from],
        [role=bubbles] [role=to],
        [role=bubbles] [role=single],
        [role=bubbles] [role=merge] {
            background-color: var(--_c-prim-fc);
            &:before {
                border-top-color: var(--_c-prim-fc);
            }
        }
        [role=handles]>* {
            border-color: var(--_c-prim-fc);
            box-shadow: none;
        }
    }
    &[axis="y"] {
        display: inline-flex;
        min-width: 9.4rem;
        [role=wrap] {
            height: 100%;
            flex-direction: column-reverse;
        }
        [role=body] {
            width: var(--_range-sz-track);
            min-height: 20rem;
        }
        [role=track] {
            height: 100%;
            width: var(--_range-sz-track);
            border-radius: var(--_range-sz-track);
            [role=base] {
                width: inherit;
                height: inherit;
            }
            [role=thumb] {
                width: inherit;
                top: auto;
                bottom: 0;
            }
            [role=base]:before,
            [role=thumb]:before {
                height: 100%;
                width: calc(var(--_range-sz-track)*5);
                top: 0;
                left: calc(-1*var(--_range-sz-track)*2);
            }
        }
        [role=bubbles]>* {
            top: auto;
            left: auto;
            right: auto;
            transform: translateX(calc(-100% - var(--_range-sz-handle)/2 - 0.6rem));
        }
        [role=bubbles] [role=max] {
            top: 0;
        }
        [role=bubbles] [role=min] {
            bottom: 0;
        }
        [role=bubbles] [role=from]:before,
        [role=bubbles] [role=to]:before,
        [role=bubbles] [role=single]:before,
        [role=bubbles] [role=merge]:before {
            border: 3px solid transparent;
            border-top-color: transparent;
            border-left-color: var(--_c-prim);
            left: auto;
            bottom: auto;
            top: calc(50% - 3px);
            right: -6px;
        }
        [role=bubbles] [role=merge] {
            transform: translate(calc(-100% - var(--_range-sz-handle)/2 - 0.6rem), calc(50% - var(--_range-sz-handle)/2));
        }
        [role=bubbles] [role=merge] i {
            text-align: center;
            display: block;
            transform: rotate(90deg);
            margin: -.6rem auto;
        }
        [role=handles]>* {
            left: calc((var(--_range-sz-handle) - var(--_range-sz-track))/-2);
            top: auto;
        }
        [role=handles]>*:not([disabled]):hover {
            cursor: row-resize;
        }
        [role=ruler] {
            height: calc(100% - var(--_range-sz-handle));
            margin: calc(var(--_range-sz-handle)/2) 0;
            left: var(--_range-sz-track);
            top: 0;
        }
        [role=ruler] ul {
            height: 100%;
        }
        [role=ruler] li {
            top: auto;
            left: 0;
            bottom: 0;
        }
        [role=ruler] li:before {
            height: 1px;
            width: var(--_ruler-major);
            top: auto;
            bottom: 0;
            left: 0;
        }
        [role=ruler] li:not([data-content]):before {
            height: 1px;
            width: var(--_ruler-minor);
        }
        [role=ruler] li:after {
            text-align: left;
            top: 0;
            left: calc(var(--_ruler-major) + 0.2rem);
            transform: translateY(-50%);
        }
        [role=ruler] div {
            height: 0;
            width: 0.2rem;
            top: auto;
            left: calc(var(--_ruler-minor) - 0.2rem);
        }
        [role=increase],
        [role=decrease],
        [role=result] {
            line-height: var(--_sz-font);
        }
        [role=increase] {
            margin-bottom: var(--_sz-space);
            margin-left: 0;
        }
        [role=decrease] {
            margin-top: var(--_sz-space);
            margin-right: 0;
        }
        [role=result] {
            margin-left: 0;
            margin-bottom: var(--_sz-space);
            min-width: auto;
            text-align: center;
        }
        &:not([disabled])[multiple] [role=thumb]:hover {
            cursor: s-resize;
        }
    }
}
