@keyframes switchOpenM{
    0%{
        left: 2px;
        width: 26px;
    }

    15%{
        left: 2px;
        width: 32px;
    }

    50%{
        left: 13px;
        width: 32px;
    }

    100%{
        left: @formHeight - 10px - 6px - 3px;
        width: 26px;
    }
}
@keyframes switchCloseM{
    0%{
        left: @formHeight - 10px - 6px - 3px;
        width: 26px;
    }

    15%{
        left: 18px;
        width: 32px;
    }

    50%{
        left: 13px;
        width: 32px;
    }

    100%{
        left: 2px;
        width: 26px;
    }
}
@keyframes switchOpenS{
    0%{
        left: 2px;
        width: 20px;
    }

    15%{
        left: 2px;
        width: 25px;
    }

    50%{
        left: 13px;
        width: 25px;
    }

    100%{
        left: @formHeightS - 6px - 6px;
        width: 20px;
    }
}
@keyframes switchCloseS{
    0%{
        left: @formHeightS - 6px - 6px;
        width: 20px;
    }

    15%{
        left: 18px;
        width: 25px;
    }

    50%{
        left: 13px;
        width: 25px;
    }

    100%{
        left: 2px;
        width: 20px;
    }
}
@keyframes switchOpenXs{
    0%{
        left: 2px;
        width: 18px;
    }

    15%{
        left: 2px;
        width: 23px;
    }

    50%{
        left: 13px;
        width: 23px;
    }

    100%{
        left: @formHeightXs - 6px - 4px;
        width: 18px;
    }
}
@keyframes switchCloseXs{
    0%{
        left: @formHeightXs - 6px - 4px;
        width: 18px;
    }

    15%{
        left: 18px;
        width: 22px;
    }

    50%{
        left: 13px;
        width: 22px;
    }

    100%{
        left: 2px;
        width: 18px;
    }
}

