mor-slider{
    display: inline-block;
    width: 100%;
    padding-bottom: 4px;
    position: relative;
    font-size: 0;

    .setup-form();

    > .form-name{
        padding: 0 10px;
    }

    .wrap{
        width: 100%;
        box-sizing: border-box;
        user-select: none;
        display: inline-block;

        &:hover,
        &.droping{
            .track{
                background: darken(@colorFromItemBackgroundHover, 4%);
            }

            .selected-line{
                background: @colorTheme;
            }

            .main-slider{
                border-color: @colorTheme;
            }
        }
    }

    .points{
        padding: 0;
        margin: 0;
        list-style: none;
        font-size: 0;
        position: relative;
        pointer-events: none;

        li{
            display: inline-block;
            border-radius: 10em;
            background: @colorWhite;
            vertical-align: top;
            position: absolute;
            margin: 0;
            transform: translateX(-50%);
        }
    }

    .marks{
        padding: 0;
        margin: 0;
        list-style: none;
        font-size: 0;
        position: absolute;
        top: 0;
        left: 0;
        pointer-events: none;
        height: 100%;

        li{
            display: inline-block;
            left: 0;
            top: 0;
            height: 100%;
            font-size: @fontSize;
            border-radius: 10em;
            background: @colorNeutral4;
            position: absolute;
            margin: 0;

            &.co-t{
                background: @colorTheme;
            }

            &.co-lt{
                background: @colorLightTheme;
            }

            &.co-dt{
                background: @colorDarkTheme;
            }

            &.co-s{
                background: @colorSuccess;
            }

            &.co-w{
                background: @colorWarning;
            }

            &.co-d{
                background: @colorDanger;
            }

            &.co-p{
                background: @colorPrimary;
            }

            &.co-m{
                background: @colorMinor;
            }

            &.co-i{
                background: @colorInfo;
            }

            each(range(11), {
                @colorName : 'colorNeutral@{value}';

                &.co-n@{value}{
                    background: @@colorName;
                }
            });
        }
    }

    &.hide-part-points{
        .points{
            li{
                background: lighten(@colorFromItemBackground, 2%);
            }
        }
    }

    .track{
        width: 100%;
        background: darken(@colorFromItemBackground, 4%);
        border-radius: 10em;
        position: relative;
        cursor: pointer;
    }

    .selected-line{
        position: absolute;
        left: 0;
        top: 0;
        background: @colorLightTheme;
        border-radius: 10em;
        pointer-events: none;
    }

    .main-slider{
        position: absolute;
        left: 0;
        background: @colorWhite;
        border: 2px @colorLightTheme solid;
        cursor: pointer;
        box-sizing: border-box;
    }

    .cleanbtn{
        right: 20px;
        bottom: 0;
    }

    .prepend,
    .append{
        display: inline-block;
        width: 15%;
        text-align: center;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;

        > i{
            position: relative;
        }
    }

    &.has-prepend,
    &.has-append{
        .wrap{
            width: 85%;
            vertical-align: top;
        }
    }

    &.has-prepend.has-append{
        .wrap{
            width: 70%;
        }
    }

    &.has-counter{
        .wrap{
            display: flex;
            align-items: center;
        }

        .track{
            display: flex;
            width: 70%;
        }

        .counter{
            display: flex;
            min-width: 90px;
            width: 30%;
            box-sizing: border-box;

            mor-counter{
                width: 100%;
            }
        }
    }

    &.si-m{
        .wrap{
            padding: 6px 20px;
        }

        .points{
            li{
                width: 6px;
                height: 6px;
                font-size: @formInputFontSize;
                top: 1px;
            }
        }

        .track,
        .selected-line{
            height: 8px;
            font-size: @formInputFontSize + 2px;
        }

        .main-slider{
            width: 18px;
            height: 18px;
            top: -5px;
            border-radius: 9px;
            margin-left: -9px;
        }

        .prepend,
        .append{
            height: 20px;
            font-size: @formInputFontSize;

            > i{
                top: -2px;
                font-size: @formInputFontSize + 2px;
            }
        }

        &.has-counter{
            .counter{
                padding: 0 0 0 15px;

                mor-counter{
                    .counter-wrap{
                        > .sub-step,
                        > .add-step,
                        > input{
                            height: (@formInputFontSize + 2px) * 1.6;
                            line-height: (@formInputFontSize + 2px) * 1.6;
                        }

                        > .sub-step,
                        > .add-step{
                            padding: 0 0.3em;

                            i{
                                font-size: @formInputFontSize;
                            }
                        }

                        > input{
                            padding: 0 0.5em;
                            min-width: (@formInputFontSize + 2px) * 2;
                            font-size: (@formInputFontSize + 2px) * 0.75;
                        }
                    }
                }
            }
        }
    }

    &.si-s{
        .wrap{
            padding: 4px 20px;
        }

        .points{
            li{
                width: 4px;
                height: 4px;
                font-size: @formInputFontSizeS;
                top: 1px;
            }
        }

        .track,
        .selected-line{
            height: 6px;
            font-size: @formInputFontSizeS + 2px;
        }

        .main-slider{
            width: 14px;
            height: 14px;
            top: -4px;
            border-radius: 7px;
            margin-left: -7px;
        }

        .prepend,
        .append{
            height: 16px;
            font-size: @formInputFontSizeS;
            position: relative;
            top: -3px;

            > i{
                top: -1px;
                font-size: @formInputFontSizeS + 2px;
            }
        }

        &.has-counter{
            .counter{
                padding: 0 0 0 12px;

                mor-counter{
                    .counter-wrap{
                        > .sub-step,
                        > .add-step,
                        > input{
                            height: (@formInputFontSizeS + 2px) * 1.4;
                            line-height: (@formInputFontSizeS + 2px) * 1.4;
                        }

                        > .sub-step,
                        > .add-step{
                            padding: 0 0.3em;

                            i{
                                font-size: @formInputFontSizeS;
                            }
                        }

                        > input{
                            padding: 0 0.5em;
                            min-width: (@formInputFontSizeS + 2px) * 2;
                            font-size: (@formInputFontSizeS + 2px) * 0.75;
                        }
                    }
                }
            }
        }
    }

    &.si-xs{
        .wrap{
            padding: 3px 20px;
        }

        .points{
            li{
                width: 4px;
                height: 4px;
                font-size: @formInputFontSizeXs;
                top: 0;
            }
        }

        .track,
        .selected-line{
            height: 4px;
            font-size: @formInputFontSizeXs + 2px;
        }

        .main-slider{
            width: 12px;
            height: 12px;
            top: -4px;
            border-radius: 6px;
            margin-left: -6px;
        }

        .prepend,
        .append{
            height: 14px;
            font-size: @formInputFontSizeXs;
            top: -4px;
            position: relative;

            > i{
                top: 0;
                font-size: @formInputFontSizeXs;
            }
        }

        &.has-counter{
            .counter{
                padding: 0 0 0 10px;

                mor-counter{
                    .counter-wrap{
                        > .sub-step,
                        > .add-step,
                        > input{
                            height: (@formInputFontSizeXs + 2px) * 1.3;
                            line-height: (@formInputFontSizeXs + 2px) * 1.3;
                        }

                        > .sub-step,
                        > .add-step{
                            padding: 0 0.3em;

                            i{
                                font-size: @formInputFontSizeXs;
                            }
                        }

                        > input{
                            padding: 0 0.5em;
                            min-width: (@formInputFontSizeXs + 2px) * 1.6;
                            font-size: (@formInputFontSizeXs + 2px) * 0.75;
                        }
                    }
                }
            }
        }
    }

    &.st-normal{}

    &.st-disabled,
    &.st-readonly{
        .wrap{
            cursor: not-allowed;

            .track{
                cursor: not-allowed;
                background: darken(@colorFromItemBackgroundDisable, 4%);
            }

            .selected-line{
                background: darken(@colorFromItemBackgroundDisable, 28%);
            }

            .main-slider{
                cursor: not-allowed;
                border-color: darken(@colorFromItemBackgroundDisable, 28%);
            }
        }
    }

    // default status
    &{
        .si-m;
        .st-normal;
    }
}