:host{position:relative;display:flex;flex-flow:row nowrap;height:2rem;margin-bottom:1rem}#container{position:relative;overflow:hidden;width:100%;height:100%;background-color:#fff;border:1px solid var(--bs-color-base-20);border-radius:999px}#container,#container *,#cursor-arrow,#cursor-arrow *{touch-action:none}:host(bci-millimeter-range) #container{pointer-events:all}:host(bci-millimeter-range) #container,:host(bci-millimeter-range) #container *{cursor:grab}:host(bci-millimeter-range) #container:hover:active,:host(bci-millimeter-range) #container:hover:active *{cursor:grabbing}#container::after{content:" ";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(90deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 0) 90%, rgba(255, 255, 255, 0.25) 100%);pointer-events:none}#inner-container{position:relative;height:100%;display:flex;flex-flow:row nowrap;transition:right 200ms;transform:translateX(0.5%)}.mark{position:relative;display:flex;justify-content:end;align-items:start;flex:0 0 var(--bci-visible-numbers, 1%);height:50%;cursor:pointer;margin-top:1.5rem;-webkit-user-select:none;user-select:none}.mark .mark-visual{width:1px;height:25%;background-color:var(--bs-color-base-40)}.mark.mark-big .mark-visual{height:50%}.mark .mark-number{position:absolute;left:100%;transform:translateX(-50%) translateY(-100%);color:var(--bs-color-base-100)}:host(:not(bci-millimeter-range)) .mark:hover .mark-visual,:host(:not(bci-millimeter-range)) .mark.hover .mark-visual{width:2px}:host(:not(bci-millimeter-range)) .mark:hover .mark-number,:host(:not(bci-millimeter-range)) .mark.hover .mark-number{font-weight:bold;-webkit-user-select:none;user-select:none}#cursor-arrow-display input::-webkit-outer-spin-button,#cursor-arrow-display input::-webkit-inner-spin-button{-webkit-appearance:none}#cursor-arrow-display input[type=number]{-moz-appearance:textfield}#cursor-arrow{position:absolute;left:50%;z-index:1;display:flex;flex-flow:column nowrap;justify-content:center;align-items:center;transform:translateX(-50%);font-size:.9rem;-webkit-user-select:none;user-select:none;box-shadow:var(--bs-color-base-100-15) 0px 5px 10px 2px;cursor:grabbing}:host(bci-millimeter-range) #cursor-arrow:not(.animate){pointer-events:none}:host(bci-millimeter-range) #cursor-arrow.animate{pointer-events:inherit}#cursor-arrow.animate{transition:background-color 200ms ease,left 200ms;cursor:grab;touch-action:none}#cursor-arrow:not(.animate){pointer-events:none}#cursor-arrow-display{display:flex;position:relative;pointer-events:none;width:2rem;z-index:2;justify-content:center;align-items:center}#minus-button,#plus-button{display:flex;justify-content:center;align-items:center;border-radius:999px;width:2rem;min-width:2rem;height:2rem;font-size:1.75rem;font-weight:bold;border:none;background-color:rgba(0,0,0,0);line-height:0;-webkit-user-select:none;-webkit-touch-callout:none;user-select:none;touch-action:none;cursor:pointer;color:var(--bs-color-base-100)}#minus-button:hover,#plus-button:hover{background-color:var(--bs-color-base-10)}#minus-button{margin-right:.5rem}#plus-button{margin-left:.5rem}:host(:not([state=degree])) #cursor-arrow-display input{position:relative;text-align:center;border:none;border-radius:0;appearance:none;pointer-events:all;width:100%;padding:0;font-family:inherit;color:var(--bs-color-base-100)}:host(:not([state=degree])) #cursor-arrow{color:#fff;background-color:var(--bci-arrow-color, #158AAD);border-radius:0 0 4px 4px;height:50px;width:32px;transition:background-color 200ms ease}:host(:not([state=degree])) #cursor-arrow-display{height:36px;background-color:#fff}:host(:not([state=degree])) #cursor-arrow-display-value{display:none}:host(:not([state=degree])):host([disabled]) #container,:host(:not([state=degree])):host([disabled]) #cursor-arrow-display{background-color:#eee}:host(:not([state=degree])):host([disabled]):host(bci-millimeter-range) #container,:host(:not([state=degree])):host([disabled]):host(bci-millimeter-range) #container *{cursor:default}:host(:not([state=degree])):host([disabled]):host(bci-millimeter-range) #container:hover:active,:host(:not([state=degree])):host([disabled]):host(bci-millimeter-range) #container:hover:active *{cursor:default}:host(:not([state=degree])):host([disabled]) .mark{cursor:default}:host(:not([state=degree])):host([disabled]) #cursor-arrow{cursor:default}:host(:not([state=degree])):host([disabled]) #cursor-arrow.animate{cursor:default}:host(:not([state=degree])):host([disabled]) #minus-button,:host(:not([state=degree])):host([disabled]) #plus-button{cursor:default}