mor-switch{
    position: relative;
    z-index: 1;
    display: inline-block;
    box-sizing: border-box;

    .setup-form();

    &.mor-switch.has-cleanbtn{
        padding-bottom: 26px;
    }

    > .cleanbtn{
        left: 0;
        bottom: 0;
    }

    .wrap{
        font-size: 0;
        position: relative;
    }

    .open-note,
    .close-note{
        display: inline-block;
        vertical-align: top;
        line-height: 30px;
        color: @colorFormTextNote;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .close-note{
        font-weight: 700;
    }

    .open-mark,
    .close-mark{
        position: absolute;
        text-align: center;
        display: inline-block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        transition: none;
    }

    .open-mark{
        color: @colorWhite;
    }

    .close-mark{
        color: @colorNeutral6;
    }

    &.open{
        .open-note{
            font-weight: 700;
        }

        .close-note{
            font-weight: 400;
        }
    }

    .track{
        display: inline-block;
        vertical-align: top;
        position: relative;
        background: @colorWhite;
        box-shadow: 0 0 2px @colorFormBorder inset;
        border: 1px lighten(@colorFormBorder, 2%) solid;
        cursor: pointer;
        box-sizing: border-box;
        -webkit-user-select: none;
        transition: background 0.16s, box-shadow 0.16s, border 0.16s;

        &:hover{
            box-shadow: 0 0 3px @colorFormBorderHover inset;
            border: 1px lighten(@colorFormBorderHover, 1%) solid;
        }

        .point{
            background: @colorWhite;
            z-index: 2;
            box-shadow: 0 0 4px darken(@colorFormBorder, 14%);
            display: inline-block;
            position: absolute;
            animation-duration: 0.24s;
            animation-fill-mode: forwards;
        }

        .setup-form-focus-animate();
    }

    &.open{
        .track{
            .point{
                animation-duration: 0.24s;
                animation-fill-mode: forwards;
            }
        }
    }

    &.si-m{
        .open-note,
        .close-note{
            font-size: @formInputFontSize;
            line-height: @formHeight - 10px;
        }

        .open-note{
            padding-left: 6px;
        }

        .close-note{
            padding-right: 6px;
        }

        .open-mark,
        .close-mark{
            font-size: @fontSize*0.75;
            top: 6px;
            width: 15px;

            > i{
                font-size: @fontSize*0.75;
            }
        }

        .open-mark{
            left: @formHeight / 8;
        }

        .close-mark{
            right: @formHeight / 8;
        }

        .track{
            height: @formHeight - 10px;
            width: (@formHeight - 10px) * 1.7;
            border-radius: (@formHeight - 10px) / 2;

            .point{
                border-radius: (@formHeight - 10px - 6px) / 2;
                height: @formHeight - 10px - 6px;
                width: @formHeight - 10px - 6px;
                left: 2px;
                top: 2px;
                animation-name: switchCloseM;
            }
        }

        &.open{
            .track{
                .point{
                    animation-name: switchOpenM;
                }
            }
        }
    }

    &.si-s{
        .open-note,
        .close-note{
            font-size: @formInputFontSizeS;
            line-height: @formHeightS - 8px;
        }

        .open-note{
            padding-left: 6px;
        }

        .close-note{
            padding-right: 6px;
        }

        .open-mark,
        .close-mark{
            font-size: @fontSize*0.75;
            top: 3px;
            width: 15px;

            > i{
                font-size: @fontSize*0.75;
            }
        }

        .open-mark{
            left: @formHeightS / 9;
        }

        .close-mark{
            right: @formHeightS / 9;
        }

        .track{
            height: @formHeightS - 6px;
            width: (@formHeightS - 6px) * 1.7;
            border-radius: (@formHeightS - 6px) / 2;

            .point{
                border-radius: (@formHeightS - 6px - 6px) / 2;
                height: @formHeightS - 6px - 6px;
                width: @formHeightS - 6px - 6px;
                left: 2px;
                top: 2px;
                animation-name: switchCloseS;
            }
        }

        &.open{
            .track{
                .point{
                    animation-name: switchOpenS;
                }
            }
        }
    }

    &.si-xs{
        .open-note,
        .close-note{
            font-size: @formInputFontSizeXs;
            line-height: @formHeightXs - 4px;
        }

        .open-note{
            padding-left: 6px;
        }

        .close-note{
            padding-right: 6px;
        }

        .open-mark,
        .close-mark{
            font-size: @fontSize*0.75;
            top: 2px;
            width: 15px;
            transform: scale(0.9);

            > i{
                font-size: @fontSize*0.75;
            }
        }

        .open-mark{
            left: @formHeightXs / 10;
        }

        .close-mark{
            right: @formHeightXs / 10;
        }

        .track{
            height: @formHeightXs - 4px;
            width: (@formHeightXs - 4px) * 1.7;
            border-radius: (@formHeightXs - 4px) / 2;

            .point{
                border-radius: (@formHeightXs - 4px - 6px) / 2;
                height: @formHeightXs - 4px - 6px;
                width: @formHeightXs - 4px - 6px;
                left: 2px;
                top: 2px;
                animation-name: switchCloseXs;
            }
        }

        &.open{
            .track{
                .point{
                    animation-name: switchOpenXs;
                }
            }
        }
    }

    &.co-t{
        .open-note{
            color: @colorFormTextNote;
        }

        .close-note{
            color: @colorTheme;
        }

        &.open {
            .open-note{
                color: @colorTheme;
            }

            .close-note{
                color: @colorFormTextNote;
            }

            .track{
                background: @colorTheme;
                box-shadow: 0 0 3px darken(@colorTheme, 20%) inset;
                border: 1px darken(@colorTheme, 15%) solid;

                .point{
                    box-shadow: 0 0 4px darken(@colorTheme, 25%);
                }
            }
        }
    }

    &.co-lt{
        .open-note{
            color: @colorFormTextNote;
        }

        .close-note{
            color: @colorLightTheme;
        }

        &.open{
            .open-note{
                color: @colorLightTheme;
            }

            .close-note{
                color: @colorFormTextNote;
            }

            .track{
                background: @colorLightTheme;
                box-shadow: 0 0 3px darken(@colorLightTheme, 8%) inset;
                border: 1px darken(@colorLightTheme, 6%) solid;

                .point{
                    box-shadow: 0 0 4px darken(@colorLightTheme, 15%);
                }
            }
        }
    }

    &.co-dt{
        .open-note{
            color: @colorFormTextNote;
        }

        .close-note{
            color: @colorDarkTheme;
        }

        &.open{
            .open-note{
                color: @colorDarkTheme;
            }

            .close-note{
                color: @colorFormTextNote;
            }

            .track{
                background: @colorDarkTheme;
                box-shadow: 0 0 3px darken(@colorDarkTheme, 13%) inset;
                border: 1px darken(@colorDarkTheme, 10%) solid;

                .point{
                    box-shadow: 0 0 4px darken(@colorDarkTheme, 20%);
                }
            }
        }
    }

    &.co-s{
        .open-note{
            color: @colorFormTextNote;
        }

        .close-note{
            color: @colorSuccess;
        }

        &.open{
            .open-note{
                color: @colorSuccess;
            }

            .close-note{
                color: @colorFormTextNote;
            }

            .track{
                background: @colorSuccess;
                box-shadow: 0 0 3px darken(@colorSuccess, 13%) inset;
                border: 1px darken(@colorSuccess, 10%) solid;

                .point{
                    box-shadow: 0 0 4px darken(@colorSuccess, 25%);
                }
            }
        }
    }

    &.co-w{
        .open-note{
            color: @colorFormTextNote;
        }

        .close-note{
            color: @colorWarning;
        }

        &.open{
            .open-note{
                color: @colorWarning;
            }

            .close-note{
                color: @colorFormTextNote;
            }

            .track{
                background: @colorWarning;
                box-shadow: 0 0 3px darken(@colorWarning, 13%) inset;
                border: 1px darken(@colorWarning, 10%) solid;

                .point{
                    box-shadow: 0 0 4px darken(@colorWarning, 25%);
                }
            }
        }
    }

    &.co-d{
        .open-note{
            color: @colorFormTextNote;
        }

        .close-note{
            color: @colorDanger;
        }

        &.open{
            .open-note{
                color: @colorDanger;
            }

            .close-note{
                color: @colorFormTextNote;
            }

            .track{
                background: @colorDanger;
                box-shadow: 0 0 3px darken(@colorDanger, 9%) inset;
                border: 1px darken(@colorDanger, 4%) solid;

                .point{
                    box-shadow: 0 0 4px darken(@colorDanger, 20%);
                }
            }
        }
    }

    &.co-p{
        .open-note{
            color: @colorFormTextNote;
        }

        .close-note{
            color: @colorPrimary;
        }

        &.open{
            .open-note{
                color: @colorPrimary;
            }

            .close-note{
                color: @colorFormTextNote;
            }

            .track{
                background: @colorPrimary;
                box-shadow: 0 0 3px darken(@colorPrimary, 13%) inset;
                border: 1px darken(@colorPrimary, 10%) solid;

                .point{
                    box-shadow: 0 0 4px darken(@colorPrimary, 25%);
                }
            }
        }
    }

    &.co-m{
        .open-note{
            color: @colorFormTextNote;
        }

        .close-note{
            color: @colorMinor;
        }

        &.open{
            .open-note{
                color: @colorMinor;
            }

            .close-note{
                color: @colorFormTextNote;
            }

            .track{
                background: @colorMinor;
                box-shadow: 0 0 3px darken(@colorMinor, 13%) inset;
                border: 1px darken(@colorMinor, 10%) solid;

                .point{
                    box-shadow: 0 0 4px darken(@colorMinor, 25%);
                }
            }
        }
    }

    &.co-i{
        .open-note{
            color: @colorFormTextNote;
        }

        .close-note{
            color: @colorInfo;
        }

        &.open{
            .open-note{
                color: @colorInfo;
            }

            .close-note{
                color: @colorFormTextNote;
            }

            .track{
                background: @colorInfo;
                box-shadow: 0 0 3px darken(@colorInfo, 13%) inset;
                border: 1px darken(@colorInfo, 10%) solid;

                .point{
                    box-shadow: 0 0 4px darken(@colorInfo, 25%);
                }
            }
        }
    }

    &.co-bk{
        .open-note{
            color: @colorFormTextNote;
        }

        .close-note{
            color: @colorBlack;
        }

        &.open{
            .open-note{
                color: @colorBlack;
            }

            .close-note{
                color: @colorFormTextNote;
            }

            .track{
                background: @colorBlack;
                box-shadow: 0 0 3px darken(@colorBlack, 30%) inset;
                border: 1px darken(@colorBlack, 20%) solid;

                .point{
                    box-shadow: 0 0 4px darken(@colorBlack, 30%);
                }
            }
        }
    }

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

        &.co-n@{value}{
            .track when (@value <= 5){
                background: darken(@colorBlack, 25%);
                box-shadow: 0 0 2px darken(@colorBlack, 35%) inset;
                border: 1px darken(@colorBlack, 30%) solid;

                &:hover{
                    box-shadow: 0 0 3px darken(@colorBlack, 40%) inset;
                    border: 1px darken(@colorBlack, 35%) solid;
                }

                .point{
                    box-shadow: 0 0 4px darken(@colorBlack, 40%);
                }
            }

            .open-note{
                color: @colorFormTextNote;
            }

            .close-note{
                color: @@colorName;
            }

            .close-mark when (@value <= 5){
                color: @colorWhite;
            }

            .open-mark when (@value <= 5){
                color: @colorBlack;
            }

            &.open{
                .open-note{
                    color: @@colorName;
                }

                .close-note{
                    color: @colorFormTextNote;
                }

                .track{
                    background: @@colorName;
                    box-shadow: 0 0 3px darken(@@colorName, 13%) inset;
                    border: 1px darken(@@colorName, 10%) solid;

                    .point{
                        box-shadow: 0 0 4px darken(@@colorName, 25%);
                    }
                }
            }
        }
    });

    &.co-wh{
        .track{
            background: darken(@colorBlack, 25%);
            box-shadow: 0 0 2px darken(@colorBlack, 35%) inset;
            border: 1px darken(@colorBlack, 30%) solid;

            &:hover{
                box-shadow: 0 0 3px darken(@colorBlack, 40%) inset;
                border: 1px darken(@colorBlack, 35%) solid;
            }

            .point{
                box-shadow: 0 0 4px darken(@colorBlack, 40%);
            }
        }

        .open-note{
            color: @colorFormTextNote;
        }

        .close-note{
            color: @colorWhite;
        }

        .close-mark{
            color: @colorWhite;
        }

        .open-mark{
            color: @colorBlack;
        }

        &.open{
            .open-note{
                color: @colorWhite;
            }

            .close-note{
                color: @colorFormTextNote;
            }

            .track{
                background: @colorNeutral1;
                box-shadow: 0 0 3px darken(@colorNeutral1, 6%) inset;
                border: 1px darken(@colorNeutral1, 4%) solid;

                .point{
                    box-shadow: 0 0 4px darken(@colorNeutral1, 10%);
                }
            }
        }
    }

    &.st-normal{}

    &.st-disabled,
    &.st-readonly{
        .point{
            transform: scale(0.85);
            box-shadow: none !important;
            background: lighten(@colorFormTextDisable, 2%) !important;
        }

        .track{
            cursor: not-allowed !important;
            color: @colorFormBorderDisable !important;
            background: darken(@colorFormBackgroundDisable, 6%) !important;
            box-shadow: none !important;
            border-color: @colorFormBackgroundDisable !important;

            .point{
                background: lighten(@colorFormBorderDisable, 15%);
            }
        }

        .open-mark{
            color: @colorNeutral6;
        }
    }

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