mor-counter{
    display: block;
    font-size: 0;
    position: relative;

    .setup-form();

    .counter-wrap{
        display: flex;
    }

    .sub-step,
    .add-step{
        display: inline-block;
        box-sizing: border-box;
        vertical-align: top;
        padding: 0 0.7em;
        border: 1px @colorFormBorder solid;
        cursor: pointer;
        background: @colorComponentItemBg;
        color: @colorComponentItemFont;
        position: relative;

        &:hover{
            color: @colorComponentItemFontHover;
            background: @colorComponentItemBgHover;
            border-color: @colorFormBorderHover;
        }

        &:active{
            color: @colorBlack;
            border-color: @colorFormBorderFocusGray;
            background: darken(@colorComponentItemBgHover, 7%);
            z-index: 3;
        }
    }

    .sub-step{
        border-radius: @borderRadius 0 0 @borderRadius;
    }

    .add-step{
        border-radius: 0 @borderRadius @borderRadius 0;
        margin-left: -2px;
    }

    .step-controls{
        .sub-step,
        .add-step{
            height: 50%;
        }

        .sub-step{
            border-radius: 0 0 @borderRadius 0;
            margin-left: -1px;
        }

        .add-step{
            border-radius: 0 @borderRadius 0 0;
            margin-left: -1px;
        }
    }

    input{
        position: relative;
        margin-left: -1px !important;
        vertical-align: top;
        display: inline-block;
        box-sizing: border-box;
        z-index: 2;
        background: @colorFormBackground;
        border: 1px @colorFormBorder solid;
        color: @colorFormText !important;
        outline: none;
        -webkit-appearance: none;
        text-align: center;
        min-width: 40px;
        flex-grow: 1;

        &::placeholder{
            color: @colorFormPlaceholder;
        }

        &:hover{
            border-color: @colorFormBorderHover;
            color: @colorFormTextHover !important;
            z-index: 3;

            &::placeholder{
                color: @colorFormPlaceholderHover !important;
            }
        }

        &:focus{
            .setup-form-focus();
            color: @colorFormTextFocus !important;
        }
    }

    &.controls-on-both{
        input{
            border-radius: 0;
        }
    }

    &.controls-on-right{
        input{
            border-radius: @borderRadius 0 0 @borderRadius;
            // border-right: none;
            margin-left: 0;
        }
    }

    &.controls-none{
        input{
            border-radius: @borderRadius;
        }
    }

    &.controls-add{
        input{
            border-radius: @borderRadius 0 0 @borderRadius;
        }

        &.controls-on-right{
            .step-controls{
                .add-step{
                    height: 100%;
                    border-radius: 0 @borderRadius @borderRadius 0;
                }
            }
        }
    }

    &.controls-sub{
        input{
            border-radius: 0 @borderRadius @borderRadius 0;
        }

        &.controls-on-right{
            .step-controls{
                .sub-step{
                    height: 100%;
                    border-radius: 0 @borderRadius @borderRadius 0;
                }
            }
        }
    }

    &.controls-none{
        input{
            border-radius: @borderRadius;
        }
    }

    &.si-m{
        .sub-step,
        .add-step{
            font-size: @formInputFontSize;
            height: @formHeight;
            line-height: @formHeight;

            .mo-icon{
                font-size: @formInputFontSize;
            }
        }

        .step-controls{
            height: @formHeight;

            .sub-step,
            .add-step{
                line-height: @formHeight/2;
            }
        }

        &.controls-sub{
            .step-controls{
                .sub-step{
                    line-height: @formHeight;
                }
            }
        }

        &.controls-add{
            .step-controls{
                .add-step{
                    line-height: @formHeight;
                }
            }
        }

        input{
            font-size: @formInputFontSize + 2px;
            height: @formHeight;
            line-height: @formHeight;
            padding: 0 0.6em;
        }
    }

    &.si-s{
        .sub-step,
        .add-step{
            font-size: @formInputFontSizeS;
            height: @formHeightS;
            line-height: @formHeightS;

            .mo-icon{
                font-size: @formInputFontSizeS;
            }
        }

        .step-controls{
            height: @formHeightS;

            .sub-step,
            .add-step{
                line-height: @formHeightS/2;
            }
        }

        .controls-sub{
            .step-controls{
                .sub-step{
                    line-height: @formHeightS;
                }
            }
        }

        .controls-add{
            .step-controls{
                .add-step{
                    line-height: @formHeightS;
                }
            }
        }

        input{
            font-size: @formInputFontSizeS + 2px;
            height: @formHeightS;
            line-height: @formHeightS;
            padding: 0 0.6em;
        }
    }

    &.si-xs{
        .sub-step,
        .add-step{
            font-size: @formInputFontSizeXs;
            height: @formHeightXs;
            line-height: @formHeightXs;

            .mo-icon{
                font-size: @formInputFontSizeXs;
            }
        }

        .step-controls{
            height: @formHeightXs;

            .sub-step,
            .add-step{
                line-height: @formHeightXs/2;
            }
        }

        .controls-sub{
            .step-controls{
                .sub-step{
                    line-height: @formHeightXs;
                }
            }
        }

        .controls-add{
            .step-controls{
                .add-step{
                    line-height: @formHeightXs;
                }
            }
        }

        input{
            font-size: @formInputFontSizeXs + 1px;
            height: @formHeightXs;
            line-height: @formHeightXs;
            padding: 0 0.6em;
        }
    }

    &.st-normal{}

    &.st-disabled,
    &.st-readonly{
        input{
            border: 1px @colorFormBorderDisable solid;
            background-color: @colorFormBackgroundDisable;
            -webkit-user-select: none;
            cursor: not-allowed !important;
            color: @colorFormTextDisable !important;
        }

        .sub-step,
        .add-step{
            border-color: @colorFormBorderDisable;
            background-color: @colorFormBackgroundDisable;
            cursor: not-allowed !important;

            &:hover{
                color: @colorComponentItemFont;
                border-color: @colorFormBorderDisable;
            }

            &:active{
                color: @colorComponentItemFont;
                border-color: @colorFormBorderDisable;
                z-index: 1;
            }
        }
    }

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