/* stylelint-disable order/properties-order */
@import '../../../base/style.less';

.iot-number-slider {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    height: auto;

    .number-change {
        position: relative;
        display: flex;
        align-items: flex-end;
        justify-content: center;
        width: 100%;
        margin: var(--bignumber-margin);

        .number-value {
            color: var(--bignumber-font-color);
            font-size: var(--bignumber-font-size);
            font-family: var(--bignumber-font-family);
            text-align: center;
            
            // line-height: var(--bignumber-line-height);
        }

        .number-unit {
            margin-bottom: var(--bignumber-font-margin);
            color: var(--unit-font-color);
            font-size: var(--unit-font-size);
            font-family: var(--unit-font-family);
            align-self: center;
            margin-top:4%;
        }
    }

    .number-slider {
        position: relative;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        height: auto;
        margin: 0.2rem 0;

        .icon-left {
            width: var(--bigside-width-size);
            height: var(--bigside-height-size);
            margin: var(--bigsideL-margin);
            color: var(--bigside-font-color);
            font-size: var(--bigside-font-size);
        }

        .icon-right {
            width: var(--bigside-width-size);
            height: var(--bigside-height-size);
            margin: var(--bigsideL-margin);
            color: var(--bigside-font-color);
            font-size: var(--bigside-font-size);
        }

        .slider-bar {
            position: relative;
            flex: 1;
            height: var(--bigslider-height-size);
            background: var(--bigslider-bg-color);

            .slider-bar-inner {
                position: relative;
                width: 100%;
                height: 100%;
                border-radius: 0.14rem;

                .progress {
                    position: absolute;
                    top: 50%;
                    left: 0;
                    z-index: 10;
                    width: 0;
                    height: var(--bigslider-height-size);
                    background-color: var(--bigslider-highight-color);
                    border-radius: 0.14rem;
                    transform: translateY(-50%);
                }

                .ball {
                    position: absolute;
                    top: 50%;
                    right: 0;
                    z-index: 20;
                    width: var(--bigball-width-size);
                    height: var(--bigball-height-size);
                    background-color: var(--bigball-color);
                    border: var(--bigball-border);
                    border-radius: 50%;
                    box-shadow: var(--bigball-shadow);
                    transform: translate(50%, -50%);
                }
            }
        }
    }


}