@fontSize : 16px;
@colorTheme : #F33D5D;
@colorLightTheme : #F86F88;
@colorDarkTheme : #D22343;
@colorSuccess : #1EB818;
@colorWarning : #FA9428;
@colorDanger : #FA2833;
@colorPrimary : #2879FA;
@colorMinor : #B2B2B2;
@colorInfo : #18B8B6;
@colorTransparent : transparent;
@colorWhite : #FFFFFF;
@colorBlack : #000000;
@colorNeutral1 : #F0F0F0;
@colorNeutral2 : #E5E5E5;
@colorNeutral3 : #E0E0E0;
@colorNeutral4 : #D9D9D9;
@colorNeutral5 : #CCCCCC;
@colorNeutral6 : #B2B2B2;
@colorNeutral7 : #999999;
@colorNeutral8 : #7F7F7F;
@colorNeutral9 : #666666;
@colorNeutral10 : #4C4C4C;
@colorNeutral11 : #333333;
@borderRadius : 3px;
@gridColumnNumber : 24;
@gridGutterWidthXs : 4px;
@gridGutterWidthS : 8px;
@gridGutterWidthM : 16px;
@gridGutterWidthL : 24px;
@gridGutterWidthXL : 36px;
@formHeight : 42px;
@formInputFontSize : @fontSize*0.875;
@formHeightS : 32px;
@formInputFontSizeS : @fontSize*0.8125;
@formHeightXs : 28px;
@formInputFontSizeXs : @fontSize*0.75;
@colorComponentItemBorder : lighten(@colorNeutral3, 2%);
@colorComponentItemBorderHover : darken(@colorNeutral3, 6%);
@colorComponentItemBorderCurrent : darken(@colorNeutral3, 1%);
@colorComponentItemBorderDisabled : @colorNeutral3;
@colorComponentItemBg : lighten(@colorNeutral1, 2%);
@colorComponentItemBgHover : @colorNeutral1;
@colorComponentItemBgCurrent : @colorWhite;
@colorComponentItemBgDisabled : @colorNeutral3;
@colorComponentItemFont : @colorNeutral6;
@colorComponentItemFontHover : @colorNeutral9;
@colorComponentItemFontCurrent : @colorTheme;
@colorComponentItemFontDisabled : @colorNeutral9;
@colorImageBorder : @colorComponentItemBorder;
@colorFormBorder : @colorNeutral2;
@colorFormBorderHover : darken(@colorNeutral2, 6%);
@colorFormBorderFocus : @colorTheme;//@colorNeutral6;
@colorFormBorderFocusGray : @colorNeutral6;
@colorFormBorderDisable : @colorNeutral4;
@colorFormBackground : @colorWhite;
@colorFormBackgroundHover : lighten(@colorNeutral1, 1.5%);
@colorFormBackgroundFocus : lighten(@colorNeutral1, 1.2%);
@colorFormBackgroundDisable : lighten(@colorNeutral2, 7%);
@colorFormAddonFont : @colorNeutral8;
@colorFormAddonFontHover : @colorNeutral10;
@colorFormAddonBg : darken(@colorComponentItemBg, 2%);
@colorFormAddonBgHover : darken(@colorComponentItemBgHover, 2%);
@colorFormTextLight : darken(@colorNeutral2, 5%); // 后续版本中判断是否需要删除，是否有在使用
@colorFormPlaceholder : darken(@colorNeutral2, 20%);
@colorFormPlaceholderHover : darken(@colorNeutral2, 30%);
@colorFormText : @colorBlack;
@colorFormTextNote : @colorNeutral7;
@colorFormTextMisc : darken(@colorNeutral2, 15%); // 后续版本中判断是否需要删除，是否有在使用
@colorFormTextHover : @colorBlack;
@colorFormTextFocus : @colorBlack;
@colorFormTextDisable : darken(@colorNeutral2, 35%);
@colorFormItemColor : darken(@colorFormPlaceholder, 8%);
@colorFormItemColorHover : darken(@colorFormPlaceholderHover, 12%);
@colorFormItemColorCurrent : darken(@colorFormPlaceholderHover, 15%);
@colorFormItemColorDisable : darken(@colorFormPlaceholder, 12%);
@colorFromItemBackground : @colorFormBackgroundHover;
@colorFromItemBackgroundHover : darken(@colorFormBackgroundHover, 2.5%);
@colorFromItemBackgroundCurrent : darken(@colorFormBackgroundHover, 3.5%);
@colorFromItemBackgroundDisable : darken(@colorFormBackgroundDisable, 8%);

/* stylelint-disable property-case,property-no-unknown */

@colorSetTheme : {
    Theme: @colorTheme;
    LightTheme: @colorLightTheme;
    DarkTheme: @colorDarkTheme;
}

@colorSetFeatures : {
    Success: @colorSuccess;
    Warning: @colorWarning;
    Danger: @colorDanger;
    Primary: @colorPrimary;
    Minor: @colorMinor;
    Info: @colorInfo;
}

/* stylelint-enable property-case,property-no-unknown */

// ---

