@import "../default-skin.less";
@import "../../global/mixin.less";

// 范围选择元素
.e_range { width:20em; display:inline-block; padding:0 1em; .x_bs;}
.e_rangeMain { display:flex; text-align:left; line-height:2em; position:relative; .x_bs; width:100%;}
.e_rangeBar { display:block; position:relative; margin-top:0.75em; flex:1;}
.e_rangeBar:before { content:""; height:0.5em; background:@bg-dark-1; border-radius:0.25em; display:block;}
.e_rangeProgress { background:@primary; border-radius:0.25em; height:0.5em; width:auto; position:absolute; top:0;}
.e_rangeStart,
.e_rangeEnd { z-index:99; background:@bg; width:2em; height:2em; border:0.25em @primary solid; .x_round; .x_bs; cursor:pointer; right:-1em; position:absolute; top:-0.75em;}
.e_rangeStart { left:-1em;}
.e_rangeValue { color:@fg-light-3; margin-left:1em; left:1em; position:relative; text-align:right;}



// 固定 value 尺寸
[class*="e_range-value-"] { text-align:left; display:block;}
.e_range-value-s .e_rangeValue { width:2em;}
.e_range-value-m .e_rangeValue { width:4em;}
.e_range-value-l .e_rangeValue { width:8em;}



// 两侧距离
.e_range-padding-1 .e_rangeBar { margin-right:0.5em; margin-left:0.5em;}
.e_range-padding-2 .e_rangeBar { margin-right:1em; margin-left:1em;}



// 渐变
.e_range-gd .e_rangeProgress { background:linear-gradient(to right, @primary, @success);}
.e_range-gd .e_rangeEnd { border-color:@success;}



// 标尺
.e_rangeRuler { position:relative; z-index:10; height:2em; display:block;}
.e_rangeScale { position:absolute; text-align:center; left:0; transform:translateX(-50%);}
.e_rangeScale:before { content:""; display:block; width:1px; height:0.75em; margin:0 auto; background:@fg;}
.e_rangeScale .e_rangeScaleValue { white-space:nowrap;}