.setup-font-color-theme() {
    &.co-t{
        color: @colorTheme;
    }

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

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

.setup-font-color-feature() {
    &.co-s{
        color: @colorSuccess;
    }

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

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

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

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

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

.setup-font-color-misc() {
    &.co-bk{
        color: @colorBlack;
    }

    &.co-n11{
        color: @colorNeutral11;
    }

    &.co-n10{
        color: @colorNeutral10;
    }

    &.co-n9{
        color: @colorNeutral9;
    }

    &.co-n8{
        color: @colorNeutral8;
    }

    &.co-n7{
        color: @colorNeutral7;
    }

    &.co-n6{
        color: @colorNeutral6;
    }

    &.co-n5{
        color: @colorNeutral5;
    }

    &.co-n4{
        color: @colorNeutral4;
    }

    &.co-n3{
        color: @colorNeutral3;
    }

    &.co-n2{
        color: @colorNeutral2;
    }

    &.co-n1{
        color: @colorNeutral1;
    }

    &.co-wh{
        color: @colorWhite;
    }
}

.setup-scrollbar() {
    &::-webkit-scrollbar{
        width: 5px;
        height: 5px;
        background-color: rgba(0, 0, 0, 0.05);
    }

    &::-webkit-scrollbar-thumb{
        width: 5px;
        height: 5px;
        background: rgba(0, 0, 0, 0.1);
        border-radius: 4px;
    }
}

.setup-hover-scrollbar() {
    &::-webkit-scrollbar{
        width: 5px;
        height: 5px;
        background-color: rgba(0, 0, 0, 0);
    }

    &::-webkit-scrollbar-thumb{
        width: 5px;
        height: 5px;
        background: rgba(0, 0, 0, 0);
        border-radius: 4px;
    }

    &:hover::-webkit-scrollbar-thumb{
        background: rgba(0, 0, 0, 0.1);
    }
}

.setup-form() {
    .setup-form-without-form-width();
    .setup-form-width();
}

.setup-form-without-form-width() {
    .setup-clean-btn();
    .setup-form-name();
};

.setup-form-name() {
    > .form-name{
        color: @colorFormTextNote;
        font-size: @fontSize;
        -webkit-user-select: text;
        text-align: left;

        + .form-body{
            margin-top: @fontSize*0.5;
        }
    }

    > .form-note{
        font-size: @fontSize*0.75;
        color: @colorNeutral6;

        + .form-body{
            margin-top: @fontSize*0.5;
        }
    }

    > .error-message{
        font-size: @fontSize*0.75;
        margin-top: @fontSize*0.25;
        color: @colorDanger;
        text-align: left;

        &:empty{
            display: none;
        }
    }
}

.setup-clean-btn() {
    &.has-cleanbtn{
        padding-bottom: @fontSize*1.25;
    }

    .cleanbtn{
        position: absolute;
        right: 0;
        font-size: @fontSize*0.75;
        margin-top: 1px;
    }
}

.setup-form-width() {
    &.fw-xs,
    &.fw-xs .form-body{
        width: 120px;
    }

    &.fw-s,
    &.fw-s .form-body{
        width: 140px;
    }

    &.fw-m,
    &.fw-m .form-body{
        width: 180px;
    }

    &.fw-l,
    &.fw-l .form-body{
        width: 360px;
    }

    &.fw-xl,
    &.fw-xl .form-body{
        width: 600px;
    }
}

.setup-fullscreen-mask(){
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background-color: rgba(0, 0, 0, 0.65);
    opacity: 0;
    transition: 0.2s;
    pointer-events: none;
}

.setup-tip(@size: 5px){
    .tip-arrow {
        position: absolute;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: @size;
        transform: rotate(45deg);
    }

    .tip-wrap{
        opacity: 0;
        transition: unset;
        transform: scale(0.4);
        transition-timing-function: ease-in;
    }

    &.show-tip{
        .tip-wrap{
            transition: opacity 0.16s, transform 0.16s;
            opacity: 1;
            transform: scale(1);
        }
    }

    &.tip-placement-top {
        .tip-wrap{
            padding: (@size + 3px) 0;
            transform-origin: center bottom;
        }

        .tip-arrow {
            bottom: 3px;
            border-color: #0000 @colorWhite @colorWhite #0000;
            box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
        }
    }

    &.tip-placement-right {
        .tip-wrap{
            padding: 0 @size 0 @size*2;
            transform-origin: left center;
        }

        .tip-arrow {
            left: @size;
            border-color: #0000 #0000 @colorWhite @colorWhite;
            box-shadow: -2px 2px 4px rgba(0, 0, 0, 0.1);
        }
    }

    &.tip-placement-bottom {
        .tip-wrap{
            padding: (@size + 3px) 0;
            transform-origin: center top;
        }

        .tip-arrow {
            top: 3px;
            margin-left: -@size;
            border-color: @colorWhite #0000 #0000 @colorWhite;
            box-shadow: -2px -2px 4px rgba(0, 0, 0, 0.1);
        }
    }

    &.tip-placement-left {
        .tip-wrap{
            padding: 0 @size*2 0 @size;
            transform-origin: right center;
        }

        .tip-arrow {
            right: @size;
            border-color: @colorWhite @colorWhite #0000 #0000;
            box-shadow: 2px -2px 4px rgba(0, 0, 0, 0.1);
        }
    }

    &.tip-placement-left,
    &.tip-placement-right {
        .tip-arrow{
            top: calc(50% - @size);
            margin: @size*2 0;
        }
    }

    &.tip-placement-top,
    &.tip-placement-bottom {
        .tip-arrow{
            left: calc(50% - @size);
            margin: 0 @size*2;
        }
    }
}

.setup-form-focus-only-border() {
    transition: border-color 0s;
    border-color: @colorFormBorderFocus;
}

.setup-form-focus-only-box-shadow() {
    transition: border-color 0.2s;
    box-shadow: 0 0 0 2px rgba(red(@colorFormBorderFocus), green(@colorFormBorderFocus), blue(@colorFormBorderFocus), 0.15);
}

.setup-form-focus() {
    .setup-form-focus-only-border();
    .setup-form-focus-only-box-shadow();
    transition: border-color 0.2s, box-shadow 0.2s;
}

.setup-form-focus-animate(@color: '') {
    &.focus-once{
        animation: ~'formFocusAnimate@{color}' 0.42s ease-out;
    }
}