// default
/* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
/* stylelint-disable no-duplicate-selectors */
/* stylelint-disable */
.bezierEasingMixin() {
@functions: ~`(function() {
  var NEWTON_ITERATIONS = 4;
  var NEWTON_MIN_SLOPE = 0.001;
  var SUBDIVISION_PRECISION = 0.0000001;
  var SUBDIVISION_MAX_ITERATIONS = 10;

  var kSplineTableSize = 11;
  var kSampleStepSize = 1.0 / (kSplineTableSize - 1.0);

  var float32ArraySupported = typeof Float32Array === 'function';

  function A (aA1, aA2) { return 1.0 - 3.0 * aA2 + 3.0 * aA1; }
  function B (aA1, aA2) { return 3.0 * aA2 - 6.0 * aA1; }
  function C (aA1)      { return 3.0 * aA1; }

  // Returns x(t) given t, x1, and x2, or y(t) given t, y1, and y2.
  function calcBezier (aT, aA1, aA2) { return ((A(aA1, aA2) * aT + B(aA1, aA2)) * aT + C(aA1)) * aT; }

  // Returns dx/dt given t, x1, and x2, or dy/dt given t, y1, and y2.
  function getSlope (aT, aA1, aA2) { return 3.0 * A(aA1, aA2) * aT * aT + 2.0 * B(aA1, aA2) * aT + C(aA1); }

  function binarySubdivide (aX, aA, aB, mX1, mX2) {
    var currentX, currentT, i = 0;
    do {
      currentT = aA + (aB - aA) / 2.0;
      currentX = calcBezier(currentT, mX1, mX2) - aX;
      if (currentX > 0.0) {
        aB = currentT;
      } else {
        aA = currentT;
      }
    } while (Math.abs(currentX) > SUBDIVISION_PRECISION && ++i < SUBDIVISION_MAX_ITERATIONS);
    return currentT;
  }

  function newtonRaphsonIterate (aX, aGuessT, mX1, mX2) {
   for (var i = 0; i < NEWTON_ITERATIONS; ++i) {
     var currentSlope = getSlope(aGuessT, mX1, mX2);
     if (currentSlope === 0.0) {
       return aGuessT;
     }
     var currentX = calcBezier(aGuessT, mX1, mX2) - aX;
     aGuessT -= currentX / currentSlope;
   }
   return aGuessT;
  }

  var BezierEasing = function (mX1, mY1, mX2, mY2) {
    if (!(0 <= mX1 && mX1 <= 1 && 0 <= mX2 && mX2 <= 1)) {
      throw new Error('bezier x values must be in [0, 1] range');
    }

    // Precompute samples table
    var sampleValues = float32ArraySupported ? new Float32Array(kSplineTableSize) : new Array(kSplineTableSize);
    if (mX1 !== mY1 || mX2 !== mY2) {
      for (var i = 0; i < kSplineTableSize; ++i) {
        sampleValues[i] = calcBezier(i * kSampleStepSize, mX1, mX2);
      }
    }

    function getTForX (aX) {
      var intervalStart = 0.0;
      var currentSample = 1;
      var lastSample = kSplineTableSize - 1;

      for (; currentSample !== lastSample && sampleValues[currentSample] <= aX; ++currentSample) {
        intervalStart += kSampleStepSize;
      }
      --currentSample;

      // Interpolate to provide an initial guess for t
      var dist = (aX - sampleValues[currentSample]) / (sampleValues[currentSample + 1] - sampleValues[currentSample]);
      var guessForT = intervalStart + dist * kSampleStepSize;

      var initialSlope = getSlope(guessForT, mX1, mX2);
      if (initialSlope >= NEWTON_MIN_SLOPE) {
        return newtonRaphsonIterate(aX, guessForT, mX1, mX2);
      } else if (initialSlope === 0.0) {
        return guessForT;
      } else {
        return binarySubdivide(aX, intervalStart, intervalStart + kSampleStepSize, mX1, mX2);
      }
    }

    return function BezierEasing (x) {
      if (mX1 === mY1 && mX2 === mY2) {
        return x; // linear
      }
      // Because JavaScript number are imprecise, we should guarantee the extremes are right.
      if (x === 0) {
        return 0;
      }
      if (x === 1) {
        return 1;
      }
      return calcBezier(getTForX(x), mY1, mY2);
    };
  };

  this.colorEasing = BezierEasing(0.26, 0.09, 0.37, 0.18);
  // less 3 requires a return
  return '';
})()`;
}
// It is hacky way to make this function will be compiled preferentially by less
// resolve error: `ReferenceError: colorPalette is not defined`
// https://github.com/ant-design/ant-motion/issues/44
.bezierEasingMixin();

/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
.tinyColorMixin() {
@functions: ~`(function() {
// TinyColor v1.4.1
// https://github.com/bgrins/TinyColor
// 2016-07-07, Brian Grinstead, MIT License
var trimLeft = /^\s+/,
    trimRight = /\s+$/,
    tinyCounter = 0,
    mathRound = Math.round,
    mathMin = Math.min,
    mathMax = Math.max,
    mathRandom = Math.random;

function tinycolor (color, opts) {

    color = (color) ? color : '';
    opts = opts || { };

    // If input is already a tinycolor, return itself
    if (color instanceof tinycolor) {
       return color;
    }
    // If we are called as a function, call using new instead
    if (!(this instanceof tinycolor)) {
        return new tinycolor(color, opts);
    }

    var rgb = inputToRGB(color);
    this._originalInput = color,
    this._r = rgb.r,
    this._g = rgb.g,
    this._b = rgb.b,
    this._a = rgb.a,
    this._roundA = mathRound(100*this._a) / 100,
    this._format = opts.format || rgb.format;
    this._gradientType = opts.gradientType;

    // Don't let the range of [0,255] come back in [0,1].
    // Potentially lose a little bit of precision here, but will fix issues where
    // .5 gets interpreted as half of the total, instead of half of 1
    // If it was supposed to be 128, this was already taken care of by inputToRgb
    if (this._r < 1) { this._r = mathRound(this._r); }
    if (this._g < 1) { this._g = mathRound(this._g); }
    if (this._b < 1) { this._b = mathRound(this._b); }

    this._ok = rgb.ok;
    this._tc_id = tinyCounter++;
}

tinycolor.prototype = {
    isDark: function() {
        return this.getBrightness() < 128;
    },
    isLight: function() {
        return !this.isDark();
    },
    isValid: function() {
        return this._ok;
    },
    getOriginalInput: function() {
      return this._originalInput;
    },
    getFormat: function() {
        return this._format;
    },
    getAlpha: function() {
        return this._a;
    },
    getBrightness: function() {
        //http://www.w3.org/TR/AERT#color-contrast
        var rgb = this.toRgb();
        return (rgb.r * 299 + rgb.g * 587 + rgb.b * 114) / 1000;
    },
    getLuminance: function() {
        //http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef
        var rgb = this.toRgb();
        var RsRGB, GsRGB, BsRGB, R, G, B;
        RsRGB = rgb.r/255;
        GsRGB = rgb.g/255;
        BsRGB = rgb.b/255;

        if (RsRGB <= 0.03928) {R = RsRGB / 12.92;} else {R = Math.pow(((RsRGB + 0.055) / 1.055), 2.4);}
        if (GsRGB <= 0.03928) {G = GsRGB / 12.92;} else {G = Math.pow(((GsRGB + 0.055) / 1.055), 2.4);}
        if (BsRGB <= 0.03928) {B = BsRGB / 12.92;} else {B = Math.pow(((BsRGB + 0.055) / 1.055), 2.4);}
        return (0.2126 * R) + (0.7152 * G) + (0.0722 * B);
    },
    setAlpha: function(value) {
        this._a = boundAlpha(value);
        this._roundA = mathRound(100*this._a) / 100;
        return this;
    },
    toHsv: function() {
        var hsv = rgbToHsv(this._r, this._g, this._b);
        return { h: hsv.h * 360, s: hsv.s, v: hsv.v, a: this._a };
    },
    toHsvString: function() {
        var hsv = rgbToHsv(this._r, this._g, this._b);
        var h = mathRound(hsv.h * 360), s = mathRound(hsv.s * 100), v = mathRound(hsv.v * 100);
        return (this._a == 1) ?
          "hsv("  + h + ", " + s + "%, " + v + "%)" :
          "hsva(" + h + ", " + s + "%, " + v + "%, "+ this._roundA + ")";
    },
    toHsl: function() {
        var hsl = rgbToHsl(this._r, this._g, this._b);
        return { h: hsl.h * 360, s: hsl.s, l: hsl.l, a: this._a };
    },
    toHslString: function() {
        var hsl = rgbToHsl(this._r, this._g, this._b);
        var h = mathRound(hsl.h * 360), s = mathRound(hsl.s * 100), l = mathRound(hsl.l * 100);
        return (this._a == 1) ?
          "hsl("  + h + ", " + s + "%, " + l + "%)" :
          "hsla(" + h + ", " + s + "%, " + l + "%, "+ this._roundA + ")";
    },
    toHex: function(allow3Char) {
        return rgbToHex(this._r, this._g, this._b, allow3Char);
    },
    toHexString: function(allow3Char) {
        return '#' + this.toHex(allow3Char);
    },
    toHex8: function(allow4Char) {
        return rgbaToHex(this._r, this._g, this._b, this._a, allow4Char);
    },
    toHex8String: function(allow4Char) {
        return '#' + this.toHex8(allow4Char);
    },
    toRgb: function() {
        return { r: mathRound(this._r), g: mathRound(this._g), b: mathRound(this._b), a: this._a };
    },
    toRgbString: function() {
        return (this._a == 1) ?
          "rgb("  + mathRound(this._r) + ", " + mathRound(this._g) + ", " + mathRound(this._b) + ")" :
          "rgba(" + mathRound(this._r) + ", " + mathRound(this._g) + ", " + mathRound(this._b) + ", " + this._roundA + ")";
    },
    toPercentageRgb: function() {
        return { r: mathRound(bound01(this._r, 255) * 100) + "%", g: mathRound(bound01(this._g, 255) * 100) + "%", b: mathRound(bound01(this._b, 255) * 100) + "%", a: this._a };
    },
    toPercentageRgbString: function() {
        return (this._a == 1) ?
          "rgb("  + mathRound(bound01(this._r, 255) * 100) + "%, " + mathRound(bound01(this._g, 255) * 100) + "%, " + mathRound(bound01(this._b, 255) * 100) + "%)" :
          "rgba(" + mathRound(bound01(this._r, 255) * 100) + "%, " + mathRound(bound01(this._g, 255) * 100) + "%, " + mathRound(bound01(this._b, 255) * 100) + "%, " + this._roundA + ")";
    },
    toName: function() {
        if (this._a === 0) {
            return "transparent";
        }

        if (this._a < 1) {
            return false;
        }

        return hexNames[rgbToHex(this._r, this._g, this._b, true)] || false;
    },
    toFilter: function(secondColor) {
        var hex8String = '#' + rgbaToArgbHex(this._r, this._g, this._b, this._a);
        var secondHex8String = hex8String;
        var gradientType = this._gradientType ? "GradientType = 1, " : "";

        if (secondColor) {
            var s = tinycolor(secondColor);
            secondHex8String = '#' + rgbaToArgbHex(s._r, s._g, s._b, s._a);
        }

        return "progid:DXImageTransform.Microsoft.gradient("+gradientType+"startColorstr="+hex8String+",endColorstr="+secondHex8String+")";
    },
    toString: function(format) {
        var formatSet = !!format;
        format = format || this._format;

        var formattedString = false;
        var hasAlpha = this._a < 1 && this._a >= 0;
        var needsAlphaFormat = !formatSet && hasAlpha && (format === "hex" || format === "hex6" || format === "hex3" || format === "hex4" || format === "hex8" || format === "name");

        if (needsAlphaFormat) {
            // Special case for "transparent", all other non-alpha formats
            // will return rgba when there is transparency.
            if (format === "name" && this._a === 0) {
                return this.toName();
            }
            return this.toRgbString();
        }
        if (format === "rgb") {
            formattedString = this.toRgbString();
        }
        if (format === "prgb") {
            formattedString = this.toPercentageRgbString();
        }
        if (format === "hex" || format === "hex6") {
            formattedString = this.toHexString();
        }
        if (format === "hex3") {
            formattedString = this.toHexString(true);
        }
        if (format === "hex4") {
            formattedString = this.toHex8String(true);
        }
        if (format === "hex8") {
            formattedString = this.toHex8String();
        }
        if (format === "name") {
            formattedString = this.toName();
        }
        if (format === "hsl") {
            formattedString = this.toHslString();
        }
        if (format === "hsv") {
            formattedString = this.toHsvString();
        }

        return formattedString || this.toHexString();
    },
    clone: function() {
        return tinycolor(this.toString());
    },

    _applyModification: function(fn, args) {
        var color = fn.apply(null, [this].concat([].slice.call(args)));
        this._r = color._r;
        this._g = color._g;
        this._b = color._b;
        this.setAlpha(color._a);
        return this;
    },
    lighten: function() {
        return this._applyModification(lighten, arguments);
    },
    brighten: function() {
        return this._applyModification(brighten, arguments);
    },
    darken: function() {
        return this._applyModification(darken, arguments);
    },
    desaturate: function() {
        return this._applyModification(desaturate, arguments);
    },
    saturate: function() {
        return this._applyModification(saturate, arguments);
    },
    greyscale: function() {
        return this._applyModification(greyscale, arguments);
    },
    spin: function() {
        return this._applyModification(spin, arguments);
    },

    _applyCombination: function(fn, args) {
        return fn.apply(null, [this].concat([].slice.call(args)));
    },
    analogous: function() {
        return this._applyCombination(analogous, arguments);
    },
    complement: function() {
        return this._applyCombination(complement, arguments);
    },
    monochromatic: function() {
        return this._applyCombination(monochromatic, arguments);
    },
    splitcomplement: function() {
        return this._applyCombination(splitcomplement, arguments);
    },
    triad: function() {
        return this._applyCombination(triad, arguments);
    },
    tetrad: function() {
        return this._applyCombination(tetrad, arguments);
    }
};

// If input is an object, force 1 into "1.0" to handle ratios properly
// String input requires "1.0" as input, so 1 will be treated as 1
tinycolor.fromRatio = function(color, opts) {
    if (typeof color == "object") {
        var newColor = {};
        for (var i in color) {
            if (color.hasOwnProperty(i)) {
                if (i === "a") {
                    newColor[i] = color[i];
                }
                else {
                    newColor[i] = convertToPercentage(color[i]);
                }
            }
        }
        color = newColor;
    }

    return tinycolor(color, opts);
};

// Given a string or object, convert that input to RGB
// Possible string inputs:
//
//     "red"
//     "#f00" or "f00"
//     "#ff0000" or "ff0000"
//     "#ff000000" or "ff000000"
//     "rgb 255 0 0" or "rgb (255, 0, 0)"
//     "rgb 1.0 0 0" or "rgb (1, 0, 0)"
//     "rgba (255, 0, 0, 1)" or "rgba 255, 0, 0, 1"
//     "rgba (1.0, 0, 0, 1)" or "rgba 1.0, 0, 0, 1"
//     "hsl(0, 100%, 50%)" or "hsl 0 100% 50%"
//     "hsla(0, 100%, 50%, 1)" or "hsla 0 100% 50%, 1"
//     "hsv(0, 100%, 100%)" or "hsv 0 100% 100%"
//
function inputToRGB(color) {

    var rgb = { r: 0, g: 0, b: 0 };
    var a = 1;
    var s = null;
    var v = null;
    var l = null;
    var ok = false;
    var format = false;

    if (typeof color == "string") {
        color = stringInputToObject(color);
    }

    if (typeof color == "object") {
        if (isValidCSSUnit(color.r) && isValidCSSUnit(color.g) && isValidCSSUnit(color.b)) {
            rgb = rgbToRgb(color.r, color.g, color.b);
            ok = true;
            format = String(color.r).substr(-1) === "%" ? "prgb" : "rgb";
        }
        else if (isValidCSSUnit(color.h) && isValidCSSUnit(color.s) && isValidCSSUnit(color.v)) {
            s = convertToPercentage(color.s);
            v = convertToPercentage(color.v);
            rgb = hsvToRgb(color.h, s, v);
            ok = true;
            format = "hsv";
        }
        else if (isValidCSSUnit(color.h) && isValidCSSUnit(color.s) && isValidCSSUnit(color.l)) {
            s = convertToPercentage(color.s);
            l = convertToPercentage(color.l);
            rgb = hslToRgb(color.h, s, l);
            ok = true;
            format = "hsl";
        }

        if (color.hasOwnProperty("a")) {
            a = color.a;
        }
    }

    a = boundAlpha(a);

    return {
        ok: ok,
        format: color.format || format,
        r: mathMin(255, mathMax(rgb.r, 0)),
        g: mathMin(255, mathMax(rgb.g, 0)),
        b: mathMin(255, mathMax(rgb.b, 0)),
        a: a
    };
}

// Conversion Functions
// --------------------

// rgbToHsl, rgbToHsv, hslToRgb, hsvToRgb modified from:
// <http://mjijackson.com/2008/02/rgb-to-hsl-and-rgb-to-hsv-color-model-conversion-algorithms-in-javascript>

// rgbToRgb
// Handle bounds / percentage checking to conform to CSS color spec
// <http://www.w3.org/TR/css3-color/>
// *Assumes:* r, g, b in [0, 255] or [0, 1]
// *Returns:* { r, g, b } in [0, 255]
function rgbToRgb(r, g, b){
    return {
        r: bound01(r, 255) * 255,
        g: bound01(g, 255) * 255,
        b: bound01(b, 255) * 255
    };
}

// rgbToHsl
// Converts an RGB color value to HSL.
// *Assumes:* r, g, and b are contained in [0, 255] or [0, 1]
// *Returns:* { h, s, l } in [0,1]
function rgbToHsl(r, g, b) {

    r = bound01(r, 255);
    g = bound01(g, 255);
    b = bound01(b, 255);

    var max = mathMax(r, g, b), min = mathMin(r, g, b);
    var h, s, l = (max + min) / 2;

    if(max == min) {
        h = s = 0; // achromatic
    }
    else {
        var d = max - min;
        s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
        switch(max) {
            case r: h = (g - b) / d + (g < b ? 6 : 0); break;
            case g: h = (b - r) / d + 2; break;
            case b: h = (r - g) / d + 4; break;
        }

        h /= 6;
    }

    return { h: h, s: s, l: l };
}

// hslToRgb
// Converts an HSL color value to RGB.
// *Assumes:* h is contained in [0, 1] or [0, 360] and s and l are contained [0, 1] or [0, 100]
// *Returns:* { r, g, b } in the set [0, 255]
function hslToRgb(h, s, l) {
    var r, g, b;

    h = bound01(h, 360);
    s = bound01(s, 100);
    l = bound01(l, 100);

    function hue2rgb(p, q, t) {
        if(t < 0) t += 1;
        if(t > 1) t -= 1;
        if(t < 1/6) return p + (q - p) * 6 * t;
        if(t < 1/2) return q;
        if(t < 2/3) return p + (q - p) * (2/3 - t) * 6;
        return p;
    }

    if(s === 0) {
        r = g = b = l; // achromatic
    }
    else {
        var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
        var p = 2 * l - q;
        r = hue2rgb(p, q, h + 1/3);
        g = hue2rgb(p, q, h);
        b = hue2rgb(p, q, h - 1/3);
    }

    return { r: r * 255, g: g * 255, b: b * 255 };
}

// rgbToHsv
// Converts an RGB color value to HSV
// *Assumes:* r, g, and b are contained in the set [0, 255] or [0, 1]
// *Returns:* { h, s, v } in [0,1]
function rgbToHsv(r, g, b) {

    r = bound01(r, 255);
    g = bound01(g, 255);
    b = bound01(b, 255);

    var max = mathMax(r, g, b), min = mathMin(r, g, b);
    var h, s, v = max;

    var d = max - min;
    s = max === 0 ? 0 : d / max;

    if(max == min) {
        h = 0; // achromatic
    }
    else {
        switch(max) {
            case r: h = (g - b) / d + (g < b ? 6 : 0); break;
            case g: h = (b - r) / d + 2; break;
            case b: h = (r - g) / d + 4; break;
        }
        h /= 6;
    }
    return { h: h, s: s, v: v };
}

// hsvToRgb
// Converts an HSV color value to RGB.
// *Assumes:* h is contained in [0, 1] or [0, 360] and s and v are contained in [0, 1] or [0, 100]
// *Returns:* { r, g, b } in the set [0, 255]
 function hsvToRgb(h, s, v) {

    h = bound01(h, 360) * 6;
    s = bound01(s, 100);
    v = bound01(v, 100);

    var i = Math.floor(h),
        f = h - i,
        p = v * (1 - s),
        q = v * (1 - f * s),
        t = v * (1 - (1 - f) * s),
        mod = i % 6,
        r = [v, q, p, p, t, v][mod],
        g = [t, v, v, q, p, p][mod],
        b = [p, p, t, v, v, q][mod];

    return { r: r * 255, g: g * 255, b: b * 255 };
}

// rgbToHex
// Converts an RGB color to hex
// Assumes r, g, and b are contained in the set [0, 255]
// Returns a 3 or 6 character hex
function rgbToHex(r, g, b, allow3Char) {

    var hex = [
        pad2(mathRound(r).toString(16)),
        pad2(mathRound(g).toString(16)),
        pad2(mathRound(b).toString(16))
    ];

    // Return a 3 character hex if possible
    if (allow3Char && hex[0].charAt(0) == hex[0].charAt(1) && hex[1].charAt(0) == hex[1].charAt(1) && hex[2].charAt(0) == hex[2].charAt(1)) {
        return hex[0].charAt(0) + hex[1].charAt(0) + hex[2].charAt(0);
    }

    return hex.join("");
}

// rgbaToHex
// Converts an RGBA color plus alpha transparency to hex
// Assumes r, g, b are contained in the set [0, 255] and
// a in [0, 1]. Returns a 4 or 8 character rgba hex
function rgbaToHex(r, g, b, a, allow4Char) {

    var hex = [
        pad2(mathRound(r).toString(16)),
        pad2(mathRound(g).toString(16)),
        pad2(mathRound(b).toString(16)),
        pad2(convertDecimalToHex(a))
    ];

    // Return a 4 character hex if possible
    if (allow4Char && hex[0].charAt(0) == hex[0].charAt(1) && hex[1].charAt(0) == hex[1].charAt(1) && hex[2].charAt(0) == hex[2].charAt(1) && hex[3].charAt(0) == hex[3].charAt(1)) {
        return hex[0].charAt(0) + hex[1].charAt(0) + hex[2].charAt(0) + hex[3].charAt(0);
    }

    return hex.join("");
}

// rgbaToArgbHex
// Converts an RGBA color to an ARGB Hex8 string
// Rarely used, but required for "toFilter()"
function rgbaToArgbHex(r, g, b, a) {

    var hex = [
        pad2(convertDecimalToHex(a)),
        pad2(mathRound(r).toString(16)),
        pad2(mathRound(g).toString(16)),
        pad2(mathRound(b).toString(16))
    ];

    return hex.join("");
}

// equals
// Can be called with any tinycolor input
tinycolor.equals = function (color1, color2) {
    if (!color1 || !color2) { return false; }
    return tinycolor(color1).toRgbString() == tinycolor(color2).toRgbString();
};

tinycolor.random = function() {
    return tinycolor.fromRatio({
        r: mathRandom(),
        g: mathRandom(),
        b: mathRandom()
    });
};

// Modification Functions
// ----------------------
// Thanks to less.js for some of the basics here
// <https://github.com/cloudhead/less.js/blob/master/lib/less/functions.js>

function desaturate(color, amount) {
    amount = (amount === 0) ? 0 : (amount || 10);
    var hsl = tinycolor(color).toHsl();
    hsl.s -= amount / 100;
    hsl.s = clamp01(hsl.s);
    return tinycolor(hsl);
}

function saturate(color, amount) {
    amount = (amount === 0) ? 0 : (amount || 10);
    var hsl = tinycolor(color).toHsl();
    hsl.s += amount / 100;
    hsl.s = clamp01(hsl.s);
    return tinycolor(hsl);
}

function greyscale(color) {
    return tinycolor(color).desaturate(100);
}

function lighten (color, amount) {
    amount = (amount === 0) ? 0 : (amount || 10);
    var hsl = tinycolor(color).toHsl();
    hsl.l += amount / 100;
    hsl.l = clamp01(hsl.l);
    return tinycolor(hsl);
}

function brighten(color, amount) {
    amount = (amount === 0) ? 0 : (amount || 10);
    var rgb = tinycolor(color).toRgb();
    rgb.r = mathMax(0, mathMin(255, rgb.r - mathRound(255 * - (amount / 100))));
    rgb.g = mathMax(0, mathMin(255, rgb.g - mathRound(255 * - (amount / 100))));
    rgb.b = mathMax(0, mathMin(255, rgb.b - mathRound(255 * - (amount / 100))));
    return tinycolor(rgb);
}

function darken (color, amount) {
    amount = (amount === 0) ? 0 : (amount || 10);
    var hsl = tinycolor(color).toHsl();
    hsl.l -= amount / 100;
    hsl.l = clamp01(hsl.l);
    return tinycolor(hsl);
}

// Spin takes a positive or negative amount within [-360, 360] indicating the change of hue.
// Values outside of this range will be wrapped into this range.
function spin(color, amount) {
    var hsl = tinycolor(color).toHsl();
    var hue = (hsl.h + amount) % 360;
    hsl.h = hue < 0 ? 360 + hue : hue;
    return tinycolor(hsl);
}

// Combination Functions
// ---------------------
// Thanks to jQuery xColor for some of the ideas behind these
// <https://github.com/infusion/jQuery-xcolor/blob/master/jquery.xcolor.js>

function complement(color) {
    var hsl = tinycolor(color).toHsl();
    hsl.h = (hsl.h + 180) % 360;
    return tinycolor(hsl);
}

function triad(color) {
    var hsl = tinycolor(color).toHsl();
    var h = hsl.h;
    return [
        tinycolor(color),
        tinycolor({ h: (h + 120) % 360, s: hsl.s, l: hsl.l }),
        tinycolor({ h: (h + 240) % 360, s: hsl.s, l: hsl.l })
    ];
}

function tetrad(color) {
    var hsl = tinycolor(color).toHsl();
    var h = hsl.h;
    return [
        tinycolor(color),
        tinycolor({ h: (h + 90) % 360, s: hsl.s, l: hsl.l }),
        tinycolor({ h: (h + 180) % 360, s: hsl.s, l: hsl.l }),
        tinycolor({ h: (h + 270) % 360, s: hsl.s, l: hsl.l })
    ];
}

function splitcomplement(color) {
    var hsl = tinycolor(color).toHsl();
    var h = hsl.h;
    return [
        tinycolor(color),
        tinycolor({ h: (h + 72) % 360, s: hsl.s, l: hsl.l}),
        tinycolor({ h: (h + 216) % 360, s: hsl.s, l: hsl.l})
    ];
}

function analogous(color, results, slices) {
    results = results || 6;
    slices = slices || 30;

    var hsl = tinycolor(color).toHsl();
    var part = 360 / slices;
    var ret = [tinycolor(color)];

    for (hsl.h = ((hsl.h - (part * results >> 1)) + 720) % 360; --results; ) {
        hsl.h = (hsl.h + part) % 360;
        ret.push(tinycolor(hsl));
    }
    return ret;
}

function monochromatic(color, results) {
    results = results || 6;
    var hsv = tinycolor(color).toHsv();
    var h = hsv.h, s = hsv.s, v = hsv.v;
    var ret = [];
    var modification = 1 / results;

    while (results--) {
        ret.push(tinycolor({ h: h, s: s, v: v}));
        v = (v + modification) % 1;
    }

    return ret;
}

// Utility Functions
// ---------------------

tinycolor.mix = function(color1, color2, amount) {
    amount = (amount === 0) ? 0 : (amount || 50);

    var rgb1 = tinycolor(color1).toRgb();
    var rgb2 = tinycolor(color2).toRgb();

    var p = amount / 100;

    var rgba = {
        r: ((rgb2.r - rgb1.r) * p) + rgb1.r,
        g: ((rgb2.g - rgb1.g) * p) + rgb1.g,
        b: ((rgb2.b - rgb1.b) * p) + rgb1.b,
        a: ((rgb2.a - rgb1.a) * p) + rgb1.a
    };

    return tinycolor(rgba);
};

// Readability Functions
// ---------------------
// <http://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef (WCAG Version 2)

// contrast
// Analyze the 2 colors and returns the color contrast defined by (WCAG Version 2)
tinycolor.readability = function(color1, color2) {
    var c1 = tinycolor(color1);
    var c2 = tinycolor(color2);
    return (Math.max(c1.getLuminance(),c2.getLuminance())+0.05) / (Math.min(c1.getLuminance(),c2.getLuminance())+0.05);
};

// isReadable
// Ensure that foreground and background color combinations meet WCAG2 guidelines.
// The third argument is an optional Object.
//      the 'level' property states 'AA' or 'AAA' - if missing or invalid, it defaults to 'AA';
//      the 'size' property states 'large' or 'small' - if missing or invalid, it defaults to 'small'.
// If the entire object is absent, isReadable defaults to {level:"AA",size:"small"}.

// *Example*
//    tinycolor.isReadable("#000", "#111") => false
//    tinycolor.isReadable("#000", "#111",{level:"AA",size:"large"}) => false
tinycolor.isReadable = function(color1, color2, wcag2) {
    var readability = tinycolor.readability(color1, color2);
    var wcag2Parms, out;

    out = false;

    wcag2Parms = validateWCAG2Parms(wcag2);
    switch (wcag2Parms.level + wcag2Parms.size) {
        case "AAsmall":
        case "AAAlarge":
            out = readability >= 4.5;
            break;
        case "AAlarge":
            out = readability >= 3;
            break;
        case "AAAsmall":
            out = readability >= 7;
            break;
    }
    return out;

};

// mostReadable
// Given a base color and a list of possible foreground or background
// colors for that base, returns the most readable color.
// Optionally returns Black or White if the most readable color is unreadable.
// *Example*
//    tinycolor.mostReadable(tinycolor.mostReadable("#123", ["#124", "#125"],{includeFallbackColors:false}).toHexString(); // "#112255"
//    tinycolor.mostReadable(tinycolor.mostReadable("#123", ["#124", "#125"],{includeFallbackColors:true}).toHexString();  // "#ffffff"
//    tinycolor.mostReadable("#a8015a", ["#faf3f3"],{includeFallbackColors:true,level:"AAA",size:"large"}).toHexString(); // "#faf3f3"
//    tinycolor.mostReadable("#a8015a", ["#faf3f3"],{includeFallbackColors:true,level:"AAA",size:"small"}).toHexString(); // "#ffffff"
tinycolor.mostReadable = function(baseColor, colorList, args) {
    var bestColor = null;
    var bestScore = 0;
    var readability;
    var includeFallbackColors, level, size ;
    args = args || {};
    includeFallbackColors = args.includeFallbackColors ;
    level = args.level;
    size = args.size;

    for (var i= 0; i < colorList.length ; i++) {
        readability = tinycolor.readability(baseColor, colorList[i]);
        if (readability > bestScore) {
            bestScore = readability;
            bestColor = tinycolor(colorList[i]);
        }
    }

    if (tinycolor.isReadable(baseColor, bestColor, {"level":level,"size":size}) || !includeFallbackColors) {
        return bestColor;
    }
    else {
        args.includeFallbackColors=false;
        return tinycolor.mostReadable(baseColor,["#fff", "#000"],args);
    }
};

// Big List of Colors
// ------------------
// <http://www.w3.org/TR/css3-color/#svg-color>
var names = tinycolor.names = {
    aliceblue: "f0f8ff",
    antiquewhite: "faebd7",
    aqua: "0ff",
    aquamarine: "7fffd4",
    azure: "f0ffff",
    beige: "f5f5dc",
    bisque: "ffe4c4",
    black: "000",
    blanchedalmond: "ffebcd",
    blue: "00f",
    blueviolet: "8a2be2",
    brown: "a52a2a",
    burlywood: "deb887",
    burntsienna: "ea7e5d",
    cadetblue: "5f9ea0",
    chartreuse: "7fff00",
    chocolate: "d2691e",
    coral: "ff7f50",
    cornflowerblue: "6495ed",
    cornsilk: "fff8dc",
    crimson: "dc143c",
    cyan: "0ff",
    darkblue: "00008b",
    darkcyan: "008b8b",
    darkgoldenrod: "b8860b",
    darkgray: "a9a9a9",
    darkgreen: "006400",
    darkgrey: "a9a9a9",
    darkkhaki: "bdb76b",
    darkmagenta: "8b008b",
    darkolivegreen: "556b2f",
    darkorange: "ff8c00",
    darkorchid: "9932cc",
    darkred: "8b0000",
    darksalmon: "e9967a",
    darkseagreen: "8fbc8f",
    darkslateblue: "483d8b",
    darkslategray: "2f4f4f",
    darkslategrey: "2f4f4f",
    darkturquoise: "00ced1",
    darkviolet: "9400d3",
    deeppink: "ff1493",
    deepskyblue: "00bfff",
    dimgray: "696969",
    dimgrey: "696969",
    dodgerblue: "1e90ff",
    firebrick: "b22222",
    floralwhite: "fffaf0",
    forestgreen: "228b22",
    fuchsia: "f0f",
    gainsboro: "dcdcdc",
    ghostwhite: "f8f8ff",
    gold: "ffd700",
    goldenrod: "daa520",
    gray: "808080",
    green: "008000",
    greenyellow: "adff2f",
    grey: "808080",
    honeydew: "f0fff0",
    hotpink: "ff69b4",
    indianred: "cd5c5c",
    indigo: "4b0082",
    ivory: "fffff0",
    khaki: "f0e68c",
    lavender: "e6e6fa",
    lavenderblush: "fff0f5",
    lawngreen: "7cfc00",
    lemonchiffon: "fffacd",
    lightblue: "add8e6",
    lightcoral: "f08080",
    lightcyan: "e0ffff",
    lightgoldenrodyellow: "fafad2",
    lightgray: "d3d3d3",
    lightgreen: "90ee90",
    lightgrey: "d3d3d3",
    lightpink: "ffb6c1",
    lightsalmon: "ffa07a",
    lightseagreen: "20b2aa",
    lightskyblue: "87cefa",
    lightslategray: "789",
    lightslategrey: "789",
    lightsteelblue: "b0c4de",
    lightyellow: "ffffe0",
    lime: "0f0",
    limegreen: "32cd32",
    linen: "faf0e6",
    magenta: "f0f",
    maroon: "800000",
    mediumaquamarine: "66cdaa",
    mediumblue: "0000cd",
    mediumorchid: "ba55d3",
    mediumpurple: "9370db",
    mediumseagreen: "3cb371",
    mediumslateblue: "7b68ee",
    mediumspringgreen: "00fa9a",
    mediumturquoise: "48d1cc",
    mediumvioletred: "c71585",
    midnightblue: "191970",
    mintcream: "f5fffa",
    mistyrose: "ffe4e1",
    moccasin: "ffe4b5",
    navajowhite: "ffdead",
    navy: "000080",
    oldlace: "fdf5e6",
    olive: "808000",
    olivedrab: "6b8e23",
    orange: "ffa500",
    orangered: "ff4500",
    orchid: "da70d6",
    palegoldenrod: "eee8aa",
    palegreen: "98fb98",
    paleturquoise: "afeeee",
    palevioletred: "db7093",
    papayawhip: "ffefd5",
    peachpuff: "ffdab9",
    peru: "cd853f",
    pink: "ffc0cb",
    plum: "dda0dd",
    powderblue: "b0e0e6",
    purple: "800080",
    rebeccapurple: "663399",
    red: "f00",
    rosybrown: "bc8f8f",
    royalblue: "4169e1",
    saddlebrown: "8b4513",
    salmon: "fa8072",
    sandybrown: "f4a460",
    seagreen: "2e8b57",
    seashell: "fff5ee",
    sienna: "a0522d",
    silver: "c0c0c0",
    skyblue: "87ceeb",
    slateblue: "6a5acd",
    slategray: "708090",
    slategrey: "708090",
    snow: "fffafa",
    springgreen: "00ff7f",
    steelblue: "4682b4",
    tan: "d2b48c",
    teal: "008080",
    thistle: "d8bfd8",
    tomato: "ff6347",
    turquoise: "40e0d0",
    violet: "ee82ee",
    wheat: "f5deb3",
    white: "fff",
    whitesmoke: "f5f5f5",
    yellow: "ff0",
    yellowgreen: "9acd32"
};

// Make it easy to access colors via hexNames[hex]
var hexNames = tinycolor.hexNames = flip(names);

// Utilities
// ---------

// { 'name1': 'val1' } becomes { 'val1': 'name1' }
function flip(o) {
    var flipped = { };
    for (var i in o) {
        if (o.hasOwnProperty(i)) {
            flipped[o[i]] = i;
        }
    }
    return flipped;
}

// Return a valid alpha value [0,1] with all invalid values being set to 1
function boundAlpha(a) {
    a = parseFloat(a);

    if (isNaN(a) || a < 0 || a > 1) {
        a = 1;
    }

    return a;
}

// Take input from [0, n] and return it as [0, 1]
function bound01(n, max) {
    if (isOnePointZero(n)) { n = "100%"; }

    var processPercent = isPercentage(n);
    n = mathMin(max, mathMax(0, parseFloat(n)));

    // Automatically convert percentage into number
    if (processPercent) {
        n = parseInt(n * max, 10) / 100;
    }

    // Handle floating point rounding errors
    if ((Math.abs(n - max) < 0.000001)) {
        return 1;
    }

    // Convert into [0, 1] range if it isn't already
    return (n % max) / parseFloat(max);
}

// Force a number between 0 and 1
function clamp01(val) {
    return mathMin(1, mathMax(0, val));
}

// Parse a base-16 hex value into a base-10 integer
function parseIntFromHex(val) {
    return parseInt(val, 16);
}

// Need to handle 1.0 as 100%, since once it is a number, there is no difference between it and 1
// <http://stackoverflow.com/questions/7422072/javascript-how-to-detect-number-as-a-decimal-including-1-0>
function isOnePointZero(n) {
    return typeof n == "string" && n.indexOf('.') != -1 && parseFloat(n) === 1;
}

// Check to see if string passed in is a percentage
function isPercentage(n) {
    return typeof n === "string" && n.indexOf('%') != -1;
}

// Force a hex value to have 2 characters
function pad2(c) {
    return c.length == 1 ? '0' + c : '' + c;
}

// Replace a decimal with it's percentage value
function convertToPercentage(n) {
    if (n <= 1) {
        n = (n * 100) + "%";
    }

    return n;
}

// Converts a decimal to a hex value
function convertDecimalToHex(d) {
    return Math.round(parseFloat(d) * 255).toString(16);
}
// Converts a hex value to a decimal
function convertHexToDecimal(h) {
    return (parseIntFromHex(h) / 255);
}

var matchers = (function() {

    // <http://www.w3.org/TR/css3-values/#integers>
    var CSS_INTEGER = "[-\\+]?\\d+%?";

    // <http://www.w3.org/TR/css3-values/#number-value>
    var CSS_NUMBER = "[-\\+]?\\d*\\.\\d+%?";

    // Allow positive/negative integer/number.  Don't capture the either/or, just the entire outcome.
    var CSS_UNIT = "(?:" + CSS_NUMBER + ")|(?:" + CSS_INTEGER + ")";

    // Actual matching.
    // Parentheses and commas are optional, but not required.
    // Whitespace can take the place of commas or opening paren
    var PERMISSIVE_MATCH3 = "[\\s|\\(]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")\\s*\\)?";
    var PERMISSIVE_MATCH4 = "[\\s|\\(]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")\\s*\\)?";

    return {
        CSS_UNIT: new RegExp(CSS_UNIT),
        rgb: new RegExp("rgb" + PERMISSIVE_MATCH3),
        rgba: new RegExp("rgba" + PERMISSIVE_MATCH4),
        hsl: new RegExp("hsl" + PERMISSIVE_MATCH3),
        hsla: new RegExp("hsla" + PERMISSIVE_MATCH4),
        hsv: new RegExp("hsv" + PERMISSIVE_MATCH3),
        hsva: new RegExp("hsva" + PERMISSIVE_MATCH4),
        hex3: /^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,
        hex6: /^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/,
        hex4: /^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,
        hex8: /^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/
    };
})();

// isValidCSSUnit
// Take in a single string / number and check to see if it looks like a CSS unit
// (see matchers above for definition).
function isValidCSSUnit(color) {
    return !!matchers.CSS_UNIT.exec(color);
}

// stringInputToObject
// Permissive string parsing.  Take in a number of formats, and output an object
// based on detected format.  Returns { r, g, b } or { h, s, l } or { h, s, v}
function stringInputToObject(color) {

    color = color.replace(trimLeft, '').replace(trimRight, '').toLowerCase();
    var named = false;
    if (names[color]) {
        color = names[color];
        named = true;
    }
    else if (color == 'transparent') {
        return { r: 0, g: 0, b: 0, a: 0, format: "name" };
    }

    // Try to match string input using regular expressions.
    // Keep most of the number bounding out of this function - don't worry about [0,1] or [0,100] or [0,360]
    // Just return an object and let the conversion functions handle that.
    // This way the result will be the same whether the tinycolor is initialized with string or object.
    var match;
    if ((match = matchers.rgb.exec(color))) {
        return { r: match[1], g: match[2], b: match[3] };
    }
    if ((match = matchers.rgba.exec(color))) {
        return { r: match[1], g: match[2], b: match[3], a: match[4] };
    }
    if ((match = matchers.hsl.exec(color))) {
        return { h: match[1], s: match[2], l: match[3] };
    }
    if ((match = matchers.hsla.exec(color))) {
        return { h: match[1], s: match[2], l: match[3], a: match[4] };
    }
    if ((match = matchers.hsv.exec(color))) {
        return { h: match[1], s: match[2], v: match[3] };
    }
    if ((match = matchers.hsva.exec(color))) {
        return { h: match[1], s: match[2], v: match[3], a: match[4] };
    }
    if ((match = matchers.hex8.exec(color))) {
        return {
            r: parseIntFromHex(match[1]),
            g: parseIntFromHex(match[2]),
            b: parseIntFromHex(match[3]),
            a: convertHexToDecimal(match[4]),
            format: named ? "name" : "hex8"
        };
    }
    if ((match = matchers.hex6.exec(color))) {
        return {
            r: parseIntFromHex(match[1]),
            g: parseIntFromHex(match[2]),
            b: parseIntFromHex(match[3]),
            format: named ? "name" : "hex"
        };
    }
    if ((match = matchers.hex4.exec(color))) {
        return {
            r: parseIntFromHex(match[1] + '' + match[1]),
            g: parseIntFromHex(match[2] + '' + match[2]),
            b: parseIntFromHex(match[3] + '' + match[3]),
            a: convertHexToDecimal(match[4] + '' + match[4]),
            format: named ? "name" : "hex8"
        };
    }
    if ((match = matchers.hex3.exec(color))) {
        return {
            r: parseIntFromHex(match[1] + '' + match[1]),
            g: parseIntFromHex(match[2] + '' + match[2]),
            b: parseIntFromHex(match[3] + '' + match[3]),
            format: named ? "name" : "hex"
        };
    }

    return false;
}

function validateWCAG2Parms(parms) {
    // return valid WCAG2 parms for isReadable.
    // If input parms are invalid, return {"level":"AA", "size":"small"}
    var level, size;
    parms = parms || {"level":"AA", "size":"small"};
    level = (parms.level || "AA").toUpperCase();
    size = (parms.size || "small").toLowerCase();
    if (level !== "AA" && level !== "AAA") {
        level = "AA";
    }
    if (size !== "small" && size !== "large") {
        size = "small";
    }
    return {"level":level, "size":size};
}

this.tinycolor = tinycolor;

})()`;
}
// It is hacky way to make this function will be compiled preferentially by less
// resolve error: `ReferenceError: colorPalette is not defined`
// https://github.com/ant-design/ant-motion/issues/44
.tinyColorMixin();

// We create a very complex algorithm which take the place of original tint/shade color system
// to make sure no one can understand it 👻
// and create an entire color palette magicly by inputing just a single primary color.
// We are using bezier-curve easing function and some color manipulations like tint/shade/darken/spin
.colorPaletteMixin() {
@functions: ~`(function() {
  var hueStep = 2;
  var saturationStep = 16;
  var saturationStep2 = 5;
  var brightnessStep1 = 5;
  var brightnessStep2 = 15;
  var lightColorCount = 5;
  var darkColorCount = 4;

  var getHue = function(hsv, i, isLight) {
    var hue;
    if (hsv.h >= 60 && hsv.h <= 240) {
      hue = isLight ? hsv.h - hueStep * i : hsv.h + hueStep * i;
    } else {
      hue = isLight ? hsv.h + hueStep * i : hsv.h - hueStep * i;
    }
    if (hue < 0) {
      hue += 360;
    } else if (hue >= 360) {
      hue -= 360;
    }
    return Math.round(hue);
  };
  var getSaturation = function(hsv, i, isLight) {
    var saturation;
    if (isLight) {
      saturation = Math.round(hsv.s * 100) - saturationStep * i;
    } else if (i == darkColorCount) {
      saturation = Math.round(hsv.s * 100) + saturationStep;
    } else {
      saturation = Math.round(hsv.s * 100) + saturationStep2 * i;
    }
    if (saturation > 100) {
      saturation = 100;
    }
    if (isLight && i === lightColorCount && saturation > 10) {
      saturation = 10;
    }
    if (saturation < 6) {
      saturation = 6;
    }
    return Math.round(saturation);
  };
  var getValue = function(hsv, i, isLight) {
    if (isLight) {
      return Math.round(hsv.v * 100) + brightnessStep1 * i;
    }
    return Math.round(hsv.v * 100) - brightnessStep2 * i;
  };

  this.colorPalette = function(color, index) {
    var isLight = index <= 6;
    var hsv = tinycolor(color).toHsv();
    var i = isLight ? lightColorCount + 1 - index : index - lightColorCount - 1;
    return tinycolor({
      h: getHue(hsv, i, isLight),
      s: getSaturation(hsv, i, isLight),
      v: getValue(hsv, i, isLight),
    }).toHexString();
  };
})()`;
}
// It is hacky way to make this function will be compiled preferentially by less
// resolve error: `ReferenceError: colorPalette is not defined`
// https://github.com/ant-design/ant-motion/issues/44
.colorPaletteMixin();

// color palettes
@blue-1: color(~`colorPalette("@{blue-6}", 1)`);
@blue-2: color(~`colorPalette("@{blue-6}", 2)`);
@blue-3: color(~`colorPalette("@{blue-6}", 3)`);
@blue-4: color(~`colorPalette("@{blue-6}", 4)`);
@blue-5: color(~`colorPalette("@{blue-6}", 5)`);
@blue-6: #1890ff;
@blue-7: color(~`colorPalette("@{blue-6}", 7)`);
@blue-8: color(~`colorPalette("@{blue-6}", 8)`);
@blue-9: color(~`colorPalette("@{blue-6}", 9)`);
@blue-10: color(~`colorPalette("@{blue-6}", 10)`);

@purple-1: color(~`colorPalette("@{purple-6}", 1)`);
@purple-2: color(~`colorPalette("@{purple-6}", 2)`);
@purple-3: color(~`colorPalette("@{purple-6}", 3)`);
@purple-4: color(~`colorPalette("@{purple-6}", 4)`);
@purple-5: color(~`colorPalette("@{purple-6}", 5)`);
@purple-6: #722ed1;
@purple-7: color(~`colorPalette("@{purple-6}", 7)`);
@purple-8: color(~`colorPalette("@{purple-6}", 8)`);
@purple-9: color(~`colorPalette("@{purple-6}", 9)`);
@purple-10: color(~`colorPalette("@{purple-6}", 10)`);

@cyan-1: color(~`colorPalette("@{cyan-6}", 1)`);
@cyan-2: color(~`colorPalette("@{cyan-6}", 2)`);
@cyan-3: color(~`colorPalette("@{cyan-6}", 3)`);
@cyan-4: color(~`colorPalette("@{cyan-6}", 4)`);
@cyan-5: color(~`colorPalette("@{cyan-6}", 5)`);
@cyan-6: #13c2c2;
@cyan-7: color(~`colorPalette("@{cyan-6}", 7)`);
@cyan-8: color(~`colorPalette("@{cyan-6}", 8)`);
@cyan-9: color(~`colorPalette("@{cyan-6}", 9)`);
@cyan-10: color(~`colorPalette("@{cyan-6}", 10)`);

@green-1: color(~`colorPalette("@{green-6}", 1)`);
@green-2: color(~`colorPalette("@{green-6}", 2)`);
@green-3: color(~`colorPalette("@{green-6}", 3)`);
@green-4: color(~`colorPalette("@{green-6}", 4)`);
@green-5: color(~`colorPalette("@{green-6}", 5)`);
@green-6: #52c41a;
@green-7: color(~`colorPalette("@{green-6}", 7)`);
@green-8: color(~`colorPalette("@{green-6}", 8)`);
@green-9: color(~`colorPalette("@{green-6}", 9)`);
@green-10: color(~`colorPalette("@{green-6}", 10)`);

@magenta-1: color(~`colorPalette("@{magenta-6}", 1)`);
@magenta-2: color(~`colorPalette("@{magenta-6}", 2)`);
@magenta-3: color(~`colorPalette("@{magenta-6}", 3)`);
@magenta-4: color(~`colorPalette("@{magenta-6}", 4)`);
@magenta-5: color(~`colorPalette("@{magenta-6}", 5)`);
@magenta-6: #eb2f96;
@magenta-7: color(~`colorPalette("@{magenta-6}", 7)`);
@magenta-8: color(~`colorPalette("@{magenta-6}", 8)`);
@magenta-9: color(~`colorPalette("@{magenta-6}", 9)`);
@magenta-10: color(~`colorPalette("@{magenta-6}", 10)`);

// alias of magenta
@pink-1: color(~`colorPalette("@{pink-6}", 1)`);
@pink-2: color(~`colorPalette("@{pink-6}", 2)`);
@pink-3: color(~`colorPalette("@{pink-6}", 3)`);
@pink-4: color(~`colorPalette("@{pink-6}", 4)`);
@pink-5: color(~`colorPalette("@{pink-6}", 5)`);
@pink-6: #eb2f96;
@pink-7: color(~`colorPalette("@{pink-6}", 7)`);
@pink-8: color(~`colorPalette("@{pink-6}", 8)`);
@pink-9: color(~`colorPalette("@{pink-6}", 9)`);
@pink-10: color(~`colorPalette("@{pink-6}", 10)`);

@red-1: color(~`colorPalette("@{red-6}", 1)`);
@red-2: color(~`colorPalette("@{red-6}", 2)`);
@red-3: color(~`colorPalette("@{red-6}", 3)`);
@red-4: color(~`colorPalette("@{red-6}", 4)`);
@red-5: color(~`colorPalette("@{red-6}", 5)`);
@red-6: #f5222d;
@red-7: color(~`colorPalette("@{red-6}", 7)`);
@red-8: color(~`colorPalette("@{red-6}", 8)`);
@red-9: color(~`colorPalette("@{red-6}", 9)`);
@red-10: color(~`colorPalette("@{red-6}", 10)`);

@orange-1: color(~`colorPalette("@{orange-6}", 1)`);
@orange-2: color(~`colorPalette("@{orange-6}", 2)`);
@orange-3: color(~`colorPalette("@{orange-6}", 3)`);
@orange-4: color(~`colorPalette("@{orange-6}", 4)`);
@orange-5: color(~`colorPalette("@{orange-6}", 5)`);
@orange-6: #fa8c16;
@orange-7: color(~`colorPalette("@{orange-6}", 7)`);
@orange-8: color(~`colorPalette("@{orange-6}", 8)`);
@orange-9: color(~`colorPalette("@{orange-6}", 9)`);
@orange-10: color(~`colorPalette("@{orange-6}", 10)`);

@yellow-1: color(~`colorPalette("@{yellow-6}", 1)`);
@yellow-2: color(~`colorPalette("@{yellow-6}", 2)`);
@yellow-3: color(~`colorPalette("@{yellow-6}", 3)`);
@yellow-4: color(~`colorPalette("@{yellow-6}", 4)`);
@yellow-5: color(~`colorPalette("@{yellow-6}", 5)`);
@yellow-6: #fadb14;
@yellow-7: color(~`colorPalette("@{yellow-6}", 7)`);
@yellow-8: color(~`colorPalette("@{yellow-6}", 8)`);
@yellow-9: color(~`colorPalette("@{yellow-6}", 9)`);
@yellow-10: color(~`colorPalette("@{yellow-6}", 10)`);

@volcano-1: color(~`colorPalette("@{volcano-6}", 1)`);
@volcano-2: color(~`colorPalette("@{volcano-6}", 2)`);
@volcano-3: color(~`colorPalette("@{volcano-6}", 3)`);
@volcano-4: color(~`colorPalette("@{volcano-6}", 4)`);
@volcano-5: color(~`colorPalette("@{volcano-6}", 5)`);
@volcano-6: #fa541c;
@volcano-7: color(~`colorPalette("@{volcano-6}", 7)`);
@volcano-8: color(~`colorPalette("@{volcano-6}", 8)`);
@volcano-9: color(~`colorPalette("@{volcano-6}", 9)`);
@volcano-10: color(~`colorPalette("@{volcano-6}", 10)`);

@geekblue-1: color(~`colorPalette("@{geekblue-6}", 1)`);
@geekblue-2: color(~`colorPalette("@{geekblue-6}", 2)`);
@geekblue-3: color(~`colorPalette("@{geekblue-6}", 3)`);
@geekblue-4: color(~`colorPalette("@{geekblue-6}", 4)`);
@geekblue-5: color(~`colorPalette("@{geekblue-6}", 5)`);
@geekblue-6: #2f54eb;
@geekblue-7: color(~`colorPalette("@{geekblue-6}", 7)`);
@geekblue-8: color(~`colorPalette("@{geekblue-6}", 8)`);
@geekblue-9: color(~`colorPalette("@{geekblue-6}", 9)`);
@geekblue-10: color(~`colorPalette("@{geekblue-6}", 10)`);

@lime-1: color(~`colorPalette("@{lime-6}", 1)`);
@lime-2: color(~`colorPalette("@{lime-6}", 2)`);
@lime-3: color(~`colorPalette("@{lime-6}", 3)`);
@lime-4: color(~`colorPalette("@{lime-6}", 4)`);
@lime-5: color(~`colorPalette("@{lime-6}", 5)`);
@lime-6: #a0d911;
@lime-7: color(~`colorPalette("@{lime-6}", 7)`);
@lime-8: color(~`colorPalette("@{lime-6}", 8)`);
@lime-9: color(~`colorPalette("@{lime-6}", 9)`);
@lime-10: color(~`colorPalette("@{lime-6}", 10)`);

@gold-1: color(~`colorPalette("@{gold-6}", 1)`);
@gold-2: color(~`colorPalette("@{gold-6}", 2)`);
@gold-3: color(~`colorPalette("@{gold-6}", 3)`);
@gold-4: color(~`colorPalette("@{gold-6}", 4)`);
@gold-5: color(~`colorPalette("@{gold-6}", 5)`);
@gold-6: #faad14;
@gold-7: color(~`colorPalette("@{gold-6}", 7)`);
@gold-8: color(~`colorPalette("@{gold-6}", 8)`);
@gold-9: color(~`colorPalette("@{gold-6}", 9)`);
@gold-10: color(~`colorPalette("@{gold-6}", 10)`);

// The prefix to use on all css classes from ant.
@ant-prefix             : ant;

// -------- Colors -----------
@primary-color          : @blue-6;
@info-color             : @blue-6;
@success-color          : @green-6;
@processing-color       : @blue-6;
@error-color            : @red-6;
@highlight-color        : @red-6;
@warning-color          : @gold-6;
@normal-color           : #d9d9d9;

// Color used by default to control hover and active backgrounds and for
// alert info backgrounds.
@primary-1: color(~`colorPalette("@{primary-color}", 1)`);  // replace tint(@primary-color, 90%)
@primary-2: color(~`colorPalette("@{primary-color}", 2)`);  // replace tint(@primary-color, 80%)
@primary-3: color(~`colorPalette("@{primary-color}", 3)`);  // unused
@primary-4: color(~`colorPalette("@{primary-color}", 4)`);  // unused
@primary-5: color(~`colorPalette("@{primary-color}", 5)`);  // color used to control the text color in many active and hover states, replace tint(@primary-color, 20%)
@primary-6: @primary-color;                                 // color used to control the text color of active buttons, don't use, use @primary-color
@primary-7: color(~`colorPalette("@{primary-color}", 7)`);  // replace shade(@primary-color, 5%)
@primary-8: color(~`colorPalette("@{primary-color}", 8)`);  // unused
@primary-9: color(~`colorPalette("@{primary-color}", 9)`);  // unused
@primary-10: color(~`colorPalette("@{primary-color}", 10)`);  // unused

// Base Scaffolding Variables
// ---

// Background color for `<body>`
@body-background        : #fff;
// Base background color for most components
@component-background   : #fff;
@font-family  : "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif,
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
@code-family            : "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
@heading-color          : fade(#000, 85%);
@text-color             : fade(#000, 65%);
@text-color-secondary   : fade(#000, 45%);
@heading-color-dark     : fade(#fff, 100%);
@text-color-dark        : fade(#fff, 85%);
@text-color-secondary-dark: fade(#fff, 65%);
@font-size-base         : 14px;
@font-size-lg           : @font-size-base + 2px;
@font-size-sm           : 12px;
@line-height-base       : 1.5;
@border-radius-base     : 4px;
@border-radius-sm       : 2px;

// vertical paddings
@padding-lg    : 24px; // containers
@padding-md    : 16px; // small containers and buttons
@padding-sm    : 12px; // Form controls and items
@padding-xs    : 8px;  // small items

// vertical padding for all form controls
@control-padding-horizontal: @padding-sm;
@control-padding-horizontal-sm: @padding-xs;

// The background colors for active and hover states for things like
// list items or table cells.
@item-active-bg         : @primary-1;
@item-hover-bg          : @primary-1;

// ICONFONT
@iconfont-css-prefix    : anticon;

// LINK
@link-color             : @primary-color;
@link-hover-color       : color(~`colorPalette("@{link-color}", 5)`);
@link-active-color      : color(~`colorPalette("@{link-color}", 7)`);
@link-decoration        : none;
@link-hover-decoration  : none;

// Animation
@ease-base-out       : cubic-bezier(0.7, 0.3, 0.1, 1);
@ease-base-in        : cubic-bezier(0.9, 0, 0.3, 0.7);
@ease-out            : cubic-bezier(0.215, 0.61, 0.355, 1);
@ease-in             : cubic-bezier(0.55, 0.055, 0.675, 0.19);
@ease-in-out         : cubic-bezier(0.645, 0.045, 0.355, 1);
@ease-out-back       : cubic-bezier(0.12, 0.4, 0.29, 1.46);
@ease-in-back        : cubic-bezier(0.71, -0.46, 0.88, 0.6);
@ease-in-out-back    : cubic-bezier(0.71, -0.46, 0.29, 1.46);
@ease-out-circ       : cubic-bezier(0.08, 0.82, 0.17, 1);
@ease-in-circ        : cubic-bezier(0.6, 0.04, 0.98, 0.34);
@ease-in-out-circ    : cubic-bezier(0.78, 0.14, 0.15, 0.86);
@ease-out-quint      : cubic-bezier(0.23, 1, 0.32, 1);
@ease-in-quint       : cubic-bezier(0.755, 0.05, 0.855, 0.06);
@ease-in-out-quint   : cubic-bezier(0.86, 0, 0.07, 1);

// Border color
@border-color-base      : hsv(0, 0, 85%);  // base border outline a component
@border-color-split     : hsv(0, 0, 91%);  // split border inside a component
@border-width-base      : 1px;            // width of the border for a component
@border-style-base      : solid;          // style of a components border

// Outline
@outline-blur-size      : 0;
@outline-width          : 2px;
@outline-color          : @primary-color;

@background-color-light : hsv(0, 0, 98%);  // background of header and selected item
@background-color-base  : hsv(0, 0, 96%);  // Default grey background color

// Disabled states
@disabled-color         : fade(#000, 25%);
@disabled-bg            : @background-color-base;
@disabled-color-dark    : fade(#fff, 35%);

// Shadow
@shadow-color           : rgba(0, 0, 0, .15);
@box-shadow-base        : @shadow-1-down;
@shadow-1-up            : 0 -2px 8px @shadow-color;
@shadow-1-down          : 0 2px 8px @shadow-color;
@shadow-1-left          : -2px 0 8px @shadow-color;
@shadow-1-right         : 2px 0 8px @shadow-color;
@shadow-2               : 0 4px 12px @shadow-color;

// Buttons
@btn-font-weight        : 400;
@btn-border-radius-base : @border-radius-base;
@btn-border-radius-sm   : @border-radius-base;

@btn-primary-color      : #fff;
@btn-primary-bg         : @primary-color;

@btn-default-color      : @text-color;
@btn-default-bg         : #fff;
@btn-default-border     : @border-color-base;

@btn-danger-color       : @error-color;
@btn-danger-bg          : @background-color-base;
@btn-danger-border      : @border-color-base;

@btn-disable-color      : @disabled-color;
@btn-disable-bg         : @disabled-bg;
@btn-disable-border     : @border-color-base;

@btn-padding-base       : 0 @padding-md - 1px;
@btn-font-size-lg       : @font-size-lg;
@btn-font-size-sm       : @font-size-base;
@btn-padding-lg         : @btn-padding-base;
@btn-padding-sm         : 0 @padding-xs - 1px;

@btn-height-base        : 32px;
@btn-height-lg          : 40px;
@btn-height-sm          : 24px;

@btn-circle-size        : @btn-height-base;
@btn-circle-size-lg     : @btn-height-lg;
@btn-circle-size-sm     : @btn-height-sm;

@btn-group-border       : @primary-5;

// Checkbox
@checkbox-size          : 16px;
@checkbox-color         : @primary-color;
@checkbox-check-color   : #fff;

// Radio
@radio-size             : 16px;
@radio-dot-color        : @primary-color;

// Radio buttons
@radio-button-bg           : @btn-default-bg;
@radio-button-color        : @btn-default-color;
@radio-button-hover-color  : @primary-5;
@radio-button-active-color : @primary-7;

// Media queries breakpoints
// Extra small screen / phone
@screen-xs              : 480px;
@screen-xs-min          : @screen-xs;

// Small screen / tablet
@screen-sm              : 576px;
@screen-sm-min          : @screen-sm;

// Medium screen / desktop
@screen-md              : 768px;
@screen-md-min          : @screen-md;

// Large screen / wide desktop
@screen-lg              : 992px;
@screen-lg-min          : @screen-lg;

// Extra large screen / full hd
@screen-xl              : 1200px;
@screen-xl-min          : @screen-xl;

// Extra extra large screen / large descktop
@screen-xxl              : 1600px;
@screen-xxl-min          : @screen-xxl;

// provide a maximum
@screen-xs-max          : (@screen-sm-min - 1px);
@screen-sm-max          : (@screen-md-min - 1px);
@screen-md-max          : (@screen-lg-min - 1px);
@screen-lg-max          : (@screen-xl-min - 1px);
@screen-xl-max          : (@screen-xxl-min - 1px);

// Grid system
@grid-columns           : 24;
@grid-gutter-width      : 0;

// Layout
@layout-body-background         : #f0f2f5;
@layout-header-background       : #001529;
@layout-footer-background       : @layout-body-background;
@layout-header-height           : 64px;
@layout-header-padding          : 0 50px;
@layout-footer-padding          : 24px 50px;
@layout-sider-background        : @layout-header-background;
@layout-trigger-height          : 48px;
@layout-trigger-background      : #002140;
@layout-trigger-color           : #fff;
@layout-zero-trigger-width      : 36px;
@layout-zero-trigger-height     : 42px;
// Layout light theme
@layout-sider-background-light  : #fff;
@layout-trigger-background-light: #fff;
@layout-trigger-color-light     : @text-color;

// z-index list
@zindex-affix           : 10;
@zindex-back-top        : 10;
@zindex-modal-mask      : 1000;
@zindex-modal           : 1000;
@zindex-notification    : 1010;
@zindex-message         : 1010;
@zindex-popover         : 1030;
@zindex-picker          : 1050;
@zindex-dropdown        : 1050;
@zindex-tooltip         : 1060;

// Animation
@animation-duration-slow: .3s; // Modal
@animation-duration-base: .2s;
@animation-duration-fast: .1s; // Tooltip

// Form
// ---
@label-required-color        : @highlight-color;
@label-color                 : @heading-color;
@form-item-margin-bottom     : 24px;
@form-item-trailing-colon    : true;
@form-vertical-label-padding : 0 0 8px;
@form-vertical-label-margin  : 0;

// Input
// ---
@input-height-base           : 32px;
@input-height-lg             : 40px;
@input-height-sm             : 24px;
@input-padding-horizontal    : @control-padding-horizontal - 1px;
@input-padding-horizontal-base: @input-padding-horizontal;
@input-padding-horizontal-sm : @control-padding-horizontal-sm - 1px;
@input-padding-horizontal-lg : @input-padding-horizontal;
@input-padding-vertical-base : 4px;
@input-padding-vertical-sm   : 1px;
@input-padding-vertical-lg   : 6px;
@input-placeholder-color     : hsv(0, 0, 75%);
@input-color                 : @text-color;
@input-border-color          : @border-color-base;
@input-bg                    : #fff;
@input-addon-bg              : @background-color-light;
@input-hover-border-color    : @primary-color;
@input-disabled-bg           : @disabled-bg;
@input-outline-offset        : 0 0;

// Tooltip
// ---
//* Tooltip max width
@tooltip-max-width: 250px;
//** Tooltip text color
@tooltip-color: #fff;
//** Tooltip background color
@tooltip-bg: rgba(0, 0, 0, .75);
//** Tooltip arrow width
@tooltip-arrow-width: 5px;
//** Tooltip distance with trigger
@tooltip-distance: @tooltip-arrow-width - 1px + 4px;
//** Tooltip arrow color
@tooltip-arrow-color: @tooltip-bg;

// Popover
// ---
//** Popover body background color
@popover-bg: #fff;
//** Popover text color
@popover-color: @text-color;
//** Popover maximum width
@popover-min-width: 177px;
//** Popover arrow width
@popover-arrow-width: 6px;
//** Popover arrow color
@popover-arrow-color: @popover-bg;
//** Popover outer arrow width
//** Popover outer arrow color
@popover-arrow-outer-color: @popover-bg;
//** Popover distance with trigger
@popover-distance: @popover-arrow-width + 4px;

// Modal
// --
@modal-mask-bg: rgba(0, 0, 0, 0.65);

// Progress
// --
@progress-default-color: @processing-color;
@progress-remaining-color: @background-color-base;
@progress-text-color: @text-color;

// Menu
// ---
@menu-inline-toplevel-item-height: 40px;
@menu-item-height: 40px;
@menu-collapsed-width: 80px;
@menu-bg: @component-background;
@menu-item-color: @text-color;
@menu-highlight-color: @primary-color;
@menu-item-active-bg: @item-active-bg;
@menu-item-active-border-width: 3px;
@menu-item-group-title-color: @text-color-secondary;
// dark theme
@menu-dark-color: @text-color-secondary-dark;
@menu-dark-bg: @layout-header-background;
@menu-dark-arrow-color: #fff;
@menu-dark-submenu-bg: #000c17;
@menu-dark-highlight-color: #fff;
@menu-dark-item-active-bg: @primary-color;

// Spin
// ---
@spin-dot-size-sm: 14px;
@spin-dot-size: 20px;
@spin-dot-size-lg: 32px;

// Table
// --
@table-header-bg: @background-color-light;
@table-header-color: @heading-color;
@table-header-sort-bg: @background-color-base;
@table-body-sort-bg: rgba(0, 0, 0, .01);
@table-row-hover-bg: @primary-1;
@table-selected-row-bg: #fafafa;
@table-expanded-row-bg: #fbfbfb;
@table-padding-vertical: 16px;
@table-padding-horizontal: 16px;

// Tag
// --
@tag-default-bg: @background-color-light;
@tag-default-color: @text-color;
@tag-font-size: @font-size-sm;

// TimePicker
// ---
@time-picker-panel-column-width: 56px;
@time-picker-panel-width: @time-picker-panel-column-width * 3;
@time-picker-selected-bg: @background-color-base;

// Carousel
// ---
@carousel-dot-width: 16px;
@carousel-dot-height: 3px;
@carousel-dot-active-width: 24px;

// Badge
// ---
@badge-height: 20px;
@badge-dot-size: 6px;
@badge-font-size: @font-size-sm;
@badge-font-weight: normal;
@badge-status-size: 6px;

// Rate
// ---
@rate-star-color: @yellow-6;
@rate-star-bg: @border-color-split;

// Card
// ---
@card-head-color: @heading-color;
@card-head-background: transparent;
@card-head-padding: 16px;
@card-inner-head-padding: 12px;
@card-padding-base: 24px;
@card-padding-wider: 32px;
@card-actions-background: @background-color-light;
@card-shadow: 0 2px 8px rgba(0, 0, 0, .09);

// Tabs
// ---
@tabs-card-head-background: @background-color-light;
@tabs-card-height: 40px;
@tabs-card-active-color: @primary-color;
@tabs-title-font-size: @font-size-base;
@tabs-title-font-size-lg: @font-size-lg;
@tabs-title-font-size-sm: @font-size-base;
@tabs-ink-bar-color: @primary-color;
@tabs-bar-margin: 0 0 16px 0;
@tabs-horizontal-margin: 0 32px 0 0;
@tabs-horizontal-padding: 12px 16px;
@tabs-vertical-padding: 8px 24px;
@tabs-vertical-margin: 0 0 16px 0;
@tabs-scrolling-size: 32px;
@tabs-highlight-color: @primary-color;
@tabs-hover-color: @primary-5;
@tabs-active-color: @primary-7;

// BackTop
// ---
@back-top-color: #fff;
@back-top-bg: @text-color-secondary;
@back-top-hover-bg: @text-color;

// Avatar
// ---
@avatar-size-base: 32px;
@avatar-size-lg: 40px;
@avatar-size-sm: 24px;
@avatar-font-size-base: 18px;
@avatar-font-size-lg: 24px;
@avatar-font-size-sm: 14px;
@avatar-bg: #ccc;
@avatar-color: #fff;
@avatar-border-radius: @border-radius-base;

// Switch
// ---
@switch-height: 22px;
@switch-sm-height: 16px;
@switch-sm-checked-margin-left: -(@switch-sm-height - 3px);
@switch-disabled-opacity: 0.4;
@switch-color: @primary-color;

// Pagination
// ---
@pagination-item-size: 32px;
@pagination-item-size-sm: 24px;
@pagination-font-family: Arial;
@pagination-font-weight-active: 500;

// Breadcrumb
// ---
@breadcrumb-base-color:        @text-color-secondary;
@breadcrumb-last-item-color:   @text-color;
@breadcrumb-font-size:         @font-size-base;
@breadcrumb-icon-font-size:    @font-size-base;
@breadcrumb-link-color:        @text-color-secondary;
@breadcrumb-link-color-hover:  @primary-5;
@breadcrumb-separator-color:   @text-color-secondary;
@breadcrumb-separator-margin:  0 @padding-xs;

// Slider
// ---
@slider-margin:                       14px 6px 10px;
@slider-rail-background-color:        @background-color-base;
@slider-rail-background-color-hover:  #e1e1e1;
@slider-track-background-color:       @primary-3;
@slider-track-background-color-hover: @primary-4;
@slider-handle-color:                 @primary-3;
@slider-handle-color-hover:           @primary-4;
@slider-handle-color-focus:           tint(@primary-color, 20%);
@slider-handle-color-focus-shadow:    tint(@primary-color, 50%);
@slider-handle-color-tooltip-open:    @primary-color;
@slider-dot-border-color:             @border-color-split;
@slider-dot-border-color-active:      tint(@primary-color, 50%);
@slider-disabled-color:               @disabled-color;
@slider-disabled-background-color:    @component-background;

// Tree
// ---
@tree-title-height:                   24px;
@tree-child-padding:                  18px;
@tree-directory-selected-color:       #fff;
@tree-directory-selected-bg:          @primary-color;

// Collapse
// ---
@collapse-header-padding:             12px 0 12px 40px;
@collapse-header-bg:                  @background-color-light;
@collapse-content-padding:            @padding-md;
@collapse-content-bg:                 @component-background;

// Skeleton
// ---
@skeleton-color:                      #f2f2f2;

// Transfer
// ---
@transfer-disabled-bg:                @disabled-bg;

// Message
// ---
@message-notice-content-padding:      10px 16px;

// Motion
// ---
@wave-animation-width: 6px;

// Alert
// ---
@alert-success-border-color: ~`colorPalette("@{success-color}", 3)`;
@alert-success-bg-color: ~`colorPalette("@{success-color}", 1)`;
@alert-success-icon-color: @success-color;
@alert-info-border-color: ~`colorPalette("@{info-color}", 3)`;
@alert-info-bg-color: ~`colorPalette("@{info-color}", 1)`;
@alert-info-icon-color: @info-color;
@alert-warning-border-color: ~`colorPalette("@{warning-color}", 3)`;
@alert-warning-bg-color: ~`colorPalette("@{warning-color}", 1)`;
@alert-warning-icon-color: @warning-color;
@alert-error-border-color: ~`colorPalette("@{error-color}", 3)`;
@alert-error-bg-color: ~`colorPalette("@{error-color}", 1)`;
@alert-error-icon-color: @error-color;

// List
// ---
@list-empty-text-padding:                    @padding-md;
@list-item-padding:                          @padding-sm 0;
@list-item-content-margin:                   0 0 @padding-md 0;
@list-item-meta-margin-bottom:               @padding-md;
@list-item-meta-avatar-margin-right:         @padding-md;
@list-item-meta-title-margin-bottom:         @padding-sm;

// Menu
@menu-dark-item-selected-bg: @menu-dark-item-active-bg;

// Tabs
@tab-bar-margin: @tabs-bar-margin;
@tab-horizontal-margin: @tabs-horizontal-margin;
@tab-vertical-margin: @tabs-vertical-margin;
@tab-horizontal-padding: @tabs-horizontal-padding;
@tab-vertical-padding: @tabs-vertical-padding;
@tab-scrolling-size: @tabs-scrolling-size;
@tab-highlight-color: @tabs-highlight-color;
@tab-hover-color: @tabs-hover-color;
@tab-active-color: @tabs-active-color;
@tabs-ink-bar-bg-color: @tabs-ink-bar-color;

// Mixins
// --------------------------------------------------
// Sizing shortcuts

.size(@width; @height) {
  width: @width;
  height: @height;
}

.square(@size) {
  .size(@size; @size);
}

// Compatibility for browsers.

// Placeholder text
.placeholder(@color: @input-placeholder-color) {
  // Firefox
  &::-moz-placeholder {
    color: @color;
    opacity: 1; // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526
  }
  // Internet Explorer 10+
  &:-ms-input-placeholder {
    color: @color;
  }
  // Safari and Chrome
  &::-webkit-input-placeholder {
    color: @color;
  }
}

// mixins for clearfix
// ------------------------
.clearfix() {
  zoom: 1;
  &:before,
  &:after {
    content: "";
    display: table;
  }
  &:after {
    clear: both;
  }
}

.iconfont-mixin() {
  display: inline-block;
  font-style: normal;
  vertical-align: -0.125em; // for SVG icon, see https://blog.prototypr.io/align-svg-icons-to-text-and-say-goodbye-to-font-icons-d44b3d7b26b4
  text-align: center;
  text-transform: none;
  line-height: 0;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  > * {
    line-height: 1;
  }

  svg {
    display: inline-block;
  }

  &:before {
    display: none; // dont display old icon.
  }

  & &-icon {
    display: block;
  }
}

// for iconfont font size
// fix chrome 12px bug, support ie
.iconfont-size-under-12px(@size, @rotate: 0deg) {
  display: inline-block;
  @font-scale: unit(@size / 12px);
  font-size: 12px;
  // IE9
  font-size: ~"@{size} \9"; // lesshint duplicateProperty: false
  transform: scale(@font-scale) rotate(@rotate);
  :root & {
    font-size: @font-size-sm; // reset IE9 and above
  }
}

.motion-common(@duration: @animation-duration-base) {
  animation-duration: @duration;
  animation-fill-mode: both;
}

.motion-common-leave(@duration: @animation-duration-base) {
  animation-duration: @duration;
  animation-fill-mode: both;
}

.make-motion(@className, @keyframeName, @duration: @animation-duration-base) {
  .@{className}-enter,
  .@{className}-appear {
    .motion-common(@duration);
    animation-play-state: paused;
  }
  .@{className}-leave {
    .motion-common-leave(@duration);
    animation-play-state: paused;
  }
  .@{className}-enter.@{className}-enter-active,
  .@{className}-appear.@{className}-appear-active {
    animation-name: ~"@{keyframeName}In";
    animation-play-state: running;
  }
  .@{className}-leave.@{className}-leave-active {
    animation-name: ~"@{keyframeName}Out";
    animation-play-state: running;
    pointer-events: none;
  }
}

.reset-component() {
  font-family: @font-family;
  font-size: @font-size-base;
  font-variant: tabular-nums;
  line-height: @line-height-base;
  color: @text-color;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  list-style: none;
}

.text-truncate() {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.textOverflow() {
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
  white-space: nowrap;
}

.textOverflowMulti(@line: 3, @bg: #fff) {
  overflow: hidden;
  position: relative;
  line-height: 1.5em;
  max-height: @line * 1.5em;
  text-align: justify;
  margin-right: -1em;
  padding-right: 1em;
  &:before {
    background: @bg;
    content: '...';
    padding: 0 1px;
    position: absolute;
    right: 14px;
    bottom: 0;
  }
  &:after {
    background: white;
    content: '';
    margin-top: 0.2em;
    position: absolute;
    right: 14px;
    width: 1em;
    height: 1em;
  }
}

@white:     #fff;
@black:     #000;

// grey
@grey-1:  #ffffff;
@grey-2:  #fafafa;
@grey-3:  #f5f5f5;
@grey-4:  #e8e8e8;
@grey-5:  #d9d9d9;
@grey-6:  #bfbfbf;
@grey-7:  #8c8c8c;
@grey-8:  #595959;
@grey-9:  #262626;
@grey-10: #000000;

@color-light-position:      2;
@color-basic-position:      3;
@color-dark-position:       4;
@color-no-list:             1, 2, 3, 4, 5, 6, 7, 8, 9, 10;

@colors:
    red      @red-5           @red-6            @red-7,
    volcano    @volcano-5       @volcano-6        @volcano-7,
    orange   @orange-5        @orange-6         @orange-7,
    gold     @gold-5          @gold-6           @gold-7,
    yellow   @yellow-5        @yellow-6         @yellow-7,
    lime     @lime-5          @lime-6           @lime-7,
    green    @green-5         @green-6          @green-7,
    cyan     @cyan-5          @cyan-6           @cyan-7,
    blue     @blue-5          @blue-6           @blue-7,
    geekblue   @geekblue-5      @geekblue-6       @geekblue-7,
    purple   @purple-5        @purple-6         @purple-7,
    magenta  @magenta-5       @magenta-6        @magenta-7,
    grey     @grey-5          @grey-6           @grey-7;

// Alias
@aliasColors:
    primary    blue,
    success    green,
    error      red,
    warning    yellow;

// Grey patch
@greyColorer:
lighter @grey-3,
darker  @grey-9;

// Layout Gutter
@layout-gutter: 8px;

@xs:    @layout-gutter / 2;
@sm:    @layout-gutter;
@md:    @layout-gutter * 2;
@lg:    @layout-gutter * 3;

@grid-breakpoints:
    xs @screen-xs,
    sm @screen-sm,
    md @screen-md,
    lg @screen-lg,
    xl @screen-xl;

@mobile-min: @screen-md-min;
@mobile-max: @screen-md-min - 1px;

// spaceing
@spacings:
    0  0,
    xs @xs,
    sm @sm,
    md @md,
    lg @lg;

// type
@ul-ol-margin:      18px;

// position
@zindex-base:       @zindex-back-top - 1;
@zindex-fixed:      @zindex-base;
@zindex:            @zindex-base;

@overflows:     auto, hidden;
@positions:     static, relative, absolute, fixed, sticky;

// 文本
@text-xs:       @font-size-base - 2; // 12px
@text-sm:       @font-size-base + 0; // 14px
@text-md:       @font-size-base + 2; // 16px
@text-lg:       @font-size-base + 4; // 18px
@text-xl:       @font-size-base + 8; // 22px

// icon
@icon-sm:       @font-size-base * 2; // 24px
@icon-md:       @font-size-base * 4; // 48px
@icon-lg:       @font-size-base * 6; // 72px

// 宽度
@widths:
    sm @layout-gutter * 20, // 160px
    md @layout-gutter * 30, // 240px
    lg @layout-gutter * 40, // 320px
    10 10%,
    20 20%,
    30 30%,
    40 40%,
    50 50%,
    60 60%,
    70 70%,
    80 80%,
    90 90%,
    100 100%;

// 圆角
@border-radius-md:       @border-radius-base; // 4px
@border-radius-lg:       @border-radius-base + 2px; // 6px

@muted-color:  @grey-7;

// Colors
@white:     #fff;
@black:     #000;

// scrollbar
@scrollbar-enabled:         true;
@scrollbar-width:           6px;
@scrollbar-height:          6px;
@scrollbar-track-color:     rgba(0, 0, 0, 0.3);
@scrollbar-thumb-color:     #6e6e6e;

// type
// ==========

// font-size
// https://ant.design/docs/spec/font-cn#字号
@font-size-large:         @font-size-base + 8;  // 20px
@font-size-small:         @font-size-base;      // 12px

@h1-font-size:            @font-size-base + 20; // 32px
@h2-font-size:            @font-size-base + 12; // 24px
@h3-font-size:            @font-size-base + 8;  // 20px
@h4-font-size:            @font-size-base + 4;  // 16px
@h5-font-size:            @font-size-base + 2;  // 14px
@h6-font-size:            @font-size-base;      // 12px

@enable-all-colors:           true;

// Code
@code-border-color:           #eee;
@code-bg:                     #f7f7f7;

@drawer-xl:                    1200px;
@drawer-lg:                    900px;
@drawer-md:                    600px;
@drawer-sm:                    300px;

@modal-xl:                    1200px;
@modal-lg:                    900px;
@modal-md:                    600px;
@modal-sm:                    300px;

@preserve-white-spaces-enabled:     true;
// 搜索框与表格
@preserve-sf-and-st-spaces:         @layout-gutter * 2;
// 按钮间
@preserve-buttons-spaces:           @layout-gutter;

// table
@nz-table-img-radius:          4px;
@nz-table-img-margin-right:    4px;
@nz-table-img-max-height:      32px;
@nz-table-img-max-width:       32px;
@nz-table-rep-max-width: @mobile-max;
@nz-table-rep-header-background: @border-color-split;
@nz-table-rep-even-background: #f9f9f9;
@nz-table-rep-padding-vertical: @table-padding-vertical / 2;
@nz-table-rep-padding-horizontal: @table-padding-horizontal / 2;
@nz-table-rep-column-name-width: 100px;
@nz-table-rep-column-name-text-align: right;
@nz-table-rep-column-name-padding-right: 8px;
@nz-table-rep-column-name-color: rgba(0, 0, 0, 0.5);

// antd
// antd
/* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
/* stylelint-disable no-duplicate-selectors */
/* stylelint-disable */
.bezierEasingMixin() {
@functions: ~`(function() {
  var NEWTON_ITERATIONS = 4;
  var NEWTON_MIN_SLOPE = 0.001;
  var SUBDIVISION_PRECISION = 0.0000001;
  var SUBDIVISION_MAX_ITERATIONS = 10;

  var kSplineTableSize = 11;
  var kSampleStepSize = 1.0 / (kSplineTableSize - 1.0);

  var float32ArraySupported = typeof Float32Array === 'function';

  function A (aA1, aA2) { return 1.0 - 3.0 * aA2 + 3.0 * aA1; }
  function B (aA1, aA2) { return 3.0 * aA2 - 6.0 * aA1; }
  function C (aA1)      { return 3.0 * aA1; }

  // Returns x(t) given t, x1, and x2, or y(t) given t, y1, and y2.
  function calcBezier (aT, aA1, aA2) { return ((A(aA1, aA2) * aT + B(aA1, aA2)) * aT + C(aA1)) * aT; }

  // Returns dx/dt given t, x1, and x2, or dy/dt given t, y1, and y2.
  function getSlope (aT, aA1, aA2) { return 3.0 * A(aA1, aA2) * aT * aT + 2.0 * B(aA1, aA2) * aT + C(aA1); }

  function binarySubdivide (aX, aA, aB, mX1, mX2) {
    var currentX, currentT, i = 0;
    do {
      currentT = aA + (aB - aA) / 2.0;
      currentX = calcBezier(currentT, mX1, mX2) - aX;
      if (currentX > 0.0) {
        aB = currentT;
      } else {
        aA = currentT;
      }
    } while (Math.abs(currentX) > SUBDIVISION_PRECISION && ++i < SUBDIVISION_MAX_ITERATIONS);
    return currentT;
  }

  function newtonRaphsonIterate (aX, aGuessT, mX1, mX2) {
   for (var i = 0; i < NEWTON_ITERATIONS; ++i) {
     var currentSlope = getSlope(aGuessT, mX1, mX2);
     if (currentSlope === 0.0) {
       return aGuessT;
     }
     var currentX = calcBezier(aGuessT, mX1, mX2) - aX;
     aGuessT -= currentX / currentSlope;
   }
   return aGuessT;
  }

  var BezierEasing = function (mX1, mY1, mX2, mY2) {
    if (!(0 <= mX1 && mX1 <= 1 && 0 <= mX2 && mX2 <= 1)) {
      throw new Error('bezier x values must be in [0, 1] range');
    }

    // Precompute samples table
    var sampleValues = float32ArraySupported ? new Float32Array(kSplineTableSize) : new Array(kSplineTableSize);
    if (mX1 !== mY1 || mX2 !== mY2) {
      for (var i = 0; i < kSplineTableSize; ++i) {
        sampleValues[i] = calcBezier(i * kSampleStepSize, mX1, mX2);
      }
    }

    function getTForX (aX) {
      var intervalStart = 0.0;
      var currentSample = 1;
      var lastSample = kSplineTableSize - 1;

      for (; currentSample !== lastSample && sampleValues[currentSample] <= aX; ++currentSample) {
        intervalStart += kSampleStepSize;
      }
      --currentSample;

      // Interpolate to provide an initial guess for t
      var dist = (aX - sampleValues[currentSample]) / (sampleValues[currentSample + 1] - sampleValues[currentSample]);
      var guessForT = intervalStart + dist * kSampleStepSize;

      var initialSlope = getSlope(guessForT, mX1, mX2);
      if (initialSlope >= NEWTON_MIN_SLOPE) {
        return newtonRaphsonIterate(aX, guessForT, mX1, mX2);
      } else if (initialSlope === 0.0) {
        return guessForT;
      } else {
        return binarySubdivide(aX, intervalStart, intervalStart + kSampleStepSize, mX1, mX2);
      }
    }

    return function BezierEasing (x) {
      if (mX1 === mY1 && mX2 === mY2) {
        return x; // linear
      }
      // Because JavaScript number are imprecise, we should guarantee the extremes are right.
      if (x === 0) {
        return 0;
      }
      if (x === 1) {
        return 1;
      }
      return calcBezier(getTForX(x), mY1, mY2);
    };
  };

  this.colorEasing = BezierEasing(0.26, 0.09, 0.37, 0.18);
  // less 3 requires a return
  return '';
})()`;
}
// It is hacky way to make this function will be compiled preferentially by less
// resolve error: `ReferenceError: colorPalette is not defined`
// https://github.com/ant-design/ant-motion/issues/44
.bezierEasingMixin();

/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
.tinyColorMixin() {
@functions: ~`(function() {
// TinyColor v1.4.1
// https://github.com/bgrins/TinyColor
// 2016-07-07, Brian Grinstead, MIT License
var trimLeft = /^\s+/,
    trimRight = /\s+$/,
    tinyCounter = 0,
    mathRound = Math.round,
    mathMin = Math.min,
    mathMax = Math.max,
    mathRandom = Math.random;

function tinycolor (color, opts) {

    color = (color) ? color : '';
    opts = opts || { };

    // If input is already a tinycolor, return itself
    if (color instanceof tinycolor) {
       return color;
    }
    // If we are called as a function, call using new instead
    if (!(this instanceof tinycolor)) {
        return new tinycolor(color, opts);
    }

    var rgb = inputToRGB(color);
    this._originalInput = color,
    this._r = rgb.r,
    this._g = rgb.g,
    this._b = rgb.b,
    this._a = rgb.a,
    this._roundA = mathRound(100*this._a) / 100,
    this._format = opts.format || rgb.format;
    this._gradientType = opts.gradientType;

    // Don't let the range of [0,255] come back in [0,1].
    // Potentially lose a little bit of precision here, but will fix issues where
    // .5 gets interpreted as half of the total, instead of half of 1
    // If it was supposed to be 128, this was already taken care of by inputToRgb
    if (this._r < 1) { this._r = mathRound(this._r); }
    if (this._g < 1) { this._g = mathRound(this._g); }
    if (this._b < 1) { this._b = mathRound(this._b); }

    this._ok = rgb.ok;
    this._tc_id = tinyCounter++;
}

tinycolor.prototype = {
    isDark: function() {
        return this.getBrightness() < 128;
    },
    isLight: function() {
        return !this.isDark();
    },
    isValid: function() {
        return this._ok;
    },
    getOriginalInput: function() {
      return this._originalInput;
    },
    getFormat: function() {
        return this._format;
    },
    getAlpha: function() {
        return this._a;
    },
    getBrightness: function() {
        //http://www.w3.org/TR/AERT#color-contrast
        var rgb = this.toRgb();
        return (rgb.r * 299 + rgb.g * 587 + rgb.b * 114) / 1000;
    },
    getLuminance: function() {
        //http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef
        var rgb = this.toRgb();
        var RsRGB, GsRGB, BsRGB, R, G, B;
        RsRGB = rgb.r/255;
        GsRGB = rgb.g/255;
        BsRGB = rgb.b/255;

        if (RsRGB <= 0.03928) {R = RsRGB / 12.92;} else {R = Math.pow(((RsRGB + 0.055) / 1.055), 2.4);}
        if (GsRGB <= 0.03928) {G = GsRGB / 12.92;} else {G = Math.pow(((GsRGB + 0.055) / 1.055), 2.4);}
        if (BsRGB <= 0.03928) {B = BsRGB / 12.92;} else {B = Math.pow(((BsRGB + 0.055) / 1.055), 2.4);}
        return (0.2126 * R) + (0.7152 * G) + (0.0722 * B);
    },
    setAlpha: function(value) {
        this._a = boundAlpha(value);
        this._roundA = mathRound(100*this._a) / 100;
        return this;
    },
    toHsv: function() {
        var hsv = rgbToHsv(this._r, this._g, this._b);
        return { h: hsv.h * 360, s: hsv.s, v: hsv.v, a: this._a };
    },
    toHsvString: function() {
        var hsv = rgbToHsv(this._r, this._g, this._b);
        var h = mathRound(hsv.h * 360), s = mathRound(hsv.s * 100), v = mathRound(hsv.v * 100);
        return (this._a == 1) ?
          "hsv("  + h + ", " + s + "%, " + v + "%)" :
          "hsva(" + h + ", " + s + "%, " + v + "%, "+ this._roundA + ")";
    },
    toHsl: function() {
        var hsl = rgbToHsl(this._r, this._g, this._b);
        return { h: hsl.h * 360, s: hsl.s, l: hsl.l, a: this._a };
    },
    toHslString: function() {
        var hsl = rgbToHsl(this._r, this._g, this._b);
        var h = mathRound(hsl.h * 360), s = mathRound(hsl.s * 100), l = mathRound(hsl.l * 100);
        return (this._a == 1) ?
          "hsl("  + h + ", " + s + "%, " + l + "%)" :
          "hsla(" + h + ", " + s + "%, " + l + "%, "+ this._roundA + ")";
    },
    toHex: function(allow3Char) {
        return rgbToHex(this._r, this._g, this._b, allow3Char);
    },
    toHexString: function(allow3Char) {
        return '#' + this.toHex(allow3Char);
    },
    toHex8: function(allow4Char) {
        return rgbaToHex(this._r, this._g, this._b, this._a, allow4Char);
    },
    toHex8String: function(allow4Char) {
        return '#' + this.toHex8(allow4Char);
    },
    toRgb: function() {
        return { r: mathRound(this._r), g: mathRound(this._g), b: mathRound(this._b), a: this._a };
    },
    toRgbString: function() {
        return (this._a == 1) ?
          "rgb("  + mathRound(this._r) + ", " + mathRound(this._g) + ", " + mathRound(this._b) + ")" :
          "rgba(" + mathRound(this._r) + ", " + mathRound(this._g) + ", " + mathRound(this._b) + ", " + this._roundA + ")";
    },
    toPercentageRgb: function() {
        return { r: mathRound(bound01(this._r, 255) * 100) + "%", g: mathRound(bound01(this._g, 255) * 100) + "%", b: mathRound(bound01(this._b, 255) * 100) + "%", a: this._a };
    },
    toPercentageRgbString: function() {
        return (this._a == 1) ?
          "rgb("  + mathRound(bound01(this._r, 255) * 100) + "%, " + mathRound(bound01(this._g, 255) * 100) + "%, " + mathRound(bound01(this._b, 255) * 100) + "%)" :
          "rgba(" + mathRound(bound01(this._r, 255) * 100) + "%, " + mathRound(bound01(this._g, 255) * 100) + "%, " + mathRound(bound01(this._b, 255) * 100) + "%, " + this._roundA + ")";
    },
    toName: function() {
        if (this._a === 0) {
            return "transparent";
        }

        if (this._a < 1) {
            return false;
        }

        return hexNames[rgbToHex(this._r, this._g, this._b, true)] || false;
    },
    toFilter: function(secondColor) {
        var hex8String = '#' + rgbaToArgbHex(this._r, this._g, this._b, this._a);
        var secondHex8String = hex8String;
        var gradientType = this._gradientType ? "GradientType = 1, " : "";

        if (secondColor) {
            var s = tinycolor(secondColor);
            secondHex8String = '#' + rgbaToArgbHex(s._r, s._g, s._b, s._a);
        }

        return "progid:DXImageTransform.Microsoft.gradient("+gradientType+"startColorstr="+hex8String+",endColorstr="+secondHex8String+")";
    },
    toString: function(format) {
        var formatSet = !!format;
        format = format || this._format;

        var formattedString = false;
        var hasAlpha = this._a < 1 && this._a >= 0;
        var needsAlphaFormat = !formatSet && hasAlpha && (format === "hex" || format === "hex6" || format === "hex3" || format === "hex4" || format === "hex8" || format === "name");

        if (needsAlphaFormat) {
            // Special case for "transparent", all other non-alpha formats
            // will return rgba when there is transparency.
            if (format === "name" && this._a === 0) {
                return this.toName();
            }
            return this.toRgbString();
        }
        if (format === "rgb") {
            formattedString = this.toRgbString();
        }
        if (format === "prgb") {
            formattedString = this.toPercentageRgbString();
        }
        if (format === "hex" || format === "hex6") {
            formattedString = this.toHexString();
        }
        if (format === "hex3") {
            formattedString = this.toHexString(true);
        }
        if (format === "hex4") {
            formattedString = this.toHex8String(true);
        }
        if (format === "hex8") {
            formattedString = this.toHex8String();
        }
        if (format === "name") {
            formattedString = this.toName();
        }
        if (format === "hsl") {
            formattedString = this.toHslString();
        }
        if (format === "hsv") {
            formattedString = this.toHsvString();
        }

        return formattedString || this.toHexString();
    },
    clone: function() {
        return tinycolor(this.toString());
    },

    _applyModification: function(fn, args) {
        var color = fn.apply(null, [this].concat([].slice.call(args)));
        this._r = color._r;
        this._g = color._g;
        this._b = color._b;
        this.setAlpha(color._a);
        return this;
    },
    lighten: function() {
        return this._applyModification(lighten, arguments);
    },
    brighten: function() {
        return this._applyModification(brighten, arguments);
    },
    darken: function() {
        return this._applyModification(darken, arguments);
    },
    desaturate: function() {
        return this._applyModification(desaturate, arguments);
    },
    saturate: function() {
        return this._applyModification(saturate, arguments);
    },
    greyscale: function() {
        return this._applyModification(greyscale, arguments);
    },
    spin: function() {
        return this._applyModification(spin, arguments);
    },

    _applyCombination: function(fn, args) {
        return fn.apply(null, [this].concat([].slice.call(args)));
    },
    analogous: function() {
        return this._applyCombination(analogous, arguments);
    },
    complement: function() {
        return this._applyCombination(complement, arguments);
    },
    monochromatic: function() {
        return this._applyCombination(monochromatic, arguments);
    },
    splitcomplement: function() {
        return this._applyCombination(splitcomplement, arguments);
    },
    triad: function() {
        return this._applyCombination(triad, arguments);
    },
    tetrad: function() {
        return this._applyCombination(tetrad, arguments);
    }
};

// If input is an object, force 1 into "1.0" to handle ratios properly
// String input requires "1.0" as input, so 1 will be treated as 1
tinycolor.fromRatio = function(color, opts) {
    if (typeof color == "object") {
        var newColor = {};
        for (var i in color) {
            if (color.hasOwnProperty(i)) {
                if (i === "a") {
                    newColor[i] = color[i];
                }
                else {
                    newColor[i] = convertToPercentage(color[i]);
                }
            }
        }
        color = newColor;
    }

    return tinycolor(color, opts);
};

// Given a string or object, convert that input to RGB
// Possible string inputs:
//
//     "red"
//     "#f00" or "f00"
//     "#ff0000" or "ff0000"
//     "#ff000000" or "ff000000"
//     "rgb 255 0 0" or "rgb (255, 0, 0)"
//     "rgb 1.0 0 0" or "rgb (1, 0, 0)"
//     "rgba (255, 0, 0, 1)" or "rgba 255, 0, 0, 1"
//     "rgba (1.0, 0, 0, 1)" or "rgba 1.0, 0, 0, 1"
//     "hsl(0, 100%, 50%)" or "hsl 0 100% 50%"
//     "hsla(0, 100%, 50%, 1)" or "hsla 0 100% 50%, 1"
//     "hsv(0, 100%, 100%)" or "hsv 0 100% 100%"
//
function inputToRGB(color) {

    var rgb = { r: 0, g: 0, b: 0 };
    var a = 1;
    var s = null;
    var v = null;
    var l = null;
    var ok = false;
    var format = false;

    if (typeof color == "string") {
        color = stringInputToObject(color);
    }

    if (typeof color == "object") {
        if (isValidCSSUnit(color.r) && isValidCSSUnit(color.g) && isValidCSSUnit(color.b)) {
            rgb = rgbToRgb(color.r, color.g, color.b);
            ok = true;
            format = String(color.r).substr(-1) === "%" ? "prgb" : "rgb";
        }
        else if (isValidCSSUnit(color.h) && isValidCSSUnit(color.s) && isValidCSSUnit(color.v)) {
            s = convertToPercentage(color.s);
            v = convertToPercentage(color.v);
            rgb = hsvToRgb(color.h, s, v);
            ok = true;
            format = "hsv";
        }
        else if (isValidCSSUnit(color.h) && isValidCSSUnit(color.s) && isValidCSSUnit(color.l)) {
            s = convertToPercentage(color.s);
            l = convertToPercentage(color.l);
            rgb = hslToRgb(color.h, s, l);
            ok = true;
            format = "hsl";
        }

        if (color.hasOwnProperty("a")) {
            a = color.a;
        }
    }

    a = boundAlpha(a);

    return {
        ok: ok,
        format: color.format || format,
        r: mathMin(255, mathMax(rgb.r, 0)),
        g: mathMin(255, mathMax(rgb.g, 0)),
        b: mathMin(255, mathMax(rgb.b, 0)),
        a: a
    };
}

// Conversion Functions
// --------------------

// rgbToHsl, rgbToHsv, hslToRgb, hsvToRgb modified from:
// <http://mjijackson.com/2008/02/rgb-to-hsl-and-rgb-to-hsv-color-model-conversion-algorithms-in-javascript>

// rgbToRgb
// Handle bounds / percentage checking to conform to CSS color spec
// <http://www.w3.org/TR/css3-color/>
// *Assumes:* r, g, b in [0, 255] or [0, 1]
// *Returns:* { r, g, b } in [0, 255]
function rgbToRgb(r, g, b){
    return {
        r: bound01(r, 255) * 255,
        g: bound01(g, 255) * 255,
        b: bound01(b, 255) * 255
    };
}

// rgbToHsl
// Converts an RGB color value to HSL.
// *Assumes:* r, g, and b are contained in [0, 255] or [0, 1]
// *Returns:* { h, s, l } in [0,1]
function rgbToHsl(r, g, b) {

    r = bound01(r, 255);
    g = bound01(g, 255);
    b = bound01(b, 255);

    var max = mathMax(r, g, b), min = mathMin(r, g, b);
    var h, s, l = (max + min) / 2;

    if(max == min) {
        h = s = 0; // achromatic
    }
    else {
        var d = max - min;
        s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
        switch(max) {
            case r: h = (g - b) / d + (g < b ? 6 : 0); break;
            case g: h = (b - r) / d + 2; break;
            case b: h = (r - g) / d + 4; break;
        }

        h /= 6;
    }

    return { h: h, s: s, l: l };
}

// hslToRgb
// Converts an HSL color value to RGB.
// *Assumes:* h is contained in [0, 1] or [0, 360] and s and l are contained [0, 1] or [0, 100]
// *Returns:* { r, g, b } in the set [0, 255]
function hslToRgb(h, s, l) {
    var r, g, b;

    h = bound01(h, 360);
    s = bound01(s, 100);
    l = bound01(l, 100);

    function hue2rgb(p, q, t) {
        if(t < 0) t += 1;
        if(t > 1) t -= 1;
        if(t < 1/6) return p + (q - p) * 6 * t;
        if(t < 1/2) return q;
        if(t < 2/3) return p + (q - p) * (2/3 - t) * 6;
        return p;
    }

    if(s === 0) {
        r = g = b = l; // achromatic
    }
    else {
        var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
        var p = 2 * l - q;
        r = hue2rgb(p, q, h + 1/3);
        g = hue2rgb(p, q, h);
        b = hue2rgb(p, q, h - 1/3);
    }

    return { r: r * 255, g: g * 255, b: b * 255 };
}

// rgbToHsv
// Converts an RGB color value to HSV
// *Assumes:* r, g, and b are contained in the set [0, 255] or [0, 1]
// *Returns:* { h, s, v } in [0,1]
function rgbToHsv(r, g, b) {

    r = bound01(r, 255);
    g = bound01(g, 255);
    b = bound01(b, 255);

    var max = mathMax(r, g, b), min = mathMin(r, g, b);
    var h, s, v = max;

    var d = max - min;
    s = max === 0 ? 0 : d / max;

    if(max == min) {
        h = 0; // achromatic
    }
    else {
        switch(max) {
            case r: h = (g - b) / d + (g < b ? 6 : 0); break;
            case g: h = (b - r) / d + 2; break;
            case b: h = (r - g) / d + 4; break;
        }
        h /= 6;
    }
    return { h: h, s: s, v: v };
}

// hsvToRgb
// Converts an HSV color value to RGB.
// *Assumes:* h is contained in [0, 1] or [0, 360] and s and v are contained in [0, 1] or [0, 100]
// *Returns:* { r, g, b } in the set [0, 255]
 function hsvToRgb(h, s, v) {

    h = bound01(h, 360) * 6;
    s = bound01(s, 100);
    v = bound01(v, 100);

    var i = Math.floor(h),
        f = h - i,
        p = v * (1 - s),
        q = v * (1 - f * s),
        t = v * (1 - (1 - f) * s),
        mod = i % 6,
        r = [v, q, p, p, t, v][mod],
        g = [t, v, v, q, p, p][mod],
        b = [p, p, t, v, v, q][mod];

    return { r: r * 255, g: g * 255, b: b * 255 };
}

// rgbToHex
// Converts an RGB color to hex
// Assumes r, g, and b are contained in the set [0, 255]
// Returns a 3 or 6 character hex
function rgbToHex(r, g, b, allow3Char) {

    var hex = [
        pad2(mathRound(r).toString(16)),
        pad2(mathRound(g).toString(16)),
        pad2(mathRound(b).toString(16))
    ];

    // Return a 3 character hex if possible
    if (allow3Char && hex[0].charAt(0) == hex[0].charAt(1) && hex[1].charAt(0) == hex[1].charAt(1) && hex[2].charAt(0) == hex[2].charAt(1)) {
        return hex[0].charAt(0) + hex[1].charAt(0) + hex[2].charAt(0);
    }

    return hex.join("");
}

// rgbaToHex
// Converts an RGBA color plus alpha transparency to hex
// Assumes r, g, b are contained in the set [0, 255] and
// a in [0, 1]. Returns a 4 or 8 character rgba hex
function rgbaToHex(r, g, b, a, allow4Char) {

    var hex = [
        pad2(mathRound(r).toString(16)),
        pad2(mathRound(g).toString(16)),
        pad2(mathRound(b).toString(16)),
        pad2(convertDecimalToHex(a))
    ];

    // Return a 4 character hex if possible
    if (allow4Char && hex[0].charAt(0) == hex[0].charAt(1) && hex[1].charAt(0) == hex[1].charAt(1) && hex[2].charAt(0) == hex[2].charAt(1) && hex[3].charAt(0) == hex[3].charAt(1)) {
        return hex[0].charAt(0) + hex[1].charAt(0) + hex[2].charAt(0) + hex[3].charAt(0);
    }

    return hex.join("");
}

// rgbaToArgbHex
// Converts an RGBA color to an ARGB Hex8 string
// Rarely used, but required for "toFilter()"
function rgbaToArgbHex(r, g, b, a) {

    var hex = [
        pad2(convertDecimalToHex(a)),
        pad2(mathRound(r).toString(16)),
        pad2(mathRound(g).toString(16)),
        pad2(mathRound(b).toString(16))
    ];

    return hex.join("");
}

// equals
// Can be called with any tinycolor input
tinycolor.equals = function (color1, color2) {
    if (!color1 || !color2) { return false; }
    return tinycolor(color1).toRgbString() == tinycolor(color2).toRgbString();
};

tinycolor.random = function() {
    return tinycolor.fromRatio({
        r: mathRandom(),
        g: mathRandom(),
        b: mathRandom()
    });
};

// Modification Functions
// ----------------------
// Thanks to less.js for some of the basics here
// <https://github.com/cloudhead/less.js/blob/master/lib/less/functions.js>

function desaturate(color, amount) {
    amount = (amount === 0) ? 0 : (amount || 10);
    var hsl = tinycolor(color).toHsl();
    hsl.s -= amount / 100;
    hsl.s = clamp01(hsl.s);
    return tinycolor(hsl);
}

function saturate(color, amount) {
    amount = (amount === 0) ? 0 : (amount || 10);
    var hsl = tinycolor(color).toHsl();
    hsl.s += amount / 100;
    hsl.s = clamp01(hsl.s);
    return tinycolor(hsl);
}

function greyscale(color) {
    return tinycolor(color).desaturate(100);
}

function lighten (color, amount) {
    amount = (amount === 0) ? 0 : (amount || 10);
    var hsl = tinycolor(color).toHsl();
    hsl.l += amount / 100;
    hsl.l = clamp01(hsl.l);
    return tinycolor(hsl);
}

function brighten(color, amount) {
    amount = (amount === 0) ? 0 : (amount || 10);
    var rgb = tinycolor(color).toRgb();
    rgb.r = mathMax(0, mathMin(255, rgb.r - mathRound(255 * - (amount / 100))));
    rgb.g = mathMax(0, mathMin(255, rgb.g - mathRound(255 * - (amount / 100))));
    rgb.b = mathMax(0, mathMin(255, rgb.b - mathRound(255 * - (amount / 100))));
    return tinycolor(rgb);
}

function darken (color, amount) {
    amount = (amount === 0) ? 0 : (amount || 10);
    var hsl = tinycolor(color).toHsl();
    hsl.l -= amount / 100;
    hsl.l = clamp01(hsl.l);
    return tinycolor(hsl);
}

// Spin takes a positive or negative amount within [-360, 360] indicating the change of hue.
// Values outside of this range will be wrapped into this range.
function spin(color, amount) {
    var hsl = tinycolor(color).toHsl();
    var hue = (hsl.h + amount) % 360;
    hsl.h = hue < 0 ? 360 + hue : hue;
    return tinycolor(hsl);
}

// Combination Functions
// ---------------------
// Thanks to jQuery xColor for some of the ideas behind these
// <https://github.com/infusion/jQuery-xcolor/blob/master/jquery.xcolor.js>

function complement(color) {
    var hsl = tinycolor(color).toHsl();
    hsl.h = (hsl.h + 180) % 360;
    return tinycolor(hsl);
}

function triad(color) {
    var hsl = tinycolor(color).toHsl();
    var h = hsl.h;
    return [
        tinycolor(color),
        tinycolor({ h: (h + 120) % 360, s: hsl.s, l: hsl.l }),
        tinycolor({ h: (h + 240) % 360, s: hsl.s, l: hsl.l })
    ];
}

function tetrad(color) {
    var hsl = tinycolor(color).toHsl();
    var h = hsl.h;
    return [
        tinycolor(color),
        tinycolor({ h: (h + 90) % 360, s: hsl.s, l: hsl.l }),
        tinycolor({ h: (h + 180) % 360, s: hsl.s, l: hsl.l }),
        tinycolor({ h: (h + 270) % 360, s: hsl.s, l: hsl.l })
    ];
}

function splitcomplement(color) {
    var hsl = tinycolor(color).toHsl();
    var h = hsl.h;
    return [
        tinycolor(color),
        tinycolor({ h: (h + 72) % 360, s: hsl.s, l: hsl.l}),
        tinycolor({ h: (h + 216) % 360, s: hsl.s, l: hsl.l})
    ];
}

function analogous(color, results, slices) {
    results = results || 6;
    slices = slices || 30;

    var hsl = tinycolor(color).toHsl();
    var part = 360 / slices;
    var ret = [tinycolor(color)];

    for (hsl.h = ((hsl.h - (part * results >> 1)) + 720) % 360; --results; ) {
        hsl.h = (hsl.h + part) % 360;
        ret.push(tinycolor(hsl));
    }
    return ret;
}

function monochromatic(color, results) {
    results = results || 6;
    var hsv = tinycolor(color).toHsv();
    var h = hsv.h, s = hsv.s, v = hsv.v;
    var ret = [];
    var modification = 1 / results;

    while (results--) {
        ret.push(tinycolor({ h: h, s: s, v: v}));
        v = (v + modification) % 1;
    }

    return ret;
}

// Utility Functions
// ---------------------

tinycolor.mix = function(color1, color2, amount) {
    amount = (amount === 0) ? 0 : (amount || 50);

    var rgb1 = tinycolor(color1).toRgb();
    var rgb2 = tinycolor(color2).toRgb();

    var p = amount / 100;

    var rgba = {
        r: ((rgb2.r - rgb1.r) * p) + rgb1.r,
        g: ((rgb2.g - rgb1.g) * p) + rgb1.g,
        b: ((rgb2.b - rgb1.b) * p) + rgb1.b,
        a: ((rgb2.a - rgb1.a) * p) + rgb1.a
    };

    return tinycolor(rgba);
};

// Readability Functions
// ---------------------
// <http://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef (WCAG Version 2)

// contrast
// Analyze the 2 colors and returns the color contrast defined by (WCAG Version 2)
tinycolor.readability = function(color1, color2) {
    var c1 = tinycolor(color1);
    var c2 = tinycolor(color2);
    return (Math.max(c1.getLuminance(),c2.getLuminance())+0.05) / (Math.min(c1.getLuminance(),c2.getLuminance())+0.05);
};

// isReadable
// Ensure that foreground and background color combinations meet WCAG2 guidelines.
// The third argument is an optional Object.
//      the 'level' property states 'AA' or 'AAA' - if missing or invalid, it defaults to 'AA';
//      the 'size' property states 'large' or 'small' - if missing or invalid, it defaults to 'small'.
// If the entire object is absent, isReadable defaults to {level:"AA",size:"small"}.

// *Example*
//    tinycolor.isReadable("#000", "#111") => false
//    tinycolor.isReadable("#000", "#111",{level:"AA",size:"large"}) => false
tinycolor.isReadable = function(color1, color2, wcag2) {
    var readability = tinycolor.readability(color1, color2);
    var wcag2Parms, out;

    out = false;

    wcag2Parms = validateWCAG2Parms(wcag2);
    switch (wcag2Parms.level + wcag2Parms.size) {
        case "AAsmall":
        case "AAAlarge":
            out = readability >= 4.5;
            break;
        case "AAlarge":
            out = readability >= 3;
            break;
        case "AAAsmall":
            out = readability >= 7;
            break;
    }
    return out;

};

// mostReadable
// Given a base color and a list of possible foreground or background
// colors for that base, returns the most readable color.
// Optionally returns Black or White if the most readable color is unreadable.
// *Example*
//    tinycolor.mostReadable(tinycolor.mostReadable("#123", ["#124", "#125"],{includeFallbackColors:false}).toHexString(); // "#112255"
//    tinycolor.mostReadable(tinycolor.mostReadable("#123", ["#124", "#125"],{includeFallbackColors:true}).toHexString();  // "#ffffff"
//    tinycolor.mostReadable("#a8015a", ["#faf3f3"],{includeFallbackColors:true,level:"AAA",size:"large"}).toHexString(); // "#faf3f3"
//    tinycolor.mostReadable("#a8015a", ["#faf3f3"],{includeFallbackColors:true,level:"AAA",size:"small"}).toHexString(); // "#ffffff"
tinycolor.mostReadable = function(baseColor, colorList, args) {
    var bestColor = null;
    var bestScore = 0;
    var readability;
    var includeFallbackColors, level, size ;
    args = args || {};
    includeFallbackColors = args.includeFallbackColors ;
    level = args.level;
    size = args.size;

    for (var i= 0; i < colorList.length ; i++) {
        readability = tinycolor.readability(baseColor, colorList[i]);
        if (readability > bestScore) {
            bestScore = readability;
            bestColor = tinycolor(colorList[i]);
        }
    }

    if (tinycolor.isReadable(baseColor, bestColor, {"level":level,"size":size}) || !includeFallbackColors) {
        return bestColor;
    }
    else {
        args.includeFallbackColors=false;
        return tinycolor.mostReadable(baseColor,["#fff", "#000"],args);
    }
};

// Big List of Colors
// ------------------
// <http://www.w3.org/TR/css3-color/#svg-color>
var names = tinycolor.names = {
    aliceblue: "f0f8ff",
    antiquewhite: "faebd7",
    aqua: "0ff",
    aquamarine: "7fffd4",
    azure: "f0ffff",
    beige: "f5f5dc",
    bisque: "ffe4c4",
    black: "000",
    blanchedalmond: "ffebcd",
    blue: "00f",
    blueviolet: "8a2be2",
    brown: "a52a2a",
    burlywood: "deb887",
    burntsienna: "ea7e5d",
    cadetblue: "5f9ea0",
    chartreuse: "7fff00",
    chocolate: "d2691e",
    coral: "ff7f50",
    cornflowerblue: "6495ed",
    cornsilk: "fff8dc",
    crimson: "dc143c",
    cyan: "0ff",
    darkblue: "00008b",
    darkcyan: "008b8b",
    darkgoldenrod: "b8860b",
    darkgray: "a9a9a9",
    darkgreen: "006400",
    darkgrey: "a9a9a9",
    darkkhaki: "bdb76b",
    darkmagenta: "8b008b",
    darkolivegreen: "556b2f",
    darkorange: "ff8c00",
    darkorchid: "9932cc",
    darkred: "8b0000",
    darksalmon: "e9967a",
    darkseagreen: "8fbc8f",
    darkslateblue: "483d8b",
    darkslategray: "2f4f4f",
    darkslategrey: "2f4f4f",
    darkturquoise: "00ced1",
    darkviolet: "9400d3",
    deeppink: "ff1493",
    deepskyblue: "00bfff",
    dimgray: "696969",
    dimgrey: "696969",
    dodgerblue: "1e90ff",
    firebrick: "b22222",
    floralwhite: "fffaf0",
    forestgreen: "228b22",
    fuchsia: "f0f",
    gainsboro: "dcdcdc",
    ghostwhite: "f8f8ff",
    gold: "ffd700",
    goldenrod: "daa520",
    gray: "808080",
    green: "008000",
    greenyellow: "adff2f",
    grey: "808080",
    honeydew: "f0fff0",
    hotpink: "ff69b4",
    indianred: "cd5c5c",
    indigo: "4b0082",
    ivory: "fffff0",
    khaki: "f0e68c",
    lavender: "e6e6fa",
    lavenderblush: "fff0f5",
    lawngreen: "7cfc00",
    lemonchiffon: "fffacd",
    lightblue: "add8e6",
    lightcoral: "f08080",
    lightcyan: "e0ffff",
    lightgoldenrodyellow: "fafad2",
    lightgray: "d3d3d3",
    lightgreen: "90ee90",
    lightgrey: "d3d3d3",
    lightpink: "ffb6c1",
    lightsalmon: "ffa07a",
    lightseagreen: "20b2aa",
    lightskyblue: "87cefa",
    lightslategray: "789",
    lightslategrey: "789",
    lightsteelblue: "b0c4de",
    lightyellow: "ffffe0",
    lime: "0f0",
    limegreen: "32cd32",
    linen: "faf0e6",
    magenta: "f0f",
    maroon: "800000",
    mediumaquamarine: "66cdaa",
    mediumblue: "0000cd",
    mediumorchid: "ba55d3",
    mediumpurple: "9370db",
    mediumseagreen: "3cb371",
    mediumslateblue: "7b68ee",
    mediumspringgreen: "00fa9a",
    mediumturquoise: "48d1cc",
    mediumvioletred: "c71585",
    midnightblue: "191970",
    mintcream: "f5fffa",
    mistyrose: "ffe4e1",
    moccasin: "ffe4b5",
    navajowhite: "ffdead",
    navy: "000080",
    oldlace: "fdf5e6",
    olive: "808000",
    olivedrab: "6b8e23",
    orange: "ffa500",
    orangered: "ff4500",
    orchid: "da70d6",
    palegoldenrod: "eee8aa",
    palegreen: "98fb98",
    paleturquoise: "afeeee",
    palevioletred: "db7093",
    papayawhip: "ffefd5",
    peachpuff: "ffdab9",
    peru: "cd853f",
    pink: "ffc0cb",
    plum: "dda0dd",
    powderblue: "b0e0e6",
    purple: "800080",
    rebeccapurple: "663399",
    red: "f00",
    rosybrown: "bc8f8f",
    royalblue: "4169e1",
    saddlebrown: "8b4513",
    salmon: "fa8072",
    sandybrown: "f4a460",
    seagreen: "2e8b57",
    seashell: "fff5ee",
    sienna: "a0522d",
    silver: "c0c0c0",
    skyblue: "87ceeb",
    slateblue: "6a5acd",
    slategray: "708090",
    slategrey: "708090",
    snow: "fffafa",
    springgreen: "00ff7f",
    steelblue: "4682b4",
    tan: "d2b48c",
    teal: "008080",
    thistle: "d8bfd8",
    tomato: "ff6347",
    turquoise: "40e0d0",
    violet: "ee82ee",
    wheat: "f5deb3",
    white: "fff",
    whitesmoke: "f5f5f5",
    yellow: "ff0",
    yellowgreen: "9acd32"
};

// Make it easy to access colors via hexNames[hex]
var hexNames = tinycolor.hexNames = flip(names);

// Utilities
// ---------

// { 'name1': 'val1' } becomes { 'val1': 'name1' }
function flip(o) {
    var flipped = { };
    for (var i in o) {
        if (o.hasOwnProperty(i)) {
            flipped[o[i]] = i;
        }
    }
    return flipped;
}

// Return a valid alpha value [0,1] with all invalid values being set to 1
function boundAlpha(a) {
    a = parseFloat(a);

    if (isNaN(a) || a < 0 || a > 1) {
        a = 1;
    }

    return a;
}

// Take input from [0, n] and return it as [0, 1]
function bound01(n, max) {
    if (isOnePointZero(n)) { n = "100%"; }

    var processPercent = isPercentage(n);
    n = mathMin(max, mathMax(0, parseFloat(n)));

    // Automatically convert percentage into number
    if (processPercent) {
        n = parseInt(n * max, 10) / 100;
    }

    // Handle floating point rounding errors
    if ((Math.abs(n - max) < 0.000001)) {
        return 1;
    }

    // Convert into [0, 1] range if it isn't already
    return (n % max) / parseFloat(max);
}

// Force a number between 0 and 1
function clamp01(val) {
    return mathMin(1, mathMax(0, val));
}

// Parse a base-16 hex value into a base-10 integer
function parseIntFromHex(val) {
    return parseInt(val, 16);
}

// Need to handle 1.0 as 100%, since once it is a number, there is no difference between it and 1
// <http://stackoverflow.com/questions/7422072/javascript-how-to-detect-number-as-a-decimal-including-1-0>
function isOnePointZero(n) {
    return typeof n == "string" && n.indexOf('.') != -1 && parseFloat(n) === 1;
}

// Check to see if string passed in is a percentage
function isPercentage(n) {
    return typeof n === "string" && n.indexOf('%') != -1;
}

// Force a hex value to have 2 characters
function pad2(c) {
    return c.length == 1 ? '0' + c : '' + c;
}

// Replace a decimal with it's percentage value
function convertToPercentage(n) {
    if (n <= 1) {
        n = (n * 100) + "%";
    }

    return n;
}

// Converts a decimal to a hex value
function convertDecimalToHex(d) {
    return Math.round(parseFloat(d) * 255).toString(16);
}
// Converts a hex value to a decimal
function convertHexToDecimal(h) {
    return (parseIntFromHex(h) / 255);
}

var matchers = (function() {

    // <http://www.w3.org/TR/css3-values/#integers>
    var CSS_INTEGER = "[-\\+]?\\d+%?";

    // <http://www.w3.org/TR/css3-values/#number-value>
    var CSS_NUMBER = "[-\\+]?\\d*\\.\\d+%?";

    // Allow positive/negative integer/number.  Don't capture the either/or, just the entire outcome.
    var CSS_UNIT = "(?:" + CSS_NUMBER + ")|(?:" + CSS_INTEGER + ")";

    // Actual matching.
    // Parentheses and commas are optional, but not required.
    // Whitespace can take the place of commas or opening paren
    var PERMISSIVE_MATCH3 = "[\\s|\\(]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")\\s*\\)?";
    var PERMISSIVE_MATCH4 = "[\\s|\\(]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")\\s*\\)?";

    return {
        CSS_UNIT: new RegExp(CSS_UNIT),
        rgb: new RegExp("rgb" + PERMISSIVE_MATCH3),
        rgba: new RegExp("rgba" + PERMISSIVE_MATCH4),
        hsl: new RegExp("hsl" + PERMISSIVE_MATCH3),
        hsla: new RegExp("hsla" + PERMISSIVE_MATCH4),
        hsv: new RegExp("hsv" + PERMISSIVE_MATCH3),
        hsva: new RegExp("hsva" + PERMISSIVE_MATCH4),
        hex3: /^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,
        hex6: /^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/,
        hex4: /^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,
        hex8: /^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/
    };
})();

// isValidCSSUnit
// Take in a single string / number and check to see if it looks like a CSS unit
// (see matchers above for definition).
function isValidCSSUnit(color) {
    return !!matchers.CSS_UNIT.exec(color);
}

// stringInputToObject
// Permissive string parsing.  Take in a number of formats, and output an object
// based on detected format.  Returns { r, g, b } or { h, s, l } or { h, s, v}
function stringInputToObject(color) {

    color = color.replace(trimLeft, '').replace(trimRight, '').toLowerCase();
    var named = false;
    if (names[color]) {
        color = names[color];
        named = true;
    }
    else if (color == 'transparent') {
        return { r: 0, g: 0, b: 0, a: 0, format: "name" };
    }

    // Try to match string input using regular expressions.
    // Keep most of the number bounding out of this function - don't worry about [0,1] or [0,100] or [0,360]
    // Just return an object and let the conversion functions handle that.
    // This way the result will be the same whether the tinycolor is initialized with string or object.
    var match;
    if ((match = matchers.rgb.exec(color))) {
        return { r: match[1], g: match[2], b: match[3] };
    }
    if ((match = matchers.rgba.exec(color))) {
        return { r: match[1], g: match[2], b: match[3], a: match[4] };
    }
    if ((match = matchers.hsl.exec(color))) {
        return { h: match[1], s: match[2], l: match[3] };
    }
    if ((match = matchers.hsla.exec(color))) {
        return { h: match[1], s: match[2], l: match[3], a: match[4] };
    }
    if ((match = matchers.hsv.exec(color))) {
        return { h: match[1], s: match[2], v: match[3] };
    }
    if ((match = matchers.hsva.exec(color))) {
        return { h: match[1], s: match[2], v: match[3], a: match[4] };
    }
    if ((match = matchers.hex8.exec(color))) {
        return {
            r: parseIntFromHex(match[1]),
            g: parseIntFromHex(match[2]),
            b: parseIntFromHex(match[3]),
            a: convertHexToDecimal(match[4]),
            format: named ? "name" : "hex8"
        };
    }
    if ((match = matchers.hex6.exec(color))) {
        return {
            r: parseIntFromHex(match[1]),
            g: parseIntFromHex(match[2]),
            b: parseIntFromHex(match[3]),
            format: named ? "name" : "hex"
        };
    }
    if ((match = matchers.hex4.exec(color))) {
        return {
            r: parseIntFromHex(match[1] + '' + match[1]),
            g: parseIntFromHex(match[2] + '' + match[2]),
            b: parseIntFromHex(match[3] + '' + match[3]),
            a: convertHexToDecimal(match[4] + '' + match[4]),
            format: named ? "name" : "hex8"
        };
    }
    if ((match = matchers.hex3.exec(color))) {
        return {
            r: parseIntFromHex(match[1] + '' + match[1]),
            g: parseIntFromHex(match[2] + '' + match[2]),
            b: parseIntFromHex(match[3] + '' + match[3]),
            format: named ? "name" : "hex"
        };
    }

    return false;
}

function validateWCAG2Parms(parms) {
    // return valid WCAG2 parms for isReadable.
    // If input parms are invalid, return {"level":"AA", "size":"small"}
    var level, size;
    parms = parms || {"level":"AA", "size":"small"};
    level = (parms.level || "AA").toUpperCase();
    size = (parms.size || "small").toLowerCase();
    if (level !== "AA" && level !== "AAA") {
        level = "AA";
    }
    if (size !== "small" && size !== "large") {
        size = "small";
    }
    return {"level":level, "size":size};
}

this.tinycolor = tinycolor;

})()`;
}
// It is hacky way to make this function will be compiled preferentially by less
// resolve error: `ReferenceError: colorPalette is not defined`
// https://github.com/ant-design/ant-motion/issues/44
.tinyColorMixin();

// We create a very complex algorithm which take the place of original tint/shade color system
// to make sure no one can understand it 👻
// and create an entire color palette magicly by inputing just a single primary color.
// We are using bezier-curve easing function and some color manipulations like tint/shade/darken/spin
.colorPaletteMixin() {
@functions: ~`(function() {
  var hueStep = 2;
  var saturationStep = 16;
  var saturationStep2 = 5;
  var brightnessStep1 = 5;
  var brightnessStep2 = 15;
  var lightColorCount = 5;
  var darkColorCount = 4;

  var getHue = function(hsv, i, isLight) {
    var hue;
    if (hsv.h >= 60 && hsv.h <= 240) {
      hue = isLight ? hsv.h - hueStep * i : hsv.h + hueStep * i;
    } else {
      hue = isLight ? hsv.h + hueStep * i : hsv.h - hueStep * i;
    }
    if (hue < 0) {
      hue += 360;
    } else if (hue >= 360) {
      hue -= 360;
    }
    return Math.round(hue);
  };
  var getSaturation = function(hsv, i, isLight) {
    var saturation;
    if (isLight) {
      saturation = Math.round(hsv.s * 100) - saturationStep * i;
    } else if (i == darkColorCount) {
      saturation = Math.round(hsv.s * 100) + saturationStep;
    } else {
      saturation = Math.round(hsv.s * 100) + saturationStep2 * i;
    }
    if (saturation > 100) {
      saturation = 100;
    }
    if (isLight && i === lightColorCount && saturation > 10) {
      saturation = 10;
    }
    if (saturation < 6) {
      saturation = 6;
    }
    return Math.round(saturation);
  };
  var getValue = function(hsv, i, isLight) {
    if (isLight) {
      return Math.round(hsv.v * 100) + brightnessStep1 * i;
    }
    return Math.round(hsv.v * 100) - brightnessStep2 * i;
  };

  this.colorPalette = function(color, index) {
    var isLight = index <= 6;
    var hsv = tinycolor(color).toHsv();
    var i = isLight ? lightColorCount + 1 - index : index - lightColorCount - 1;
    return tinycolor({
      h: getHue(hsv, i, isLight),
      s: getSaturation(hsv, i, isLight),
      v: getValue(hsv, i, isLight),
    }).toHexString();
  };
})()`;
}
// It is hacky way to make this function will be compiled preferentially by less
// resolve error: `ReferenceError: colorPalette is not defined`
// https://github.com/ant-design/ant-motion/issues/44
.colorPaletteMixin();

// color palettes
@blue-1: color(~`colorPalette("@{blue-6}", 1)`);
@blue-2: color(~`colorPalette("@{blue-6}", 2)`);
@blue-3: color(~`colorPalette("@{blue-6}", 3)`);
@blue-4: color(~`colorPalette("@{blue-6}", 4)`);
@blue-5: color(~`colorPalette("@{blue-6}", 5)`);
@blue-6: #1890ff;
@blue-7: color(~`colorPalette("@{blue-6}", 7)`);
@blue-8: color(~`colorPalette("@{blue-6}", 8)`);
@blue-9: color(~`colorPalette("@{blue-6}", 9)`);
@blue-10: color(~`colorPalette("@{blue-6}", 10)`);

@purple-1: color(~`colorPalette("@{purple-6}", 1)`);
@purple-2: color(~`colorPalette("@{purple-6}", 2)`);
@purple-3: color(~`colorPalette("@{purple-6}", 3)`);
@purple-4: color(~`colorPalette("@{purple-6}", 4)`);
@purple-5: color(~`colorPalette("@{purple-6}", 5)`);
@purple-6: #722ed1;
@purple-7: color(~`colorPalette("@{purple-6}", 7)`);
@purple-8: color(~`colorPalette("@{purple-6}", 8)`);
@purple-9: color(~`colorPalette("@{purple-6}", 9)`);
@purple-10: color(~`colorPalette("@{purple-6}", 10)`);

@cyan-1: color(~`colorPalette("@{cyan-6}", 1)`);
@cyan-2: color(~`colorPalette("@{cyan-6}", 2)`);
@cyan-3: color(~`colorPalette("@{cyan-6}", 3)`);
@cyan-4: color(~`colorPalette("@{cyan-6}", 4)`);
@cyan-5: color(~`colorPalette("@{cyan-6}", 5)`);
@cyan-6: #13c2c2;
@cyan-7: color(~`colorPalette("@{cyan-6}", 7)`);
@cyan-8: color(~`colorPalette("@{cyan-6}", 8)`);
@cyan-9: color(~`colorPalette("@{cyan-6}", 9)`);
@cyan-10: color(~`colorPalette("@{cyan-6}", 10)`);

@green-1: color(~`colorPalette("@{green-6}", 1)`);
@green-2: color(~`colorPalette("@{green-6}", 2)`);
@green-3: color(~`colorPalette("@{green-6}", 3)`);
@green-4: color(~`colorPalette("@{green-6}", 4)`);
@green-5: color(~`colorPalette("@{green-6}", 5)`);
@green-6: #52c41a;
@green-7: color(~`colorPalette("@{green-6}", 7)`);
@green-8: color(~`colorPalette("@{green-6}", 8)`);
@green-9: color(~`colorPalette("@{green-6}", 9)`);
@green-10: color(~`colorPalette("@{green-6}", 10)`);

@magenta-1: color(~`colorPalette("@{magenta-6}", 1)`);
@magenta-2: color(~`colorPalette("@{magenta-6}", 2)`);
@magenta-3: color(~`colorPalette("@{magenta-6}", 3)`);
@magenta-4: color(~`colorPalette("@{magenta-6}", 4)`);
@magenta-5: color(~`colorPalette("@{magenta-6}", 5)`);
@magenta-6: #eb2f96;
@magenta-7: color(~`colorPalette("@{magenta-6}", 7)`);
@magenta-8: color(~`colorPalette("@{magenta-6}", 8)`);
@magenta-9: color(~`colorPalette("@{magenta-6}", 9)`);
@magenta-10: color(~`colorPalette("@{magenta-6}", 10)`);

// alias of magenta
@pink-1: color(~`colorPalette("@{pink-6}", 1)`);
@pink-2: color(~`colorPalette("@{pink-6}", 2)`);
@pink-3: color(~`colorPalette("@{pink-6}", 3)`);
@pink-4: color(~`colorPalette("@{pink-6}", 4)`);
@pink-5: color(~`colorPalette("@{pink-6}", 5)`);
@pink-6: #eb2f96;
@pink-7: color(~`colorPalette("@{pink-6}", 7)`);
@pink-8: color(~`colorPalette("@{pink-6}", 8)`);
@pink-9: color(~`colorPalette("@{pink-6}", 9)`);
@pink-10: color(~`colorPalette("@{pink-6}", 10)`);

@red-1: color(~`colorPalette("@{red-6}", 1)`);
@red-2: color(~`colorPalette("@{red-6}", 2)`);
@red-3: color(~`colorPalette("@{red-6}", 3)`);
@red-4: color(~`colorPalette("@{red-6}", 4)`);
@red-5: color(~`colorPalette("@{red-6}", 5)`);
@red-6: #f5222d;
@red-7: color(~`colorPalette("@{red-6}", 7)`);
@red-8: color(~`colorPalette("@{red-6}", 8)`);
@red-9: color(~`colorPalette("@{red-6}", 9)`);
@red-10: color(~`colorPalette("@{red-6}", 10)`);

@orange-1: color(~`colorPalette("@{orange-6}", 1)`);
@orange-2: color(~`colorPalette("@{orange-6}", 2)`);
@orange-3: color(~`colorPalette("@{orange-6}", 3)`);
@orange-4: color(~`colorPalette("@{orange-6}", 4)`);
@orange-5: color(~`colorPalette("@{orange-6}", 5)`);
@orange-6: #fa8c16;
@orange-7: color(~`colorPalette("@{orange-6}", 7)`);
@orange-8: color(~`colorPalette("@{orange-6}", 8)`);
@orange-9: color(~`colorPalette("@{orange-6}", 9)`);
@orange-10: color(~`colorPalette("@{orange-6}", 10)`);

@yellow-1: color(~`colorPalette("@{yellow-6}", 1)`);
@yellow-2: color(~`colorPalette("@{yellow-6}", 2)`);
@yellow-3: color(~`colorPalette("@{yellow-6}", 3)`);
@yellow-4: color(~`colorPalette("@{yellow-6}", 4)`);
@yellow-5: color(~`colorPalette("@{yellow-6}", 5)`);
@yellow-6: #fadb14;
@yellow-7: color(~`colorPalette("@{yellow-6}", 7)`);
@yellow-8: color(~`colorPalette("@{yellow-6}", 8)`);
@yellow-9: color(~`colorPalette("@{yellow-6}", 9)`);
@yellow-10: color(~`colorPalette("@{yellow-6}", 10)`);

@volcano-1: color(~`colorPalette("@{volcano-6}", 1)`);
@volcano-2: color(~`colorPalette("@{volcano-6}", 2)`);
@volcano-3: color(~`colorPalette("@{volcano-6}", 3)`);
@volcano-4: color(~`colorPalette("@{volcano-6}", 4)`);
@volcano-5: color(~`colorPalette("@{volcano-6}", 5)`);
@volcano-6: #fa541c;
@volcano-7: color(~`colorPalette("@{volcano-6}", 7)`);
@volcano-8: color(~`colorPalette("@{volcano-6}", 8)`);
@volcano-9: color(~`colorPalette("@{volcano-6}", 9)`);
@volcano-10: color(~`colorPalette("@{volcano-6}", 10)`);

@geekblue-1: color(~`colorPalette("@{geekblue-6}", 1)`);
@geekblue-2: color(~`colorPalette("@{geekblue-6}", 2)`);
@geekblue-3: color(~`colorPalette("@{geekblue-6}", 3)`);
@geekblue-4: color(~`colorPalette("@{geekblue-6}", 4)`);
@geekblue-5: color(~`colorPalette("@{geekblue-6}", 5)`);
@geekblue-6: #2f54eb;
@geekblue-7: color(~`colorPalette("@{geekblue-6}", 7)`);
@geekblue-8: color(~`colorPalette("@{geekblue-6}", 8)`);
@geekblue-9: color(~`colorPalette("@{geekblue-6}", 9)`);
@geekblue-10: color(~`colorPalette("@{geekblue-6}", 10)`);

@lime-1: color(~`colorPalette("@{lime-6}", 1)`);
@lime-2: color(~`colorPalette("@{lime-6}", 2)`);
@lime-3: color(~`colorPalette("@{lime-6}", 3)`);
@lime-4: color(~`colorPalette("@{lime-6}", 4)`);
@lime-5: color(~`colorPalette("@{lime-6}", 5)`);
@lime-6: #a0d911;
@lime-7: color(~`colorPalette("@{lime-6}", 7)`);
@lime-8: color(~`colorPalette("@{lime-6}", 8)`);
@lime-9: color(~`colorPalette("@{lime-6}", 9)`);
@lime-10: color(~`colorPalette("@{lime-6}", 10)`);

@gold-1: color(~`colorPalette("@{gold-6}", 1)`);
@gold-2: color(~`colorPalette("@{gold-6}", 2)`);
@gold-3: color(~`colorPalette("@{gold-6}", 3)`);
@gold-4: color(~`colorPalette("@{gold-6}", 4)`);
@gold-5: color(~`colorPalette("@{gold-6}", 5)`);
@gold-6: #faad14;
@gold-7: color(~`colorPalette("@{gold-6}", 7)`);
@gold-8: color(~`colorPalette("@{gold-6}", 8)`);
@gold-9: color(~`colorPalette("@{gold-6}", 9)`);
@gold-10: color(~`colorPalette("@{gold-6}", 10)`);

// The prefix to use on all css classes from ant.
@ant-prefix             : ant;

// -------- Colors -----------
@primary-color          : @blue-6;
@info-color             : @blue-6;
@success-color          : @green-6;
@processing-color       : @blue-6;
@error-color            : @red-6;
@highlight-color        : @red-6;
@warning-color          : @gold-6;
@normal-color           : #d9d9d9;

// Color used by default to control hover and active backgrounds and for
// alert info backgrounds.
@primary-1: color(~`colorPalette("@{primary-color}", 1)`);  // replace tint(@primary-color, 90%)
@primary-2: color(~`colorPalette("@{primary-color}", 2)`);  // replace tint(@primary-color, 80%)
@primary-3: color(~`colorPalette("@{primary-color}", 3)`);  // unused
@primary-4: color(~`colorPalette("@{primary-color}", 4)`);  // unused
@primary-5: color(~`colorPalette("@{primary-color}", 5)`);  // color used to control the text color in many active and hover states, replace tint(@primary-color, 20%)
@primary-6: @primary-color;                                 // color used to control the text color of active buttons, don't use, use @primary-color
@primary-7: color(~`colorPalette("@{primary-color}", 7)`);  // replace shade(@primary-color, 5%)
@primary-8: color(~`colorPalette("@{primary-color}", 8)`);  // unused
@primary-9: color(~`colorPalette("@{primary-color}", 9)`);  // unused
@primary-10: color(~`colorPalette("@{primary-color}", 10)`);  // unused

// Base Scaffolding Variables
// ---

// Background color for `<body>`
@body-background        : #fff;
// Base background color for most components
@component-background   : #fff;
@font-family  : "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif,
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
@code-family            : "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
@heading-color          : fade(#000, 85%);
@text-color             : fade(#000, 65%);
@text-color-secondary   : fade(#000, 45%);
@heading-color-dark     : fade(#fff, 100%);
@text-color-dark        : fade(#fff, 85%);
@text-color-secondary-dark: fade(#fff, 65%);
@font-size-base         : 14px;
@font-size-lg           : @font-size-base + 2px;
@font-size-sm           : 12px;
@line-height-base       : 1.5;
@border-radius-base     : 4px;
@border-radius-sm       : 2px;

// vertical paddings
@padding-lg    : 24px; // containers
@padding-md    : 16px; // small containers and buttons
@padding-sm    : 12px; // Form controls and items
@padding-xs    : 8px;  // small items

// vertical padding for all form controls
@control-padding-horizontal: @padding-sm;
@control-padding-horizontal-sm: @padding-xs;

// The background colors for active and hover states for things like
// list items or table cells.
@item-active-bg         : @primary-1;
@item-hover-bg          : @primary-1;

// ICONFONT
@iconfont-css-prefix    : anticon;

// LINK
@link-color             : @primary-color;
@link-hover-color       : color(~`colorPalette("@{link-color}", 5)`);
@link-active-color      : color(~`colorPalette("@{link-color}", 7)`);
@link-decoration        : none;
@link-hover-decoration  : none;

// Animation
@ease-base-out       : cubic-bezier(0.7, 0.3, 0.1, 1);
@ease-base-in        : cubic-bezier(0.9, 0, 0.3, 0.7);
@ease-out            : cubic-bezier(0.215, 0.61, 0.355, 1);
@ease-in             : cubic-bezier(0.55, 0.055, 0.675, 0.19);
@ease-in-out         : cubic-bezier(0.645, 0.045, 0.355, 1);
@ease-out-back       : cubic-bezier(0.12, 0.4, 0.29, 1.46);
@ease-in-back        : cubic-bezier(0.71, -0.46, 0.88, 0.6);
@ease-in-out-back    : cubic-bezier(0.71, -0.46, 0.29, 1.46);
@ease-out-circ       : cubic-bezier(0.08, 0.82, 0.17, 1);
@ease-in-circ        : cubic-bezier(0.6, 0.04, 0.98, 0.34);
@ease-in-out-circ    : cubic-bezier(0.78, 0.14, 0.15, 0.86);
@ease-out-quint      : cubic-bezier(0.23, 1, 0.32, 1);
@ease-in-quint       : cubic-bezier(0.755, 0.05, 0.855, 0.06);
@ease-in-out-quint   : cubic-bezier(0.86, 0, 0.07, 1);

// Border color
@border-color-base      : hsv(0, 0, 85%);  // base border outline a component
@border-color-split     : hsv(0, 0, 91%);  // split border inside a component
@border-width-base      : 1px;            // width of the border for a component
@border-style-base      : solid;          // style of a components border

// Outline
@outline-blur-size      : 0;
@outline-width          : 2px;
@outline-color          : @primary-color;

@background-color-light : hsv(0, 0, 98%);  // background of header and selected item
@background-color-base  : hsv(0, 0, 96%);  // Default grey background color

// Disabled states
@disabled-color         : fade(#000, 25%);
@disabled-bg            : @background-color-base;
@disabled-color-dark    : fade(#fff, 35%);

// Shadow
@shadow-color           : rgba(0, 0, 0, .15);
@box-shadow-base        : @shadow-1-down;
@shadow-1-up            : 0 -2px 8px @shadow-color;
@shadow-1-down          : 0 2px 8px @shadow-color;
@shadow-1-left          : -2px 0 8px @shadow-color;
@shadow-1-right         : 2px 0 8px @shadow-color;
@shadow-2               : 0 4px 12px @shadow-color;

// Buttons
@btn-font-weight        : 400;
@btn-border-radius-base : @border-radius-base;
@btn-border-radius-sm   : @border-radius-base;

@btn-primary-color      : #fff;
@btn-primary-bg         : @primary-color;

@btn-default-color      : @text-color;
@btn-default-bg         : #fff;
@btn-default-border     : @border-color-base;

@btn-danger-color       : @error-color;
@btn-danger-bg          : @background-color-base;
@btn-danger-border      : @border-color-base;

@btn-disable-color      : @disabled-color;
@btn-disable-bg         : @disabled-bg;
@btn-disable-border     : @border-color-base;

@btn-padding-base       : 0 @padding-md - 1px;
@btn-font-size-lg       : @font-size-lg;
@btn-font-size-sm       : @font-size-base;
@btn-padding-lg         : @btn-padding-base;
@btn-padding-sm         : 0 @padding-xs - 1px;

@btn-height-base        : 32px;
@btn-height-lg          : 40px;
@btn-height-sm          : 24px;

@btn-circle-size        : @btn-height-base;
@btn-circle-size-lg     : @btn-height-lg;
@btn-circle-size-sm     : @btn-height-sm;

@btn-group-border       : @primary-5;

// Checkbox
@checkbox-size          : 16px;
@checkbox-color         : @primary-color;
@checkbox-check-color   : #fff;

// Radio
@radio-size             : 16px;
@radio-dot-color        : @primary-color;

// Radio buttons
@radio-button-bg           : @btn-default-bg;
@radio-button-color        : @btn-default-color;
@radio-button-hover-color  : @primary-5;
@radio-button-active-color : @primary-7;

// Media queries breakpoints
// Extra small screen / phone
@screen-xs              : 480px;
@screen-xs-min          : @screen-xs;

// Small screen / tablet
@screen-sm              : 576px;
@screen-sm-min          : @screen-sm;

// Medium screen / desktop
@screen-md              : 768px;
@screen-md-min          : @screen-md;

// Large screen / wide desktop
@screen-lg              : 992px;
@screen-lg-min          : @screen-lg;

// Extra large screen / full hd
@screen-xl              : 1200px;
@screen-xl-min          : @screen-xl;

// Extra extra large screen / large descktop
@screen-xxl              : 1600px;
@screen-xxl-min          : @screen-xxl;

// provide a maximum
@screen-xs-max          : (@screen-sm-min - 1px);
@screen-sm-max          : (@screen-md-min - 1px);
@screen-md-max          : (@screen-lg-min - 1px);
@screen-lg-max          : (@screen-xl-min - 1px);
@screen-xl-max          : (@screen-xxl-min - 1px);

// Grid system
@grid-columns           : 24;
@grid-gutter-width      : 0;

// Layout
@layout-body-background         : #f0f2f5;
@layout-header-background       : #001529;
@layout-footer-background       : @layout-body-background;
@layout-header-height           : 64px;
@layout-header-padding          : 0 50px;
@layout-footer-padding          : 24px 50px;
@layout-sider-background        : @layout-header-background;
@layout-trigger-height          : 48px;
@layout-trigger-background      : #002140;
@layout-trigger-color           : #fff;
@layout-zero-trigger-width      : 36px;
@layout-zero-trigger-height     : 42px;
// Layout light theme
@layout-sider-background-light  : #fff;
@layout-trigger-background-light: #fff;
@layout-trigger-color-light     : @text-color;

// z-index list
@zindex-affix           : 10;
@zindex-back-top        : 10;
@zindex-modal-mask      : 1000;
@zindex-modal           : 1000;
@zindex-notification    : 1010;
@zindex-message         : 1010;
@zindex-popover         : 1030;
@zindex-picker          : 1050;
@zindex-dropdown        : 1050;
@zindex-tooltip         : 1060;

// Animation
@animation-duration-slow: .3s; // Modal
@animation-duration-base: .2s;
@animation-duration-fast: .1s; // Tooltip

// Form
// ---
@label-required-color        : @highlight-color;
@label-color                 : @heading-color;
@form-item-margin-bottom     : 24px;
@form-item-trailing-colon    : true;
@form-vertical-label-padding : 0 0 8px;
@form-vertical-label-margin  : 0;

// Input
// ---
@input-height-base           : 32px;
@input-height-lg             : 40px;
@input-height-sm             : 24px;
@input-padding-horizontal    : @control-padding-horizontal - 1px;
@input-padding-horizontal-base: @input-padding-horizontal;
@input-padding-horizontal-sm : @control-padding-horizontal-sm - 1px;
@input-padding-horizontal-lg : @input-padding-horizontal;
@input-padding-vertical-base : 4px;
@input-padding-vertical-sm   : 1px;
@input-padding-vertical-lg   : 6px;
@input-placeholder-color     : hsv(0, 0, 75%);
@input-color                 : @text-color;
@input-border-color          : @border-color-base;
@input-bg                    : #fff;
@input-addon-bg              : @background-color-light;
@input-hover-border-color    : @primary-color;
@input-disabled-bg           : @disabled-bg;
@input-outline-offset        : 0 0;

// Tooltip
// ---
//* Tooltip max width
@tooltip-max-width: 250px;
//** Tooltip text color
@tooltip-color: #fff;
//** Tooltip background color
@tooltip-bg: rgba(0, 0, 0, .75);
//** Tooltip arrow width
@tooltip-arrow-width: 5px;
//** Tooltip distance with trigger
@tooltip-distance: @tooltip-arrow-width - 1px + 4px;
//** Tooltip arrow color
@tooltip-arrow-color: @tooltip-bg;

// Popover
// ---
//** Popover body background color
@popover-bg: #fff;
//** Popover text color
@popover-color: @text-color;
//** Popover maximum width
@popover-min-width: 177px;
//** Popover arrow width
@popover-arrow-width: 6px;
//** Popover arrow color
@popover-arrow-color: @popover-bg;
//** Popover outer arrow width
//** Popover outer arrow color
@popover-arrow-outer-color: @popover-bg;
//** Popover distance with trigger
@popover-distance: @popover-arrow-width + 4px;

// Modal
// --
@modal-mask-bg: rgba(0, 0, 0, 0.65);

// Progress
// --
@progress-default-color: @processing-color;
@progress-remaining-color: @background-color-base;
@progress-text-color: @text-color;

// Menu
// ---
@menu-inline-toplevel-item-height: 40px;
@menu-item-height: 40px;
@menu-collapsed-width: 80px;
@menu-bg: @component-background;
@menu-item-color: @text-color;
@menu-highlight-color: @primary-color;
@menu-item-active-bg: @item-active-bg;
@menu-item-active-border-width: 3px;
@menu-item-group-title-color: @text-color-secondary;
// dark theme
@menu-dark-color: @text-color-secondary-dark;
@menu-dark-bg: @layout-header-background;
@menu-dark-arrow-color: #fff;
@menu-dark-submenu-bg: #000c17;
@menu-dark-highlight-color: #fff;
@menu-dark-item-active-bg: @primary-color;

// Spin
// ---
@spin-dot-size-sm: 14px;
@spin-dot-size: 20px;
@spin-dot-size-lg: 32px;

// Table
// --
@table-header-bg: @background-color-light;
@table-header-color: @heading-color;
@table-header-sort-bg: @background-color-base;
@table-body-sort-bg: rgba(0, 0, 0, .01);
@table-row-hover-bg: @primary-1;
@table-selected-row-bg: #fafafa;
@table-expanded-row-bg: #fbfbfb;
@table-padding-vertical: 16px;
@table-padding-horizontal: 16px;

// Tag
// --
@tag-default-bg: @background-color-light;
@tag-default-color: @text-color;
@tag-font-size: @font-size-sm;

// TimePicker
// ---
@time-picker-panel-column-width: 56px;
@time-picker-panel-width: @time-picker-panel-column-width * 3;
@time-picker-selected-bg: @background-color-base;

// Carousel
// ---
@carousel-dot-width: 16px;
@carousel-dot-height: 3px;
@carousel-dot-active-width: 24px;

// Badge
// ---
@badge-height: 20px;
@badge-dot-size: 6px;
@badge-font-size: @font-size-sm;
@badge-font-weight: normal;
@badge-status-size: 6px;

// Rate
// ---
@rate-star-color: @yellow-6;
@rate-star-bg: @border-color-split;

// Card
// ---
@card-head-color: @heading-color;
@card-head-background: transparent;
@card-head-padding: 16px;
@card-inner-head-padding: 12px;
@card-padding-base: 24px;
@card-padding-wider: 32px;
@card-actions-background: @background-color-light;
@card-shadow: 0 2px 8px rgba(0, 0, 0, .09);

// Tabs
// ---
@tabs-card-head-background: @background-color-light;
@tabs-card-height: 40px;
@tabs-card-active-color: @primary-color;
@tabs-title-font-size: @font-size-base;
@tabs-title-font-size-lg: @font-size-lg;
@tabs-title-font-size-sm: @font-size-base;
@tabs-ink-bar-color: @primary-color;
@tabs-bar-margin: 0 0 16px 0;
@tabs-horizontal-margin: 0 32px 0 0;
@tabs-horizontal-padding: 12px 16px;
@tabs-vertical-padding: 8px 24px;
@tabs-vertical-margin: 0 0 16px 0;
@tabs-scrolling-size: 32px;
@tabs-highlight-color: @primary-color;
@tabs-hover-color: @primary-5;
@tabs-active-color: @primary-7;

// BackTop
// ---
@back-top-color: #fff;
@back-top-bg: @text-color-secondary;
@back-top-hover-bg: @text-color;

// Avatar
// ---
@avatar-size-base: 32px;
@avatar-size-lg: 40px;
@avatar-size-sm: 24px;
@avatar-font-size-base: 18px;
@avatar-font-size-lg: 24px;
@avatar-font-size-sm: 14px;
@avatar-bg: #ccc;
@avatar-color: #fff;
@avatar-border-radius: @border-radius-base;

// Switch
// ---
@switch-height: 22px;
@switch-sm-height: 16px;
@switch-sm-checked-margin-left: -(@switch-sm-height - 3px);
@switch-disabled-opacity: 0.4;
@switch-color: @primary-color;

// Pagination
// ---
@pagination-item-size: 32px;
@pagination-item-size-sm: 24px;
@pagination-font-family: Arial;
@pagination-font-weight-active: 500;

// Breadcrumb
// ---
@breadcrumb-base-color:        @text-color-secondary;
@breadcrumb-last-item-color:   @text-color;
@breadcrumb-font-size:         @font-size-base;
@breadcrumb-icon-font-size:    @font-size-base;
@breadcrumb-link-color:        @text-color-secondary;
@breadcrumb-link-color-hover:  @primary-5;
@breadcrumb-separator-color:   @text-color-secondary;
@breadcrumb-separator-margin:  0 @padding-xs;

// Slider
// ---
@slider-margin:                       14px 6px 10px;
@slider-rail-background-color:        @background-color-base;
@slider-rail-background-color-hover:  #e1e1e1;
@slider-track-background-color:       @primary-3;
@slider-track-background-color-hover: @primary-4;
@slider-handle-color:                 @primary-3;
@slider-handle-color-hover:           @primary-4;
@slider-handle-color-focus:           tint(@primary-color, 20%);
@slider-handle-color-focus-shadow:    tint(@primary-color, 50%);
@slider-handle-color-tooltip-open:    @primary-color;
@slider-dot-border-color:             @border-color-split;
@slider-dot-border-color-active:      tint(@primary-color, 50%);
@slider-disabled-color:               @disabled-color;
@slider-disabled-background-color:    @component-background;

// Tree
// ---
@tree-title-height:                   24px;
@tree-child-padding:                  18px;
@tree-directory-selected-color:       #fff;
@tree-directory-selected-bg:          @primary-color;

// Collapse
// ---
@collapse-header-padding:             12px 0 12px 40px;
@collapse-header-bg:                  @background-color-light;
@collapse-content-padding:            @padding-md;
@collapse-content-bg:                 @component-background;

// Skeleton
// ---
@skeleton-color:                      #f2f2f2;

// Transfer
// ---
@transfer-disabled-bg:                @disabled-bg;

// Message
// ---
@message-notice-content-padding:      10px 16px;

// Motion
// ---
@wave-animation-width: 6px;

// Alert
// ---
@alert-success-border-color: ~`colorPalette("@{success-color}", 3)`;
@alert-success-bg-color: ~`colorPalette("@{success-color}", 1)`;
@alert-success-icon-color: @success-color;
@alert-info-border-color: ~`colorPalette("@{info-color}", 3)`;
@alert-info-bg-color: ~`colorPalette("@{info-color}", 1)`;
@alert-info-icon-color: @info-color;
@alert-warning-border-color: ~`colorPalette("@{warning-color}", 3)`;
@alert-warning-bg-color: ~`colorPalette("@{warning-color}", 1)`;
@alert-warning-icon-color: @warning-color;
@alert-error-border-color: ~`colorPalette("@{error-color}", 3)`;
@alert-error-bg-color: ~`colorPalette("@{error-color}", 1)`;
@alert-error-icon-color: @error-color;

// List
// ---
@list-empty-text-padding:                    @padding-md;
@list-item-padding:                          @padding-sm 0;
@list-item-content-margin:                   0 0 @padding-md 0;
@list-item-meta-margin-bottom:               @padding-md;
@list-item-meta-avatar-margin-right:         @padding-md;
@list-item-meta-title-margin-bottom:         @padding-sm;

// Menu
@menu-dark-item-selected-bg: @menu-dark-item-active-bg;

// Tabs
@tab-bar-margin: @tabs-bar-margin;
@tab-horizontal-margin: @tabs-horizontal-margin;
@tab-vertical-margin: @tabs-vertical-margin;
@tab-horizontal-padding: @tabs-horizontal-padding;
@tab-vertical-padding: @tabs-vertical-padding;
@tab-scrolling-size: @tabs-scrolling-size;
@tab-highlight-color: @tabs-highlight-color;
@tab-hover-color: @tabs-hover-color;
@tab-active-color: @tabs-active-color;
@tabs-ink-bar-bg-color: @tabs-ink-bar-color;

// Mixins
// --------------------------------------------------
// Sizing shortcuts

.size(@width; @height) {
  width: @width;
  height: @height;
}

.square(@size) {
  .size(@size; @size);
}

// Compatibility for browsers.

// Placeholder text
.placeholder(@color: @input-placeholder-color) {
  // Firefox
  &::-moz-placeholder {
    color: @color;
    opacity: 1; // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526
  }
  // Internet Explorer 10+
  &:-ms-input-placeholder {
    color: @color;
  }
  // Safari and Chrome
  &::-webkit-input-placeholder {
    color: @color;
  }
}

// mixins for clearfix
// ------------------------
.clearfix() {
  zoom: 1;
  &:before,
  &:after {
    content: "";
    display: table;
  }
  &:after {
    clear: both;
  }
}

.iconfont-mixin() {
  display: inline-block;
  font-style: normal;
  vertical-align: -0.125em; // for SVG icon, see https://blog.prototypr.io/align-svg-icons-to-text-and-say-goodbye-to-font-icons-d44b3d7b26b4
  text-align: center;
  text-transform: none;
  line-height: 0;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  > * {
    line-height: 1;
  }

  svg {
    display: inline-block;
  }

  &:before {
    display: none; // dont display old icon.
  }

  & &-icon {
    display: block;
  }
}

// for iconfont font size
// fix chrome 12px bug, support ie
.iconfont-size-under-12px(@size, @rotate: 0deg) {
  display: inline-block;
  @font-scale: unit(@size / 12px);
  font-size: 12px;
  // IE9
  font-size: ~"@{size} \9"; // lesshint duplicateProperty: false
  transform: scale(@font-scale) rotate(@rotate);
  :root & {
    font-size: @font-size-sm; // reset IE9 and above
  }
}

.motion-common(@duration: @animation-duration-base) {
  animation-duration: @duration;
  animation-fill-mode: both;
}

.motion-common-leave(@duration: @animation-duration-base) {
  animation-duration: @duration;
  animation-fill-mode: both;
}

.make-motion(@className, @keyframeName, @duration: @animation-duration-base) {
  .@{className}-enter,
  .@{className}-appear {
    .motion-common(@duration);
    animation-play-state: paused;
  }
  .@{className}-leave {
    .motion-common-leave(@duration);
    animation-play-state: paused;
  }
  .@{className}-enter.@{className}-enter-active,
  .@{className}-appear.@{className}-appear-active {
    animation-name: ~"@{keyframeName}In";
    animation-play-state: running;
  }
  .@{className}-leave.@{className}-leave-active {
    animation-name: ~"@{keyframeName}Out";
    animation-play-state: running;
    pointer-events: none;
  }
}

.reset-component() {
  font-family: @font-family;
  font-size: @font-size-base;
  font-variant: tabular-nums;
  line-height: @line-height-base;
  color: @text-color;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* stylelint-disable at-rule-no-unknown */

// Reboot
//
// Normalization of HTML elements, manually forked from Normalize.css to remove
// styles targeting irrelevant browsers while applying new styles.
//
// Normalize is licensed MIT. https://github.com/necolas/normalize.css

@font-face {
  font-family: "Chinese Quote";
  src: local("PingFang SC"), local("SimSun");
  unicode-range: U+2018, U+2019, U+201c, U+201d;
}

// HTML & Body reset
html, body {
  .square(100%);
}

// remove the clear button of a text input control in IE10+
input::-ms-clear, input::-ms-reveal {
  display: none;
}

// Document
//
// 1. Change from `box-sizing: content-box` so that `width` is not affected by `padding` or `border`.
// 2. Change the default font family in all browsers.
// 3. Correct the line height in all browsers.
// 4. Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS.
// 5. Setting @viewport causes scrollbars to overlap content in IE11 and Edge, so
//    we force a non-overlapping, non-auto-hiding scrollbar to counteract.
// 6. Change the default tap highlight to be completely transparent in iOS.

*,
*::before,
*::after {
  box-sizing: border-box; // 1
}

html {
  font-family: sans-serif; // 2
  line-height: 1.15; // 3
  -webkit-text-size-adjust: 100%; // 4
  -ms-text-size-adjust: 100%; // 4
  -ms-overflow-style: scrollbar; // 5
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); // 6
}

// IE10+ doesn't honor `<meta name="viewport">` in some cases.
@-ms-viewport { width: device-width; }

// Shim for "new" HTML5 structural elements to display correctly (IE10, older browsers)
article, aside, dialog, figcaption, figure, footer, header, hgroup, main, nav, section {
  display: block;
}

// Body
//
// 1. remove the margin in all browsers.
// 2. As a best practice, apply a default `body-background`.

body {
  margin: 0; // 1
  font-family: @font-family;
  font-size: @font-size-base;
  font-variant: tabular-nums;
  line-height: @line-height-base;
  color: @text-color;
  background-color: @body-background; // 2
}

// Suppress the focus outline on elements that cannot be accessed via keyboard.
// This prevents an unwanted focus outline from appearing around elements that
// might still respond to pointer events.
//
// Credit: https://github.com/suitcss/base
[tabindex="-1"]:focus {
  outline: none !important;
}

// Content grouping
//
// 1. Add the correct box sizing in Firefox.
// 2. Show the overflow in Edge and IE.

hr {
  box-sizing: content-box; // 1
  height: 0; // 1
  overflow: visible; // 2
}

//
// Typography
//

// remove top margins from headings
//
// By default, `<h1>`-`<h6>` all receive top and bottom margins. We nuke the top
// margin for easier control within type scales as it avoids margin collapsing.
h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: .5em;
  color: @heading-color;
  font-weight: 500;
}

// Reset margins on paragraphs
//
// Similarly, the top margin on `<p>`s get reset. However, we also reset the
// bottom margin to use `em` units instead of `em`.
p {
  margin-top: 0;
  margin-bottom: 1em;
}

// Abbreviations
//
// 1. remove the bottom border in Firefox 39-.
// 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
// 3. Add explicit cursor to indicate changed behavior.
// 4. Duplicate behavior to the data-* attribute for our tooltip plugin

abbr[title],
abbr[data-original-title] { // 4
  text-decoration: underline; // 2
  text-decoration: underline dotted; // 2
  cursor: help; // 3
  border-bottom: 0; // 1
}

address {
  margin-bottom: 1em;
  font-style: normal;
  line-height: inherit;
}

input[type="text"],
input[type="password"],
input[type="number"],
textarea {
  -webkit-appearance: none;
}

ol,
ul,
dl {
  margin-top: 0;
  margin-bottom: 1em;
}

ol ol,
ul ul,
ol ul,
ul ol {
  margin-bottom: 0;
}

dt {
  font-weight: 500;
}

dd {
  margin-bottom: .5em;
  margin-left: 0; // Undo browser default
}

blockquote {
  margin: 0 0 1em;
}

dfn {
  font-style: italic; // Add the correct font style in Android 4.3-
}

b,
strong {
  font-weight: bolder; // Add the correct font weight in Chrome, Edge, and Safari
}

small {
  font-size: 80%; // Add the correct font size in all browsers
}

//
// Prevent `sub` and `sup` elements from affecting the line height in
// all browsers.
//

sub,
sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;
}

sub { bottom: -.25em; }
sup { top: -.5em; }

//
// Links
//

a {
  color: @link-color;
  background-color: transparent; // remove the gray background on active links in IE 10.
  text-decoration: @link-decoration;
  outline: none;
  cursor: pointer;
  transition: color .3s;
  -webkit-text-decoration-skip: objects; // remove gaps in links underline in iOS 8+ and Safari 8+.

  &:focus {
    text-decoration: underline;
    text-decoration-skip: ink;
  }

  &:hover {
    color: @link-hover-color;
  }

  &:active {
    color: @link-active-color;
  }

  &:active,
  &:hover {
    outline: 0;
    text-decoration: @link-hover-decoration;
  }

  &[disabled] {
    color: @disabled-color;
    cursor: not-allowed;
    pointer-events: none;
  }
}

//
// Code
//

pre,
code,
kbd,
samp {
  font-family: @code-family;
  font-size: 1em; // Correct the odd `em` font sizing in all browsers.
}

pre {
  // remove browser default top margin
  margin-top: 0;
  // Reset browser default of `1em` to use `em`s
  margin-bottom: 1em;
  // Don't allow content to break outside
  overflow: auto;
}

//
// Figures
//
figure {
  // Apply a consistent margin strategy (matches our type styles).
  margin: 0 0 1em;
}

//
// Images and content
//

img {
  vertical-align: middle;
  border-style: none; // remove the border on images inside links in IE 10-.
}

svg:not(:root) {
  overflow: hidden; // Hide the overflow in IE
}

// Avoid 300ms click delay on touch devices that support the `touch-action` CSS property.
//
// In particular, unlike most other browsers, IE11+Edge on Windows 10 on touch devices and IE Mobile 10-11
// DON'T remove the click delay when `<meta name="viewport" content="width=device-width">` is present.
// However, they DO support emoving the click delay via `touch-action: manipulation`.
// See:
// * https://getbootstrap.com/docs/4.0/content/reboot/#click-delay-optimization-for-touch
// * http://caniuse.com/#feat=css-touch-action
// * https://patrickhlauke.github.io/touch/tests/results/#suppressing-300ms-delay

a,
area,
button,
[role="button"],
input:not([type=range]),
label,
select,
summary,
textarea {
  touch-action: manipulation;
}

//
// Tables
//

table {
  border-collapse: collapse; // Prevent double borders
}

caption {
  padding-top: .75em;
  padding-bottom: .3em;
  color: @text-color-secondary;
  text-align: left;
  caption-side: bottom;
}

th {
  // Matches default `<td>` alignment by inheriting from the `<body>`, or the
  // closest parent with a set `text-align`.
  text-align: inherit;
}

//
// Forms
//

input,
button,
select,
optgroup,
textarea {
  margin: 0; // remove the margin in Firefox and Safari
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}

button,
input {
  overflow: visible; // Show the overflow in Edge
}

button,
select {
  text-transform: none; // remove the inheritance of text transform in Firefox
}

// 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
//    controls in Android 4.
// 2. Correct the inability to style clickable types in iOS and Safari.
button,
html [type="button"], // 1
[type="reset"],
[type="submit"] {
  -webkit-appearance: button; // 2
}

// remove inner border and padding from Firefox, but don't restore the outline like Normalize.
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  padding: 0;
  border-style: none;
}

input[type="radio"],
input[type="checkbox"] {
  box-sizing: border-box; // 1. Add the correct box sizing in IE 10-
  padding: 0; // 2. remove the padding in IE 10-
}

input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"] {
  // remove the default appearance of temporal inputs to avoid a Mobile Safari
  // bug where setting a custom line-height prevents text from being vertically
  // centered within the input.
  // See https://bugs.webkit.org/show_bug.cgi?id=139848
  // and https://github.com/twbs/bootstrap/issues/11266
  -webkit-appearance: listbox;
}

textarea {
  overflow: auto; // remove the default vertical scrollbar in IE.
  // Textareas should really only resize vertically so they don't break their (horizontal) containers.
  resize: vertical;
}

fieldset {
  // Browsers set a default `min-width: min-content;` on fieldsets,
  // unlike e.g. `<div>`s, which have `min-width: 0;` by default.
  // So we reset that to ensure fieldsets behave more like a standard block element.
  // See https://github.com/twbs/bootstrap/issues/12359
  // and https://html.spec.whatwg.org/multipage/#the-fieldset-and-legend-elements
  min-width: 0;
  // Reset the default outline behavior of fieldsets so they don't affect page layout.
  padding: 0;
  margin: 0;
  border: 0;
}

// 1. Correct the text wrapping in Edge and IE.
// 2. Correct the color inheritance from `fieldset` elements in IE.
legend {
  display: block;
  width: 100%;
  max-width: 100%; // 1
  padding: 0;
  margin-bottom: .5em;
  font-size: 1.5em;
  line-height: inherit;
  color: inherit; // 2
  white-space: normal; // 1
}

progress {
  vertical-align: baseline; // Add the correct vertical alignment in Chrome, Firefox, and Opera.
}

// Correct the cursor style of incement and decement buttons in Chrome.
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

[type="search"] {
  // This overrides the extra rounded corners on search inputs in iOS so that our
  // `.form-control` class can properly style them. Note that this cannot simply
  // be added to `.form-control` as it's not specific enough. For details, see
  // https://github.com/twbs/bootstrap/issues/11586.
  outline-offset: -2px; // 2. Correct the outline style in Safari.
  -webkit-appearance: none;
}

//
// remove the inner padding and cancel buttons in Chrome and Safari on macOS.
//

[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

//
// 1. Correct the inability to style clickable types in iOS and Safari.
// 2. Change font properties to `inherit` in Safari.
//

::-webkit-file-upload-button {
  font: inherit; // 2
  -webkit-appearance: button; // 1
}

//
// Correct element displays
//

output {
  display: inline-block;
}

summary {
  display: list-item; // Add the correct display in all browsers
}

template {
  display: none; // Add the correct display in IE
}

// Always hide an element with the `hidden` HTML attribute (from PureCSS).
// Needed for proper display in IE 10-.
[hidden] {
  display: none !important;
}

mark {
  padding: .2em;
  background-color: @yellow-1;
}

::selection {
  background: @primary-color;
  color: #fff;
}

// Utility classes
.clearfix {
  .clearfix();
}

.@{iconfont-css-prefix} {
 .iconfont-mixin();
}

.@{iconfont-css-prefix}-spin:before {
  display: inline-block;
  animation: loadingCircle 1s infinite linear;
}
.@{iconfont-css-prefix}-spin {
  display: inline-block;
  animation: loadingCircle 1s infinite linear;
}

.fade-motion(@className, @keyframeName) {
  .make-motion(@className, @keyframeName);
  .@{className}-enter,
  .@{className}-appear {
    opacity: 0;
    animation-timing-function: linear;
  }
  .@{className}-leave {
    animation-timing-function: linear;
  }
}

.fade-motion(fade, antFade);

@keyframes antFadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes antFadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.move-motion(@className, @keyframeName) {
  .make-motion(@className, @keyframeName);
  .@{className}-enter,
  .@{className}-appear {
    opacity: 0;
    animation-timing-function: @ease-out-circ;
  }
  .@{className}-leave {
    animation-timing-function: @ease-in-circ;
  }
}

.move-motion(move-up, antMoveUp);
.move-motion(move-down, antMoveDown);
.move-motion(move-left, antMoveLeft);
.move-motion(move-right, antMoveRight);

@keyframes antMoveDownIn {
  0% {
    transform-origin: 0 0;
    transform: translateY(100%);
    opacity: 0;
  }
  100% {
    transform-origin: 0 0;
    transform: translateY(0%);
    opacity: 1;
  }
}

@keyframes antMoveDownOut {
  0% {
    transform-origin: 0 0;
    transform: translateY(0%);
    opacity: 1;
  }
  100% {
    transform-origin: 0 0;
    transform: translateY(100%);
    opacity: 0;
  }
}

@keyframes antMoveLeftIn {
  0% {
    transform-origin: 0 0;
    transform: translateX(-100%);
    opacity: 0;
  }
  100% {
    transform-origin: 0 0;
    transform: translateX(0%);
    opacity: 1;
  }
}

@keyframes antMoveLeftOut {
  0% {
    transform-origin: 0 0;
    transform: translateX(0%);
    opacity: 1;
  }
  100% {
    transform-origin: 0 0;
    transform: translateX(-100%);
    opacity: 0;
  }
}

@keyframes antMoveRightIn {
  0% {
    opacity: 0;
    transform-origin: 0 0;
    transform: translateX(100%);
  }
  100% {
    opacity: 1;
    transform-origin: 0 0;
    transform: translateX(0%);
  }
}

@keyframes antMoveRightOut {
  0% {
    transform-origin: 0 0;
    transform: translateX(0%);
    opacity: 1;
  }
  100% {
    transform-origin: 0 0;
    transform: translateX(100%);
    opacity: 0;
  }
}

@keyframes antMoveUpIn {
  0% {
    transform-origin: 0 0;
    transform: translateY(-100%);
    opacity: 0;
  }
  100% {
    transform-origin: 0 0;
    transform: translateY(0%);
    opacity: 1;
  }
}

@keyframes antMoveUpOut {
  0% {
    transform-origin: 0 0;
    transform: translateY(0%);
    opacity: 1;
  }
  100% {
    transform-origin: 0 0;
    transform: translateY(-100%);
    opacity: 0;
  }
}

@keyframes loadingCircle {
  100% {
    transform: rotate(360deg);
  }
}

[ant-click-animating],
[ant-click-animating-without-extra-node] {
  position: relative;
}

[ant-click-animating-without-extra-node]:after,
.ant-click-animating-node {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  bottom: -1px;
  right: -1px;
  border-radius: inherit;
  border: 0 solid @primary-color;
  opacity: 0.2;
  animation: fadeEffect 2s @ease-out-circ, waveEffect .4s @ease-out-circ;
  animation-fill-mode: forwards;
  display: block;
  pointer-events: none;
}

@keyframes waveEffect {
  100% {
    top: -@wave-animation-width;
    left: -@wave-animation-width;
    bottom: -@wave-animation-width;
    right: -@wave-animation-width;
    border-width: @wave-animation-width;
  }
}

@keyframes fadeEffect {
  100% {
    opacity: 0;
  }
}

.slide-motion(@className, @keyframeName) {
  .make-motion(@className, @keyframeName);
  .@{className}-enter,
  .@{className}-appear {
    opacity: 0;
    animation-timing-function: @ease-out-quint;
  }
  .@{className}-leave {
    animation-timing-function: @ease-in-quint;
  }
}

.slide-motion(slide-up, antSlideUp);
.slide-motion(slide-down, antSlideDown);
.slide-motion(slide-left, antSlideLeft);
.slide-motion(slide-right, antSlideRight);

@keyframes antSlideUpIn {
  0% {
    opacity: 0;
    transform-origin: 0% 0%;
    transform: scaleY(.8);
  }
  100% {
    opacity: 1;
    transform-origin: 0% 0%;
    transform: scaleY(1);
  }
}

@keyframes antSlideUpOut {
  0% {
    opacity: 1;
    transform-origin: 0% 0%;
    transform: scaleY(1);
  }
  100% {
    opacity: 0;
    transform-origin: 0% 0%;
    transform: scaleY(.8);
  }
}

@keyframes antSlideDownIn {
  0% {
    opacity: 0;
    transform-origin: 100% 100%;
    transform: scaleY(.8);
  }
  100% {
    opacity: 1;
    transform-origin: 100% 100%;
    transform: scaleY(1);
  }
}

@keyframes antSlideDownOut {
  0% {
    opacity: 1;
    transform-origin: 100% 100%;
    transform: scaleY(1);
  }
  100% {
    opacity: 0;
    transform-origin: 100% 100%;
    transform: scaleY(.8);
  }
}

@keyframes antSlideLeftIn {
  0% {
    opacity: 0;
    transform-origin: 0% 0%;
    transform: scaleX(.8);
  }
  100% {
    opacity: 1;
    transform-origin: 0% 0%;
    transform: scaleX(1);
  }
}

@keyframes antSlideLeftOut {
  0% {
    opacity: 1;
    transform-origin: 0% 0%;
    transform: scaleX(1);
  }
  100% {
    opacity: 0;
    transform-origin: 0% 0%;
    transform: scaleX(.8);
  }
}

@keyframes antSlideRightIn {
  0% {
    opacity: 0;
    transform-origin: 100% 0%;
    transform: scaleX(.8);
  }
  100% {
    opacity: 1;
    transform-origin: 100% 0%;
    transform: scaleX(1);
  }
}

@keyframes antSlideRightOut {
  0% {
    opacity: 1;
    transform-origin: 100% 0%;
    transform: scaleX(1);
  }
  100% {
    opacity: 0;
    transform-origin: 100% 0%;
    transform: scaleX(.8);
  }
}

.swing-motion(@className, @keyframeName) {
  .@{className}-enter,
  .@{className}-appear {
    .motion-common();
    animation-play-state: paused;
  }
  .@{className}-enter.@{className}-enter-active,
  .@{className}-appear.@{className}-appear-active {
    animation-name: ~"@{keyframeName}In";
    animation-play-state: running;
  }
}

.swing-motion(swing, antSwing);

@keyframes antSwingIn {
  0%,
  100% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(-10px);
  }
  40% {
    transform: translateX(10px);
  }
  60% {
    transform: translateX(-5px);
  }
  80% {
    transform: translateX(5px);
  }
}

.zoom-motion(@className, @keyframeName, @duration: @animation-duration-base) {
  .make-motion(@className, @keyframeName, @duration);
  .@{className}-enter,
  .@{className}-appear {
    transform: scale(0); // need this by yiminghe
    animation-timing-function: @ease-out-circ;
  }
  .@{className}-leave {
    animation-timing-function: @ease-in-out-circ;
  }
}

// For Modal, Select choosen item
.zoom-motion(zoom, antZoom);
// For Popover, Popconfirm, Dropdown
.zoom-motion(zoom-big, antZoomBig);
// For Tooltip
.zoom-motion(zoom-big-fast, antZoomBig, @animation-duration-fast);

.zoom-motion(zoom-up, antZoomUp);
.zoom-motion(zoom-down, antZoomDown);
.zoom-motion(zoom-left, antZoomLeft);
.zoom-motion(zoom-right, antZoomRight);

@keyframes antZoomIn {
  0% {
    opacity: 0;
    transform: scale(0.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes antZoomOut {
  0% {
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.2);
  }
}

@keyframes antZoomBigIn {
  0% {
    opacity: 0;
    transform: scale(.8);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes antZoomBigOut {
  0% {
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(.8);
  }
}

@keyframes antZoomUpIn {
  0% {
    opacity: 0;
    transform-origin: 50% 0%;
    transform: scale(.8);
  }
  100% {
    transform-origin: 50% 0%;
    transform: scale(1);
  }
}

@keyframes antZoomUpOut {
  0% {
    transform-origin: 50% 0%;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform-origin: 50% 0%;
    transform: scale(.8);
  }
}

@keyframes antZoomLeftIn {
  0% {
    opacity: 0;
    transform-origin: 0% 50%;
    transform: scale(.8);
  }
  100% {
    transform-origin: 0% 50%;
    transform: scale(1);
  }
}

@keyframes antZoomLeftOut {
  0% {
    transform-origin: 0% 50%;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform-origin: 0% 50%;
    transform: scale(.8);
  }
}

@keyframes antZoomRightIn {
  0% {
    opacity: 0;
    transform-origin: 100% 50%;
    transform: scale(.8);
  }
  100% {
    transform-origin: 100% 50%;
    transform: scale(1);
  }
}

@keyframes antZoomRightOut {
  0% {
    transform-origin: 100% 50%;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform-origin: 100% 50%;
    transform: scale(.8);
  }
}

@keyframes antZoomDownIn {
  0% {
    opacity: 0;
    transform-origin: 50% 100%;
    transform: scale(.8);
  }
  100% {
    transform-origin: 50% 100%;
    transform: scale(1);
  }
}

@keyframes antZoomDownOut {
  0% {
    transform-origin: 50% 100%;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform-origin: 50% 100%;
    transform: scale(.8);
  }
}

// For common/openAnimation
.ant-motion-collapse {
  overflow: hidden;
  &-active {
    transition: height .15s @ease-in-out, opacity .15s @ease-in-out !important;
  }
}

// grid muse be first

// mixins for grid system
// ------------------------
.make-row(@gutter: @grid-gutter-width) {
  position: relative;
  margin-left: (@gutter / -2);
  margin-right: (@gutter / -2);
  height: auto;
  .clearfix;
}

.make-grid-columns() {
  .col(@index) {
    @item: ~".@{ant-prefix}-col-@{index}, .@{ant-prefix}-col-xs-@{index}, .@{ant-prefix}-col-sm-@{index}, .@{ant-prefix}-col-md-@{index}, .@{ant-prefix}-col-lg-@{index}";
    .col((@index + 1), @item);
  }
  .col(@index, @list) when (@index =< @grid-columns) {
    @item: ~".@{ant-prefix}-col-@{index}, .@{ant-prefix}-col-xs-@{index}, .@{ant-prefix}-col-sm-@{index}, .@{ant-prefix}-col-md-@{index}, .@{ant-prefix}-col-lg-@{index}";
    .col((@index + 1), ~"@{list}, @{item}");
  }
  .col(@index, @list) when (@index > @grid-columns) {
    @{list} {
      position: relative;
      // Prevent columns from collapsing when empty
      min-height: 1px;
      padding-left: (@grid-gutter-width / 2);
      padding-right: (@grid-gutter-width / 2);
    }
  }
  .col(1);
}

.float-grid-columns(@class) {
  .col(@index) { // initial
    @item: ~".@{ant-prefix}-col@{class}-@{index}";
    .col((@index + 1), @item);
  }
  .col(@index, @list) when (@index =< @grid-columns) { // general
    @item: ~".@{ant-prefix}-col@{class}-@{index}";
    .col((@index + 1), ~"@{list}, @{item}");
  }
  .col(@index, @list) when (@index > @grid-columns) { // terminal
    @{list} {
      float: left;
      flex: 0 0 auto;
    }
  }
  .col(1); // kickstart it
}

// lesshint false
.loop-grid-columns(@index, @class) when (@index > 0) {
  .@{ant-prefix}-col@{class}-@{index} {
    display: block;
    box-sizing: border-box;
    width: percentage((@index / @grid-columns));
  }
  .@{ant-prefix}-col@{class}-push-@{index} {
    left: percentage((@index / @grid-columns));
  }
  .@{ant-prefix}-col@{class}-pull-@{index} {
    right: percentage((@index / @grid-columns));
  }
  .@{ant-prefix}-col@{class}-offset-@{index} {
    margin-left: percentage((@index / @grid-columns));
  }
  .@{ant-prefix}-col@{class}-order-@{index} {
    order: @index;
  }
  .loop-grid-columns((@index - 1), @class);
}

.loop-grid-columns(@index, @class) when (@index = 0) {
  .@{ant-prefix}-col@{class}-@{index} {
    display: none;
  }
  .@{ant-prefix}-col-push-@{index} {
    left: auto;
  }
  .@{ant-prefix}-col-pull-@{index} {
    right: auto;
  }
  .@{ant-prefix}-col@{class}-push-@{index} {
    left: auto;
  }
  .@{ant-prefix}-col@{class}-pull-@{index} {
    right: auto;
  }
  .@{ant-prefix}-col@{class}-offset-@{index} {
    margin-left: 0;
  }
  .@{ant-prefix}-col@{class}-order-@{index} {
    order: 0;
  }
}

.make-grid(@class: ~'') {
  .float-grid-columns(@class);
  .loop-grid-columns(@grid-columns, @class);
}

// Grid system
.@{ant-prefix}-row {
  .make-row();
  display: block;
  box-sizing: border-box;
}

.@{ant-prefix}-row-flex {
  display: flex;
  flex-flow: row wrap;

  &:before,
  &:after {
    display: flex;
  }
}

// x轴原点
.@{ant-prefix}-row-flex-start {
  justify-content: flex-start;
}

// x轴居中
.@{ant-prefix}-row-flex-center {
  justify-content: center;
}

// x轴反方向
.@{ant-prefix}-row-flex-end {
  justify-content: flex-end;
}

// x轴平分
.@{ant-prefix}-row-flex-space-between {
  justify-content: space-between;
}

// x轴有间隔地平分
.@{ant-prefix}-row-flex-space-around {
  justify-content: space-around;
}

// 顶部对齐
.@{ant-prefix}-row-flex-top {
  align-items: flex-start;
}

// 居中对齐
.@{ant-prefix}-row-flex-middle {
  align-items: center;
}

// 底部对齐
.@{ant-prefix}-row-flex-bottom {
  align-items: flex-end;
}

.@{ant-prefix}-col {
  position: relative;
  display: block;
}

.make-grid-columns();
.make-grid();

// Extra small grid
//
// Columns, offsets, pushes, and pulls for extra small devices like
// smartphones.

.make-grid(-xs);

// Small grid
//
// Columns, offsets, pushes, and pulls for the small device range, from phones
// to tablets.

@media (min-width: @screen-sm-min) {
  .make-grid(-sm);
}

// Medium grid
//
// Columns, offsets, pushes, and pulls for the desktop device range.

@media (min-width: @screen-md-min) {
  .make-grid(-md);
}

// Large grid
//
// Columns, offsets, pushes, and pulls for the large desktop device range.

@media (min-width: @screen-lg-min) {
  .make-grid(-lg);
}

// Extra Large grid
//
// Columns, offsets, pushes, and pulls for the full hd device range.

@media (min-width: @screen-xl-min) {
  .make-grid(-xl);
}

// Extra Extra Large grid
//
// Columns, offsets, pushes, and pulls for the full hd device range.

@media (min-width: @screen-xxl-min) {
  .make-grid(-xxl);
}

.@{ant-prefix}-affix {
  position: fixed;
  z-index: @zindex-affix;
}

@alert-prefix-cls: ~"@{ant-prefix}-alert";

@alert-message-color: @heading-color;
@alert-text-color: @text-color;
@alert-close-color: @text-color-secondary;

.@{alert-prefix-cls} {
  .reset-component;
  position: relative;
  padding: 8px 15px 8px 37px;
  border-radius: @border-radius-base;

  &&-no-icon {
    padding: 8px 15px;
  }

  &-icon {
    top: 8px + @font-size-base * @line-height-base / 2 - @font-size-base / 2;
    left: 16px;
    position: absolute;
  }

  &-description {
    font-size: @font-size-base;
    line-height: 22px;
    display: none;
  }

  &-success {
    border: @border-width-base @border-style-base @alert-success-border-color;
    background-color: @alert-success-bg-color;
    .@{alert-prefix-cls}-icon {
      color: @alert-success-icon-color;
    }
  }

  &-info {
    border: @border-width-base @border-style-base @alert-info-border-color;
    background-color: @alert-info-bg-color;
    .@{alert-prefix-cls}-icon {
      color: @alert-info-icon-color;
    }
  }

  &-warning {
    border: @border-width-base @border-style-base @alert-warning-border-color;
    background-color: @alert-warning-bg-color;
    .@{alert-prefix-cls}-icon {
      color: @alert-warning-icon-color;
    }
  }

  &-error {
    border: @border-width-base @border-style-base @alert-error-border-color;
    background-color: @alert-error-bg-color;
    .@{alert-prefix-cls}-icon {
      color: @alert-error-icon-color;
    }
  }

  &-close-icon {
    font-size: @font-size-sm;
    position: absolute;
    right: 16px;
    top: 8px;
    line-height: 22px;
    overflow: hidden;
    cursor: pointer;

    .@{iconfont-css-prefix}-close {
      color: @alert-close-color;
      transition: color .3s;
      &:hover {
        color: #404040;
      }
    }
  }

  &-close-text {
    position: absolute;
    right: 16px;
  }

  &-with-description {
    padding: 15px 15px 15px 64px;
    position: relative;
    border-radius: @border-radius-base;
    color: @alert-text-color;
    line-height: @line-height-base;
  }

  &-with-description&-no-icon {
    padding: 15px;
  }

  &-with-description &-icon {
    position: absolute;
    top: 16px;
    left: 24px;
    font-size: 24px;
  }

  &-with-description &-close-icon {
    position: absolute;
    top: 16px;
    right: 16px;
    cursor: pointer;
    font-size: @font-size-base;
  }

  &-with-description &-message {
    font-size: @font-size-lg;
    color: @alert-message-color;
    display: block;
    margin-bottom: 4px;
  }

  &-with-description &-description {
    display: block;
  }

  &&-close {
    height: 0 !important;
    margin: 0;
    padding-top: 0;
    padding-bottom: 0;
    transition: all .3s @ease-in-out-circ;
    transform-origin: 50% 0;
  }

  &-slide-up-leave {
    animation: antAlertSlideUpOut .3s @ease-in-out-circ;
    animation-fill-mode: both;
  }

  &-banner {
    border-radius: 0;
    border: 0;
    margin-bottom: 0;
  }
}

@keyframes antAlertSlideUpIn {
  0% {
    opacity: 0;
    transform-origin: 0% 0%;
    transform: scaleY(0);
  }
  100% {
    opacity: 1;
    transform-origin: 0% 0%;
    transform: scaleY(1);
  }
}

@keyframes antAlertSlideUpOut {
  0% {
    opacity: 1;
    transform-origin: 0% 0%;
    transform: scaleY(1);
  }
  100% {
    opacity: 0;
    transform-origin: 0% 0%;
    transform: scaleY(0);
  }
}

@anchor-border-width: 2px;

.@{ant-prefix}-anchor {
  .reset-component;
  position: relative;
  padding-left: @anchor-border-width;

  &-wrapper {
    background-color: @component-background;
    overflow: auto;
    padding-left: 4px;
    margin-left: -4px;
  }

  &-ink {
    position: absolute;
    height: 100%;
    left: 0;
    top: 0;
    &:before {
      content: ' ';
      position: relative;
      width: @anchor-border-width;
      height: 100%;
      display: block;
      background-color: @border-color-split;
      margin: 0 auto;
    }
    &-ball {
      display: none;
      position: absolute;
      width: 8px;
      height: 8px;
      border-radius: 8px;
      border: 2px solid @primary-color;
      background-color: @component-background;
      left: 50%;
      transition: top .3s ease-in-out;
      transform: translateX(-50%);
      &.visible {
        display: inline-block;
      }
    }
  }

  &.fixed &-ink &-ink-ball {
    display: none;
  }

  &-link {
    padding: 7px 0 7px 16px;
    line-height: 1.143;

    &-title {
      display: block;
      position: relative;
      transition: all .3s;
      color: @text-color;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      margin-bottom: 6px;

      &:only-child {
        margin-bottom: 0;
      }
    }

    &-active > &-title {
      color: @primary-color;
    }
  }

  &-link &-link {
    padding-top: 5px;
    padding-bottom: 5px;
  }
}

@avatar-prefix-cls: ~"@{ant-prefix}-avatar";

.@{avatar-prefix-cls} {
  .reset-component;
  display: inline-block;
  text-align: center;
  background: @avatar-bg;
  color: @avatar-color;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  vertical-align: middle;

  &-image {
    background: transparent;
  }

  .avatar-size(@avatar-size-base, @avatar-font-size-base);

  &-lg {
    .avatar-size(@avatar-size-lg, @avatar-font-size-lg);
  }

  &-sm {
    .avatar-size(@avatar-size-sm, @avatar-font-size-sm);
  }

  &-square {
    border-radius: @avatar-border-radius;
  }

  & > img {
    width: 100%;
    height: 100%;
    display: block;
  }
}

.avatar-size(@size, @font-size) {
  width: @size;
  height: @size;
  line-height: @size;
  border-radius: 50%;

  & > * {
    line-height: @size;
  }

  &.@{avatar-prefix-cls}-icon {
    font-size: @font-size;
  }
}

@backtop-prefix-cls: ~"@{ant-prefix}-back-top";

.@{backtop-prefix-cls} {
  .reset-component;
  z-index: @zindex-back-top;
  position: fixed;
  right: 100px;
  bottom: 50px;
  height: 40px;
  width: 40px;
  cursor: pointer;

  &-content {
    height: 40px;
    width: 40px;
    border-radius: 20px;
    background-color: @back-top-bg;
    color: @back-top-color;
    text-align: center;
    transition: all .3s @ease-in-out;
    overflow: hidden;

    &:hover {
      background-color: @back-top-hover-bg;
      transition: all .3s @ease-in-out;
    }
  }

  &-icon {
    margin: 12px auto;
    width: 14px;
    height: 16px;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAoCAYAAACWwljjAAAABGdBTUEAALGPC/xhBQAAAbtJREFUWAntmMtKw0AUhhMvS5cuxILgQlRUpIggIoKIIoigG1eC+AA+jo+i6FIXBfeuXIgoeKVeitVWJX5HWhhDksnUpp3FDPyZk3Nm5nycmZKkXhAEOXSA3lG7muTeRzmfy6HneUvIhnYkQK+Q9NhAA0Opg0vBEhjBKHiyb8iGMyQMOYuK41BcBSypAL+MYXSKjtFAW7EAGEO3qN4uMQbbAkXiSfRQJ1H6a+yhlkKRcAoVFYiweYNjtCVQJJpBz2GCiPt7fBOZQpFgDpUikse5HgnkM4Fi4QX0Fpc5wf9EbLqpUCy4jMoJSXWhFwbMNgWKhVbRhy5jirhs9fy/oFhgHVVTJEs7RLZ8sSEoJm6iz7SZDMbJ+/OKERQTttCXQRLToRUmrKWCYuA2+jbN0MB4OQobYShfdTCgn/sL1K36M7TLrN3n+758aPy2rrpR6+/od5E8tf/A1uLS9aId5T7J3CNYihkQ4D9PiMdMC7mp4rjB9kjFjZp8BlnVHJBuO1yFXIV0FdDF3RlyFdJVQBdv5AxVdIsq8apiZ2PyYO1EVykesGfZEESsCkweyR8MUW+V8uJ1gkYipmpdP1pm2aJVPEGzAAAAAElFTkSuQmCC) ~"100%/100%" no-repeat;
  }
}

@media screen and (max-width: @screen-md) {
  .@{backtop-prefix-cls} {
    right: 60px;
  }
}

@media screen and (max-width: @screen-xs) {
  .@{backtop-prefix-cls} {
    right: 20px;
  }
}

@badge-prefix-cls: ~"@{ant-prefix}-badge";
@number-prefix-cls: ~"@{ant-prefix}-scroll-number";

.@{badge-prefix-cls} {
  .reset-component;
  position: relative;
  display: inline-block;
  line-height: 1;
  color: unset;

  &-count {
    top: -@badge-height / 2;
    height: @badge-height;
    border-radius: @badge-height / 2;
    min-width: @badge-height;
    background: @highlight-color;
    color: #fff;
    line-height: @badge-height;
    text-align: center;
    padding: 0 6px;
    font-size: @badge-font-size;
    font-weight: @badge-font-weight;
    white-space: nowrap;
    box-shadow: 0 0 0 1px #fff;
    a,
    a:hover {
      color: #fff;
    }
  }

  &-multiple-words {
    padding: 0 8px;
  }

  &-dot {
    top: -@badge-dot-size / 2;
    height: @badge-dot-size;
    width: @badge-dot-size;
    border-radius: 100%;
    background: @highlight-color;
    z-index: 10;
    box-shadow: 0 0 0 1px #fff;
  }

  &-count,
  &-dot {
    position: absolute;
    right: 0;
    transform: translateX(50%);
    transform-origin: 100%;
  }

  &-status {
    line-height: inherit;
    vertical-align: baseline;

    &-dot {
      width: @badge-status-size;
      height: @badge-status-size;
      display: inline-block;
      border-radius: 50%;
      vertical-align: middle;
      position: relative;
      top: -1px;
    }
    &-success {
      background-color: @success-color;
    }
    &-processing {
      background-color: @processing-color;
      position: relative;
      &:after {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        border: 1px solid @processing-color;
        content: '';
        animation: antStatusProcessing 1.2s infinite ease-in-out;
      }
    }
    &-default {
      background-color: @normal-color;
    }
    &-error {
      background-color: @error-color;
    }
    &-warning {
      background-color: @warning-color;
    }
    &-text {
      color: @text-color;
      font-size: @font-size-base;
      margin-left: 8px;
    }
  }

  &-zoom-appear,
  &-zoom-enter {
    animation: antZoomBadgeIn .3s @ease-out-back;
    animation-fill-mode: both;
  }

  &-zoom-leave {
    animation: antZoomBadgeOut .3s @ease-in-back;
    animation-fill-mode: both;
  }

  &-not-a-wrapper {
    vertical-align: middle;

    .@{ant-prefix}-scroll-number {
      top: auto;
      display: block;
      position: relative;
    }

    .@{badge-prefix-cls}-count {
      transform: none;
    }
  }
}

@keyframes antStatusProcessing {
  0% {
    transform: scale(0.8);
    opacity: 0.5;
  }
  100% {
    transform: scale(2.4);
    opacity: 0;
  }
}

.@{number-prefix-cls} {
  overflow: hidden;
  &-only {
    display: inline-block;
    transition: all .3s @ease-in-out;
    height: @badge-height;
    > p {
      height: @badge-height;
      margin: 0;
    }
  }
}

@keyframes antZoomBadgeIn {
  0% {
    opacity: 0;
    transform: scale(0) translateX(50%);
  }
  100% {
    transform: scale(1) translateX(50%);
  }
}

@keyframes antZoomBadgeOut {
  0% {
    transform: scale(1) translateX(50%);
  }
  100% {
    opacity: 0;
    transform: scale(0) translateX(50%);
  }
}

@breadcrumb-prefix-cls: ~"@{ant-prefix}-breadcrumb";

.@{breadcrumb-prefix-cls} {
  .reset-component;
  color: @breadcrumb-base-color;
  font-size: @breadcrumb-font-size;

  .@{iconfont-css-prefix} {
    font-size: @breadcrumb-icon-font-size;
  }

  a {
    color: @breadcrumb-link-color;
    transition: color .3s;
    &:hover {
      color: @breadcrumb-link-color-hover;
    }
  }

  & > span:last-child {
    color: @breadcrumb-last-item-color;
  }

  & > span:last-child &-separator {
    display: none;
  }

  &-separator {
    margin: @breadcrumb-separator-margin;
    color: @breadcrumb-separator-color;
  }

  &-link {
    > .@{iconfont-css-prefix} + span {
      margin-left: 4px;
    }
  }
}

// mixins for button
// ------------------------
.button-size(@height; @padding; @font-size; @border-radius) {
  padding: @padding;
  font-size: @font-size;
  border-radius: @border-radius;
  height: @height;
}

.button-disabled() {
  &.disabled,
  &[disabled] {
    &,
    &:hover,
    &:focus,
    &:active,
    &.active {
      .button-color(@btn-disable-color; @btn-disable-bg; @btn-disable-border);
      text-shadow: none;
      box-shadow: none;
    }
  }
}

.button-variant-primary(@color; @background) {
  .button-color(@color; @background; @background);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .12);
  box-shadow: 0 2px 0 rgba(0, 0, 0, .035);

  &:hover,
  &:focus {
    .button-color(@color; ~`colorPalette("@{background}", 5)`; ~`colorPalette("@{background}", 5)`);
  }

  &:active,
  &.active {
    .button-color(@color; ~`colorPalette("@{background}", 7)`; ~`colorPalette("@{background}", 7)`);
  }

  .button-disabled();
}

.button-variant-other(@color; @background; @border) {
  .button-color(@color; @background; @border);

  &:hover,
  &:focus {
    .button-color(@primary-5; @background; @primary-5);
  }

  &:active,
  &.active {
    .button-color(@primary-7; @background; @primary-7);
  }

  .button-disabled();
}

.button-variant-danger(@color; @background; @border) {
  .button-color(@color; @background; @border);

  &:hover {
    .button-color(@btn-primary-color; ~`colorPalette("@{color}", 5)`; ~`colorPalette("@{color}", 5)`);
  }

  &:focus {
    .button-color(~`colorPalette("@{color}", 5)`; #fff; ~`colorPalette("@{color}", 5)`);
  }

  &:active,
  &.active {
    .button-color(@btn-primary-color; ~`colorPalette("@{color}", 7)`; ~`colorPalette("@{color}", 7)`);
  }

  .button-disabled();
}

.button-variant-ghost(@color) {
  .button-color(@color; transparent; @color);
  text-shadow: none;

  &:hover,
  &:focus {
    .button-color(~`colorPalette("@{color}", 5)`; transparent; ~`colorPalette("@{color}", 5)`);
  }

  &:active,
  &.active {
    .button-color(~`colorPalette("@{color}", 7)`; transparent; ~`colorPalette("@{color}", 7)`);
  }

  .button-disabled();
}

.button-color(@color; @background; @border) {
  color: @color;
  background-color: @background;
  border-color: @border;
  // a inside Button which only work in Chrome
  // http://stackoverflow.com/a/17253457
  > a:only-child {
    color: currentColor;
    &:after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      background: transparent;
    }
  }
}

.button-group-base(@btnClassName) {
  position: relative;
  display: inline-block;
  > .@{btnClassName},
  > span > .@{btnClassName} {
    position: relative;
    line-height: @btn-height-base - 2px;

    &:hover,
    &:focus,
    &:active,
    &.active {
      z-index: 2;
    }

    &:disabled {
      z-index: 0;
    }
  }

  // size
  &-lg > .@{btnClassName},
  &-lg > span > .@{btnClassName} {
    .button-size(@btn-height-lg; @btn-padding-lg; @btn-font-size-lg; 0);
    line-height: @btn-height-lg - 2px;
  }

  &-sm > .@{btnClassName},
  &-sm > span > .@{btnClassName} {
    .button-size(@btn-height-sm; @btn-padding-sm; @font-size-base; 0);
    line-height: @btn-height-sm - 2px;
    > .@{iconfont-css-prefix} {
      font-size: @font-size-base;
    }
  }
}

// Base styles of buttons
// --------------------------------------------------
.btn() {
  display: inline-block;
  font-weight: @btn-font-weight;
  text-align: center;
  touch-action: manipulation;
  cursor: pointer;
  background-image: none;
  border: @border-width-base @border-style-base transparent;
  white-space: nowrap;
  .button-size(@btn-height-base; @btn-padding-base; @font-size-base; @btn-border-radius-base);
  user-select: none;
  transition: all .3s @ease-in-out;
  position: relative;
  box-shadow: 0 2px 0 rgba(0, 0, 0, .015);

  > .@{iconfont-css-prefix} {
    line-height: 1;
  }

  &,
  &:active,
  &:focus {
    outline: 0;
  }

  &:not([disabled]):hover {
    text-decoration: none;
  }

  &:not([disabled]):active {
    outline: 0;
    transition: none;
    box-shadow: none;
  }

  &.disabled,
  &[disabled] {
    cursor: not-allowed;
    > * {
      pointer-events: none;
    }
  }

  &-lg {
    .button-size(@btn-height-lg; @btn-padding-lg; @btn-font-size-lg; @btn-border-radius-base);
  }

  &-sm {
    .button-size(@btn-height-sm; @btn-padding-sm; @btn-font-size-sm; @btn-border-radius-sm);
  }
}

// primary button style
.btn-primary() {
  .button-variant-primary(@btn-primary-color; @btn-primary-bg);
}

// default button style
.btn-default() {
  .button-variant-other(@btn-default-color; @btn-default-bg; @btn-default-border);
  &:hover,
  &:focus,
  &:active,
  &.active {
    background: @btn-default-bg;
    text-decoration: none;
  }
}

// ghost button style
.btn-ghost() {
  .button-variant-other(@btn-ghost-color, @btn-ghost-bg, @btn-ghost-border);
}

// dashed button style
.btn-dashed() {
  .button-variant-other(@btn-default-color, @btn-default-bg, @btn-default-border);
  border-style: dashed;
}

// danger button style
.btn-danger() {
  .button-variant-danger(@btn-danger-color, @btn-danger-bg, @btn-danger-border);
}

// circle button: the content only contains icon
.btn-circle(@btnClassName: btn) {
  .square(@btn-circle-size);
  .button-size(@btn-circle-size; 0; @font-size-base + 2px; 50%);

  &.@{btnClassName}-lg {
    .square(@btn-circle-size-lg);
    .button-size(@btn-circle-size-lg; 0; @btn-font-size-lg + 2px; 50%);
  }

  &.@{btnClassName}-sm {
    .square(@btn-circle-size-sm);
    .button-size(@btn-circle-size-sm; 0; @font-size-base; 50%);
  }
}

// Horizontal button groups styl
// --------------------------------------------------
.btn-group(@btnClassName: btn) {
  .button-group-base(@btnClassName);

  .@{btnClassName} + .@{btnClassName},
  .@{btnClassName} + &,
  span + .@{btnClassName},
  .@{btnClassName} + span,
  > span + span,
  & + .@{btnClassName},
  & + & {
    margin-left: -1px;
  }

  .@{btnClassName}-primary + .@{btnClassName}:not(.@{btnClassName}-primary):not([disabled]) {
    border-left-color: transparent;
  }

  .@{btnClassName} {
    border-radius: 0;
  }

  > .@{btnClassName}:first-child,
  > span:first-child > .@{btnClassName} {
    margin-left: 0;
  }
  > .@{btnClassName}:only-child {
    border-radius: @btn-border-radius-base;
  }
  > span:only-child > .@{btnClassName} {
    border-radius: @btn-border-radius-base;
  }

  > .@{btnClassName}:first-child:not(:last-child),
  > span:first-child:not(:last-child) > .@{btnClassName} {
    border-bottom-left-radius: @btn-border-radius-base;
    border-top-left-radius: @btn-border-radius-base;
  }

  > .@{btnClassName}:last-child:not(:first-child),
  > span:last-child:not(:first-child) > .@{btnClassName} {
    border-bottom-right-radius: @btn-border-radius-base;
    border-top-right-radius: @btn-border-radius-base;
  }

  &-sm {
    > .@{btnClassName}:only-child {
      border-radius: @btn-border-radius-sm;
    }
    > span:only-child > .@{btnClassName} {
      border-radius: @btn-border-radius-sm;
    }
    > .@{btnClassName}:first-child:not(:last-child),
    > span:first-child:not(:last-child) > .@{btnClassName} {
      border-bottom-left-radius: @btn-border-radius-sm;
      border-top-left-radius: @btn-border-radius-sm;
    }
    > .@{btnClassName}:last-child:not(:first-child),
    > span:last-child:not(:first-child) > .@{btnClassName} {
      border-bottom-right-radius: @btn-border-radius-sm;
      border-top-right-radius: @btn-border-radius-sm;
    }
  }

  & > & {
    float: left;
  }

  & > &:not(:first-child):not(:last-child) > .@{btnClassName} {
    border-radius: 0;
  }

  & > &:first-child:not(:last-child) {
    > .@{btnClassName}:last-child {
      border-bottom-right-radius: 0;
      border-top-right-radius: 0;
      padding-right: 8px;
    }
  }

  & > &:last-child:not(:first-child) > .@{btnClassName}:first-child {
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    padding-left: 8px;
  }
}

@btn-prefix-cls: ~"@{ant-prefix}-btn";

// for compatible
@btn-ghost-color: @text-color;
@btn-ghost-bg: transparent;
@btn-ghost-border: @border-color-base;

// Button styles
// -----------------------------
.@{btn-prefix-cls} {
  line-height: @line-height-base;
  .btn;
  .btn-default;

  // Make sure that the target of Button's click event always be `button`
  // Ref: https://github.com/ant-design/ant-design/issues/7034
  > i,
  > span {
    pointer-events: none;
  }

  &-primary {
    .btn-primary;

    .@{btn-prefix-cls}-group &:not(:first-child):not(:last-child) {
      border-right-color: @btn-group-border;
      border-left-color: @btn-group-border;

      &:disabled {
        border-color: @btn-default-border;
      }
    }

    .@{btn-prefix-cls}-group &:first-child {
      &:not(:last-child) {
        border-right-color: @btn-group-border;
        &[disabled] {
          border-right-color: @btn-default-border;
        }
      }
    }

    .@{btn-prefix-cls}-group &:last-child:not(:first-child),
    .@{btn-prefix-cls}-group & + & {
      border-left-color: @btn-group-border;
      &[disabled] {
        border-left-color: @btn-default-border;
      }
    }
  }

  &-ghost {
    .btn-ghost;
  }

  &-dashed {
    .btn-dashed;
  }

  &-danger {
    .btn-danger;
  }

  &-circle,
  &-circle-outline {
    .btn-circle(@btn-prefix-cls);
  }

  &:before {
    position: absolute;
    top: -1px;
    left: -1px;
    bottom: -1px;
    right: -1px;
    background: #fff;
    opacity: 0.35;
    content: '';
    border-radius: inherit;
    z-index: 1;
    transition: opacity .2s;
    pointer-events: none;
    display: none;
  }

  .@{iconfont-css-prefix} {
    transition: margin-left .3s @ease-in-out;
  }

  &&-loading:before {
    display: block;
  }

  &&-loading:not(&-circle):not(&-circle-outline):not(&-icon-only) {
    padding-left: 29px;
    pointer-events: none;
    position: relative;
    .@{iconfont-css-prefix} {
      margin-left: -14px;
    }
  }

  &-sm&-loading:not(&-circle):not(&-circle-outline):not(&-icon-only) {
    padding-left: 24px;
    .@{iconfont-css-prefix} {
      margin-left: -17px;
    }
  }

  &-group {
    .btn-group(@btn-prefix-cls);
  }

  &:not(&-circle):not(&-circle-outline)&-icon-only {
    padding-left: 8px;
    padding-right: 8px;
  }

  // http://stackoverflow.com/a/21281554/3040605
  &:focus > span,
  &:active > span {
    position: relative;
  }

  // To ensure that a space will be placed between character and `Icon`.
  > .@{iconfont-css-prefix} + span,
  > span + .@{iconfont-css-prefix} {
    margin-left: 8px;
  }

  &-background-ghost {
    background: transparent !important;
    border-color: #fff;
    color: #fff;
  }

  &-background-ghost&-primary {
    .button-variant-ghost(@btn-primary-bg);
  }

  &-background-ghost&-danger {
    .button-variant-ghost(@btn-danger-color);
  }

  &-two-chinese-chars:first-letter {
    letter-spacing: .34em;
  }

  &-two-chinese-chars > * {
    letter-spacing: .34em;
    margin-right: -.34em;
  }

  &-block {
    width: 100%;
  }

  .christmas&-primary:before {
    content: '';
    display: block;
    position: absolute;
    top: -6px;
    left: 0;
    right: 0;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAE0AAAAXCAYAAABOHMIhAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABiZJREFUeNrsWMtPlFcUvzPMwIDysLyRR4uATDHWCiVgSmRlios2DeiiXUFs0nRBd6arxqQhJDapkYXhP4BqDKTQhZaFNQSCaBEVJjwdHsNr5DUMDDPDzPT3u7nTDEgRKrKgc5KT+z3uufec33de99P4fD4RpL2RNgjB3kn35MkTeRERESFiYmLkGBoaKnQ6nWSNRvPPZFxr+vv7k6KioiIdDsfa8vLyQkFBgcP3Bnel3MDAQArWI0eFhISE87nb7bZ7PJ4VvLYuLi5O5+fnu9+kMNfq6+tLjIyMzMY6KeBEbK/XarXReI3lPDZMWcc4v7GxYV1dXR3Jy8ub2E5HPvJ6vRSSDH0ku1wuAfsEZOV1IEFHoeNFdHS0yMrK2knR0Lm5uR+hxLdQMjbwHTZbB41h8RGwCdc9MzMzneHh4bGJiYlf4SN8ijkfwqiIncCAAR7Iz2GPSShudjqdfeCeqampvwBQfFxc3JdYqwTv8gB8/F48A8BgKecE14V+L7ju2tpae05OzkuCCZvkPOj8mizmC6vVKtmPu+bx48cC3qI1mUyFUOyywWD4SHlELBaLJmCHNcwAghuAOujtuF4FqHO4nsX4EsAS3I4TJ04ME1h8PDE9PS09TYZoY2Pj1729vd6lpSVfkDYTPG0UkfNDRUWFgQ5Gb2Mh0N29e9eG/GQfHh4W8/PzwUy/ObQ/gMfVVlZW1iAiZdQxp3nv3LljRoL/5erVq1UIxzSiiVD9X4EDYATynCwAzGO858hCQRoaGmJFZNJz8YIcBc4BF966dau6sLAwBxVSJCUlCSThQwuU3W6XkYUok1Vzm5znQx5bbm9v77p+/frPeNSNRzZ/ISBwrG4ZR48eLamtrf2+uLjYSEG9Xi/wTISFhQlWGXohyzO/CJlVl23KQRLbABoaHx+/Z1lUZ/Hq1SsJFj3JT3hmHx8fnydPTEzMj46OziHPW2w22wxeD4Kfgadh/4YEzU8Az4DhffAn5eXlX1y6dKkEoCTspAQ9Mjs7+0BBo8Fms1lkZGTsOo0QLLRNkvnR+fEJzIMHD0xtbW39CL8JTFtSbAOvBIyLHIGVm9VzE2gKuDAMSSpcT6KXyT137lx2cnLyMXhcGDb3wq3XuWF3d/fCzZs3P0c4v5eSknJQbYLo7Ox0gC2lpaVZ3Be67Th/dnZWoAJKsJC3XA8fPhxoamp6hMb+BaaMgWcUMGtszZjiFDNmvcDI91pzG0iY4ARwkwrxkcHBwUdgNrRMbnrqoRbkVzDcvn3bl5qaWsmcgFH4G8XdEGUWFhak51AuISFBnkoCTyFbyWKxCJwIxlC0fq2rq7tcVFRkRKskjh8/Lr0+kBjCCDV/knfdv3//WX19/R8IRRNemxlu4AXwKqM+EJwdj1HbPYSwh3sCPAJDABm2LLchCjS+5/kirKGhwWk0GrMuXrxYQuX9hm/XXTMXMY+srKwI5ApZrbYmZh7deEJhAUKjLe/pLTzSsCuHrK+1tbUJVe3P6upq87Vr174rKysrYHVj/uW+OH3IfEuw4F3ee/fuPQfAvwOs5yyE4CnlFOu7BWrTCWlreO6FACpBZGwUw4BvkANLobReHb3kGZYGsGzTq/zlO8AT1ru6uoZbWlqeA6gINJAfnz59OlVLoX8Jtebm5raampqfcMvQYgTknz9//sKVK1c+y83NTdIEuCnaKMuNGzd+6+np6cCtSTkAw9D9X8Dyh+dbgaaAC1XAnUlPTy+qqqq6cPbs2UzkmWjNljiDJzpwHFnCkW2yo6NjCKW8H54wjlezKvRT09LSTsJrz5w6dSoN+Yp51ADAPUj8VoDbDq9pxrwuJcNIYQllJTIi/xopBw/VA7DJp0+f9hA78CgL5F5C8J2CpoCj8sfA6WCe/FPRhsRlZmbGIs8Y4FFO5CJgtrSsvrRVGW1V93b1myoGnKAKEcHgnwsWpg1lNI0fphwrmdqbckeU18WrnlOjqp5/j7W3BWvfQVPKa5SBkcrYCNVB65TRTlWZ1lXiXVU5xbtlDb2SPaLWYwrgHIcqPg6Vc7fbX69Yoyqfa7/AeiegbWOEVhmsVcWDwPn224iDJgla8Hd38Hd3ELQgaIeI/hZgAIPEp0vmQJdoAAAAAElFTkSuQmCC) no-repeat 50% 0;
    background-size: 64px;
    opacity: 1;
  }

  .christmas&-primary&-lg:before {
    background-size: 72px;
  }

  .christmas&-primary&-sm:before {
    background-size: 56px;
  }
}

a.@{btn-prefix-cls} {
  line-height: @btn-height-base - 2px;
  &-lg {
    line-height: @btn-height-lg - 2px;
  }
  &-sm {
    line-height: @btn-height-sm - 2px;
  }
}

@full-calendar-prefix-cls: ~"@{ant-prefix}-fullcalendar";

.@{full-calendar-prefix-cls} {
  .reset-component;
  outline: none;
  border-top: @border-width-base @border-style-base @border-color-base;

  &-month-select {
    margin-left: 5px;
  }

  &-header {
    padding: 11px 16px 11px 0;
    text-align: right;

    .@{ant-prefix}-select-dropdown {
      text-align: left;
    }

    .@{ant-prefix}-radio-group {
      margin-left: 8px;
      text-align: left;
    }

    label.@{ant-prefix}-radio-button {
      height: 22px;
      line-height: 20px;
      padding: 0 10px;
    }
  }

  &-date-panel {
    position: relative;
    outline: none;
  }

  &-calendar-body {
    padding: 8px 12px;
  }

  table {
    border-collapse: collapse;
    max-width: 100%;
    background-color: transparent;
    width: 100%;
    height: 256px;
  }

  table,
  th,
  td {
    border: 0;
  }

  td {
    position: relative;
  }

  &-calendar-table {
    border-spacing: 0;
    margin-bottom: 0;
  }

  &-column-header {
    line-height: 18px;
    padding: 0;
    width: 33px;
    text-align: center;
    .@{full-calendar-prefix-cls}-column-header-inner {
      display: block;
      font-weight: normal;
    }
  }

  &-week-number-header {
    .@{full-calendar-prefix-cls}-column-header-inner {
      display: none;
    }
  }

  &-month,
  &-date {
    text-align: center;
    transition: all .3s;
  }

  &-value {
    display: block;
    margin: 0 auto;
    color: @text-color;
    border-radius: @border-radius-sm;
    width: 24px;
    height: 24px;
    padding: 0;
    background: transparent;
    line-height: 24px;
    transition: all .3s;

    &:hover {
      background: @item-hover-bg;
      cursor: pointer;
    }

    &:active {
      background: @primary-color;
      color: #fff;
    }
  }

  &-month-panel-cell &-value {
    width: 48px;
  }

  &-today &-value,
  &-month-panel-current-cell &-value {
    box-shadow: 0 0 0 1px @primary-color inset;
  }

  &-selected-day &-value,
  &-month-panel-selected-cell &-value {
    background: @primary-color;
    color: #fff;
  }

  &-disabled-cell-first-of-row &-value {
    border-top-left-radius: @border-radius-base;
    border-bottom-left-radius: @border-radius-base;
  }

  &-disabled-cell-last-of-row &-value {
    border-top-right-radius: @border-radius-base;
    border-bottom-right-radius: @border-radius-base;
  }

  &-last-month-cell &-value,
  &-next-month-btn-day &-value {
    color: @disabled-color;
  }

  &-month-panel-table {
    table-layout: fixed;
    width: 100%;
    border-collapse: separate;
  }

  &-content {
    position: absolute;
    width: 100%;
    left: 0;
    bottom: -9px;
  }

  &-fullscreen {
    border-top: 0;
  }

  &-fullscreen &-table {
    table-layout: fixed;
  }

  &-fullscreen &-header {
    .@{ant-prefix}-radio-group {
      margin-left: 16px;
    }
    label.@{ant-prefix}-radio-button {
      height: @input-height-base;
      line-height: @input-height-base - 2px;
    }
  }

  &-fullscreen &-month,
  &-fullscreen &-date {
    text-align: left;
    margin: 0 4px;
    display: block;
    color: @text-color;
    height: 116px;
    padding: 4px 8px;
    border-top: 2px solid @border-color-split;
    transition: background .3s;

    &:hover {
      background: @item-hover-bg;
      cursor: pointer;
    }

    &:active {
      background: @primary-2;
    }
  }

  &-fullscreen &-column-header {
    text-align: right;
    padding-right: 12px;
    padding-bottom: 5px;
  }

  &-fullscreen &-value {
    text-align: right;
    background: transparent;
    width: auto;
  }

  &-fullscreen &-today &-value {
    color: @text-color;
  }

  &-fullscreen &-month-panel-current-cell &-month,
  &-fullscreen &-today &-date {
    border-top-color: @primary-color;
    background: transparent;
  }

  &-fullscreen &-month-panel-current-cell &-value,
  &-fullscreen &-today &-value {
    box-shadow: none;
  }

  &-fullscreen &-month-panel-selected-cell &-month,
  &-fullscreen &-selected-day &-date {
    background: @primary-1;
  }

  &-fullscreen &-month-panel-selected-cell &-value,
  &-fullscreen &-selected-day &-value {
    color: @primary-color;
  }

  &-fullscreen &-last-month-cell &-date,
  &-fullscreen &-next-month-btn-day &-date {
    color: @disabled-color;
  }

  &-fullscreen &-content {
    height: 88px;
    overflow-y: auto;
    position: static;
    width: auto;
    left: auto;
    bottom: auto;
  }

  &-disabled-cell &-date {
    &,
    &:hover {
      cursor: not-allowed;
    }
  }

  &-disabled-cell:not(&-today) &-date {
    &,
    &:hover {
      background: transparent;
    }
  }

  &-disabled-cell &-value {
    color: @disabled-color;
    border-radius: 0;
    width: auto;
    cursor: not-allowed;
  }
}

@card-prefix-cls: ~"@{ant-prefix}-card";
@card-head-height: 48px;
@card-hover-border: rgba(0, 0, 0, 0.09);
@card-radius: @border-radius-sm;

.@{card-prefix-cls} {
  .reset-component;
  background: @component-background;
  border-radius: @card-radius;
  position: relative;
  transition: all .3s;

  &-hoverable {
    cursor: pointer;
    &:hover {
      box-shadow: @card-shadow;
      border-color: @card-hover-border;
    }
  }

  &-bordered {
    border: @border-width-base @border-style-base @border-color-split;
  }

  &-head {
    background: @card-head-background;
    border-bottom: @border-width-base @border-style-base @border-color-split;
    padding: 0 @card-padding-base;
    border-radius: @card-radius @card-radius 0 0;
    .clearfix;
    margin-bottom: -1px; // Fix card grid overflow bug: https://gw.alipayobjects.com/zos/rmsportal/XonYxBikwpgbqIQBeuhk.png
    min-height: @card-head-height;
    font-size: @font-size-lg;
    color: @card-head-color;
    font-weight: 500;

    &-wrapper {
      display: flex;
    }

    &-title {
      padding: @card-head-padding 0;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      display: flex;
      align-items: center;
      flex: 1;
    }

    .@{ant-prefix}-tabs {
      margin-bottom: -17px;
      clear: both;
      font-size: @font-size-base;
      color: @text-color;
      font-weight: normal;

      &-bar {
        border-bottom: @border-width-base @border-style-base @border-color-split;
      }
    }
  }

  &-extra {
    float: right;
    padding: @card-head-padding + 1.5px 0;
    font-size: @font-size-base;
    color: @text-color;
    font-weight: normal;
    text-align: right;
    // https://stackoverflow.com/a/22429853/3040605
    margin-left: auto;
  }

  &-body {
    padding: @card-padding-base;
    .clearfix;
  }

  &-contain-grid:not(&-loading) &-body {
    margin: -1px 0 0 -1px;
    padding: 0;
  }

  &-grid {
    border-radius: 0;
    border: 0;
    box-shadow: 1px 0 0 0 @border-color-split, 0 1px 0 0 @border-color-split, 1px 1px 0 0 @border-color-split, 1px 0 0 0 @border-color-split inset, 0 1px 0 0 @border-color-split inset;
    width: 33.33%;
    float: left;
    padding: @card-padding-base;
    transition: all .3s;
    &:hover {
      position: relative;
      z-index: 1;
      box-shadow: @box-shadow-base;
    }
  }

  &-contain-tabs > &-head &-head-title {
    padding-bottom: 0;
    min-height: @card-head-height - @card-head-padding;
  }

  &-contain-tabs &-extra {
    padding-bottom: 0;
  }

  &-cover {
    > * {
      width: 100%;
      display: block;
    }
    img {
      border-radius: @card-radius @card-radius 0 0;
    }
  }

  &-actions {
    border-top: @border-width-base @border-style-base @border-color-split;
    background: @card-actions-background;
    .clearfix;
    list-style: none;
    margin: 0;
    padding: 0;

    & > li {
      float: left;
      text-align: center;
      margin: 12px 0;
      color: @text-color-secondary;

      & > span {
        display: inline-block;
        font-size: 14px;
        cursor: pointer;
        line-height: 22px;
        min-width: 32px;
        position: relative;

        &:hover {
          color: @primary-color;
          transition: color .3s;
        }

        & > .anticon {
          font-size: 16px;
          line-height: 22px;
        }

        a {
          color: @text-color-secondary;
          line-height: 22px;
          display: inline-block;
          width: 100%;

          &:hover {
            color: @primary-color;
          }
        }
      }

      &:not(:last-child) {
        border-right: @border-width-base @border-style-base @border-color-split;
      }
    }
  }

  &-wider-padding &-head {
    padding: 0 @card-padding-wider;
  }

  &-wider-padding &-body {
    padding: @card-padding-base @card-padding-wider;
  }

  &-padding-transition &-head,
  &-padding-transition &-body {
    transition: padding .3s;
  }

  &-type-inner &-head {
    padding: 0 @card-padding-base;
    background: @background-color-light;

    &-title {
      padding: @card-inner-head-padding 0;
      font-size: @font-size-base;
    }
  }

  &-type-inner &-body {
    padding: 16px @card-padding-base;
  }

  &-type-inner &-extra {
    padding: @card-inner-head-padding + 1.5px 0;
  }

  &-meta {
    margin: -4px 0;
    .clearfix;

    &-avatar {
      padding-right: 16px;
      float: left;
    }

    &-detail {
      overflow: hidden;
      > div:not(:last-child) {
        margin-bottom: 8px;
      }
    }

    &-title {
      font-size: @font-size-lg;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      color: @card-head-color;
      font-weight: 500;
    }

    &-description {
      color: @text-color-secondary;
    }
  }

  &-loading &-body {
    user-select: none;
  }

  &-loading-content {
    p {
      margin: 0;
    }
  }

  &-loading-block {
    height: 14px;
    margin: 4px 0;
    border-radius: @card-radius;
    background: linear-gradient(90deg, rgba(207, 216, 220, .2), rgba(207, 216, 220, .4), rgba(207, 216, 220, .2));
    animation: card-loading 1.4s ease infinite;
    background-size: 600% 600%;
  }
}

@keyframes card-loading {
  0%,
  100% {
		background-position: 0 50%;
	}
	50% {
		background-position: 100% 50%;
	}
}

.@{ant-prefix}-carousel {
  .reset-component;

  .slick-slider {
    position: relative;
    display: block;
    box-sizing: border-box;
    -webkit-touch-callout: none;
    -ms-touch-action: pan-y;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
  }
  .slick-list {
    position: relative;
    overflow: hidden;
    display: block;
    margin: 0;
    padding: 0;

    &:focus {
      outline: none;
    }

    &.dragging {
      cursor: pointer;
    }
  }
  .slick-slider .slick-track,
  .slick-slider .slick-list {
    transform: translate3d(0, 0, 0);
  }

  .slick-track {
    position: relative;
    left: 0;
    top: 0;
    display: block;

    &:before,
    &:after {
      content: "";
      display: table;
    }

    &:after {
      clear: both;
    }

    .slick-loading & {
      visibility: hidden;
    }
  }
  .slick-slide {
    float: left;
    height: 100%;
    min-height: 1px;
    [dir="rtl"] & {
      float: right;
    }
    img {
      display: block;
    }
    &.slick-loading img {
      display: none;
    }

    display: none;

    &.dragging img {
      pointer-events: none;
    }
  }

  .slick-initialized .slick-slide {
    display: block;
  }

  .slick-loading .slick-slide {
    visibility: hidden;
  }

  .slick-vertical .slick-slide {
    display: block;
    height: auto;
    border: @border-width-base @border-style-base transparent;
  }
  .slick-arrow.slick-hidden {
    display: none;
  }

  // Arrows
  .slick-prev,
  .slick-next {
    position: absolute;
    display: block;
    height: 20px;
    width: 20px;
    line-height: 0;
    font-size: 0;
    cursor: pointer;
    background: transparent;
    color: transparent;
    top: 50%;
    margin-top: -10px;
    padding: 0;
    border: 0;
    outline: none;
    &:hover,
    &:focus {
      outline: none;
      background: transparent;
      color: transparent;
      &:before {
        opacity: 1;
      }
    }
    &.slick-disabled:before {
      opacity: 0.25;
    }
  }

  .slick-prev {
    left: -25px;
    &:before {
      content: "←";
    }
  }

  .slick-next {
    right: -25px;
    &:before {
      content: "→";
    }
  }

  // Dots
  .slick-dots {
    position: absolute;
    bottom: 12px;
    list-style: none;
    display: block;
    text-align: center;
    margin: 0;
    padding: 0;
    width: 100%;
    height: @carousel-dot-height;
    li {
      position: relative;
      display: inline-block;
      vertical-align: top;
      text-align: center;
      margin: 0 2px;
      padding: 0;
      button {
        border: 0;
        cursor: pointer;
        background: #fff;
        opacity: 0.3;
        display: block;
        width: @carousel-dot-width;
        height: @carousel-dot-height;
        border-radius: 1px;
        outline: none;
        font-size: 0;
        color: transparent;
        transition: all .5s;
        padding: 0;
        &:hover,
        &:focus {
          opacity: 0.75;
        }
      }
      &.slick-active button {
        background: #fff;
        opacity: 1;
        width: @carousel-dot-active-width;
        &:hover,
        &:focus {
          opacity: 1;
        }
      }
    }
  }
}

.@{ant-prefix}-carousel-vertical {
  .slick-dots {
    width: @carousel-dot-height;
    bottom: auto;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    height: auto;
    li {
      margin: 0 2px;
      vertical-align: baseline;
      button {
        width: @carousel-dot-height;
        height: @carousel-dot-width;
      }
      &.slick-active button {
        width: @carousel-dot-height;
        height: @carousel-dot-active-width;
      }
    }
  }
}

@input-affix-width: 19px;

// size mixins for input
.input-lg() {
  padding: @input-padding-vertical-lg @input-padding-horizontal-lg;
  height: @input-height-lg;
  font-size: @font-size-lg;
}

.input-sm() {
  padding: @input-padding-vertical-sm @input-padding-horizontal-sm;
  height: @input-height-sm;
}

// input status
// == when focus or actived
.active(@color: @outline-color) {
  border-color: ~`colorPalette("@{color}", 5)`;
  outline: 0;
  box-shadow: @input-outline-offset @outline-blur-size @outline-width fade(@color, 20%);
  border-right-width: 1px !important;
}

// == when hoverd
.hover(@color: @input-hover-border-color) {
  border-color: ~`colorPalette("@{color}", 5)`;
  border-right-width: 1px !important;
}

.disabled() {
  background-color: @input-disabled-bg;
  opacity: 1;
  cursor: not-allowed;
  color: @disabled-color;
  &:hover {
    .hover(@input-border-color);
  }
}

// Basic style for input
.input() {
  position: relative;
  display: inline-block;
  padding: @input-padding-vertical-base @input-padding-horizontal-base;
  width: 100%;
  height: @input-height-base;
  font-size: @font-size-base;
  line-height: @line-height-base;
  color: @input-color;
  background-color: @input-bg;
  background-image: none;
  border: @border-width-base @border-style-base @input-border-color;
  border-radius: @border-radius-base;
  .placeholder(); // Reset placeholder
  transition: all .3s;

  &:hover {
    .hover();
  }

  &:focus {
    .active();
  }

  &-disabled {
    .disabled();
  }

  // Reset height for `textarea`s
  textarea& {
    max-width: 100%; // prevent textearea resize from coming out of its container
    height: auto;
    vertical-align: bottom;
    transition: all .3s, height 0s;
    min-height: @input-height-base;
  }

  // Size
  &-lg {
    .input-lg();
  }

  &-sm {
    .input-sm();
  }
}

// label input
.input-group(@inputClass) {
  position: relative;
  display: table;
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;

  // Undo padding and float of grid classes
  &[class*="col-"] {
    float: none;
    padding-left: 0;
    padding-right: 0;
  }

  > [class*="col-"] {
    padding-right: 8px;
    &:last-child {
      padding-right: 0;
    }
  }

  &-addon,
  &-wrap,
  > .@{inputClass} {
    display: table-cell;

    &:not(:first-child):not(:last-child) {
      border-radius: 0;
    }
  }

  &-addon,
  &-wrap {
    width: 1px; // To make addon/wrap as small as possible
    white-space: nowrap;
    vertical-align: middle;
  }

  &-wrap > * {
    display: block !important;
  }

  .@{inputClass} {
    float: left;
    width: 100%;
    margin-bottom: 0;
    &:focus {
      z-index: 1; // Fix https://gw.alipayobjects.com/zos/rmsportal/DHNpoqfMXSfrSnlZvhsJ.png
      border-right-width: 1px;
    }
    &:hover {
      z-index: 1;
      border-right-width: 1px;
    }
  }

  &-addon {
    padding: 0 @input-padding-horizontal-base;
    font-size: @font-size-base;
    font-weight: normal;
    line-height: 1;
    color: @input-color;
    text-align: center;
    background-color: @input-addon-bg;
    border: @border-width-base @border-style-base @input-border-color;
    border-radius: @border-radius-base;
    position: relative;
    transition: all .3s;

    // Reset Select's style in addon
    .@{ant-prefix}-select {
      margin: -(@input-padding-vertical-base + 1px) (-@input-padding-horizontal-base);  // lesshint spaceAroundOperator: false

      .@{ant-prefix}-select-selection {
        background-color: inherit;
        margin: -1px;
        border: @border-width-base @border-style-base transparent;
        box-shadow: none;
      }

      &-open,
      &-focused {
        .@{ant-prefix}-select-selection {
          color: @primary-color;
        }
      }
    }

    // Expand addon icon click area
    // https://github.com/ant-design/ant-design/issues/3714
    > i:only-child:after {
      position: absolute;
      content: '';
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
    }
  }

  // Reset rounded corners
  > .@{inputClass}:first-child,
  &-addon:first-child {
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;

    // Reset Select's style in addon
    .@{ant-prefix}-select .@{ant-prefix}-select-selection {
      border-bottom-right-radius: 0;
      border-top-right-radius: 0;
    }
  }

  > .@{inputClass}-affix-wrapper {
    &:not(:first-child) .@{inputClass} {
      border-bottom-left-radius: 0;
      border-top-left-radius: 0;
    }

    &:not(:last-child) .@{inputClass} {
      border-bottom-right-radius: 0;
      border-top-right-radius: 0;
    }
  }

  &-addon:first-child {
    border-right: 0;
  }
  &-addon:last-child {
    border-left: 0;
  }

  > .@{inputClass}:last-child,
  &-addon:last-child {
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;

    // Reset Select's style in addon
    .@{ant-prefix}-select .@{ant-prefix}-select-selection {
      border-bottom-left-radius: 0;
      border-top-left-radius: 0;
    }
  }

  // Sizing options
  &-lg .@{inputClass},
  &-lg > &-addon {
    .input-lg();
  }

  &-sm .@{inputClass},
  &-sm > &-addon {
    .input-sm();
  }

  // Fix https://github.com/ant-design/ant-design/issues/5754
  &-lg .@{ant-prefix}-select-selection--single {
    height: @input-height-lg;
  }

  &-sm .@{ant-prefix}-select-selection--single {
    height: @input-height-sm;
  }

  .@{inputClass}-affix-wrapper {
    display: table-cell;
    width: 100%;
    float: left;
  }

  &&-compact {
    display: block;
    .clearfix;

    &-addon,
    &-wrap,
    > .@{inputClass} {
      &:not(:first-child):not(:last-child) {
        border-right-width: 1px;
        border-right-color: transparent;
        &:hover {
          .hover();
        }
        &:focus {
          .active();
        }
      }
    }

    & > * {
      border-radius: 0;
      border-right-width: 0;
      vertical-align: top; // https://github.com/ant-design/ant-design-pro/issues/139
      float: none;
      display: inline-block;
    }

    // https://github.com/ant-design/ant-design/issues/11863
    & > span:not(:last-child) > .@{inputClass} {
      border-right-width: 0;
    }

    // Undo float for .ant-input-group .ant-input
    .@{inputClass} {
      float: none;
    }

    // reset border for Select, DatePicker, AutoComplete, Cascader, Mention, TimePicker
    & > .@{ant-prefix}-select > .@{ant-prefix}-select-selection,
    & > .@{ant-prefix}-calendar-picker .@{ant-prefix}-input,
    & > .@{ant-prefix}-select-auto-complete .@{ant-prefix}-input,
    & > .@{ant-prefix}-cascader-picker .@{ant-prefix}-input,
    & > .@{ant-prefix}-mention-wrapper .@{ant-prefix}-mention-editor,
    & > .@{ant-prefix}-time-picker .@{ant-prefix}-time-picker-input {
      border-radius: 0;
      border-right-width: 1px;
      border-right-color: transparent;
      &:hover {
        .hover();
      }
      &:focus {
        .active();
      }
    }

    & > *:first-child,
    & > .@{ant-prefix}-select:first-child > .@{ant-prefix}-select-selection,
    & > .@{ant-prefix}-calendar-picker:first-child .@{ant-prefix}-input,
    & > .@{ant-prefix}-select-auto-complete:first-child .@{ant-prefix}-input,
    & > .@{ant-prefix}-cascader-picker:first-child .@{ant-prefix}-input,
    & > .@{ant-prefix}-mention-wrapper:first-child .@{ant-prefix}-mention-editor,
    & > .@{ant-prefix}-time-picker:first-child .@{ant-prefix}-time-picker-input {
      border-top-left-radius: @border-radius-base;
      border-bottom-left-radius: @border-radius-base;
    }

    & > *:last-child,
    & > .@{ant-prefix}-select:last-child > .@{ant-prefix}-select-selection,
    & > .@{ant-prefix}-calendar-picker:last-child .@{ant-prefix}-input,
    & > .@{ant-prefix}-select-auto-complete:last-child .@{ant-prefix}-input,
    & > .@{ant-prefix}-cascader-picker:last-child .@{ant-prefix}-input,
    & > .@{ant-prefix}-cascader-picker-focused:last-child .@{ant-prefix}-input,
    & > .@{ant-prefix}-mention-wrapper:last-child .@{ant-prefix}-mention-editor,
    & > .@{ant-prefix}-time-picker:last-child .@{ant-prefix}-time-picker-input {
      border-top-right-radius: @border-radius-base;
      border-bottom-right-radius: @border-radius-base;
      border-right-width: 1px;
      border-right-color: @input-border-color;
      &:hover {
        .hover();
      }
      &:focus {
        .active();
        .@{ant-prefix}-cascader-input {
          .active();
        }
      }
    }

    // https://github.com/ant-design/ant-design/issues/12493
    & > .@{ant-prefix}-select-auto-complete .@{ant-prefix}-input {
      vertical-align: top;
    }
  }
}

.input-affix-wrapper(@inputClass) {
  position: relative;
  display: inline-block;
  width: 100%;

  &:hover .@{inputClass}:not(.@{inputClass}-disabled) {
    .hover();
  }

  .@{inputClass} {
    position: static;
  }

  .@{inputClass}-prefix,
  .@{inputClass}-suffix {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    line-height: 0;
    color: @input-color;
    :not(.anticon) {
      line-height: @line-height-base;
    }
  }

  .@{inputClass}-prefix {
    left: @input-padding-horizontal-base + 1px;
  }

  .@{inputClass}-suffix {
    right: @input-padding-horizontal-base + 1px;
  }

  .@{inputClass}:not(:first-child) {
    padding-left: @input-padding-horizontal-base + @input-affix-width;
  }

  .@{inputClass}:not(:last-child) {
    padding-right: @input-padding-horizontal-base + @input-affix-width;
  }
}

@cascader-prefix-cls: ~"@{ant-prefix}-cascader";

.@{cascader-prefix-cls} {
  .reset-component;

  &-input.@{ant-prefix}-input {
    // Add important to fix https://github.com/ant-design/ant-design/issues/5078
    // because input.less will compile after cascader.less
    background-color: transparent !important;
    cursor: pointer;
    width: 100%;
    position: relative;
  }

  &-picker-show-search &-input.@{ant-prefix}-input {
    position: relative;
  }

  &-picker {
    .reset-component;
    position: relative;
    display: inline-block;
    cursor: pointer;
    background-color: @component-background;
    border-radius: @border-radius-base;
    outline: 0;
    transition: color .3s;

    &-with-value &-label {
      color: transparent;
    }

    &-disabled {
      cursor: not-allowed;
      background: @input-disabled-bg;
      color: @disabled-color;
      .@{cascader-prefix-cls}-input {
        cursor: not-allowed;
      }
    }

    &:focus .@{cascader-prefix-cls}-input {
      .active;
    }

    &-show-search&-focused {
      color: @disabled-color;
    }

    &-label {
      position: absolute;
      left: 0;
      height: 20px;
      line-height: 20px;
      top: 50%;
      margin-top: -10px;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      width: 100%;
      padding: 0 @control-padding-horizontal;
    }

    &-clear {
      opacity: 0;
      position: absolute;
      right: @control-padding-horizontal;
      z-index: 2;
      background: @component-background;
      top: 50%;
      font-size: @font-size-sm;
      color: @disabled-color;
      width: 12px;
      height: 12px;
      margin-top: -6px;
      line-height: 12px;
      cursor: pointer;
      transition: color 0.3s ease, opacity 0.15s ease;
      &:hover {
        color: @text-color-secondary;
      }
    }

    &:hover &-clear {
      opacity: 1;
    }

    // arrow
    &-arrow {
      position: absolute;
      z-index: 1;
      top: 50%;
      right: @control-padding-horizontal;
      width: 12px;
      height: 12px;
      font-size: 12px;
      margin-top: -6px;
      line-height: 12px;
      color: @disabled-color;
      transition: transform .2s;
      &&-expand {
        transform: rotate(180deg);
      }
    }
  }

  &-picker-small &-picker-clear,
  &-picker-small &-picker-arrow {
    right: @control-padding-horizontal-sm;
  }

  &-menus {
    font-size: @font-size-base;
    background: @component-background;
    position: absolute;
    z-index: @zindex-dropdown;
    border-radius: @border-radius-base;
    box-shadow: @box-shadow-base;
    white-space: nowrap;

    ul,
    ol {
      list-style: none;
      margin: 0;
      padding: 0;
    }

    &-empty,
    &-hidden {
      display: none;
    }
    &.slide-up-enter.slide-up-enter-active&-placement-bottomLeft,
    &.slide-up-appear.slide-up-appear-active&-placement-bottomLeft {
      animation-name: antSlideUpIn;
    }

    &.slide-up-enter.slide-up-enter-active&-placement-topLeft,
    &.slide-up-appear.slide-up-appear-active&-placement-topLeft {
      animation-name: antSlideDownIn;
    }

    &.slide-up-leave.slide-up-leave-active&-placement-bottomLeft {
      animation-name: antSlideUpOut;
    }

    &.slide-up-leave.slide-up-leave-active&-placement-topLeft {
      animation-name: antSlideDownOut;
    }
  }
  &-menu {
    display: inline-block;
    vertical-align: top;
    min-width: 111px;
    height: 180px;
    list-style: none;
    margin: 0;
    padding: 0;
    border-right: @border-width-base @border-style-base @border-color-split;
    overflow: auto;
    -ms-overflow-style: -ms-autohiding-scrollbar; // https://github.com/ant-design/ant-design/issues/11857

    &:first-child {
      border-radius: @border-radius-base 0 0 @border-radius-base;
    }
    &:last-child {
      border-right-color: transparent;
      margin-right: -1px;
      border-radius: 0 @border-radius-base @border-radius-base 0;
    }
    &:only-child {
      border-radius: @border-radius-base;
    }
  }
  &-menu-item {
    padding: 5px @control-padding-horizontal;
    line-height: 22px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.3s;
    &:hover {
      background: @item-hover-bg;
    }
    &-disabled {
      cursor: not-allowed;
      color: @disabled-color;
      &:hover {
        background: transparent;
      }
    }
    &-active:not(&-disabled) {
      &,
      &:hover {
        background: @background-color-base;
        font-weight: 600;
      }
    }
    &-expand {
      position: relative;
      padding-right: 24px;
    }

    &-expand &-expand-icon,
    &-expand &-loading-icon {
      .iconfont-size-under-12px(10px);
      color: @text-color-secondary;
      position: absolute;
      right: @control-padding-horizontal;
    }

    & &-keyword {
      color: @highlight-color;
    }
  }
}

.antCheckboxFn(@checkbox-prefix-cls: ~"@{ant-prefix}-checkbox") {
  @checkbox-inner-prefix-cls: ~"@{checkbox-prefix-cls}-inner";
  // 一般状态
  .@{checkbox-prefix-cls} {
    .reset-component;
    white-space: nowrap;
    cursor: pointer;
    outline: none;
    display: inline-block;
    line-height: 1;
    position: relative;
    vertical-align: middle;
    top: -0.09em;

    .@{checkbox-prefix-cls}-wrapper:hover &-inner,
    &:hover &-inner,
    &-input:focus + &-inner {
      border-color: @checkbox-color;
    }

    &-checked:after {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border-radius: @border-radius-sm;
      border: 1px solid @checkbox-color;
      content: '';
      animation: antCheckboxEffect 0.36s ease-in-out;
      animation-fill-mode: both;
      visibility: hidden;
    }

    &:hover:after,
    .@{checkbox-prefix-cls}-wrapper:hover &:after {
      visibility: visible;
    }

    &-inner {
      position: relative;
      top: 0;
      left: 0;
      display: block;
      width: @checkbox-size;
      height: @checkbox-size;
      border: @border-width-base @border-style-base @border-color-base;
      border-radius: @border-radius-sm;
      background-color: @checkbox-check-color;
      transition: all .3s;

      &:after {
        @check-width: (@checkbox-size / 14) * 5px;
        @check-height: (@checkbox-size / 14) * 8px;
        transform: rotate(45deg) scale(0);
        position: absolute;
        left: (@checkbox-size - @check-width) / 2 - 0.5px * (@checkbox-size / 14);
        top: (@checkbox-size - @check-height) / 2 - 2px * (@checkbox-size / 14);
        display: table;
        width: @check-width;
        height: @check-height;
        border: 2px solid @checkbox-check-color;
        border-top: 0;
        border-left: 0;
        content: ' ';
        transition: all .1s @ease-in-back, opacity .1s;
        opacity: 0;
      }
    }

    &-input {
      position: absolute;
      left: 0;
      z-index: 1;
      cursor: pointer;
      opacity: 0;
      top: 0;
      bottom: 0;
      right: 0;
      width: 100%;
      height: 100%;
    }
  }

  // 半选状态
  .@{checkbox-prefix-cls}-indeterminate .@{checkbox-inner-prefix-cls}:after {
    @indeterminate-width: @checkbox-size - 8px;
    @indeterminate-height: @checkbox-size - 8px;
    content: ' ';
    transform: translate(-50%, -50%) scale(1);
    border: 0;
    left: 50%;
    top: 50%;
    width: @indeterminate-width;
    height: @indeterminate-height;
    background-color: @checkbox-color;
    opacity: 1;
  }

  .@{checkbox-prefix-cls}-indeterminate.@{checkbox-prefix-cls}-disabled .@{checkbox-inner-prefix-cls}:after {
    border-color: @disabled-color;
  }

  // 选中状态
  .@{checkbox-prefix-cls}-checked .@{checkbox-inner-prefix-cls}:after {
    transform: rotate(45deg) scale(1);
    position: absolute;
    display: table;
    border: 2px solid @checkbox-check-color;
    border-top: 0;
    border-left: 0;
    content: ' ';
    transition: all .2s @ease-out-back .1s;
    opacity: 1;
  }

  .@{checkbox-prefix-cls}-checked {
    .@{checkbox-inner-prefix-cls} {
      background-color: @checkbox-color;
      border-color: @checkbox-color;
    }
  }

  .@{checkbox-prefix-cls}-disabled {
    cursor: not-allowed;

    &.@{checkbox-prefix-cls}-checked {
      .@{checkbox-inner-prefix-cls}:after {
        animation-name: none;
        border-color: @disabled-color;
      }
    }

    .@{checkbox-prefix-cls}-input {
      cursor: not-allowed;
    }

    .@{checkbox-inner-prefix-cls} {
      border-color: @border-color-base !important;
      background-color: @input-disabled-bg;
      &:after {
        animation-name: none;
        border-color: @input-disabled-bg;
        border-collapse: separate;
      }
    }

    & + span {
      color: @disabled-color;
      cursor: not-allowed;
    }
  }

  .@{checkbox-prefix-cls}-wrapper {
    .reset-component;
    line-height: unset;
    cursor: pointer;
    display: inline-block;
    & + & {
      margin-left: 8px;
    }
  }

  .@{checkbox-prefix-cls}-wrapper + span,
  .@{checkbox-prefix-cls} + span {
    padding-left: 8px;
    padding-right: 8px;
  }

  .@{checkbox-prefix-cls}-group {
    .reset-component;
    display: inline-block;
    &-item {
      display: inline-block;
      margin-right: 8px;
      &:last-child {
        margin-right: 0;
      }
    }
    &-item + &-item {
      margin-left: 0;
    }
  }
}

@keyframes antCheckboxEffect {
  0% {
    transform: scale(1);
    opacity: 0.5;
  }
  100% {
    transform: scale(1.6);
    opacity: 0;
  }
}

.antCheckboxFn();

@collapse-prefix-cls: ~"@{ant-prefix}-collapse";

.collapse-close() {
  transform: rotate(0);
}
.collapse-open() {
  transform: rotate(90deg);
}

.@{collapse-prefix-cls} {
  .reset-component;
  background-color: @collapse-header-bg;
  border-radius: @border-radius-base;
  border: @border-width-base @border-style-base @border-color-base;
  border-bottom: 0;

  & > &-item {
    border-bottom: @border-width-base @border-style-base @border-color-base;

    &:last-child {
      &,
      & > .@{collapse-prefix-cls}-header {
        border-radius: 0 0 @border-radius-base @border-radius-base;
      }
    }

    > .@{collapse-prefix-cls}-header {
      line-height: 22px;
      padding: @collapse-header-padding;
      color: @heading-color;
      cursor: pointer;
      position: relative;
      transition: all .3s;

      .arrow {
        .iconfont-mixin();
        font-size: @font-size-sm;
        position: absolute;
        display: inline-block;
        line-height: 46px;
        vertical-align: top;
        top: 50%;
        transform: translateY(-50%);
        left: @padding-md;
        & svg {
          .collapse-close();
          transition: transform 0.24s;
        }
      }

      &:focus {
        outline: none;
      }
    }

    &.@{collapse-prefix-cls}-no-arrow {
      > .@{collapse-prefix-cls}-header {
        padding-left: 12px;
      }
    }
  }

  &-anim-active {
    transition: height .2s @ease-out;
  }

  &-content {
    overflow: hidden;
    color: @text-color;
    background-color: @collapse-content-bg;
    border-top: @border-width-base @border-style-base @border-color-base;

    & > &-box {
      padding: @collapse-content-padding;
    }

    &-inactive {
      display: none;
    }
  }

  &-item:last-child {
    > .@{collapse-prefix-cls}-content {
      border-radius: 0 0 @border-radius-base @border-radius-base;
    }
  }

  & > &-item > &-header[aria-expanded="true"] {
    .anticon-right svg {
      .collapse-open();
    }
  }

  &-borderless {
    background-color: @component-background;
    border: 0;
  }

  &-borderless > &-item {
    border-bottom: 1px solid @border-color-base;
  }

  &-borderless > &-item:last-child,
  &-borderless > &-item:last-child &-header {
    border-radius: 0;
  }

  &-borderless > &-item > &-content {
    background-color: transparent;
    border-top: 0;
  }

  &-borderless > &-item > &-content > &-content-box {
    padding-top: 4px;
  }

  & &-item-disabled > &-header {
    &,
    & > .arrow {
      cursor: not-allowed;
      color: @disabled-color;
    }
  }
}

.cdk-overlay-container {
  pointer-events: none;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  position: fixed;
  z-index: 1000;
}

.cdk-overlay-backdrop {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  -webkit-tap-highlight-color: transparent;
  transition: opacity .4s cubic-bezier(.25, .8, .25, 1);
  opacity: 0;
  position: absolute;
  pointer-events: auto;
  z-index: 1000;
}

.cdk-overlay-pane {
  position: absolute;
  pointer-events: auto;
  z-index: 1000; // Give an opportunity to the content own to manage their z-index such as Modal
}

.cdk-overlay-connected-position-bounding-box {
  position: absolute;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  min-width: 1px;
  min-height: 1px;
}

.box-shadow-left() {
  .ant-table-th-right-sticky, .ant-table-td-right-sticky {
    box-shadow: -6px 0 6px 0px rgba(0, 0, 0, .05);
  }
}

.box-shadow-right() {
  .ant-table-th-left-sticky, .ant-table-td-left-sticky {
    box-shadow: 6px 0 6px 0px rgba(0, 0, 0, .05);
  }
}

.border-left() {
  .ant-table-th-right-sticky, .ant-table-td-right-sticky {
    border-right: @border-width-base @border-style-base @border-color-split;
  }
}

.border-right() {
  .ant-table-th-left-sticky, .ant-table-td-left-sticky {
    border-left: @border-width-base @border-style-base @border-color-split;
  }
}

.ant-table-td-right-sticky + .ant-table-td-right-sticky {
  box-shadow: none;
}

.ant-table-th-right-sticky + .ant-table-th-right-sticky {
  box-shadow: none;
}

.ant-table-th-left-sticky, .ant-table-th-right-sticky, .ant-table-td-right-sticky, .ant-table-td-left-sticky {
  position: sticky !important;
  z-index: 1;
}

.ant-table-td-left-sticky, .ant-table-td-right-sticky {
  background: @component-background;
}

.ant-table-scroll-position-middle {
  .box-shadow-right;
  .box-shadow-left;
}

.ant-table-scroll-position-left {
  .box-shadow-left;
}

.ant-table-scroll-position-right {
  .box-shadow-right;
}

.ant-table-bordered {
  &.ant-table-scroll-position-middle {
    .border-right;
    .border-left;
  }

  &.ant-table-scroll-position-left {
    .border-left;
  }

  &.ant-table-scroll-position-right {
    .border-right;
  }
}

// hack tree css
.ant-tree {
  &.ant-tree-show-line {
    > nz-tree-node:not(:last-child), .ant-tree-child-tree > nz-tree-node:not(:last-child) {
      > li:before {
        content: ' ';
        width: 1px;
        border-left: 1px solid @border-color-base;
        height: 100%;
        position: absolute;
        left: 12px;
        margin: 22px 0;
      }
    }
    .ant-tree-child-tree > nz-tree-node:last-child {
      > li:before {
        content: ' ';
        width: 1px;
        border-left: 0px solid @border-color-base;
        height: 100%;
        position: absolute;
        left: 12px;
        margin: 22px 0;
      }
    }
  }
  .font-highlight {
    color: @highlight-color;
  }
}

@divider-prefix-cls: ~"@{ant-prefix}-divider";

.@{divider-prefix-cls} {
  .reset-component;
  background: @border-color-split;

  &,  // for compatiable
  &-vertical {
    margin: 0 8px;
    display: inline-block;
    height: 0.9em;
    width: 1px;
    vertical-align: middle;
    position: relative;
    top: -0.06em;
  }
  &-horizontal {
    display: block;
    height: 1px;
    width: 100%;
    margin: 24px 0;
    clear: both;
  }

  &-horizontal&-with-text,
  &-horizontal&-with-text-left,
  &-horizontal&-with-text-right {
    display: table;
    white-space: nowrap;
    text-align: center;
    background: transparent;
    font-weight: 500;
    color: @heading-color;
    font-size: @font-size-lg;
    margin: 16px 0;
    &:before,
    &:after {
      content: '';
      display: table-cell;
      position: relative;
      top: 50%;
      width: 50%;
      border-top: 1px solid @border-color-split;
      transform: translateY(50%);
    }
  }

  &-horizontal&-with-text-left,
  &-horizontal&-with-text-right {
    .@{divider-prefix-cls}-inner-text {
      display: inline-block;
      padding: 0 10px;
    }
  }

  &-horizontal&-with-text-left {
    &:before {
      top: 50%;
      width: 5%;
    }
    &:after {
      top: 50%;
      width: 95%;
    }
  }

  &-horizontal&-with-text-right {
    &:before {
      top: 50%;
      width: 95%;
    }
    &:after {
      top: 50%;
      width: 5%;
    }
  }

  &-inner-text {
    display: inline-block;
    padding: 0 24px;
  }

  &-dashed {
    background: none;
    border-top: 1px dashed @border-color-split;
  }
  &-horizontal&-with-text&-dashed,
  &-horizontal&-with-text-left&-dashed,
  &-horizontal&-with-text-right&-dashed {
    border-top: 0;
    &:before,
    &:after {
      border-style: dashed none none;
    }
  }
}

@dropdown-prefix-cls: ~"@{ant-prefix}-dropdown";

.@{dropdown-prefix-cls} {
  .reset-component;
  position: absolute;
  left: -9999px;
  top: -9999px;
  z-index: @zindex-dropdown;
  display: block;

  &-wrap {
    position: relative;

    .@{ant-prefix}-btn > .@{iconfont-css-prefix}-down {
      .iconfont-size-under-12px(10px);
    }

    .@{iconfont-css-prefix}-down:before {
      transition: transform .2s;
    }
  }

  &-wrap-open {
    .@{iconfont-css-prefix}-down:before {
      transform: rotate(180deg);
    }
  }

  &-hidden,
  &-menu-hidden {
    display: none;
  }

  &-menu {
    outline: none;
    position: relative;
    list-style-type: none;
    padding: 4px 0;
    margin: 0;
    text-align: left;
    background-color: @component-background;
    border-radius: @border-radius-base;
    box-shadow: @box-shadow-base;
    background-clip: padding-box;

    &-item-group-title {
      color: @text-color-secondary;
      padding: 5px @control-padding-horizontal;
      transition: all .3s;
    }

    &-submenu-popup {
      position: absolute;
      z-index: @zindex-dropdown;
    }

    &-item,
    &-submenu-title {
      padding: 5px @control-padding-horizontal;
      margin: 0;
      clear: both;
      font-size: @font-size-base;
      font-weight: normal;
      color: @text-color;
      white-space: nowrap;
      cursor: pointer;
      transition: all .3s;
      line-height: 22px;

      > .anticon:first-child {
        min-width: 12px;
        margin-right: 8px;
      }

      > a {
        color: @text-color;
        display: block;
        padding: 5px @control-padding-horizontal;
        margin: -5px -@control-padding-horizontal;
        transition: all .3s;
        &:focus {
          text-decoration: none;
        }
      }

      &-selected,
      &-selected > a {
        color: @primary-color;
        background-color: @item-active-bg;
      }

      &:hover {
        background-color: @item-hover-bg;
      }

      &-disabled {
        color: @disabled-color;
        cursor: not-allowed;

        &:hover {
          color: @disabled-color;
          background-color: @component-background;
          cursor: not-allowed;
        }
      }

      &-divider {
        height: 1px;
        overflow: hidden;
        background-color: @border-color-split;
        line-height: 0;
        margin: 4px 0;
      }
      .@{dropdown-prefix-cls}-menu-submenu-arrow {
        position: absolute;
        right: @padding-xs;
        &-icon {
          font-style: normal;
          color: @text-color-secondary;
          .iconfont-size-under-12px(10px);
        }
      }
    }

    &-submenu-title {
      padding-right: 26px;
    }

    &-submenu-vertical {
      position: relative;
    }

    &-submenu-vertical > & {
      top: 0;
      left: 100%;
      position: absolute;
      min-width: 100%;
      margin-left: 4px;
      transform-origin: 0 0;
    }

    &-submenu&-submenu-disabled .@{dropdown-prefix-cls}-menu-submenu-title {
      &,
      .@{dropdown-prefix-cls}-menu-submenu-arrow-icon {
        color: @disabled-color;
      }
    }
  }

  &.slide-down-enter.slide-down-enter-active&-placement-bottomLeft,
  &.slide-down-appear.slide-down-appear-active&-placement-bottomLeft,
  &.slide-down-enter.slide-down-enter-active&-placement-bottomCenter,
  &.slide-down-appear.slide-down-appear-active&-placement-bottomCenter,
  &.slide-down-enter.slide-down-enter-active&-placement-bottomRight,
  &.slide-down-appear.slide-down-appear-active&-placement-bottomRight {
    animation-name: antSlideUpIn;
  }

  &.slide-up-enter.slide-up-enter-active&-placement-topLeft,
  &.slide-up-appear.slide-up-appear-active&-placement-topLeft,
  &.slide-up-enter.slide-up-enter-active&-placement-topCenter,
  &.slide-up-appear.slide-up-appear-active&-placement-topCenter,
  &.slide-up-enter.slide-up-enter-active&-placement-topRight,
  &.slide-up-appear.slide-up-appear-active&-placement-topRight {
    animation-name: antSlideDownIn;
  }

  &.slide-down-leave.slide-down-leave-active&-placement-bottomLeft,
  &.slide-down-leave.slide-down-leave-active&-placement-bottomCenter,
  &.slide-down-leave.slide-down-leave-active&-placement-bottomRight {
    animation-name: antSlideUpOut;
  }

  &.slide-up-leave.slide-up-leave-active&-placement-topLeft,
  &.slide-up-leave.slide-up-leave-active&-placement-topCenter,
  &.slide-up-leave.slide-up-leave-active&-placement-topRight {
    animation-name: antSlideDownOut;
  }
}

.@{dropdown-prefix-cls}-trigger,
.@{dropdown-prefix-cls}-link {
  .@{iconfont-css-prefix}:not(.@{iconfont-css-prefix}-ellipsis) {
    .iconfont-size-under-12px(10px);
  }
}

.@{dropdown-prefix-cls}-button {
  white-space: nowrap;

  &.@{ant-prefix}-btn-group > .@{ant-prefix}-btn:last-child:not(:first-child) {
    padding-left: @padding-xs;
    padding-right: @padding-xs;
  }
  .@{iconfont-css-prefix}:not(.@{iconfont-css-prefix}-ellipsis) {
    .iconfont-size-under-12px(10px);
  }
}

// https://github.com/ant-design/ant-design/issues/4903
.@{dropdown-prefix-cls}-menu-dark {
  &,
  .@{dropdown-prefix-cls}-menu {
    background: @menu-dark-bg;
  }
  .@{dropdown-prefix-cls}-menu-item,
  .@{dropdown-prefix-cls}-menu-submenu-title,
  .@{dropdown-prefix-cls}-menu-item > a {
    color: @text-color-secondary-dark;
    .@{dropdown-prefix-cls}-menu-submenu-arrow:after {
      color: @text-color-secondary-dark;
    }
    &:hover {
      color: #fff;
      background: transparent;
    }
  }
  .@{dropdown-prefix-cls}-menu-item-selected {
    &,
    &:hover,
    > a {
      background: @primary-color;
      color: #fff;
    }
  }
}

.form-control-validation(@text-color: @input-color; @border-color: @input-border-color; @background-color: @input-bg) {
  .@{ant-prefix}-form-explain,
  .@{ant-prefix}-form-split {
    color: @text-color;
  }
  // 输入框的不同校验状态
  .@{ant-prefix}-input {
    &,
    &:hover {
      border-color: @border-color;
    }

    &:focus {
      .active(@border-color);
    }

    &:not([disabled]):hover {
      border-color: @border-color;
    }
  }

  .@{ant-prefix}-calendar-picker-open .@{ant-prefix}-calendar-picker-input {
    .active(@border-color);
  }

  .@{ant-prefix}-input-prefix {
    color: @text-color;
  }

  .@{ant-prefix}-input-group-addon {
    color: @text-color;
    border-color: @border-color;
    background-color: @background-color;
  }

  .has-feedback {
    color: @text-color;
  }
}

// Reset form styles
// -----------------------------
// Based on Bootstrap framework
.reset-form() {
  legend {
    display: block;
    width: 100%;
    padding: 0;
    margin-bottom: 20px;
    font-size: @font-size-lg;
    line-height: inherit;
    color: @text-color-secondary;
    border: 0;
    border-bottom: @border-width-base @border-style-base @border-color-base;
  }

  label {
    font-size: @font-size-base;
  }

  input[type="search"] {
    box-sizing: border-box;
  }

  // Position radios and checkboxes better
  input[type="radio"],
  input[type="checkbox"] {
    line-height: normal;
  }

  input[type="file"] {
    display: block;
  }

  // Make range inputs behave like textual form controls
  input[type="range"] {
    display: block;
    width: 100%;
  }

  // Make multiple select elements height not fixed
  select[multiple],
  select[size] {
    height: auto;
  }

  // Focus for file, radio, and checkbox
  input[type="file"]:focus,
  input[type="radio"]:focus,
  input[type="checkbox"]:focus {
    outline: thin dotted;
    outline: 5px auto -webkit-focus-ring-color; // lesshint duplicateProperty: false
    outline-offset: -2px;
  }

  // Adjust output element
  output {
    display: block;
    padding-top: 15px;
    font-size: @font-size-base;
    line-height: @line-height-base;
    color: @input-color;
  }
}

@form-prefix-cls: ~"@{ant-prefix}-form";
@form-component-height: @input-height-base;
@form-component-max-height: @input-height-lg;
@form-feedback-icon-size: @font-size-base;
@form-help-margin-top: (@form-component-height - @form-component-max-height) / 2 + 2px;

.@{form-prefix-cls} {
  .reset-component;
  .reset-form;
}

.@{form-prefix-cls}-item-required:before {
  display: inline-block;
  margin-right: 4px;
  content: "*";
  font-family: SimSun;
  line-height: 1;
  font-size: @font-size-base;
  color: @label-required-color;
  .@{form-prefix-cls}-hide-required-mark & {
    display: none;
  }
}

// Radio && Checkbox
input[type="radio"],
input[type="checkbox"] {
  &[disabled],
  &.disabled {
    cursor: not-allowed;
  }
}

// These classes are used directly on <label>s
.@{ant-prefix}-radio-inline,
.@{ant-prefix}-radio-vertical,
.@{ant-prefix}-checkbox-inline,
.@{ant-prefix}-checkbox-vertical {
  &.disabled {
    cursor: not-allowed;
  }
}

// These classes are used on elements with <label> descendants
.@{ant-prefix}-radio,
.@{ant-prefix}-checkbox {
  &.disabled {
    label {
      cursor: not-allowed;
    }
  }
}

// Form items
// You should wrap labels and controls in .@{form-prefix-cls}-item for optimum spacing
.@{form-prefix-cls}-item {
  label {
    position: relative;

    > .@{iconfont-css-prefix} {
      vertical-align: top;
      font-size: @font-size-base;
    }
  }

  .reset-component;
  margin-bottom: @form-item-margin-bottom;
  vertical-align: top;

  // nested FormItem
  &-control > &:last-child,
  & [class^="@{ant-prefix}-col-"] > &:only-child {
    margin-bottom: -@form-item-margin-bottom;
  }

  &-control {
    line-height: @form-component-max-height - 0.0001px; // https://github.com/ant-design/ant-design/issues/8220
    position: relative;
    .clearfix;
  }

  &-children {
    position: relative;
  }

  &-with-help {
    margin-bottom: @form-item-margin-bottom - @font-size-base * @line-height-base - @form-help-margin-top;
  }

  &-label {
    text-align: right;
    vertical-align: middle;
    line-height: @form-component-max-height - 0.0001px;
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;

    label {
      color: @label-color;

      &:after {
        & when (@form-item-trailing-colon=true) {
          content: ":";
        }
        & when not (@form-item-trailing-colon=true) {
          content: " ";
        }
        margin: 0 8px 0 2px;
        position: relative;
        top: -0.5px;
      }
    }
  }

  .@{ant-prefix}-switch {
    margin: 2px 0 4px;
  }

  &-no-colon &-label label:after {
    content: " ";
  }
}

.@{form-prefix-cls}-explain,
.@{form-prefix-cls}-extra {
  color: @text-color-secondary;
  line-height: @line-height-base;
  transition: color .3s @ease-out; // sync input color transition
  margin-top: @form-help-margin-top;
  clear: both;
}

.@{form-prefix-cls}-extra {
  padding-top: 4px;
}

.@{form-prefix-cls}-text {
  display: inline-block;
  padding-right: 8px;
}

.@{form-prefix-cls}-split {
  display: block;
  text-align: center;
}

// 表单下的输入框尺寸唯一: 大尺寸
form {
  .has-feedback {
    .@{ant-prefix}-input {
      padding-right: 24px;
    }

    // Fix overlapping between feedback icon and <Select>'s arrow.
    // https://github.com/ant-design/ant-design/issues/4431
    > .@{ant-prefix}-select .@{ant-prefix}-select-arrow,
    > .@{ant-prefix}-select .@{ant-prefix}-select-selection__clear,
    :not(.@{ant-prefix}-input-group-addon) > .@{ant-prefix}-select .@{ant-prefix}-select-arrow,
    :not(.@{ant-prefix}-input-group-addon) > .@{ant-prefix}-select .@{ant-prefix}-select-selection__clear {
      right: 28px;
    }
    > .@{ant-prefix}-select .@{ant-prefix}-select-selection-selected-value,
    :not(.@{ant-prefix}-input-group-addon) > .@{ant-prefix}-select .@{ant-prefix}-select-selection-selected-value {
      padding-right: 42px;
    }

    .@{ant-prefix}-cascader-picker {
      &-arrow {
        margin-right: 17px;
      }
      &-clear {
        right: 28px;
      }
    }

    // Fix issue: https://github.com/ant-design/ant-design/issues/7854
    .@{ant-prefix}-input-search:not(.@{ant-prefix}-input-search-enter-button) {
      .@{ant-prefix}-input-suffix {
        right: 28px;
      }
    }

    // Fix issue: https://github.com/ant-design/ant-design/issues/4783
    .@{ant-prefix}-calendar-picker,
    .@{ant-prefix}-time-picker {
      &-icon,
      &-clear {
        right: 28px;
      }
    }
  }

  textarea.@{ant-prefix}-input {
    height: auto;
  }

  // input[type=file]
  .@{ant-prefix}-upload {
    background: transparent;
  }

  input[type="radio"],
  input[type="checkbox"] {
    width: 14px;
    height: 14px;
  }

  // Radios and checkboxes on same line
  .@{ant-prefix}-radio-inline,
  .@{ant-prefix}-checkbox-inline {
    display: inline-block;
    vertical-align: middle;
    font-weight: normal;
    cursor: pointer;
    margin-left: 8px;

    &:first-child {
      margin-left: 0;
    }
  }

  .@{ant-prefix}-checkbox-vertical,
  .@{ant-prefix}-radio-vertical {
    display: block;
  }

  .@{ant-prefix}-checkbox-vertical + .@{ant-prefix}-checkbox-vertical,
  .@{ant-prefix}-radio-vertical + .@{ant-prefix}-radio-vertical {
    margin-left: 0;
  }

  .@{ant-prefix}-input-number {
    + .@{form-prefix-cls}-text {
      margin-left: 8px;
    }
    &-handler-wrap {
      z-index: 2; // https://github.com/ant-design/ant-design/issues/6289
    }
  }

  .@{ant-prefix}-select,
  .@{ant-prefix}-cascader-picker {
    width: 100%;
  }

  // Don't impact select inside input group
  .@{ant-prefix}-input-group .@{ant-prefix}-select,
  .@{ant-prefix}-input-group .@{ant-prefix}-cascader-picker {
    width: auto;
  }

  // fix input with addon position. https://github.com/ant-design/ant-design/issues/8243
  :not(.@{ant-prefix}-input-group-wrapper) > .@{ant-prefix}-input-group,
  .@{ant-prefix}-input-group-wrapper {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    top: -1px;
  }
}

// Input combined with select
.@{ant-prefix}-input-group-wrap {
  .@{ant-prefix}-select-selection {
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    &:hover {
      border-color: @border-color-base;
    }
  }

  .@{ant-prefix}-select-selection--single {
    margin-left: -1px;
    height: @input-height-lg;
    background-color: #eee;
    .@{ant-prefix}-select-selection__rendered {
      padding-left: 8px;
      padding-right: 25px;
      line-height: 30px;
    }
  }

  .@{ant-prefix}-select-open .@{ant-prefix}-select-selection {
    border-color: @border-color-base;
    box-shadow: none;
  }
}

// Form layout
//== Vertical Form
.make-vertical-layout-label() {
  padding: @form-vertical-label-padding;
  margin: @form-vertical-label-margin;
  display: block;
  text-align: left;
  line-height: @line-height-base;

  label:after {
    display: none;
  }
}

.make-vertical-layout() {
  .@{form-prefix-cls}-item-label,
  .@{form-prefix-cls}-item-control-wrapper {
    display: block;
    width: 100%;
  }
  .@{form-prefix-cls}-item-label {
    .make-vertical-layout-label();
  }
}

.@{form-prefix-cls}-vertical .@{form-prefix-cls}-item-label,
  // when labelCol is 24, it is a vertical form
.@{ant-prefix}-col-24.@{form-prefix-cls}-item-label,
.@{ant-prefix}-col-xl-24.@{form-prefix-cls}-item-label {
  .make-vertical-layout-label();
}

.@{form-prefix-cls}-vertical {
  .@{form-prefix-cls}-item {
    padding-bottom: 8px;
  }
  .@{form-prefix-cls}-item-control {
    line-height: @line-height-base;
  }
  .@{form-prefix-cls}-explain,
  .@{form-prefix-cls}-extra {
    margin-top: 2px;
    margin-bottom: -4px;
  }
}

@media (max-width: @screen-xs-max) {
  .make-vertical-layout();
  .@{ant-prefix}-col-xs-24.@{form-prefix-cls}-item-label {
    .make-vertical-layout-label();
  }
}

@media (max-width: @screen-sm-max) {
  .@{ant-prefix}-col-sm-24.@{form-prefix-cls}-item-label {
    .make-vertical-layout-label();
  }
}

@media (max-width: @screen-md-max) {
  .@{ant-prefix}-col-md-24.@{form-prefix-cls}-item-label {
    .make-vertical-layout-label();
  }
}

@media (max-width: @screen-lg-max) {
  .@{ant-prefix}-col-lg-24.@{form-prefix-cls}-item-label {
    .make-vertical-layout-label();
  }
}

@media (max-width: @screen-xl-max) {
  .@{ant-prefix}-col-xl-24.@{form-prefix-cls}-item-label {
    .make-vertical-layout-label();
  }
}

//== Inline Form
.@{form-prefix-cls}-inline {
  .@{form-prefix-cls}-item {
    display: inline-block;
    margin-right: 16px;
    margin-bottom: 0;

    &-with-help {
      margin-bottom: 24px;
    }

    > .@{form-prefix-cls}-item-control-wrapper, > .@{form-prefix-cls}-item-label {
      display: inline-block;
      vertical-align: middle;
    }
  }

  .@{form-prefix-cls}-text {
    display: inline-block;
  }

  .has-feedback {
    display: inline-block;
  }

  // Fix https://github.com/ant-design/ant-design/issues/1040
  .@{form-prefix-cls}-explain {
    position: absolute;
  }
}

// Validation state
.has-success,
.has-warning,
.has-error,
.is-validating {
  &.has-feedback .@{form-prefix-cls}-item-children-icon {
    position: absolute;
    top: 50%;
    right: 0;
    visibility: visible;
    pointer-events: none;
    width: @form-component-height;
    height: 20px;
    line-height: 20px;
    margin-top: -10px;
    text-align: center;
    font-size: @form-feedback-icon-size;
    animation: zoomIn .3s @ease-out-back;
    z-index: 1;

    & svg {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      margin: auto;
    }
  }
}

.has-success {
  &.has-feedback .@{form-prefix-cls}-item-children-icon {
    animation-name: diffZoomIn1 !important;
    color: @success-color;
  }
}

.has-warning {
  .form-control-validation(@warning-color; @warning-color;);

  &.has-feedback .@{form-prefix-cls}-item-children-icon {
    color: @warning-color;
    animation-name: diffZoomIn3 !important;
  }

  //select
  .@{ant-prefix}-select {
    &-selection {
      border-color: @warning-color;
    }
    &-open .@{ant-prefix}-select-selection,
    &-focused .@{ant-prefix}-select-selection {
      .active(@warning-color);
    }
  }

  // arrow and icon
  .@{ant-prefix}-calendar-picker-icon:after,
  .@{ant-prefix}-time-picker-icon:after,
  .@{ant-prefix}-picker-icon:after,
  .@{ant-prefix}-select-arrow,
  .@{ant-prefix}-cascader-picker-arrow {
    color: @warning-color;
  }

  //input-number, timepicker
  .@{ant-prefix}-input-number,
  .@{ant-prefix}-time-picker-input {
    border-color: @warning-color;
    &-focused,
    &:focus {
      .active(@warning-color);
    }
    &:not([disabled]):hover {
      border-color: @warning-color;
    }
  }

  .@{ant-prefix}-cascader-picker:focus .@{ant-prefix}-cascader-input {
    .active(@warning-color);
  }
}

.has-error {
  .form-control-validation(@error-color; @error-color;);

  &.has-feedback .@{form-prefix-cls}-item-children-icon {
    color: @error-color;
    animation-name: diffZoomIn2 !important;
  }

  //select
  .@{ant-prefix}-select {
    &-selection {
      border-color: @error-color;
    }
    &-open .@{ant-prefix}-select-selection,
    &-focused .@{ant-prefix}-select-selection {
      .active(@error-color);
    }
  }

  .@{ant-prefix}-select.@{ant-prefix}-select-auto-complete {
    .@{ant-prefix}-input:focus {
      border-color: @error-color;
    }
  }

  .@{ant-prefix}-input-group-addon .@{ant-prefix}-select {
    &-selection {
      border-color: transparent;
      box-shadow: none;
    }
  }

  // arrow and icon
  .@{ant-prefix}-calendar-picker-icon:after,
  .@{ant-prefix}-time-picker-icon:after,
  .@{ant-prefix}-picker-icon:after,
  .@{ant-prefix}-select-arrow,
  .@{ant-prefix}-cascader-picker-arrow {
    color: @error-color;
  }

  //input-number, timepicker
  .@{ant-prefix}-input-number,
  .@{ant-prefix}-time-picker-input {
    border-color: @error-color;
    &-focused,
    &:focus {
      .active(@error-color);
    }
    &:not([disabled]):hover {
      border-color: @error-color;
    }
  }
  .@{ant-prefix}-mention-wrapper {
    .@{ant-prefix}-mention-editor {
      &,
      &:not([disabled]):hover {
        border-color: @error-color;
      }
    }
    &.@{ant-prefix}-mention-active:not([disabled]) .@{ant-prefix}-mention-editor,
    .@{ant-prefix}-mention-editor:not([disabled]):focus {
      .active(@error-color);
    }
  }

  .@{ant-prefix}-cascader-picker:focus .@{ant-prefix}-cascader-input {
    .active(@error-color);
  }
}

.is-validating {
  &.has-feedback .@{form-prefix-cls}-item-children-icon {
    display: inline-block;
    color: @primary-color;
  }
}

.@{ant-prefix}-advanced-search-form {
  .@{form-prefix-cls}-item {
    margin-bottom: @form-item-margin-bottom;

    &-with-help {
      margin-bottom: @form-item-margin-bottom - @font-size-base * @line-height-base - @form-help-margin-top;
    }
  }
}

.show-help-motion(@className, @keyframeName, @duration: @animation-duration-slow) {
  .make-motion(@className, @keyframeName, @duration);
  .@{className}-enter,
  .@{className}-appear {
    opacity: 0;
    animation-timing-function: @ease-in-out;
  }
  .@{className}-leave {
    animation-timing-function: @ease-in-out;
  }
}

.show-help-motion(show-help, antShowHelp, 0.3s);

@keyframes antShowHelpIn {
  0% {
    opacity: 0;
    transform: translateY(-5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes antShowHelpOut {
  to {
    opacity: 0;
    transform: translateY(-5px);
  }
}

// need there different zoom animation
// otherwise won't trigger anim
@keyframes diffZoomIn1 {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes diffZoomIn2 {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes diffZoomIn3 {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}

// Input styles
.@{ant-prefix}-input {
  .reset-component;
  .input;
}

//== Style for input-group: input with label, with button or dropdown...
.@{ant-prefix}-input-group {
  .reset-component;
  .input-group(~"@{ant-prefix}-input");
  &-wrapper {
    display: inline-block;
    vertical-align: top; // https://github.com/ant-design/ant-design/issues/6403
    width: 100%;
  }
}

// Input with affix: prefix or suffix
.@{ant-prefix}-input-affix-wrapper {
  .reset-component;
  .input-affix-wrapper(~"@{ant-prefix}-input");

  // https://github.com/ant-design/ant-design/issues/6144
  .@{ant-prefix}-input {
    min-height: 100%;  // use min-height, assume that no smaller height to override
  }
}

@search-prefix: ~"@{ant-prefix}-input-search";

.@{search-prefix} {
  &-icon {
    color: @text-color-secondary;
    cursor: pointer;
    transition: all .3s;
    &:hover {
      color: #333;
    }
  }

  &:not(&-small) > .@{ant-prefix}-input-suffix {
    right: @control-padding-horizontal;
  }

  > .@{ant-prefix}-input-suffix > .@{search-prefix}-button {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    > .@{iconfont-css-prefix}-search {
      font-size: @font-size-lg;
    }
  }

  &.@{search-prefix}-enter-button > .@{ant-prefix}-input {
    padding-right: 46px;
  }

  &.@{search-prefix}-enter-button > .@{ant-prefix}-input-suffix {
    right: 0;
  }
}

@input-number-prefix-cls: ~"@{ant-prefix}-input-number";

.@{input-number-prefix-cls} {
  .reset-component;
  .input;
  margin: 0;
  padding: 0;
  display: inline-block;
  border: @border-width-base @border-style-base @border-color-base;
  border-radius: @border-radius-base;
  width: 90px;

  &-handler {
    text-align: center;
    line-height: 0;
    height: 50%;
    overflow: hidden;
    color: @text-color-secondary;
    position: relative;
    transition: all 0.1s linear;
    display: block;
    width: 100%;
    font-weight: bold;
    &:active {
      background: #f4f4f4;
    }
    &:hover &-up-inner,
    &:hover &-down-inner {
      color: @primary-5;
    }
  }

  &-handler-up-inner,
  &-handler-down-inner {
    .iconfont-mixin();
    line-height: 12px;
    user-select: none;
    position: absolute;
    width: 12px;
    height: 12px;
    transition: all 0.1s linear;
    .iconfont-size-under-12px(7px);
    right: 4px;
    color: @text-color-secondary;
  }

  &:hover {
    .hover();
  }

  &-focused {
    .active();
  }

  &-disabled {
    .disabled();
    .@{input-number-prefix-cls}-input {
      cursor: not-allowed;
    }
    .@{input-number-prefix-cls}-handler-wrap {
      display: none;
    }
  }

  &-input {
    width: 100%;
    text-align: left;
    outline: 0;
    -moz-appearance: textfield;
    height: @input-height-base - 2px;
    transition: all 0.3s linear;
    background-color: transparent;
    border: 0;
    border-radius: @border-radius-base;
    padding: 0 @control-padding-horizontal - 1px;
    .placeholder();
  }

  &-lg {
    padding: 0;
    font-size: @font-size-lg;

    input {
      height: @input-height-lg - 2px;
    }
  }

  &-sm {
    padding: 0;

    input {
      height: @input-height-sm - 2px;
      padding: 0 @control-padding-horizontal-sm - 1px;
    }
  }

  &-handler-wrap {
    border-left: @border-width-base @border-style-base @border-color-base;
    width: 22px;
    height: 100%;
    background: @component-background;
    position: absolute;
    top: 0;
    right: 0;
    opacity: 0;
    border-radius: 0 @border-radius-base @border-radius-base 0;
    transition: opacity 0.24s linear 0.1s;
  }

  &-handler-wrap:hover &-handler {
    height: 40%;
  }

  &:hover &-handler-wrap {
    opacity: 1;
  }

  &-handler-up {
    cursor: pointer;
    &-inner {
      top: 50%;
      margin-top: -5px;
      text-align: center;
    }
    &:hover {
      height: 60% !important;
    }
  }

  &-handler-down {
    border-top: @border-width-base @border-style-base @border-color-base;
    top: 0;
    cursor: pointer;
    &-inner {
      top: 50%;
      margin-top: -6px;
      text-align: center;
    }
    &:hover {
      height: 60% !important;
    }
  }

  &-handler-up-disabled,
  &-handler-down-disabled {
    cursor: not-allowed;
  }

  &-handler-up-disabled:hover &-handler-up-inner,
  &-handler-down-disabled:hover &-handler-down-inner {
    color: @disabled-color;
  }
}

@layout-prefix-cls: ~"@{ant-prefix}-layout";

.@{layout-prefix-cls} {
  display: flex;
  flex-direction: column;
  flex: auto;
  background: @layout-body-background;
  /* fix firefox can't set height smaller than content on flex item */
  min-height: 0;

  &,
  * {
    box-sizing: border-box;
  }

  &&-has-sider {
    flex-direction: row;
    > .@{layout-prefix-cls},
    > .@{layout-prefix-cls}-content {
      overflow-x: hidden;
    }
  }

  &-header,
  &-footer {
    flex: 0 0 auto;
  }

  &-header {
    background: @layout-header-background;
    padding: @layout-header-padding;
    height: @layout-header-height;
    line-height: @layout-header-height;
  }

  &-footer {
    background: @layout-footer-background;
    padding: @layout-footer-padding;
    color: @text-color;
    font-size: @font-size-base;
  }

  &-content {
    flex: auto;
    /* fix firefox can't set height smaller than content on flex item */
    min-height: 0;
  }

  &-sider {
    transition: all .2s;
    position: relative;
    background: @layout-sider-background;

    /* fix firefox can't set width smaller than content on flex item */
    min-width: 0;

    &-children {
      height: 100%;
      // Hack for fixing margin collaspe bug
      // https://github.com/ant-design/ant-design/issues/7967
      // solution from https://stackoverflow.com/a/33132624/3040605
      padding-top: 0.1px;
      margin-top: -0.1px;
    }

    &-has-trigger {
      padding-bottom: @layout-trigger-height;
    }

    &-right {
      order: 1;
    }

    &-trigger {
      position: fixed;
      text-align: center;
      bottom: 0;
      cursor: pointer;
      height: @layout-trigger-height;
      line-height: @layout-trigger-height;
      color: @layout-trigger-color;
      background: @layout-trigger-background;
      z-index: 1;
      transition: all .2s;
    }

    &-zero-width {
      & > * {
        overflow: hidden;
      }

      &-trigger {
        position: absolute;
        top: @layout-header-height;
        right: -@layout-zero-trigger-width;
        text-align: center;
        width: @layout-zero-trigger-width;
        height: @layout-zero-trigger-height;
        line-height: @layout-zero-trigger-height;
        background: @layout-sider-background;
        color: @layout-trigger-color;
        font-size: @layout-zero-trigger-width / 2;
        border-radius: 0 @border-radius-base @border-radius-base 0;
        cursor: pointer;
        transition: background .3s ease;

        &:hover {
          background: tint(@layout-sider-background, 10%);
        }
      }
    }
  }
}

.@{layout-prefix-cls} {
  &-sider {
    &-light {
      background: @layout-sider-background-light;
    }
    &-light &-trigger {
      color: @layout-trigger-color-light;
      background: @layout-trigger-background-light;
    }
    &-light &-zero-width-trigger {
      color: @layout-trigger-color-light;
      background: @layout-trigger-background-light;
    }
  }
}

@list-prefix-cls: ~"@{ant-prefix}-list";

.@{list-prefix-cls} {
  .reset-component;
  position: relative;
  * {
    outline: none;
  }
  &-pagination {
    margin-top: 24px;
    text-align: right;
  }
  &-more {
    margin-top: 12px;
    text-align: center;
    button {
      padding-left: 32px;
      padding-right: 32px;
    }
  }
  &-spin {
    text-align: center;
    min-height: 40px;
  }
  &-empty-text {
    color: @text-color-secondary;
    font-size: @font-size-base;
    padding: @list-empty-text-padding;
    text-align: center;
  }
  &-item {
    align-items: center;
    display: flex;
    padding: @list-item-padding;
    &-meta {
      align-items: flex-start;
      display: flex;
      flex: 1;
      font-size: 0;
      &-avatar {
        margin-right: @list-item-meta-avatar-margin-right;
      }
      &-content {
        flex: 1 0;
      }
      &-title {
        color: @text-color;
        margin-bottom: 4px;
        font-size: @font-size-base;
        line-height: 22px;
        > a {
          color: @text-color;
          transition: all .3s;
          &:hover {
            color: @primary-color;
          }
        }
      }
      &-description {
        color: @text-color-secondary;
        font-size: @font-size-base;
        line-height: 22px;
      }
    }
    &-content {
      display: flex;
      flex: 1;
      justify-content: flex-end;
    }
    &-content-single {
      justify-content: flex-start;
    }
    &-action {
      font-size: 0;
      flex: 0 0 auto;
      margin-left: 48px;
      padding: 0;
      list-style: none;
      & > li {
        display: inline-block;
        color: @text-color-secondary;
        cursor: pointer;
        padding: 0 8px;
        position: relative;
        font-size: @font-size-base;
        line-height: 22px;
        text-align: center;
      }
      & > li:first-child {
        padding-left: 0;
      }
      &-split {
        background-color: @border-color-split;
        margin-top: -7px;
        position: absolute;
        top: 50%;
        right: 0;
        width: 1px;
        height: 14px;
      }
    }
    &-main {
      display: flex;
      flex: 1;
    }
  }

  &-header,
  &-footer {
    padding-top: 12px;
    padding-bottom: 12px;
  }

  &-empty {
    color: @text-color-secondary;
    padding: 16px 0;
    font-size: 12px;
    text-align: center;
  }

  &-split &-item {
    border-bottom: 1px solid @border-color-split;
    &:last-child {
      border-bottom: none;
    }
  }

  &-split &-header {
    border-bottom: 1px solid @border-color-split;
  }

  &-loading &-spin-nested-loading {
    min-height: 32px;
  }

  &-something-after-last-item .@{ant-prefix}-spin-container > &-item:last-child {
    border-bottom: 1px solid @border-color-split;
  }

  &-lg &-item {
    padding-top: 16px;
    padding-bottom: 16px;
  }

  &-sm &-item {
    padding-top: 8px;
    padding-bottom: 8px;
  }

  &-vertical &-item {
    display: block;
    &-extra-wrap {
      display: flex;
    }
    &-main {
      display: block;
      flex: 1;
    }
    &-extra {
      margin-left: 58px;
    }
    &-meta {
      margin-bottom: @list-item-meta-margin-bottom;
      &-avatar {
        display: none;
      }
      &-title {
        color: @heading-color;
        margin-bottom: @list-item-meta-title-margin-bottom;
        font-size: @font-size-lg;
        line-height: 24px;
      }
    }
    &-content {
      display: block;
      color: @text-color;
      font-size: @font-size-base;
      margin: @list-item-content-margin;
    }
    &-action {
      margin-left: auto;
      > li {
        padding: 0 16px;
        &:first-child {
          padding-left: 0;
        }
      }
    }
  }

  &-grid &-item {
    border-bottom: none;
    padding-top: 0;
    padding-bottom: 0;
    margin-bottom: 16px;
    &-content {
      display: block;
      max-width: 100%;
    }
  }
}

.@{list-prefix-cls}-bordered {
  border-radius: @border-radius-base;
  border: 1px solid @border-color-base;
  .@{list-prefix-cls}-header {
    padding-left: 24px;
    padding-right: 24px;
  }

  .@{list-prefix-cls}-footer {
    padding-left: 24px;
    padding-right: 24px;
  }

  .@{list-prefix-cls}-item {
    border-bottom: 1px solid @border-color-split;
    padding-left: 24px;
    padding-right: 24px;
  }

  .@{list-prefix-cls}-pagination {
    margin: 16px 24px;
  }

  &.@{list-prefix-cls}-sm {
    .@{list-prefix-cls}-item {
      padding-left: 16px;
      padding-right: 16px;
    }
    .@{list-prefix-cls}-header,
    .@{list-prefix-cls}-footer {
      padding: 8px 16px;
    }
  }

  &.@{list-prefix-cls}-lg {
    .@{list-prefix-cls}-header,
    .@{list-prefix-cls}-footer {
      padding: 16px 24px;
    }
  }
}

@media screen and (max-width: @screen-md) {
  .@{list-prefix-cls} {
    &-item {
      &-action {
        margin-left: 24px;
      }
    }
  }

  .@{list-prefix-cls}-vertical {
    .@{list-prefix-cls}-item {
      &-extra {
        margin-left: 24px;
      }
    }
  }
}

@media screen and (max-width: @screen-xs) {
  .@{list-prefix-cls} {
    &-item {
      flex-wrap: wrap;
      &-action {
        margin-left: 12px;
      }
    }
  }

  .@{list-prefix-cls}-vertical {
    .@{list-prefix-cls}-item {
      &-extra-wrap {
        flex-wrap: wrap-reverse;
      }
      &-main {
        min-width: 220px;
      }
      &-extra {
        margin-left: 0;
      }
    }
  }
}

@menu-prefix-cls: ~"@{ant-prefix}-menu";

// default theme
.@{menu-prefix-cls} {
  .reset-component;
  outline: none;
  margin-bottom: 0;
  padding-left: 0; // Override default ul/ol
  list-style: none;
  box-shadow: @box-shadow-base;
  color: @menu-item-color;
  background: @menu-bg;
  line-height: 0; // Fix display inline-block gap
  transition: background .3s, width .2s;
  .clearfix;

  ul,
  ol {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  &-hidden {
    display: none;
  }

  &-item-group-title {
    color: @menu-item-group-title-color;
    font-size: @font-size-base;
    line-height: @line-height-base;
    padding: 8px 16px;
    transition: all .3s;
  }

  &-submenu,
  &-submenu-inline {
    transition: border-color .3s @ease-in-out, background .3s @ease-in-out, padding .15s @ease-in-out;
  }

  &-item:active,
  &-submenu-title:active {
    background: @menu-item-active-bg;
  }

  &-submenu &-sub {
    cursor: initial;
    transition: background .3s @ease-in-out, padding .3s @ease-in-out;
  }

  &-item > a {
    display: block;
    color: @menu-item-color;
    &:hover {
      color: @menu-highlight-color;
    }
    &:focus {
      text-decoration: none;
    }
    &:before {
      position: absolute;
      background-color: transparent;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      content: '';
    }
  }

  &-item-divider {
    height: 1px;
    overflow: hidden;
    background-color: @border-color-split;
    line-height: 0;
  }

  &-item:hover,
  &-item-active,
  &:not(&-inline) &-submenu-open,
  &-submenu-active,
  &-submenu-title:hover {
    color: @menu-highlight-color;
  }

  &-horizontal &-item,
  &-horizontal &-submenu {
    margin-top: -1px;
  }

  &-horizontal > &-item:hover,
  &-horizontal > &-item-active,
  &-horizontal > &-submenu &-submenu-title:hover {
    background-color: transparent;
  }

  &-item-selected {
    color: @menu-highlight-color;
    > a,
    > a:hover {
      color: @menu-highlight-color;
    }
  }

  &:not(&-horizontal) &-item-selected {
    background-color: @menu-item-active-bg;
  }

  &-inline,
  &-vertical,
  &-vertical-left {
    border-right: @border-width-base @border-style-base @border-color-split;
  }
  &-vertical-right {
    border-left: @border-width-base @border-style-base @border-color-split;
  }

  &-vertical&-sub,
  &-vertical-left&-sub,
  &-vertical-right&-sub {
    border-right: 0;
    padding: 0;
    transform-origin: 0 0;
    .@{menu-prefix-cls}-item {
      border-right: 0;
      margin-left: 0;
      left: 0;
      &:after {
        border-right: 0;
      }
    }
    > .@{menu-prefix-cls}-item,
    > .@{menu-prefix-cls}-submenu {
      transform-origin: 0 0;
    }
  }

  &-horizontal&-sub,
  &-vertical&-sub,
  &-vertical-left&-sub,
  &-vertical-right&-sub {
    min-width: 160px;
  }

  &-item,
  &-submenu-title {
    cursor: pointer;
    margin: 0;
    padding: 0 20px;
    position: relative;
    display: block;
    white-space: nowrap;
    transition: color .3s @ease-in-out, border-color .3s @ease-in-out, background .3s @ease-in-out, padding .15s @ease-in-out;
    .@{iconfont-css-prefix} {
      min-width: 14px;
      margin-right: 10px;
      font-size: @font-size-base;
      transition: font-size .15s @ease-out, margin .3s @ease-in-out;
      + span {
        transition: opacity .3s @ease-in-out, width .3s @ease-in-out;
        opacity: 1;
      }
    }
  }

  & > &-item-divider {
    height: 1px;
    margin: 1px 0;
    overflow: hidden;
    padding: 0;
    line-height: 0;
    background-color: @border-color-split;
  }

  &-submenu {
    &-popup {
      position: absolute;
      border-radius: @border-radius-base;
      z-index: @zindex-dropdown;

      .submenu-title-wrapper {
        padding-right: 20px;
      }

      &:before {
        position: absolute;
        top: -7px;
        left: 0;
        right: 0;
        bottom: 0;
        content: ' ';
        opacity: .0001;
      }
    }

    > .@{menu-prefix-cls} {
      background-color: @menu-bg;
      border-radius: @border-radius-base;
      &-submenu-title:after {
        transition: transform .3s @ease-in-out;
      }
    }

    &-vertical,
    &-vertical-left,
    &-vertical-right,
    &-inline {
      > .@{menu-prefix-cls}-submenu-title .@{menu-prefix-cls}-submenu-arrow {
        transition: transform .3s @ease-in-out;
        position: absolute;
        top: 50%;
        right: 16px;
        width: 10px;
        &:before,
        &:after {
          content: '';
          position: absolute;
          vertical-align: baseline;
          background: #fff;
          background-image: linear-gradient(to right, @menu-item-color, @menu-item-color);
          width: 6px;
          height: 1.5px;
          border-radius: 2px;
          transition: background .3s @ease-in-out, transform .3s @ease-in-out, top .3s @ease-in-out;
        }
        &:before {
          transform: rotate(45deg) translateY(-2px);
        }
        &:after {
          transform: rotate(-45deg) translateY(2px);
        }
      }
      > .@{menu-prefix-cls}-submenu-title:hover .@{menu-prefix-cls}-submenu-arrow {
        &:after,
        &:before {
          background: linear-gradient(to right, @menu-highlight-color, @menu-highlight-color);
        }
      }
    }

    &-inline > .@{menu-prefix-cls}-submenu-title .@{menu-prefix-cls}-submenu-arrow {
      &:before {
        transform: rotate(-45deg) translateX(2px);
      }
      &:after {
        transform: rotate(45deg) translateX(-2px);
      }
    }

    &-open {
      &.@{menu-prefix-cls}-submenu-inline > .@{menu-prefix-cls}-submenu-title .@{menu-prefix-cls}-submenu-arrow {
        transform: translateY(-2px);
        &:after {
          transform: rotate(-45deg) translateX(-2px);
        }
        &:before {
          transform: rotate(45deg) translateX(2px);
        }
      }
    }
  }

  &-vertical &-submenu-selected,
  &-vertical-left &-submenu-selected,
  &-vertical-right &-submenu-selected {
    color: @menu-highlight-color;
    > a {
      color: @menu-highlight-color;
    }
  }

  &-horizontal {
    border: 0;
    border-bottom: @border-width-base @border-style-base @border-color-split;
    box-shadow: none;
    line-height: 46px;
    white-space: nowrap;

    > .@{menu-prefix-cls}-item,
    > .@{menu-prefix-cls}-submenu {
      position: relative;
      top: 1px;
      display: inline-block;
      vertical-align: bottom;
      border-bottom: 2px solid transparent;

      &:hover,
      &-active,
      &-open,
      &-selected {
        border-bottom: 2px solid @menu-highlight-color;
        color: @menu-highlight-color;
      }
    }

    > .@{menu-prefix-cls}-item {
      > a {
        display: block;
        color: @menu-item-color;
        &:hover {
          color: @menu-highlight-color;
        }
        &:before {
          bottom: -2px;
        }
      }
      &-selected > a {
        color: @menu-highlight-color;
      }
    }

    &:after {
      content: "\20";
      display: block;
      height: 0;
      clear: both;
    }
  }

  &-vertical,
  &-vertical-left,
  &-vertical-right,
  &-inline {
    .@{menu-prefix-cls}-item {
      position: relative;
      &:after {
        content: "";
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        border-right: @menu-item-active-border-width solid @menu-highlight-color;
        transform: scaleY(.0001);
        opacity: 0;
        transition: transform .15s @ease-out, opacity .15s @ease-out;
      }
    }

    .@{menu-prefix-cls}-item,
    .@{menu-prefix-cls}-submenu-title {
      padding: 0 16px;
      font-size: @font-size-base;
      line-height: @menu-item-height;
      height: @menu-item-height;
      margin-top: 4px;
      margin-bottom: 4px;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    // disable margin collapsed
    .@{menu-prefix-cls}-submenu {
      padding-bottom: 0.01px;
    }

    .@{menu-prefix-cls}-item:not(:last-child) {
      margin-bottom: 8px;
    }

    > .@{menu-prefix-cls}-item,
    > .@{menu-prefix-cls}-submenu > .@{menu-prefix-cls}-submenu-title {
      line-height: @menu-inline-toplevel-item-height;
      height: @menu-inline-toplevel-item-height;
    }
  }

  &-inline {
    width: 100%;
    .@{menu-prefix-cls}-selected,
    .@{menu-prefix-cls}-item-selected {
      &:after {
        transition: transform .15s @ease-in-out, opacity .15s @ease-in-out;
        opacity: 1;
        transform: scaleY(1);
      }
    }

    .@{menu-prefix-cls}-item,
    .@{menu-prefix-cls}-submenu-title {
      width: ~"calc(100% + 1px)";
    }

    .@{menu-prefix-cls}-submenu-title {
      padding-right: 34px;
    }
  }

  &-inline-collapsed {
    width: @menu-collapsed-width;
    > .@{menu-prefix-cls}-item,
    > .@{menu-prefix-cls}-item-group > .@{menu-prefix-cls}-item-group-list > .@{menu-prefix-cls}-item,
    > .@{menu-prefix-cls}-item-group > .@{menu-prefix-cls}-item-group-list > .@{menu-prefix-cls}-submenu > .@{menu-prefix-cls}-submenu-title,
    > .@{menu-prefix-cls}-submenu > .@{menu-prefix-cls}-submenu-title {
      left: 0;
      text-overflow: clip;
      padding: 0 (@menu-collapsed-width - 16px) / 2 !important;
      .@{menu-prefix-cls}-submenu-arrow {
        display: none;
      }
      .@{iconfont-css-prefix} {
        font-size: 16px;
        line-height: @menu-item-height;
        margin: 0;
        + span {
          max-width: 0;
          display: inline-block;
          opacity: 0;
        }
      }
    }
    &-tooltip {
      pointer-events: none;
      .@{iconfont-css-prefix} {
        display: none;
      }
      a {
        color: @text-color-dark;
      }
    }

    .@{menu-prefix-cls}-item-group-title {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      padding-left: 4px;
      padding-right: 4px;
    }
  }

  &-item-group-list {
    margin: 0;
    padding: 0;
    .@{menu-prefix-cls}-item,
    .@{menu-prefix-cls}-submenu-title {
      padding: 0 16px 0 28px;
    }
  }

  &-root&-vertical,
  &-root&-vertical-left,
  &-root&-vertical-right,
  &-root&-inline {
    box-shadow: none;
  }

  &-sub&-inline {
    padding: 0;
    border: 0;
    box-shadow: none;
    border-radius: 0;
    & > .@{menu-prefix-cls}-item,
    & > .@{menu-prefix-cls}-submenu > .@{menu-prefix-cls}-submenu-title {
      line-height: @menu-item-height;
      height: @menu-item-height;
      list-style-type: disc;
      list-style-position: inside;
    }

    & .@{menu-prefix-cls}-item-group-title {
      padding-left: 32px;
    }
  }

  // Disabled state sets text to gray and nukes hover/tab effects
  &-item-disabled,
  &-submenu-disabled {
    color: @disabled-color !important;
    cursor: not-allowed;
    background: none;
    border-color: transparent !important;
    > a {
      color: @disabled-color !important;
      pointer-events: none;
    }
    > .@{menu-prefix-cls}-submenu-title {
      color: @disabled-color !important;
      cursor: not-allowed;
      > .@{menu-prefix-cls}-submenu-arrow {
        &:before,
        &:after {
          background: @disabled-color !important;
        }
      }
    }
  }
}

.@{menu-prefix-cls} {
  // dark theme
  &-dark,
  &-dark &-sub {
    color: @menu-dark-color;
    background: @menu-dark-bg;
    .@{menu-prefix-cls}-submenu-title .@{menu-prefix-cls}-submenu-arrow {
      opacity: .45;
      transition: all .3s;
      &:after,
      &:before {
        background: @menu-dark-arrow-color;
      }
    }
  }

  &-dark&-submenu-popup {
    background: transparent;
  }

  &-dark &-inline&-sub {
    background: @menu-dark-submenu-bg;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .45) inset;
  }

  &-dark&-horizontal {
    border-bottom: 0;
  }

  &-dark&-horizontal > &-item,
  &-dark&-horizontal > &-submenu {
    border-color: @menu-dark-bg;
    border-bottom: 0;
    top: 0;
    margin-top: 0;
  }

  &-dark&-horizontal > &-item > a:before {
    bottom: 0;
  }

  &-dark &-item,
  &-dark &-item-group-title,
  &-dark &-item > a {
    color: @menu-dark-color;
  }

  &-dark&-inline,
  &-dark&-vertical,
  &-dark&-vertical-left,
  &-dark&-vertical-right {
    border-right: 0;
  }

  &-dark&-inline &-item,
  &-dark&-vertical &-item,
  &-dark&-vertical-left &-item,
  &-dark&-vertical-right &-item {
    border-right: 0;
    margin-left: 0;
    left: 0;
    &:after {
      border-right: 0;
    }
  }

  &-dark&-inline &-item,
  &-dark&-inline &-submenu-title {
    width: 100%;
  }

  &-dark &-item:hover,
  &-dark &-item-active,
  &-dark &-submenu-active,
  &-dark &-submenu-open,
  &-dark &-submenu-selected,
  &-dark &-submenu-title:hover {
    background-color: transparent;
    color: @menu-dark-highlight-color;
    > a {
      color: @menu-dark-highlight-color;
    }
    > .@{menu-prefix-cls}-submenu-title,
    > .@{menu-prefix-cls}-submenu-title:hover {
      > .@{menu-prefix-cls}-submenu-arrow {
        opacity: 1;
        &:after,
        &:before {
          background: @menu-dark-highlight-color;
        }
      }
    }
  }

  &-dark &-item-selected {
    border-right: 0;
    color: @menu-dark-highlight-color;
    &:after {
      border-right: 0;
    }
    > a,
    > a:hover {
      color: @menu-dark-highlight-color;
    }
  }

  &&-dark &-item-selected,
  &-submenu-popup&-dark &-item-selected {
    background-color: @menu-dark-item-selected-bg;
  }

  // Disabled state sets text to dark gray and nukes hover/tab effects
  &-dark &-item-disabled,
  &-dark &-submenu-disabled {
    &,
    > a {
      opacity: 0.8;
      color: @disabled-color-dark !important;
    }
    > .@{menu-prefix-cls}-submenu-title {
      color: @disabled-color-dark !important;
      > .@{menu-prefix-cls}-submenu-arrow {
        &:before,
        &:after {
          background: @disabled-color-dark !important;
        }
      }
    }
  }
}

@mention-prefix-cls: ~"@{ant-prefix}-mention";

.@{mention-prefix-cls}-wrapper {
  .reset-component;
  position: relative;
  display: inline-block;
  width: 100%;
  vertical-align: middle;

  .@{mention-prefix-cls}-editor {
    .input;
    min-height: @input-height-base;
    height: auto; // To override height in .input mixin
    line-height: @line-height-base;
    padding: 0;
    display: block;
    &-wrapper {
      overflow-y: auto;
      height: auto;
    }
  }
  &.@{mention-prefix-cls}-active:not(.disabled) .@{mention-prefix-cls}-editor {
    .active;
  }
  &.disabled .@{mention-prefix-cls}-editor {
    .disabled();
  }
  .public-DraftEditorPlaceholder-root {
    position: absolute;
    pointer-events: none;
    .public-DraftEditorPlaceholder-inner {
      color: @input-placeholder-color;
      opacity: 1;
      outline: none;
      white-space: pre-wrap;
      word-wrap: break-word;
      height: auto;
      padding: 5px @control-padding-horizontal - 1px;
    }
  }
  .DraftEditor-editorContainer .public-DraftEditor-content {
    height: auto;
    padding: 5px @control-padding-horizontal - 1px;
  }
}

.@{mention-prefix-cls}-dropdown {
  .reset-component;
  margin-top: 1.5em;
  max-height: 250px;
  min-width: 120px;
  background-color: @component-background;
  box-shadow: @box-shadow-base;
  border-radius: @border-radius-base;
  z-index: @zindex-dropdown;
  left: -9999px;
  top: -9999px;
  position: absolute;
  outline: none;
  overflow-x: hidden;
  overflow-y: auto;

  &-placement-top {
    margin-top: -0.1em;
  }

  &-notfound&-item {
    color: @disabled-color;

    .@{iconfont-css-prefix}-loading {
      color: @primary-color;
      text-align: center;
      display: block;
    }
  }
  &-item {
    position: relative;
    display: block;
    padding: 5px @control-padding-horizontal;
    line-height: 22px;
    font-weight: normal;
    color: @text-color;
    white-space: nowrap;
    cursor: pointer;
    text-overflow: ellipsis;
    overflow: hidden;
    transition: background 0.3s;

    &:hover {
      background-color: @item-hover-bg;
    }

    &.focus,
    &-active {
      background-color: @item-active-bg;
    }

    &-disabled {
      color: @disabled-color;
      cursor: not-allowed;

      &:hover {
        color: @disabled-color;
        background-color: @component-background;
        cursor: not-allowed;
      }
    }

    &-selected {
      &,
      &:hover {
        background-color: @background-color-base;
        font-weight: bold;
        color: @text-color;
      }
    }

    &-divider {
      height: 1px;
      margin: 1px 0;
      overflow: hidden;
      background-color: @border-color-split;
      line-height: 0;
    }
  }
}

@message-prefix-cls: ~"@{ant-prefix}-message";

.@{message-prefix-cls} {
  .reset-component;
  position: fixed;
  z-index: @zindex-message;
  width: 100%;
  top: 16px;
  left: 0;
  pointer-events: none;

  &-notice {
    padding: 8px;
    text-align: center;
    &:first-child {
      margin-top: -8px;
    }
  }

  &-notice-content {
    padding: @message-notice-content-padding;
    border-radius: @border-radius-base;
    box-shadow: @shadow-2;
    background: @component-background;
    display: inline-block;
    pointer-events: all;
  }

  &-success .@{iconfont-css-prefix} {
    color: @success-color;
  }

  &-error .@{iconfont-css-prefix} {
    color: @error-color;
  }

  &-warning .@{iconfont-css-prefix} {
    color: @warning-color;
  }

  &-info .@{iconfont-css-prefix},
  &-loading .@{iconfont-css-prefix} {
    color: @info-color;
  }

  .@{iconfont-css-prefix} {
    margin-right: 8px;
    font-size: @font-size-lg;
    top: 1px;
    position: relative;
  }

  &-notice.move-up-leave.move-up-leave-active {
    animation-name: MessageMoveOut;
    overflow: hidden;
    animation-duration: .3s;
  }
}

@keyframes MessageMoveOut {
  0% {
    opacity: 1;
    max-height: 150px;
    padding: 8px;
  }
  100% {
    opacity: 0;
    max-height: 0;
    padding: 0;
  }
}

@dialog-prefix-cls: ~"@{ant-prefix}-modal";
@table-prefix-cls: ~"@{ant-prefix}-table";

.@{dialog-prefix-cls} {
  .reset-component;
  position: relative;
  width: auto;
  margin: 0 auto;
  top: 100px;
  padding-bottom: 24px;

  &-wrap {
    position: fixed;
    overflow: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: @zindex-modal;
    -webkit-overflow-scrolling: touch;
    outline: 0;
  }

  &-title {
    margin: 0;
    font-size: @font-size-lg;
    line-height: 22px;
    font-weight: 500;
    color: @heading-color;
  }

  &-content {
    position: relative;
    background-color: @component-background;
    border: 0;
    border-radius: @border-radius-base;
    background-clip: padding-box;
    box-shadow: @shadow-2;
  }

  &-close {
    cursor: pointer;
    border: 0;
    background: transparent;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 10;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    transition: color .3s;
    color: @text-color-secondary;
    outline: 0;
    padding: 0;

    &-x {
      display: block;
      font-style: normal;
      vertical-align: baseline;
      text-align: center;
      text-transform: none;
      text-rendering: auto;
      width: 56px;
      height: 56px;
      line-height: 56px;
      font-size: @font-size-lg;
    }

    &:focus,
    &:hover {
      color: #444;
      text-decoration: none;
    }
  }

  &-header {
    padding: 16px 24px;
    border-radius: @border-radius-base @border-radius-base 0 0;
    background: @component-background;
    color: @text-color;
    border-bottom: @border-width-base @border-style-base @border-color-split;
  }

  &-body {
    padding: 24px;
    font-size: @font-size-base;
    line-height: @line-height-base;
    word-wrap: break-word;
  }

  &-footer {
    border-top: @border-width-base @border-style-base @border-color-split;
    padding: 10px 16px;
    text-align: right;
    border-radius: 0 0 @border-radius-base @border-radius-base;
    button + button {
      margin-left: 8px;
      margin-bottom: 0;
    }
  }

  &.zoom-enter,
  &.zoom-appear {
    animation-duration: @animation-duration-slow;
    transform: none; // reset scale avoid mousePosition bug
    opacity: 0;
    user-select: none; // https://github.com/ant-design/ant-design/issues/11777
  }

  &-mask {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background-color: @modal-mask-bg; // lesshint duplicateProperty: false
    height: 100%;
    z-index: @zindex-modal-mask;
    filter: ~"alpha(opacity=50)";

    &-hidden {
      display: none;
    }
  }

  &-open {
    overflow: hidden;
  }
}

.@{dialog-prefix-cls}-centered {
  text-align: center;
  &:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    width: 0;
  }
  .@{dialog-prefix-cls} {
    display: inline-block;
    vertical-align: middle;
    top: 0;
    text-align: left;
  }
}

@media (max-width: @screen-sm-max) {
  .@{dialog-prefix-cls} {
    width: auto !important;
    margin: 10px;
  }
  .@{dialog-prefix-cls}-centered {
    .@{dialog-prefix-cls} {
      flex: 1;
    }
  }
}

@confirm-prefix-cls: ~"@{ant-prefix}-modal-confirm";

.@{confirm-prefix-cls} {
  .@{ant-prefix}-modal-header {
    display: none;
  }

  .@{ant-prefix}-modal-close {
    display: none;
  }

  .@{ant-prefix}-modal-body {
    padding: 32px 32px 24px;
  }

  &-body-wrapper {
    .clearfix();
  }

  &-body {
    .@{confirm-prefix-cls}-title {
      color: @heading-color;
      font-weight: 500;
      font-size: @font-size-lg;
      line-height: 1.4;
      display: block;
      // create BFC to avoid
      // https://user-images.githubusercontent.com/507615/37702510-ba844e06-2d2d-11e8-9b67-8e19be57f445.png
      overflow: hidden;
    }

    .@{confirm-prefix-cls}-content {
      margin-left: 38px;
      font-size: @font-size-base;
      color: @text-color;
      margin-top: 8px;
    }

    > .@{iconfont-css-prefix} {
      font-size: 22px;
      margin-right: 16px;
      float: left;
    }
  }

  .@{confirm-prefix-cls}-btns {
    margin-top: 24px;
    float: right;

    button + button {
      margin-left: 8px;
      margin-bottom: 0;
    }
  }

  &-error &-body > .@{iconfont-css-prefix} {
    color: @error-color;
  }

  &-warning &-body > .@{iconfont-css-prefix},
  &-confirm &-body > .@{iconfont-css-prefix} {
    color: @warning-color;
  }

  &-info &-body > .@{iconfont-css-prefix} {
    color: @info-color;
  }

  &-success &-body > .@{iconfont-css-prefix} {
    color: @success-color;
  }
}

@notification-prefix-cls: ~"@{ant-prefix}-notification";
@notification-width: 384px;
@notification-padding-vertical: 16px;
@notification-padding-horizontal: 24px;
@notification-padding: @notification-padding-vertical @notification-padding-horizontal;
@notification-margin-bottom: 16px;

.@{notification-prefix-cls} {
  .reset-component;

  position: fixed;
  z-index: @zindex-notification;
  width: @notification-width;
  max-width: ~"calc(100vw - 32px)";
  margin-right: 24px;

  &-topLeft,
  &-bottomLeft {
    margin-left: 24px;
    margin-right: 0;

    .@{notification-prefix-cls}-fade-enter.@{notification-prefix-cls}-fade-enter-active,
    .@{notification-prefix-cls}-fade-appear.@{notification-prefix-cls}-fade-appear-active {
      animation-name: NotificationLeftFadeIn;
    }
  }

  &-close-icon {
    font-size: @font-size-base;
    cursor: pointer;
  }

  &-notice {
    padding: @notification-padding;
    border-radius: @border-radius-base;
    box-shadow: @shadow-2;
    background: @component-background;
    line-height: 1.5;
    position: relative;
    margin-bottom: @notification-margin-bottom;
    overflow: hidden;

    &-message {
      font-size: @font-size-lg;
      color: @heading-color;
      margin-bottom: 8px;
      line-height: 24px;
      display: inline-block;

      // https://github.com/ant-design/ant-design/issues/5846#issuecomment-296244140
      &-single-line-auto-margin {
        width: ~"calc(@{notification-width} - @{notification-padding-horizontal} * 2 - 24px - 48px - 100%)";
        background-color: transparent;
        pointer-events: none;
        display: block;
        max-width: 4px;
        &:before {
          content: '';
          display: block;
        }
      }
    }

    &-description {
      font-size: @font-size-base;
    }

    &-closable &-message {
      padding-right: 24px;
    }

    &-with-icon &-message {
      font-size: @font-size-lg;
      margin-left: 48px;
      margin-bottom: 4px;
    }

    &-with-icon &-description {
      margin-left: 48px;
      font-size: @font-size-base;
    }

    &-icon {
      position: absolute;
      font-size: 24px;
      line-height: 24px;
      margin-left: 4px;

      &-success {
        color: @success-color;
      }
      &-info {
        color: @info-color;
      }
      &-warning {
        color: @warning-color;
      }
      &-error {
        color: @error-color;
      }
    }

    &-close {
      position: absolute;
      right: 22px;
      top: 16px;
      color: @text-color-secondary;
      outline: none;

      a&:focus {
        text-decoration: none;
      }

      &:hover {
        color: shade(@text-color-secondary, 40%);
      }
    }

    &-btn {
      float: right;
      margin-top: 16px;
    }
  }

  .notification-fade-effect {
    animation-duration: 0.24s;
    animation-fill-mode: both;
    animation-timing-function: @ease-in-out;
  }

  &-fade-enter,
  &-fade-appear {
    opacity: 0;
    .notification-fade-effect();
    animation-play-state: paused;
  }

  &-fade-leave {
    .notification-fade-effect();
    animation-duration: 0.2s;
    animation-play-state: paused;
  }

  &-fade-enter&-fade-enter-active,
  &-fade-appear&-fade-appear-active {
    animation-name: NotificationFadeIn;
    animation-play-state: running;
  }

  &-fade-leave&-fade-leave-active {
    animation-name: NotificationFadeOut;
    animation-play-state: running;
  }
}

@keyframes NotificationFadeIn {
  0% {
    opacity: 0;
    left: @notification-width;
  }
  100% {
    left: 0;
    opacity: 1;
  }
}

@keyframes NotificationLeftFadeIn {
  0% {
    opacity: 0;
    right: @notification-width;
  }
  100% {
    right: 0;
    opacity: 1;
  }
}

@keyframes NotificationFadeOut {
  0% {
    opacity: 1;
    margin-bottom: @notification-margin-bottom;
    padding-top: @notification-padding;
    padding-bottom: @notification-padding;
    max-height: 150px;
  }
  100% {
    opacity: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    max-height: 0;
  }
}

@pagination-prefix-cls: ~"@{ant-prefix}-pagination";

.@{pagination-prefix-cls} {
  .reset-component;

  ul,
  ol {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  &:after {
    content: " ";
    display: block;
    height: 0;
    clear: both;
    overflow: hidden;
    visibility: hidden;
  }

  &-total-text {
    display: inline-block;
    vertical-align: middle;
    height: @pagination-item-size;
    line-height: @pagination-item-size - 2px;
    margin-right: 8px;
  }

  &-item {
    cursor: pointer;
    border-radius: @border-radius-base;
    user-select: none;
    min-width: @pagination-item-size;
    height: @pagination-item-size;
    line-height: @pagination-item-size - 2px;
    text-align: center;
    list-style: none;
    display: inline-block;
    vertical-align: middle;
    border: @border-width-base @border-style-base @border-color-base;
    background-color: @component-background;
    margin-right: 8px;
    font-family: @pagination-font-family;
    outline: 0;

    a {
      text-decoration: none;
      color: @text-color;
      transition: none;
      margin: 0 6px;
    }

    &:focus,
    &:hover {
      transition: all .3s;
      border-color: @primary-color;
      a {
        color: @primary-color;
      }
    }

    &-active {
      border-color: @primary-color;
      font-weight: @pagination-font-weight-active;

      a {
        color: @primary-color;
      }

      &:focus,
      &:hover {
        border-color: @primary-5;
      }

      &:focus a,
      &:hover a {
        color: @primary-5;
      }
    }
  }

  &-jump-prev,
  &-jump-next {
    outline: 0;
    .@{pagination-prefix-cls}-item-container {
      position: relative;

      .@{pagination-prefix-cls}-item-link-icon {
        .iconfont-size-under-12px(12px);
        color: @primary-color;
        letter-spacing: -1px;
        opacity: 0;
        transition: all .2s;
        &-svg {
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
          margin: auto;
        }
      }

      .@{pagination-prefix-cls}-item-ellipsis {
        position: absolute;
        display: block;
        letter-spacing: 2px;
        color: @disabled-color;
        text-align: center;
        opacity: 1;
        transition: all .2s;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto;
      }
    }

    &:focus,
    &:hover {
      .@{pagination-prefix-cls}-item-link-icon {
        opacity: 1;
      }
      .@{pagination-prefix-cls}-item-ellipsis {
        opacity: 0;
      }
    }
  }

  &-prev,
  &-jump-prev,
  &-jump-next {
    margin-right: 8px;
  }
  &-prev,
  &-next,
  &-jump-prev,
  &-jump-next {
    font-family: @pagination-font-family;
    cursor: pointer;
    color: @text-color;
    border-radius: @border-radius-base;
    list-style: none;
    min-width: @pagination-item-size;
    height: @pagination-item-size;
    line-height: @pagination-item-size;
    text-align: center;
    transition: all .3s;
    display: inline-block;
    vertical-align: middle;
  }

  &-prev,
  &-next {
    outline: 0;

    a {
      color: @text-color;
      user-select: none;
    }

    &:hover a {
      border-color: @primary-5;
    }

    .@{pagination-prefix-cls}-item-link {
      border: @border-width-base @border-style-base @border-color-base;
      background-color: @component-background;
      border-radius: @border-radius-base;
      outline: none;
      display: block;
      transition: all .3s;
      font-size: 12px;
      height: 100%;
      text-align: center;
    }

    &:focus .@{pagination-prefix-cls}-item-link,
    &:hover .@{pagination-prefix-cls}-item-link {
      border-color: @primary-color;
      color: @primary-color;
    }
  }

  &-disabled {
    &,
    &:hover,
    &:focus {
      cursor: not-allowed;
      a,
      .@{pagination-prefix-cls}-item-link {
        border-color: @border-color-base;
        color: @disabled-color;
        cursor: not-allowed;
      }
    }
  }

  &-slash {
    margin: 0 10px 0 5px;
  }

  &-options {
    display: inline-block;
    vertical-align: middle;
    margin-left: 16px;

    &-size-changer.@{ant-prefix}-select {
      display: inline-block;
      width: auto;
      margin-right: 8px;
    }

    &-quick-jumper {
      display: inline-block;
      vertical-align: top;
      height: @input-height-base;
      line-height: @input-height-base;

      input {
        .input;
        margin: 0 8px;
        width: 50px;
      }
    }
  }

  &-simple &-prev,
  &-simple &-next {
    height: @pagination-item-size-sm;
    line-height: @pagination-item-size-sm;
    vertical-align: top;
    .@{pagination-prefix-cls}-item-link {
      border: 0;
      height: @pagination-item-size-sm;
      &:after {
        height: @pagination-item-size-sm;
        line-height: @pagination-item-size-sm;
      }
    }
  }

  &-simple &-simple-pager {
    display: inline-block;
    margin-right: 8px;
    height: @pagination-item-size-sm;

    input {
      margin-right: 8px;
      box-sizing: border-box;
      background-color: @component-background;
      border-radius: @border-radius-base;
      border: @border-width-base @border-style-base @border-color-base;
      outline: none;
      padding: 0 6px;
      height: 100%;
      text-align: center;
      transition: border-color .3s;

      &:hover {
        border-color: @primary-color;
      }
    }
  }

  &.mini &-total-text,
  &.mini &-simple-pager {
    height: @pagination-item-size-sm;
    line-height: @pagination-item-size-sm;
  }

  &.mini &-item {
    margin: 0;
    min-width: @pagination-item-size-sm;
    height: @pagination-item-size-sm;
    line-height: @pagination-item-size-sm - 2px;
  }

  &.mini &-item:not(&-item-active) {
    background: transparent;
    border-color: transparent;
  }

  &.mini &-prev,
  &.mini &-next {
    margin: 0;
    min-width: @pagination-item-size-sm;
    height: @pagination-item-size-sm;
    line-height: @pagination-item-size-sm;
  }

  &.mini &-prev &-item-link,
  &.mini &-next &-item-link {
    border-color: transparent;
    background: transparent;
    &:after {
      height: @pagination-item-size-sm;
      line-height: @pagination-item-size-sm;
    }
  }

  &.mini &-jump-prev,
  &.mini &-jump-next {
    height: @pagination-item-size-sm;
    line-height: @pagination-item-size-sm;
    margin-right: 0;
  }

  &.mini &-options {
    margin-left: 2px;
    &-quick-jumper {
      height: @pagination-item-size-sm;
      line-height: @pagination-item-size-sm;

      input {
        .input-sm;
        width: 44px;
      }
    }
  }
}

@media only screen and (max-width: @screen-lg) {
  .@{pagination-prefix-cls}-item {
    &-after-jump-prev,
    &-before-jump-next {
      display: none;
    }
  }
}

@media only screen and (max-width: @screen-sm) {
  .@{pagination-prefix-cls}-options {
    display: none;
  }
}

//@import '../../style/index.less';
//
//// style dependencies
//@import '../../popover/style';
//@import '../../button/style';

@popover-prefix-cls: ~"@{ant-prefix}-popover";

.@{popover-prefix-cls} {
  .reset-component;
  position: absolute;
  top: 0;
  left: 0;
  z-index: @zindex-popover;
  cursor: auto;
  user-select: text;
  white-space: normal;
  font-weight: normal;
  text-align: left;

  &:after {
    content: "";
    position: absolute;
    background: rgba(255, 255, 255, 0.01);
  }

  &-hidden {
    display: none;
  }

  // Offset the popover to account for the popover arrow
  &-placement-top,
  &-placement-topLeft,
  &-placement-topRight {
    padding-bottom: @popover-distance;
  }

  &-placement-right,
  &-placement-rightTop,
  &-placement-rightBottom {
    padding-left: @popover-distance;
  }

  &-placement-bottom,
  &-placement-bottomLeft,
  &-placement-bottomRight {
    padding-top: @popover-distance;
  }

  &-placement-left,
  &-placement-leftTop,
  &-placement-leftBottom {
    padding-right: @popover-distance;
  }

  &-inner {
    background-color: @popover-bg;
    background-clip: padding-box;
    border-radius: @border-radius-base;
    box-shadow: @box-shadow-base;
  }

  &-title {
    min-width: @popover-min-width;
    margin: 0; // reset heading margin
    padding: 5px @padding-md 4px;
    min-height: 32px;
    border-bottom: 1px solid @border-color-split;
    color: @heading-color;
    font-weight: 500;
  }

  &-inner-content {
    padding: 12px @padding-md;
    color: @popover-color;
  }

  &-message {
    padding: 4px 0 12px;
    font-size: @font-size-base;
    color: @popover-color;
    position: relative;
    > .@{iconfont-css-prefix} {
      position: absolute;
      top: 8px; // 4px for padding-top, 4px for vertical middle;
      color: @warning-color;
      font-size: @font-size-base;
    }
    &-title {
      padding-left: @font-size-base + 8px;
    }
  }

  &-buttons {
    text-align: right;
    margin-bottom: 4px;
    button {
      margin-left: 8px;
    }
  }

  // Arrows
  // .popover-arrow is outer, .popover-arrow:after is inner

  &-arrow {
    background: @popover-bg;
    width: sqrt(@popover-arrow-width * @popover-arrow-width * 2);
    height: sqrt(@popover-arrow-width * @popover-arrow-width * 2);
    transform: rotate(45deg);
    position: absolute;
    display: block;
    border-color: transparent;
    border-style: solid;
  }

  &-placement-top > &-content > &-arrow,
  &-placement-topLeft > &-content >  &-arrow,
  &-placement-topRight > &-content >  &-arrow {
    bottom: @popover-distance - @popover-arrow-width + 1.5px;
    box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.07);
  }
  &-placement-top > &-content >  &-arrow {
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
  }
  &-placement-topLeft > &-content >  &-arrow {
    left: 16px;
  }
  &-placement-topRight > &-content >  &-arrow {
    right: 16px;
  }

  &-placement-right > &-content >  &-arrow,
  &-placement-rightTop > &-content >  &-arrow,
  &-placement-rightBottom > &-content >  &-arrow {
    left: @popover-distance - @popover-arrow-width + 2px;
    box-shadow: -3px 3px 7px rgba(0, 0, 0, 0.07);
  }
  &-placement-right > &-content >  &-arrow {
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
  }
  &-placement-rightTop > &-content >  &-arrow {
    top: 12px;
  }
  &-placement-rightBottom > &-content >  &-arrow {
    bottom: 12px;
  }

  &-placement-bottom > &-content >  &-arrow,
  &-placement-bottomLeft > &-content >  &-arrow,
  &-placement-bottomRight > &-content >  &-arrow {
    top: @popover-distance - @popover-arrow-width + 2px;
    box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.06);
  }
  &-placement-bottom > &-content >  &-arrow {
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
  }
  &-placement-bottomLeft > &-content >  &-arrow {
    left: 16px;
  }
  &-placement-bottomRight > &-content >  &-arrow {
    right: 16px;
  }

  &-placement-left > &-content >  &-arrow,
  &-placement-leftTop > &-content >  &-arrow,
  &-placement-leftBottom > &-content >  &-arrow {
    right: @popover-distance - @popover-arrow-width + 2px;
    box-shadow: 3px -3px 7px rgba(0, 0, 0, 0.07);
  }
  &-placement-left > &-content >  &-arrow {
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
  }
  &-placement-leftTop > &-content >  &-arrow {
    top: 12px;
  }
  &-placement-leftBottom > &-content >  &-arrow {
    bottom: 12px;
  }
}

@progress-prefix-cls: ~"@{ant-prefix}-progress";

.@{progress-prefix-cls} {
  .reset-component;
  display: inline-block;

  &-line {
    width: 100%;
    font-size: @font-size-base;
    position: relative;
  }

  &-small&-line,
  &-small&-line &-text .@{iconfont-css-prefix} {
    font-size: @font-size-sm;
  }

  &-outer {
    display: inline-block;
    width: 100%;
    margin-right: 0;
    padding-right: 0;
    .@{progress-prefix-cls}-show-info & {
      padding-right: ~"calc(2em + 8px)";
      margin-right: ~"calc(-2em - 8px)";
    }
  }

  &-inner {
    display: inline-block;
    width: 100%;
    background-color: @progress-remaining-color;
    border-radius: 100px;
    vertical-align: middle;
    position: relative;
  }

  &-circle-trail {
    stroke: @progress-remaining-color;
  }

  &-circle-path {
    stroke: @progress-default-color;
    animation: ~"@{ant-prefix}-progress-appear" .3s;
  }

  &-success-bg,
  &-bg {
    background-color: @progress-default-color;
    transition: all .4s @ease-out-circ 0s;
    position: relative;
  }

  &-success-bg {
    background-color: @success-color;
    position: absolute;
    top: 0;
    left: 0;
  }

  &-text {
    word-break: normal;
    width: 2em;
    text-align: left;
    font-size: 1em;
    margin-left: 8px;
    vertical-align: middle;
    display: inline-block;
    white-space: nowrap;
    color: @text-color-secondary;
    line-height: 1;
    .@{iconfont-css-prefix} {
      font-size: @font-size-base;
    }
  }

  &-status-active {
    .@{progress-prefix-cls}-bg:before {
      content: "";
      opacity: 0;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: @component-background;
      border-radius: 10px;
      animation: ~"@{ant-prefix}-progress-active" 2.4s @ease-out-quint infinite;
    }
  }

  &-status-exception {
    .@{progress-prefix-cls}-bg {
      background-color: @error-color;
    }
    .@{progress-prefix-cls}-text {
      color: @error-color;
    }
    .@{progress-prefix-cls}-circle-path {
      stroke: @error-color;
    }
  }

  &-status-success {
    .@{progress-prefix-cls}-bg {
      background-color: @success-color;
    }
    .@{progress-prefix-cls}-text {
      color: @success-color;
    }
    .@{progress-prefix-cls}-circle-path {
      stroke: @success-color;
    }
  }

  &-circle &-inner {
    position: relative;
    line-height: 1;
    background-color: transparent;
  }

  &-circle &-text {
    display: block;
    position: absolute;
    width: 100%;
    text-align: center;
    line-height: 1;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    margin: 0;
    color: @progress-text-color;
    overflow: hidden;
    text-overflow: ellipsis;

    .@{iconfont-css-prefix} {
      font-size: 14 / 12em;
    }
  }

  &-circle&-status-exception {
    .@{progress-prefix-cls}-text {
      color: @error-color;
    }
  }
  &-circle&-status-success {
    .@{progress-prefix-cls}-text {
      color: @success-color;
    }
  }
}

@keyframes ~"@{ant-prefix}-progress-active" {
  0% {
    opacity: 0.1;
    width: 0;
  }
  20% {
    opacity: 0.5;
    width: 0;
  }
  100% {
    opacity: 0;
    width: 100%;
  }
}

@radio-prefix-cls: ~"@{ant-prefix}-radio";
@radio-group-prefix-cls: ~"@{radio-prefix-cls}-group";
@radio-inner-prefix-cls: ~"@{radio-prefix-cls}-inner";
@radio-duration: .3s;

.@{radio-group-prefix-cls} {
  .reset-component;
  display: inline-block;
  line-height: unset;
}

// 一般状态
.@{radio-prefix-cls}-wrapper {
  .reset-component;
  display: inline-block;
  position: relative;
  white-space: nowrap;
  margin-right: 8px;
  cursor: pointer;
}

.@{radio-prefix-cls} {
  .reset-component;
  white-space: nowrap;
  outline: none;
  display: inline-block;
  position: relative;
  line-height: 1;
  vertical-align: sub;
  cursor: pointer;
  .@{radio-prefix-cls}-wrapper:hover &,
  &:hover,
  &-focused {
    .@{radio-inner-prefix-cls} {
      border-color: @radio-dot-color;
    }
  }
  &-checked:after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 1px solid @radio-dot-color;
    content: '';
    animation: antRadioEffect 0.36s ease-in-out;
    animation-fill-mode: both;
    visibility: hidden;
  }
  &:hover:after,
  .@{radio-prefix-cls}-wrapper:hover &:after {
    visibility: visible;
  }
  &-inner {
    &:after {
      @radio-dot-size: @radio-size - 8px;
      position: absolute;
      width: @radio-dot-size;
      height: @radio-dot-size;
      left: (@radio-size - @radio-dot-size) / 2 - 1px;
      top: (@radio-size - @radio-dot-size) / 2 - 1px;
      border-radius: @radio-dot-size;
      display: table;
      border-top: 0;
      border-left: 0;
      content: ' ';
      background-color: @radio-dot-color;
      opacity: 0;
      transform: scale(0);
      transition: all @radio-duration @ease-in-out-circ;
    }

    position: relative;
    top: 0;
    left: 0;
    display: block;
    width: @radio-size;
    height: @radio-size;
    border-width: 1px;
    border-style: solid;
    border-radius: 100px;
    border-color: @border-color-base;
    background-color: @radio-button-bg;
    transition: all @radio-duration;
  }

  &-input {
    position: absolute;
    left: 0;
    z-index: 1;
    cursor: pointer;
    opacity: 0;
    top: 0;
    bottom: 0;
    right: 0;
  }
}

// 选中状态
.@{radio-prefix-cls}-checked {
  .@{radio-inner-prefix-cls} {
    border-color: @radio-dot-color;
    &:after {
      transform: scale(.875);
      opacity: 1;
      transition: all @radio-duration @ease-in-out-circ;
    }
  }
}

.@{radio-prefix-cls}-disabled {
  .@{radio-inner-prefix-cls} {
    border-color: @border-color-base !important;
    background-color: @input-disabled-bg;
    &:after {
      background-color: #ccc;
    }
  }

  .@{radio-prefix-cls}-input {
    cursor: not-allowed;
  }

  & + span {
    color: @disabled-color;
    cursor: not-allowed;
  }
}

span.@{radio-prefix-cls} + * {
  padding-left: 8px;
  padding-right: 8px;
}

.@{radio-prefix-cls}-button-wrapper {
  margin: 0;
  height: @btn-height-base;
  line-height: @btn-height-base - 2px;
  color: @radio-button-color;
  display: inline-block;
  transition: all 0.3s ease;
  cursor: pointer;
  border: @border-width-base @border-style-base @border-color-base;
  border-left: 0;
  // strange align fix for chrome but works
  // https://gw.alipayobjects.com/zos/rmsportal/VFTfKXJuogBAXcvfAUWJ.gif
  border-top-width: @border-width-base + 0.02px;
  background: @radio-button-bg;
  padding: 0 @padding-md - 1px;
  position: relative;

  a {
    color: @radio-button-color;
  }

  > .@{radio-prefix-cls}-button {
    margin-left: 0;
    display: block;
    width: 0;
    height: 0;
  }

  .@{radio-group-prefix-cls}-large & {
    height: @input-height-lg;
    line-height: @input-height-lg - 2px;
    font-size: @font-size-lg;
  }

  .@{radio-group-prefix-cls}-small & {
    height: @input-height-sm;
    line-height: @input-height-sm - 2px;
    padding: 0 @control-padding-horizontal-sm - 1px;
  }

  &:not(:first-child) {
    &::before {
      content: "";
      display: block;
      top: 0;
      left: -1px;
      width: 1px;
      height: 100%;
      position: absolute;
      background-color: @border-color-base;
    }
  }
  &:first-child {
    border-radius: @border-radius-base 0 0 @border-radius-base;
    border-left: @border-width-base @border-style-base @border-color-base;
  }

  &:last-child {
    border-radius: 0 @border-radius-base @border-radius-base 0;
  }

  &:first-child:last-child {
    border-radius: @border-radius-base;
  }

  &:hover,
  &-focused {
    color: @radio-dot-color;
    position: relative;
  }

  .@{radio-prefix-cls}-inner,
  input[type="checkbox"],
  input[type="radio"] {
    opacity: 0;
    width: 0;
    height: 0;
  }

  &-checked {
    background: @radio-button-bg;
    border-color: @radio-dot-color;
    color: @radio-dot-color;
    box-shadow: -1px 0 0 0 @radio-dot-color;
    z-index: 1;
    &::before {
      background-color: @radio-dot-color !important;
      opacity: 0.1;
    }
    &:first-child {
      border-color: @radio-dot-color;
      box-shadow: none !important;
    }

    &:hover {
      border-color: @radio-button-hover-color;
      box-shadow: -1px 0 0 0 @radio-button-hover-color;
      color: @radio-button-hover-color;
    }

    &:active {
      border-color: @radio-button-active-color;
      box-shadow: -1px 0 0 0 @radio-button-active-color;
      color: @radio-button-active-color;
    }
  }

  .@{radio-group-prefix-cls}-solid &-checked:not(&-disabled) {
    background: @radio-dot-color;
    border-color: @radio-dot-color;
    color: #fff;
    &:hover {
      border-color: @radio-button-hover-color;
      background: @radio-button-hover-color;
      color: #fff;
    }
    &:active {
      border-color: @radio-button-active-color;
      background: @radio-button-active-color;
      color: #fff;
    }
  }

  &-disabled {
    border-color: @border-color-base;
    background-color: @input-disabled-bg;
    cursor: not-allowed;
    color: @disabled-color;

    &:first-child,
    &:hover {
      border-color: @border-color-base;
      background-color: @input-disabled-bg;
      color: @disabled-color;
    }
    &:first-child {
      border-left-color: @border-color-base;
    }
  }

  &-disabled&-checked {
    color: #fff;
    background-color: #e6e6e6;
    border-color: @border-color-base;
    box-shadow: none;
  }
}

@keyframes antRadioEffect {
  0% {
    transform: scale(1);
    opacity: 0.5;
  }
  100% {
    transform: scale(1.6);
    opacity: 0;
  }
}

// Firefox hack
@supports (-moz-appearance:meterbar) and (background-blend-mode:difference,normal) {
  .@{radio-prefix-cls} {
    vertical-align: text-bottom;
  }
}

@rate-prefix-cls: ~"@{ant-prefix}-rate";

.@{rate-prefix-cls} {
  .reset-component;
  line-height: unset;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 20px;
  display: inline-block;
  color: @rate-star-color;
  outline: none;

  &-disabled &-star {
    cursor: default;
    &:hover {
      transform: scale(1);
    }
  }

  &-star {
    margin: 0;
    padding: 0;
    display: inline-block;
    margin-right: 8px;
    position: relative;
    transition: all .3s;
    color: inherit;
    cursor: pointer;

    &:focus {
      outline: 0;
    }

    &-first,
    &-second {
      user-select: none;
      transition: all .3s;
      color: @rate-star-bg;
      .@{iconfont-css-prefix} {
        vertical-align: middle;
      }
    }

    &:hover,
    &:focus {
      transform: scale(1.1);
    }

    &-first {
      position: absolute;
      left: 0;
      top: 0;
      width: 50%;
      height: 100%;
      overflow: hidden;
      opacity: 0;
    }

    &-half &-first,
    &-half &-second {
      opacity: 1;
    }

    &-half &-first,
    &-full &-second {
      color: inherit;
    }
  }

  &-text {
    margin-left: 8px;
    display: inline-block;
    font-size: @font-size-base;
  }
}

@select-prefix-cls: ~"@{ant-prefix}-select";

.selection__clear() {
  display: inline-block;
  font-style: normal;
  vertical-align: baseline;
  text-align: center;
  text-transform: none;
  text-rendering: auto;
  opacity: 0;
  position: absolute;
  right: @control-padding-horizontal - 1px;
  z-index: 1;
  background: @component-background;
  top: 50%;
  font-size: @font-size-sm;
  color: @disabled-color;
  width: 12px;
  height: 12px;
  margin-top: -6px;
  line-height: 12px;
  cursor: pointer;
  transition: color 0.3s ease, opacity 0.15s ease;
  &:before {
    display: block;
  }
  &:hover {
    color: @text-color-secondary;
  }
}

.@{select-prefix-cls} {
  .reset-component;
  display: inline-block;
  position: relative;
  outline: 0;

  ul,
  ol {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  > ul > li > a {
    padding: 0;
    background-color: @component-background;
  }

  // arrow
  &-arrow {
    .iconfont-mixin();
    position: absolute;
    top: 50%;
    right: @control-padding-horizontal - 1px;
    line-height: 1;
    margin-top: -@font-size-sm / 2;
    transform-origin: 50% 50%;
    color: @disabled-color;
    font-size: @font-size-sm;

    & &-icon svg {
      transition: transform .3s;
    }
  }

  &-selection {
    outline: none;
    user-select: none;

    box-sizing: border-box;
    display: block;

    background-color: @component-background;
    border-radius: @border-radius-base;
    border: @border-width-base @border-style-base @border-color-base;
    // strange align fix for chrome but works
    // https://gw.alipayobjects.com/zos/rmsportal/VFTfKXJuogBAXcvfAUWJ.gif
    border-top-width: @border-width-base + 0.02px;
    transition: all .3s @ease-in-out;

    &:hover {
      .hover;
    }

    .@{select-prefix-cls}-focused &,
    &:focus,
    &:active {
      .active;
    }

    &__clear {
      .selection__clear();
    }

    &:hover &__clear {
      opacity: 1;
    }

    &-selected-value {
      float: left;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      max-width: 100%;
      padding-right: 20px;
    }
  }

  &-no-arrow &-selection-selected-value {
    padding-right: 0;
  }

  &-disabled {
    color: @disabled-color;
  }

  &-disabled &-selection {
    background: @input-disabled-bg;
    cursor: not-allowed;
    &:hover,
    &:focus,
    &:active {
      border-color: @border-color-base;
      box-shadow: none;
    }

    &__clear {
      display: none;
      visibility: hidden;
      pointer-events: none;
    }
  }

  &-disabled &-selection--multiple &-selection__choice {
    background: @background-color-base;
    color: #aaa;
    padding-right: 10px;
    &__remove {
      display: none;
    }
  }

  &-selection--single {
    height: @input-height-base;
    position: relative;
    cursor: pointer;
  }

  &-selection__rendered {
    display: block;
    margin-left: @control-padding-horizontal - 1px;
    margin-right: @control-padding-horizontal - 1px;
    position: relative;
    line-height: @input-height-base - 2px;
    // https://github.com/ant-design/ant-design/issues/3481#issuecomment-254721026
    &:after {
      content: '.';
      visibility: hidden;
      pointer-events: none;
      display: inline-block;
      width: 0;
    }
  }

  &-lg {
    font-size: @font-size-lg;
    .@{select-prefix-cls}-selection--single {
      height: @input-height-lg;
    }
    .@{select-prefix-cls}-selection__rendered {
      line-height: @input-height-lg - 2px;
    }
    .@{select-prefix-cls}-selection--multiple {
      min-height: @input-height-lg;
      .@{select-prefix-cls}-selection__rendered {
        li {
          height: @input-height-lg - 8px;
          line-height: @input-height-lg - 8px;
        }
      }
      .@{select-prefix-cls}-selection__clear {
        top: @input-height-lg / 2;
      }
    }
  }

  &-sm {
    .@{select-prefix-cls}-selection--single {
      height: @input-height-sm;
    }
    .@{select-prefix-cls}-selection__rendered {
      line-height: @input-height-sm - 2px;
      margin: 0 @control-padding-horizontal-sm - 1px;
    }
    .@{select-prefix-cls}-selection--multiple {
      min-height: @input-height-sm;
      .@{select-prefix-cls}-selection__rendered {
        li {
          height: @input-height-sm - 8px;
          line-height: @input-height-sm - 10px;
        }
      }
      .@{select-prefix-cls}-selection__clear {
        top: @input-height-sm / 2;
      }
    }
    .@{select-prefix-cls}-selection__clear,
    .@{select-prefix-cls}-arrow {
      right: @control-padding-horizontal-sm;
    }
  }

  &-disabled &-selection__choice__remove {
    color: @disabled-color;
    cursor: default;
    &:hover {
      color: @disabled-color;
    }
  }

  &-search__field__wrap {
    display: inline-block;
    position: relative;
  }

  &-selection__placeholder,
  &-search__field__placeholder { // for TreeSelect compatibility
    position: absolute;
    top: 50%;
    left: 0;
    right: 9px;
    color: @input-placeholder-color;
    line-height: 20px;
    height: 20px;
    max-width: 100%;
    margin-top: -10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
  }

  &-search__field__placeholder {
    left: @control-padding-horizontal;
  }

  &-search__field__mirror {
    position: absolute;
    top: 0;
    left: 0;
    white-space: pre;
    pointer-events: none;
    opacity: 0;
  }

  &-search--inline {
    position: absolute;
    height: 100%;
    width: 100%;

    .@{select-prefix-cls}-search__field__wrap {
      width: 100%;
      height: 100%;
    }

    .@{select-prefix-cls}-search__field {
      border-width: 0;
      font-size: 100%;
      height: 100%;
      width: 100%;
      background: transparent;
      outline: 0;
      border-radius: @border-radius-base;
      line-height: 1;
    }

    > i {
      float: right;
    }
  }

  &-selection--multiple {
    min-height: @input-height-base;
    cursor: text;
    padding-bottom: 3px;
    .clearfix;

    .@{select-prefix-cls}-search--inline {
      float: left;
      position: static;
      width: auto;
      padding: 0;
      max-width: 100%;
      .@{select-prefix-cls}-search__field {
        max-width: 100%;
        width: 0.75em;
      }
    }

    .@{select-prefix-cls}-selection__rendered {
      margin-left: 5px;
      margin-bottom: -3px;
      height: auto;
    }

    .@{select-prefix-cls}-selection__placeholder {
      margin-left: 6px;
    }

    > ul > li,
    .@{select-prefix-cls}-selection__rendered > ul > li {  // for tree-select
      margin-top: 3px;
      height: @input-height-base - 8px;
      line-height: @input-height-base - 8px - 2px;
    }

    .@{select-prefix-cls}-selection__choice {
      color: @tag-default-color;
      background-color: @tag-default-bg;
      border: 1px solid @border-color-split;
      border-radius: @border-radius-sm;
      cursor: default;
      float: left;
      margin-right: 4px;
      max-width: 99%;
      position: relative;
      overflow: hidden;
      transition: padding .3s @ease-in-out;
      padding: 0 20px 0 10px;
      &__disabled {
        padding: 0 10px;
      }
    }

    .@{select-prefix-cls}-selection__choice__content {
      display: inline-block;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 100%;
      transition: margin .3s @ease-in-out;
    }

    .@{select-prefix-cls}-selection__choice__remove {
      .iconfont-mixin();
      color: @text-color-secondary;
      line-height: inherit;
      cursor: pointer;
      display: inline-block;
      font-weight: bold;
      transition: all .3s;
      font-size: @font-size-sm;
      .iconfont-size-under-12px(10px);
      position: absolute;
      right: 4px;
      &:hover {
        color: #404040;
      }
    }

    .@{select-prefix-cls}-selection__clear {
      top: @input-height-base / 2;
    }
  }

  &-allow-clear &-selection--single &-selection-selected-value {
    padding-right: 16px;
  }

  &-allow-clear &-selection--multiple &-selection__rendered {
    margin-right: 20px; // In case that clear button will overlap content
  }

  &-open {
    .@{select-prefix-cls}-arrow {
      &-icon svg {
        transform: rotate(180deg);
      }
    }
    .@{select-prefix-cls}-selection {
      .active();
    }
  }

  &-combobox {
    .@{select-prefix-cls}-arrow {
      display: none;
    }
    .@{select-prefix-cls}-search--inline {
      height: 100%;
      width: 100%;
      float: none;
    }
    .@{select-prefix-cls}-search__field__wrap {
      width: 100%;
      height: 100%;
    }
    .@{select-prefix-cls}-search__field {
      width: 100%;
      height: 100%;
      position: relative;
      z-index: 1;
      transition: all .3s @ease-in-out, height 0s;
      box-shadow: none;
    }
  }
  &-combobox&-allow-clear &-selection:hover &-selection__rendered {
    margin-right: 20px; // In case that clear button will overlap content
  }
}

.@{select-prefix-cls}-dropdown {
  .reset-component;
  // Fix select render lag of long text in chrome
  // https://github.com/ant-design/ant-design/issues/11456
  // https://github.com/ant-design/ant-design/issues/11843
  font-variant: initial;

  &.slide-up-enter.slide-up-enter-active&-placement-bottomLeft,
  &.slide-up-appear.slide-up-appear-active&-placement-bottomLeft {
    animation-name: antSlideUpIn;
  }

  &.slide-up-enter.slide-up-enter-active&-placement-topLeft,
  &.slide-up-appear.slide-up-appear-active&-placement-topLeft {
    animation-name: antSlideDownIn;
  }

  &.slide-up-leave.slide-up-leave-active&-placement-bottomLeft {
    animation-name: antSlideUpOut;
  }

  &.slide-up-leave.slide-up-leave-active&-placement-topLeft {
    animation-name: antSlideDownOut;
  }

  &-hidden {
    display: none;
  }

  background-color: @component-background;
  box-shadow: @box-shadow-base;
  border-radius: @border-radius-base;
  box-sizing: border-box;
  z-index: @zindex-dropdown;
  left: -9999px;
  top: -9999px;
  position: absolute;
  outline: none;
  font-size: @font-size-base;

  &-menu {
    outline: none;
    margin-bottom: 0;
    padding-left: 0; // Override default ul/ol
    list-style: none;
    max-height: 250px;
    overflow: auto;

    &-item-group-list {
      margin: 0;
      padding: 0;

      > .@{select-prefix-cls}-dropdown-menu-item {
        padding-left: 20px;
      }
    }

    &-item-group-title {
      color: @text-color-secondary;
      padding: 0 @control-padding-horizontal;
      height: 32px;
      line-height: 32px;
      font-size: @font-size-sm;
    }

    &-item-group-list &-item:first-child:not(:last-child),
    &-item-group:not(:last-child) &-item-group-list &-item:last-child {
      border-radius: 0;
    }

    &-item {
      position: relative;
      display: block;
      padding: 5px @control-padding-horizontal;
      line-height: 22px;
      font-weight: normal;
      color: @text-color;
      white-space: nowrap;
      cursor: pointer;
      overflow: hidden;
      text-overflow: ellipsis;
      transition: background 0.3s ease;

      &:hover {
        background-color: @item-hover-bg;
      }

      &:first-child {
        border-radius: @border-radius-base @border-radius-base 0 0;
      }

      &:last-child {
        border-radius: 0 0 @border-radius-base @border-radius-base;
      }

      &-disabled {
        color: @disabled-color;
        cursor: not-allowed;

        &:hover {
          color: @disabled-color;
          background-color: @component-background;
          cursor: not-allowed;
        }
      }

      &-selected {
        &,
        &:hover {
          background-color: @background-color-light;
          font-weight: 600;
          color: @text-color;
        }
      }

      &-active {
        background-color: @item-active-bg;
      }

      &-divider {
        height: 1px;
        margin: 1px 0;
        overflow: hidden;
        background-color: @border-color-split;
        line-height: 0;
      }
    }
  }

  &&--multiple {
    .@{select-prefix-cls}-dropdown-menu-item {
      & .@{select-prefix-cls}-selected-icon {
        color: transparent;
        .iconfont-size-under-12px(10px);
        transition: all 0.2s ease;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: @control-padding-horizontal;
        font-weight: bold;
        text-shadow: 0 0.1px 0, 0.1px 0 0, 0 -0.1px 0, -0.1px 0;
      }

      &:hover .@{select-prefix-cls}-selected-icon {
        color: #ddd;
      }

      &-disabled .@{select-prefix-cls}-selected-icon {
        display: none;
      }

      &-selected .@{select-prefix-cls}-selected-icon,
      &-selected:hover .@{select-prefix-cls}-selected-icon {
        color: @primary-color;
        display: inline-block;
      }
    }
  }

  &-container-open,
  &-open {
    .@{select-prefix-cls}-dropdown {
      display: block;
    }
  }
}

@slider-prefix-cls: ~"@{ant-prefix}-slider";

.@{slider-prefix-cls} {
  .reset-component;
  position: relative;
  margin: @slider-margin;
  padding: 4px 0;
  height: 12px;
  cursor: pointer;

  .vertical();

  &-with-marks {
    margin-bottom: 28px;
  }

  &-rail {
    position: absolute;
    width: 100%;
    height: 4px;
    border-radius: 2px;
    background-color: @slider-rail-background-color;
    transition: background-color .3s;
  }

  &-track {
    position: absolute;
    height: 4px;
    border-radius: @border-radius-base;
    background-color: @slider-track-background-color;
    transition: background-color 0.3s ease;
  }

  &-handle {
    position: absolute;
    margin-left: -7px;
    margin-top: -5px;
    width: 14px;
    height: 14px;
    cursor: pointer;
    border-radius: 50%;
    border: solid 2px @slider-handle-color;
    background-color: @component-background;
    transition: border-color .3s, transform .3s cubic-bezier(0.18, 0.89, 0.32, 1.28);

    &:focus {
      border-color: @slider-handle-color-focus;
      box-shadow: 0 0 0 5px @slider-handle-color-focus-shadow;
      outline: none;
    }

    &.@{ant-prefix}-tooltip-open {
      border-color: @slider-handle-color-tooltip-open;
    }
  }

  &:hover {
    .@{slider-prefix-cls}-rail {
      background-color: @slider-rail-background-color-hover;
    }
    .@{slider-prefix-cls}-track {
      background-color: @slider-track-background-color-hover;
    }
    .@{slider-prefix-cls}-handle:not(.@{ant-prefix}-tooltip-open) {
      border-color: @slider-handle-color-hover;
    }
  }

  &-mark {
    position: absolute;
    top: 14px;
    left: 0;
    width: 100%;
    font-size: @font-size-base;
  }

  &-mark-text {
    position: absolute;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    cursor: pointer;
    color: @text-color-secondary;

    &-active {
      color: @text-color;
    }
  }

  &-step {
    position: absolute;
    width: 100%;
    height: 4px;
    background: transparent;
  }

  &-dot {
    position: absolute;
    top: -2px;
    margin-left: -4px;
    width: 8px;
    height: 8px;
    border: 2px solid @slider-dot-border-color;
    background-color: @component-background;
    cursor: pointer;
    border-radius: 50%;
    vertical-align: middle;
    &:first-child {
      margin-left: -4px;
    }
    &:last-child {
      margin-left: -4px;
    }
    &-active {
      border-color: @slider-dot-border-color-active;
    }
  }

  &-disabled {
    cursor: not-allowed;

    .@{slider-prefix-cls}-track {
      background-color: @slider-disabled-color !important;
    }

    .@{slider-prefix-cls}-handle,
    .@{slider-prefix-cls}-dot {
      border-color: @slider-disabled-color !important;
      background-color: @component-background;
      cursor: not-allowed;
      box-shadow: none;
    }

    .@{slider-prefix-cls}-mark-text,
    .@{slider-prefix-cls}-dot {
      cursor: not-allowed !important;
    }
  }
}

.vertical() {
  &-vertical {
    width: 12px;
    height: 100%;
    margin: 6px 10px;
    padding: 0 4px;

    .@{slider-prefix-cls}-rail {
      height: 100%;
      width: 4px;
    }

    .@{slider-prefix-cls}-track {
      width: 4px;
    }

    .@{slider-prefix-cls}-handle {
      margin-left: -5px;
      margin-bottom: -7px;
    }

    .@{slider-prefix-cls}-mark {
      top: 0;
      left: 12px;
      width: 18px;
      height: 100%;
    }

    .@{slider-prefix-cls}-mark-text {
      left: 4px;
      white-space: nowrap;
    }

    .@{slider-prefix-cls}-step {
      width: 4px;
      height: 100%;
    }

    .@{slider-prefix-cls}-dot {
      top: auto;
      left: 2px;
      margin-bottom: -4px;
    }
  }
}

@spin-prefix-cls: ~"@{ant-prefix}-spin";
@spin-dot-default: @text-color-secondary;

.@{spin-prefix-cls} {
  .reset-component;
  color: @primary-color;
  vertical-align: middle;
  text-align: center;
  opacity: 0;
  position: absolute;
  transition: transform 0.3s @ease-in-out-circ;
  display: none;

  &-spinning {
    opacity: 1;
    position: static;
    display: inline-block;
  }

  &-nested-loading {
    position: relative;
    > div > .@{spin-prefix-cls} {
      display: block;
      position: absolute;
      height: 100%;
      max-height: 360px;
      width: 100%;
      z-index: 4;
      .@{spin-prefix-cls}-dot {
        position: absolute;
        top: 50%;
        left: 50%;
        margin: -@spin-dot-size / 2;
      }
      .@{spin-prefix-cls}-text {
        position: absolute;
        top: 50%;
        width: 100%;
        padding-top: (@spin-dot-size - @font-size-base) / 2 + 2px;
        text-shadow: 0 1px 2px #fff;
      }
      &.@{spin-prefix-cls}-show-text .@{spin-prefix-cls}-dot {
        margin-top: -@spin-dot-size / 2 - 10px;
      }
    }

    > div > .@{spin-prefix-cls}-sm {
      .@{spin-prefix-cls}-dot {
        margin: -@spin-dot-size-sm / 2;
      }
      .@{spin-prefix-cls}-text {
        padding-top: (@spin-dot-size-sm - @font-size-base) / 2 + 2px;
      }
      &.@{spin-prefix-cls}-show-text .@{spin-prefix-cls}-dot {
        margin-top: -@spin-dot-size-sm / 2 - 10px;
      }
    }

    > div > .@{spin-prefix-cls}-lg {
      .@{spin-prefix-cls}-dot {
        margin: -@spin-dot-size-lg / 2;
      }
      .@{spin-prefix-cls}-text {
        padding-top: (@spin-dot-size-lg - @font-size-base) / 2 + 2px;
      }
      &.@{spin-prefix-cls}-show-text .@{spin-prefix-cls}-dot {
        margin-top: -@spin-dot-size-lg / 2 - 10px;
      }
    }
  }

  &-container {
    position: relative;
    transition: opacity .3s;
    .clearfix;
  }

  &-blur {
    pointer-events: none;
    user-select: none;
    overflow: hidden;
    opacity: 0.5;
    -webkit-filter: blur(0.5px);
    filter: blur(0.5px);

    /* autoprefixer: off */
    filter: ~"progid\:DXImageTransform\.Microsoft\.Blur(PixelRadius\=1, MakeShadow\=false)";

    &:after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      background: #fff;
      opacity: 0.3;
      transition: all .3s;
      z-index: 10;
    }
  }

  // tip
  // ------------------------------
  &-tip {
    color: @spin-dot-default;
  }

  // dots
  // ------------------------------

  &-dot {
    position: relative;
    display: inline-block;
    font-size: @spin-dot-size;

    .square(@spin-dot-size);

    i {
      width: 9px;
      height: 9px;
      border-radius: 100%;
      background-color: @primary-color;
      transform: scale(0.75);
      display: block;
      position: absolute;
      opacity: 0.3;
      animation: antSpinMove 1s infinite linear alternate;
      transform-origin: 50% 50%;
      &:nth-child(1) {
        left: 0;
        top: 0;
      }
      &:nth-child(2) {
        right: 0;
        top: 0;
        animation-delay: 0.4s;
      }
      &:nth-child(3) {
        right: 0;
        bottom: 0;
        animation-delay: 0.8s;
      }
      &:nth-child(4) {
        left: 0;
        bottom: 0;
        animation-delay: 1.2s;
      }
    }

    &-spin {
      transform: rotate(45deg);
      animation: antRotate 1.2s infinite linear;
    }
  }

  // Sizes
  // ------------------------------

  // small
  &-sm &-dot {
    font-size: @spin-dot-size-sm;

    .square(@spin-dot-size-sm);
    i {
      width: 6px;
      height: 6px;
    }
  }

  // large
  &-lg &-dot {
    font-size: @spin-dot-size-lg;

    .square(@spin-dot-size-lg);
    i {
      width: 14px;
      height: 14px;
    }
  }

  &&-show-text &-text {
    display: block;
  }
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  /* IE10+ */
  .@{spin-prefix-cls}-blur {
    background: @component-background;
    opacity: 0.5;
  }
}

@keyframes antSpinMove {
  to {
    opacity: 1;
  }
}

@keyframes antRotate {
  to {
    transform: rotate(405deg);
  }
}

@steps-prefix-cls: ~"@{ant-prefix}-steps";
@process-icon-color: @primary-color;
@process-title-color: @heading-color;
@process-description-color: @text-color;
@process-tail-color: @border-color-split;
@process-icon-text-color: #fff;
@wait-icon-color: @disabled-color;
@wait-title-color: @text-color-secondary;
@wait-description-color: @wait-title-color;
@wait-tail-color: @process-tail-color;
@finish-icon-color: @process-icon-color;
@finish-title-color: @text-color;
@finish-description-color: @text-color-secondary;
@finish-tail-color: @primary-color;
@error-icon-color: @error-color;
@error-title-color: @error-color;
@error-description-color: @error-color;
@error-tail-color: @wait-tail-color;
@steps-background: @component-background;

@steps-icon-size: 32px;
@steps-small-icon-size: 24px;
@steps-dot-size: 8px;
@steps-current-dot-size: 10px;
@steps-desciption-max-width: 140px;

.@{steps-prefix-cls} {
  .reset-component;
  font-size: 0;
  width: 100%;
  display: flex;
}

.@{steps-prefix-cls}-item {
  position: relative;
  display: inline-block;
  vertical-align: top;
  flex: 1;
  overflow: hidden;

  &:last-child {
    flex: none;
  }

  &:last-child &-tail,
  &:last-child &-title:after {
    display: none;
  }

  &-icon,
  &-content {
    display: inline-block;
    vertical-align: top;
  }

  &-icon {
    border: @border-width-base @border-style-base @wait-icon-color;
    width: @steps-icon-size;
    height: @steps-icon-size;
    line-height: @steps-icon-size;
    text-align: center;
    border-radius: @steps-icon-size;
    font-size: @font-size-lg;
    margin-right: 8px;
    transition: background-color .3s, border-color .3s;
    font-family: @font-family;

    > .@{steps-prefix-cls}-icon {
      line-height: 1;
      top: -1px;
      color: @primary-color;
      position: relative;
    }
  }
  &-tail {
    position: absolute;
    left: 0;
    width: 100%;
    top: 12px;
    padding: 0 10px;
    &:after {
      content: '';
      display: inline-block;
      background: @border-color-split;
      height: 1px;
      border-radius: 1px;
      width: 100%;
      transition: background .3s;
    }
  }
  &-title {
    font-size: @font-size-lg;
    color: @text-color;
    display: inline-block;
    padding-right: 16px;
    position: relative;
    line-height: @steps-icon-size;
    &:after {
      content: '';
      height: 1px;
      width: 9999px;
      background: @wait-tail-color;
      display: block;
      position: absolute;
      top: @steps-icon-size / 2;
      left: 100%;
    }
  }
  &-description {
    font-size: @font-size-base;
    color: @text-color-secondary;
  }
  .step-item-status(wait);
  .step-item-status(process);
  &-process &-icon {
    background: @process-icon-color;
    > .@{steps-prefix-cls}-icon {
      color: @process-icon-text-color;
    }
  }
  &-process &-title {
    font-weight: 500;
  }
  .step-item-status(finish);
  .step-item-status(error);

  &.@{steps-prefix-cls}-next-error .@{steps-prefix-cls}-item-title:after {
    background: @error-icon-color;
  }
}

.@{steps-prefix-cls}-horizontal:not(.@{steps-prefix-cls}-label-vertical) {
  .@{steps-prefix-cls}-item {
    margin-right: 16px;
    white-space: nowrap;
    &:last-child {
      margin-right: 0;
    }
    &:last-child .@{steps-prefix-cls}-item-title {
      padding-right: 0;
    }
    &-tail {
      display: none;
    }
    &-description {
      max-width: @steps-desciption-max-width;
      white-space: normal;
    }
  }
}

.step-item-status(@status) {
  @icon-color: "@{status}-icon-color";
  @title-color: "@{status}-title-color";
  @description-color: "@{status}-description-color";
  @tail-color: "@{status}-tail-color";
  &-@{status} &-icon {
    border-color: @@icon-color;
    background-color: @steps-background;
    > .@{steps-prefix-cls}-icon {
      color: @@icon-color;
      .@{steps-prefix-cls}-icon-dot {
        background: @@icon-color;
      }
    }
  }
  &-@{status} > &-content > &-title {
    color: @@title-color;
    &:after {
      background-color: @@tail-color;
    }
  }
  &-@{status} > &-content > &-description {
    color: @@description-color;
  }
  &-@{status} > &-tail:after {
    background-color: @@tail-color;
  }
}

.@{steps-prefix-cls}-item-custom {
  .@{steps-prefix-cls}-item-icon {
    background: none;
    border: 0;
    width: auto;
    height: auto;
    > .@{steps-prefix-cls}-icon {
      font-size: 24px;
      line-height: @steps-icon-size;
      top: 0;
      left: 0.5px;
      width: @steps-icon-size;
      height: @steps-icon-size;
    }
  }
  &.@{steps-prefix-cls}-item-process {
    .@{steps-prefix-cls}-item-icon > .@{steps-prefix-cls}-icon {
      color: @process-icon-color;
    }
  }
}

.@{steps-prefix-cls}-small {
  &.@{steps-prefix-cls}-horizontal:not(.@{steps-prefix-cls}-label-vertical) .@{steps-prefix-cls}-item {
    margin-right: 12px;
    &:last-child {
      margin-right: 0;
    }
  }
  .@{steps-prefix-cls}-item-icon {
    width: @steps-small-icon-size;
    height: @steps-small-icon-size;
    line-height: @steps-small-icon-size;
    text-align: center;
    border-radius: @steps-small-icon-size;
    font-size: @font-size-sm;
  }
  .@{steps-prefix-cls}-item-title {
    font-size: @font-size-base;
    line-height: @steps-small-icon-size;
    padding-right: 12px;
    &:after {
      top: @steps-small-icon-size / 2;
    }
  }
  .@{steps-prefix-cls}-item-description {
    font-size: @font-size-base;
    color: @text-color-secondary;
  }
  .@{steps-prefix-cls}-item-tail {
    top: 8px;
    padding: 0 8px;
  }
  .@{steps-prefix-cls}-item-custom .@{steps-prefix-cls}-item-icon {
    width: inherit;
    height: inherit;
    line-height: inherit;
    border-radius: 0;
    border: 0;
    background: none;
    > .@{steps-prefix-cls}-icon {
      font-size: @steps-small-icon-size;
      line-height: @steps-small-icon-size;
      transform: none;
    }
  }
}

.steps-vertical() {
  display: block;
  .@{steps-prefix-cls}-item {
    display: block;
    overflow: visible;
    &-icon {
      float: left;
      margin-right: 16px;
    }
    &-content {
      min-height: 48px;
      overflow: hidden;
      display: block;
    }
    &-title {
      line-height: @steps-icon-size;
    }
    &-description {
      padding-bottom: 12px;
    }
  }

  > .@{steps-prefix-cls}-item > .@{steps-prefix-cls}-item-tail {
    position: absolute;
    left: 16px;
    top: 0;
    height: 100%;
    width: 1px;
    padding: @steps-icon-size + 6px 0 6px;
    &:after {
      height: 100%;
      width: 1px;
    }
  }

  > .@{steps-prefix-cls}-item:not(:last-child) > .@{steps-prefix-cls}-item-tail {
    display: block;
  }

  > .@{steps-prefix-cls}-item > .@{steps-prefix-cls}-item-content > .@{steps-prefix-cls}-item-title {
    &:after {
      display: none;
    }
  }

  &.@{steps-prefix-cls}-small {
    .@{steps-prefix-cls}-item-tail {
      position: absolute;
      left: 12px;
      top: 0;
      padding: @steps-small-icon-size + 6px 0 6px;
    }
    .@{steps-prefix-cls}-item-title {
      line-height: @steps-small-icon-size;
    }
  }
}

.@{steps-prefix-cls}-vertical {
  .steps-vertical;
}

@media (max-width: @screen-xs) {
  .@{steps-prefix-cls}-horizontal.@{steps-prefix-cls}-label-horizontal {
    .steps-vertical;
  }
}

.@{steps-prefix-cls}-label-vertical {
  .@{steps-prefix-cls}-item {
    overflow: visible;
    &-tail {
      padding: 0 24px;
      margin-left: 48px;
    }
    &-content {
      display: block;
      text-align: center;
      margin-top: 8px;
      // icon左边距离+一半icon宽度，是content一半的宽度，垂直对齐icon
      width: (@steps-icon-size / 2 + 36px) * 2;
    }
    &-icon {
      display: inline-block;
      margin-left: 36px;
    }
    &-title {
      padding-right: 0;
      &:after {
        display: none;
      }
    }
  }
}

.@{steps-prefix-cls}-dot {
  .@{steps-prefix-cls}-item {
    &-title {
      line-height: @line-height-base;
    }
    &-tail {
      width: 100%;
      top: 2px;
      margin: 0 0 0 @steps-desciption-max-width / 2;
      padding: 0;
      &:after {
        height: 3px;
        width: ~"calc(100% - 20px)";
        margin-left: 12px;
      }
    }
    &:first-child .@{steps-prefix-cls}-icon-dot {
      left: 2px;
    }
    &-icon {
      padding-right: 0;
      width: @steps-dot-size;
      height: @steps-dot-size;
      line-height: @steps-dot-size;
      border: 0;
      margin-left: 67px;
      background: transparent;
      .@{steps-prefix-cls}-icon-dot {
        float: left;
        width: 100%;
        height: 100%;
        border-radius: 100px;
        position: relative;
        transition: all .3s;
        /* expand hover area */
        &:after {
          content: "";
          background: rgba(0, 0, 0, .001);
          width: 60px;
          height: 32px;
          position: absolute;
          top: -12px;
          left: -26px;
        }
      }
    }
    &-content {
      width: @steps-desciption-max-width;
    }
    &-process .@{steps-prefix-cls}-item-icon {
      width: @steps-current-dot-size;
      height: @steps-current-dot-size;
      line-height: @steps-current-dot-size;
      .@{steps-prefix-cls}-icon-dot {
        top: -1px;
      }
    }
  }
}

.@{steps-prefix-cls}-vertical.@{steps-prefix-cls}-dot {
  .@{steps-prefix-cls}-item-icon {
    margin-left: 0;
    margin-top: 8px;
  }
  .@{steps-prefix-cls}-item-tail {
    margin: 0;
    left: -9px;
    top: 2px;
    padding: 22px 0 4px;
  }
  .@{steps-prefix-cls}-item:first-child .@{steps-prefix-cls}-icon-dot {
    left: 0;
  }
  .@{steps-prefix-cls}-item-process .@{steps-prefix-cls}-icon-dot {
    left: -2px;
  }
}

@switch-prefix-cls: ~"@{ant-prefix}-switch";
@switch-duration: .36s;

.@{switch-prefix-cls} {
  .reset-component;
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  height: @switch-height;
  min-width: 44px;
  line-height: @switch-height - 2px;
  vertical-align: middle;
  border-radius: 100px;
  border: 1px solid transparent;
  background-color: @disabled-color;
  cursor: pointer;
  transition: all @switch-duration;
  user-select: none;

  &-inner {
    color: #fff;
    font-size: @font-size-sm;
    margin-left: 24px;
    margin-right: 6px;
    display: block;
  }

  &-loading-icon,
  &:after {
    position: absolute;
    width: @switch-height - 4px;
    height: @switch-height - 4px;
    left: 1px;
    top: 1px;
    border-radius: 18px;
    background-color: @component-background;
    content: " ";
    cursor: pointer;
    transition: all @switch-duration @ease-in-out-circ;
  }

  &:after {
    box-shadow: 0 2px 4px 0 rgba(0, 35, 11, .2);
  }

  &:active:before,
  &:active:after {
    width: 24px;
  }

  &-loading-icon {
    // loading default use animation
    // animation: loadingCircle 1s infinite linear;
    background: transparent;
    z-index: 1;
    display: none;
    font-size: 12px;
    svg {
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      margin: auto;
    }
  }

  &-loading &-loading-icon {
    display: inline-block;
    color: @text-color;
  }

  &-checked&-loading &-loading-icon {
    color: @switch-color;
  }

  &:focus {
    box-shadow: 0 0 0 2px fade(@switch-color, 20%);
    outline: 0;
  }

  &:focus:hover {
    box-shadow: none;
  }

  &-small {
    height: @switch-sm-height;
    min-width: 28px;
    line-height: @switch-sm-height - 2px;

    .@{switch-prefix-cls}-inner {
      margin-left: 18px;
      margin-right: 3px;
      font-size: @font-size-sm;
    }

    &:after {
      width: @switch-sm-height - 4px;
      height: @switch-sm-height - 4px;
    }

    &:active:before,
    &:active:after {
      width: 16px;
    }
  }

  &-small &-loading-icon {
    width: @switch-sm-height - 4px;
    height: @switch-sm-height - 4px;
  }

  &-small&-checked {
    .@{switch-prefix-cls}-inner {
      margin-left: 3px;
      margin-right: 18px;
    }
  }

  &-small&-checked &-loading-icon {
    left: 100%;
    margin-left: @switch-sm-checked-margin-left;
  }

  &-small&-loading &-loading-icon {
    // animation: AntSwitchSmallLoadingCircle 1s infinite linear;
    transform: scale(0.66667);
    font-weight: bold;
  }

  &-checked {
    background-color: @switch-color;

    .@{switch-prefix-cls}-inner {
      margin-left: 6px;
      margin-right: 24px;
    }

    &:after {
      left: 100%;
      transform: translateX(-100%);
      margin-left: -1px;
    }
  }

  &-checked &-loading-icon {
    left: 100%;
    margin-left: -19px;
  }

  &-loading,
  &-disabled {
    pointer-events: none;
    opacity: @switch-disabled-opacity;
  }
}

@keyframes AntSwitchSmallLoadingCircle {
  0% {
    transform-origin: 50% 50%;
    transform: rotate(0deg) scale(0.66667);
  }
  100% {
    transform-origin: 50% 50%;
    transform: rotate(360deg) scale(0.66667);
  }
}

@table-prefix-cls: ~"@{ant-prefix}-table";
@table-header-icon-color: #bfbfbf;

.@{table-prefix-cls}-wrapper {
  .clearfix;
}

.@{table-prefix-cls} {
  .reset-component;
  position: relative;
  clear: both;

  &-body {
    transition: opacity .3s;
  }

  &-empty &-body {
    overflow: auto !important;
  }

  table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    border-radius: @border-radius-base @border-radius-base 0 0;
  }

  &-thead > tr > th {
    background: @table-header-bg;
    transition: background .3s ease;
    text-align: left;
    color: @table-header-color;
    font-weight: 500;
    border-bottom: @border-width-base @border-style-base @border-color-split;

    &[colspan] {
      text-align: center;
    }

    .@{iconfont-css-prefix}-filter,
    .@{table-prefix-cls}-filter-icon {
      font-size: @font-size-sm;
      cursor: pointer;
      color: @table-header-icon-color;
      transition: all .3s;
      width: 28px;
      position: absolute;
      top: 0;
      right: 0;
      height: 100%;
      text-align: center;

      > svg {
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -@font-size-sm / 2 + 1px;
        margin-left: -@font-size-sm / 2;
      }
    }

    .@{table-prefix-cls}-filter-selected.@{iconfont-css-prefix}-filter {
      color: @primary-color;
    }

    .@{table-prefix-cls}-column-sorter {
      position: absolute;
      right: 6px;
      top: 50%;
      width: 14px;
      height: @font-size-lg + 1px;
      margin-top: -(@font-size-lg + 1px) / 2;
      text-align: center;
      color: @table-header-icon-color;
      transition: all .3s;

      &-up,
      &-down {
        .iconfont-size-under-12px(11px);
        line-height: 4px;
        height: 4px;
        transition: all .3s;
        display: block;
        &.on {
          color: @primary-color;
        }
      }

      &-down {
        margin-top: 4px;
      }
    }

    &.@{table-prefix-cls}-column-has-actions {
      position: relative;

      &.@{table-prefix-cls}-column-has-filters {
        .@{iconfont-css-prefix}-filter,
        .@{table-prefix-cls}-filter-icon {
          &.@{table-prefix-cls}-filter-open {
            color: @text-color-secondary;
            background: #ebebeb;
          }
        }
        // Very complicated styles logic but neccessary
        &:hover {
          .@{iconfont-css-prefix}-filter,
          .@{table-prefix-cls}-filter-icon {
            &:hover {
              color: @text-color-secondary;
              background: #ebebeb;
            }
            &:active {
              color: @text-color;
            }
          }
        }
      }

      &.@{table-prefix-cls}-column-has-sorters {
        cursor: pointer;
        &:hover {
          background: #f5f5f5;
          .@{iconfont-css-prefix}-filter,
          .@{table-prefix-cls}-filter-icon {
            background: #f5f5f5;
          }
        }
        &:active {
          .@{table-prefix-cls}-column-sorter-up:not(.on),
          .@{table-prefix-cls}-column-sorter-down:not(.on) {
            color: @text-color-secondary;
          }
        }
      }

      // Repeat the class selector for prority
      // https://github.com/ant-design/ant-design/commit/55a13a11fcea23fc4b5694cad7e2c32edc9128ee#r30842052
      &.@{table-prefix-cls}-align-right.@{table-prefix-cls}-align-right {
        &.@{table-prefix-cls}-column-has-sorters,
        &.@{table-prefix-cls}-column-has-filters {
          padding-right: 30px;
        }

        &.@{table-prefix-cls}-column-has-sorters.@{table-prefix-cls}-column-has-filters {
          padding-right: 54px;
        }
      }
    }

    .@{table-prefix-cls}-column-sorters {
      &:before {
        position: absolute;
        content: '';
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: transparent;
        transition: all .3s;
      }
      &:hover:before {
        background: rgba(0, 0, 0, .04);
      }
    }

    &.@{table-prefix-cls}-column-has-filters .@{table-prefix-cls}-column-sorter {
      right: 28px + 6px;
    }

    &.@{table-prefix-cls}-column-has-sorters {
      user-select: none;
    }
  }

  &-thead > tr:first-child > th {
    &:first-child {
      border-top-left-radius: @border-radius-base;
    }

    &:last-child {
      border-top-right-radius: @border-radius-base;
    }
  }

  &-thead > tr:not(:last-child) > th {
    &[colspan] {
      border-bottom: 0;
    }
  }

  &-tbody > tr > td {
    border-bottom: @border-width-base @border-style-base @border-color-split;
    transition: all .3s, border 0s;
  }

  &-thead > tr,
  &-tbody > tr {
    transition: all .3s, height 0s;
    &.@{table-prefix-cls}-row-hover,
    &:hover {
      & > td {
        background: @table-row-hover-bg;
      }
    }
  }

  &-thead > tr:hover {
    background: none;
  }

  &-footer {
    padding: @table-padding-vertical @table-padding-horizontal;
    background: @table-header-bg;
    border-radius: 0 0 @border-radius-base @border-radius-base;
    position: relative;
    border-top: @border-width-base @border-style-base @border-color-split;
    &:before {
      content: '';
      height: 1px;
      background: @table-header-bg;
      position: absolute;
      top: -1px;
      width: 100%;
      left: 0;
    }
  }

  &.@{table-prefix-cls}-bordered &-footer {
    border: @border-width-base @border-style-base @border-color-split;
  }

  &-title {
    padding: @table-padding-vertical 0;
    position: relative;
    top: 1px;
    border-radius: @border-radius-base @border-radius-base 0 0;
  }

  &.@{table-prefix-cls}-bordered &-title {
    border: @border-width-base @border-style-base @border-color-split;
    padding-left: @table-padding-horizontal;
    padding-right: @table-padding-horizontal;
  }

  &-title + &-content {
    position: relative;
    border-radius: @border-radius-base @border-radius-base 0 0;
    overflow: hidden;
    .@{table-prefix-cls}-bordered & {
      &,
      table,
      .@{table-prefix-cls}-thead > tr:first-child > th {
        border-radius: 0;
      }
    }
  }

  // https://github.com/ant-design/ant-design/issues/4373
  &-without-column-header &-title + &-content,
  &-without-column-header table {
    border-radius: 0;
  }

  &-tbody > tr.@{table-prefix-cls}-row-selected td {
    background: @table-selected-row-bg;
  }

  &-thead > tr > th.@{table-prefix-cls}-column-sort {
    background: @table-header-sort-bg;
  }

  &-tbody > tr > td.@{table-prefix-cls}-column-sort {
    background: @table-body-sort-bg;
  }

  &-thead > tr > th,
  &-tbody > tr > td {
    padding: @table-padding-vertical @table-padding-horizontal;
    word-break: break-word;
    -ms-word-break: break-all;
  }

  &-thead > tr > th.@{table-prefix-cls}-selection-column-custom {
    padding-left: 16px;
    padding-right: 0;
  }

  &-thead > tr > th.@{table-prefix-cls}-selection-column,
  &-tbody > tr > td.@{table-prefix-cls}-selection-column {
    text-align: center;
    min-width: 62px;
    width: 62px;
    .@{ant-prefix}-radio-wrapper {
      margin-right: 0;
    }
  }

  &-expand-icon-th,
  &-row-expand-icon-cell {
    text-align: center;
    min-width: 50px;
    width: 50px;
  }

  &-header {
    background: @table-header-bg;
    overflow: hidden;
  }

  &-header table {
    border-radius: @border-radius-base @border-radius-base 0 0;
  }

  &-loading {
    position: relative;
    .@{table-prefix-cls}-body {
      background: @component-background;
      opacity: 0.5;
    }
    .@{table-prefix-cls}-spin-holder {
      height: 20px;
      line-height: 20px;
      left: 50%;
      top: 50%;
      margin-left: -30px;
      position: absolute;
    }
    .@{table-prefix-cls}-with-pagination {
      margin-top: -20px;
    }
    .@{table-prefix-cls}-without-pagination {
      margin-top: 10px;
    }
  }

  &-bordered {
    .@{table-prefix-cls}-header > table,
    .@{table-prefix-cls}-body > table,
    .@{table-prefix-cls}-fixed-left table,
    .@{table-prefix-cls}-fixed-right table {
      border: @border-width-base @border-style-base @border-color-split;
      border-right: 0;
      border-bottom: 0;
    }

    &.@{table-prefix-cls}-empty {
      .@{table-prefix-cls}-placeholder {
        border-left: @border-width-base @border-style-base @border-color-split;
        border-right: @border-width-base @border-style-base @border-color-split;
      }
    }

    &.@{table-prefix-cls}-fixed-header {
      .@{table-prefix-cls}-header > table {
        border-bottom: 0;
      }

      .@{table-prefix-cls}-body > table {
        border-top: 0;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
      }

      .@{table-prefix-cls}-body-inner > table {
        border-top: 0;
      }

      .@{table-prefix-cls}-placeholder {
        border: 0;
      }
    }

    .@{table-prefix-cls}-thead > tr:not(:last-child) > th {
      border-bottom: @border-width-base @border-style-base @border-color-split;
    }

    .@{table-prefix-cls}-thead > tr > th,
    .@{table-prefix-cls}-tbody > tr > td {
      border-right: @border-width-base @border-style-base @border-color-split;
    }
  }

  &-placeholder {
    position: relative;
    padding: @table-padding-vertical @table-padding-horizontal;
    background: @component-background;
    border-bottom: @border-width-base @border-style-base @border-color-split;
    text-align: center;
    font-size: @font-size-base;
    color: @text-color-secondary;
    z-index: 1;
    .@{iconfont-css-prefix} {
      margin-right: 4px;
    }
  }

  &-pagination.@{ant-prefix}-pagination {
    margin: 16px 0;
    float: right;
  }

  &-filter-dropdown {
    min-width: 96px;
    margin-left: -8px;
    background: @component-background;
    border-radius: @border-radius-base;
    box-shadow: @box-shadow-base;

    .@{ant-prefix}-dropdown-menu {
      border: 0;
      box-shadow: none;
      border-radius: @border-radius-base @border-radius-base 0 0;

      // https://github.com/ant-design/ant-design/issues/4916
      &-without-submenu {
        max-height: 400px;
        overflow-x: hidden;
      }

      &-item > label + span {
        padding-right: 0;
      }

      &-sub {
        border-radius: @border-radius-base;
        box-shadow: @box-shadow-base;
      }

      .@{ant-prefix}-dropdown-submenu-contain-selected {
        .@{ant-prefix}-dropdown-menu-submenu-title:after {
          color: @primary-color;
          font-weight: bold;
          text-shadow: 0 0 2px @primary-2;
        }
      }
    }

    .@{ant-prefix}-dropdown-menu-item {
      overflow: hidden;
    }

    > .@{ant-prefix}-dropdown-menu > .@{ant-prefix}-dropdown-menu-item:last-child,
    > .@{ant-prefix}-dropdown-menu > .@{ant-prefix}-dropdown-menu-submenu:last-child .@{ant-prefix}-dropdown-menu-submenu-title {
      border-radius: 0;
    }

    &-btns {
      overflow: hidden;
      padding: 7px 8px;
      border-top: @border-width-base @border-style-base @border-color-split;
    }

    &-link {
      color: @link-color;
      &:hover {
        color: @link-hover-color;
      }
      &:active {
        color: @link-active-color;
      }
      &.confirm {
        float: left;
      }
      &.clear {
        float: right;
      }
    }
  }

  &-selection {
    &-select-all-custom {
      margin-right: 4px !important;
    }

    .@{iconfont-css-prefix}-down {
      color: @table-header-icon-color;
      transition: all .3s;
    }

    &-menu {
      min-width: 96px;
      margin-top: 5px;
      margin-left: -30px;
      background: @component-background;
      border-radius: @border-radius-base;
      box-shadow: @box-shadow-base;

      .@{ant-prefix}-action-down {
        color: @table-header-icon-color;
      }
    }

    &-down {
      cursor: pointer;
      padding: 0;
      display: inline-block;
      line-height: 1;
      &:hover .@{iconfont-css-prefix}-down {
        color: #666;
      }
    }
  }

  &-row {
    &-expand-icon {
      cursor: pointer;
      display: inline-block;
      width: 17px;
      height: 17px;
      text-align: center;
      line-height: 14px;
      border: @border-width-base @border-style-base @border-color-split;
      user-select: none;
      background: @component-background;
    }

    &-expanded:after {
      content: '-';
    }

    &-collapsed:after {
      content: '+';
    }

    &-spaced {
      visibility: hidden;
      &:after {
        content: '.';
      }
    }

    &[class*="@{table-prefix-cls}-row-level-0"] .@{table-prefix-cls}-selection-column > span {
      display: inline-block;
    }
  }

  tr&-expanded-row {
    &,
    &:hover {
      background: @table-expanded-row-bg;
    }
  }

  .@{table-prefix-cls}-row-indent + .@{table-prefix-cls}-row-expand-icon {
    margin-right: 8px;
  }

  &-scroll {
    overflow: auto;
    overflow-x: hidden;
    table {
      width: auto;
      min-width: 100%;
    }
  }

  &-body-inner {
    height: 100%;
  }

  &-fixed-header > &-content > &-scroll > &-body {
    position: relative;
    background: @component-background;
  }

  &-fixed-header &-body-inner {
    overflow: scroll;
  }

  &-fixed-header &-scroll &-header {
    overflow: scroll;
    padding-bottom: 20px;
    margin-bottom: -20px;
    // Workaround for additional scroll bar on the table header
    // https://github.com/ant-design/ant-design/issues/6515#issuecomment-419634369
    opacity: 0.9999;
  }

  &-fixed-left,
  &-fixed-right {
    position: absolute;
    top: 0;
    overflow: hidden;
    transition: box-shadow .3s ease;
    border-radius: 0;
    table {
      width: auto;
      background: @component-background;
    }
  }

  &-fixed-header &-fixed-left &-body-outer &-fixed,
  &-fixed-header &-fixed-right &-body-outer &-fixed {
    border-radius: 0;
  }

  &-fixed-left {
    left: 0;
    box-shadow: 6px 0 6px -4px @shadow-color;
    .@{table-prefix-cls}-header {
      overflow-y: hidden;
    }
    // hide scrollbar in left fixed columns
    .@{table-prefix-cls}-body-inner {
      margin-right: -20px;
      padding-right: 20px;
    }
    .@{table-prefix-cls}-fixed-header & .@{table-prefix-cls}-body-inner {
      padding-right: 0;
    }
    &,
    table {
      border-radius: @border-radius-base 0 0 0;
    }
    .ant-table-thead > tr > th:last-child {
      border-top-right-radius: 0;
    }
  }

  &-fixed-right {
    right: 0;
    box-shadow: -6px 0 6px -4px @shadow-color;
    &,
    table {
      border-radius: 0 @border-radius-base 0 0;
    }
    // hide expand row content in right-fixed Table
    // https://github.com/ant-design/ant-design/issues/1898
    .@{table-prefix-cls}-expanded-row {
      color: transparent;
      pointer-events: none;
    }
    .ant-table-thead > tr > th:first-child {
      border-top-left-radius: 0;
    }
  }

  &&-scroll-position-left &-fixed-left {
    box-shadow: none;
  }

  &&-scroll-position-right &-fixed-right {
    box-shadow: none;
  }
}

.@{table-prefix-cls}-middle {
  > .@{table-prefix-cls}-title,
  > .@{table-prefix-cls}-footer {
    padding: @table-padding-vertical*3/4 @table-padding-horizontal/2;
  }
  > .@{table-prefix-cls}-content {
    > .@{table-prefix-cls}-header > table,
    > .@{table-prefix-cls}-body > table,
    > .@{table-prefix-cls}-scroll > .@{table-prefix-cls}-header > table,
    > .@{table-prefix-cls}-scroll > .@{table-prefix-cls}-body > table,
    > .@{table-prefix-cls}-fixed-left > .@{table-prefix-cls}-header > table,
    > .@{table-prefix-cls}-fixed-right > .@{table-prefix-cls}-header > table,
    > .@{table-prefix-cls}-fixed-left > .@{table-prefix-cls}-body-outer > .@{table-prefix-cls}-body-inner > table,
    > .@{table-prefix-cls}-fixed-right > .@{table-prefix-cls}-body-outer > .@{table-prefix-cls}-body-inner > table {
      > .@{table-prefix-cls}-thead > tr > th,
      > .@{table-prefix-cls}-tbody > tr > td {
        padding: @table-padding-vertical*3/4 @table-padding-horizontal/2;
      }
    }
  }
}

.@{table-prefix-cls}-small {
  border: @border-width-base @border-style-base @border-color-split;
  border-radius: @border-radius-base;

  > .@{table-prefix-cls}-title,
  > .@{table-prefix-cls}-footer {
    padding: @table-padding-vertical/2 @table-padding-horizontal/2;
  }

  > .@{table-prefix-cls}-title {
    border-bottom: @border-width-base @border-style-base @border-color-split;
    top: 0;
  }

  > .@{table-prefix-cls}-content {
    > .@{table-prefix-cls}-body {
      margin: 0 @table-padding-horizontal/2;
    }

    > .@{table-prefix-cls}-header > table,
    > .@{table-prefix-cls}-body > table,
    > .@{table-prefix-cls}-scroll > .@{table-prefix-cls}-header > table,
    > .@{table-prefix-cls}-scroll > .@{table-prefix-cls}-body > table,
    > .@{table-prefix-cls}-fixed-left > .@{table-prefix-cls}-header > table,
    > .@{table-prefix-cls}-fixed-right > .@{table-prefix-cls}-header > table,
    > .@{table-prefix-cls}-fixed-left > .@{table-prefix-cls}-body-outer > .@{table-prefix-cls}-body-inner > table,
    > .@{table-prefix-cls}-fixed-right > .@{table-prefix-cls}-body-outer > .@{table-prefix-cls}-body-inner > table {
      border: 0;
      > .@{table-prefix-cls}-thead > tr > th,
      > .@{table-prefix-cls}-tbody > tr > td {
        padding: @table-padding-vertical/2 @table-padding-horizontal/2;
      }
      > .@{table-prefix-cls}-thead > tr > th {
        background: @component-background;
        border-bottom: @border-width-base @border-style-base @border-color-split;
      }
      > .@{table-prefix-cls}-thead > tr > th.@{table-prefix-cls}-column-sort {
        background: @table-body-sort-bg;
      }
    }

    > .@{table-prefix-cls}-scroll > .@{table-prefix-cls}-header > table,
    > .@{table-prefix-cls}-scroll > .@{table-prefix-cls}-body > table,
    > .@{table-prefix-cls}-fixed-left > .@{table-prefix-cls}-header > table,
    > .@{table-prefix-cls}-fixed-right > .@{table-prefix-cls}-header > table,
    > .@{table-prefix-cls}-fixed-left > .@{table-prefix-cls}-body-outer > .@{table-prefix-cls}-body-inner > table,
    > .@{table-prefix-cls}-fixed-right > .@{table-prefix-cls}-body-outer > .@{table-prefix-cls}-body-inner > table {
      padding: 0;
    }

    .@{table-prefix-cls}-header {
      background: @component-background;
    }

    .@{table-prefix-cls}-placeholder,
    .@{table-prefix-cls}-row:last-child td {
      border-bottom: 0;
    }
  }

  &.@{table-prefix-cls}-bordered {
    border-right: 0;

    .@{table-prefix-cls}-title {
      border: 0;
      border-bottom: @border-width-base @border-style-base @border-color-split;
      border-right: @border-width-base @border-style-base @border-color-split;
    }

    .@{table-prefix-cls}-content {
      border-right: @border-width-base @border-style-base @border-color-split;
    }

    .@{table-prefix-cls}-footer {
      border: 0;
      border-top: @border-width-base @border-style-base @border-color-split;
      border-right: @border-width-base @border-style-base @border-color-split;
      &:before {
        display: none;
      }
    }

    .@{table-prefix-cls}-placeholder {
      border-left: 0;
      border-bottom: 0;
    }

    .@{table-prefix-cls}-thead > tr > th:last-child,
    .@{table-prefix-cls}-tbody > tr > td:last-child {
      border-right: none;
    }

    .@{table-prefix-cls}-fixed-left {
      .@{table-prefix-cls}-thead > tr > th:last-child,
      .@{table-prefix-cls}-tbody > tr > td:last-child {
        border-right: @border-width-base @border-style-base @border-color-split;
      }
    }

    .@{table-prefix-cls}-fixed-right {
      border-right: @border-width-base @border-style-base @border-color-split;
    }
  }
}

@tab-prefix-cls: ~"@{ant-prefix}-tabs";

// card style
.@{tab-prefix-cls} {
  &&-card > &-bar &-nav-container {
    height: @tabs-card-height;
  }
  &&-card > &-bar &-ink-bar {
    visibility: hidden;
  }
  &&-card > &-bar &-tab {
    margin: 0;
    border: @border-width-base @border-style-base @border-color-split;
    border-bottom: 0;
    border-radius: @border-radius-base @border-radius-base 0 0;
    background: @tabs-card-head-background;
    margin-right: 2px;
    padding: 0 16px;
    transition: all 0.3s @ease-in-out;
    line-height: @tabs-card-height - 2px;
  }
  &&-card > &-bar &-tab-active {
    background: @component-background;
    border-color: @border-color-split;
    color: @tabs-card-active-color;
    padding-bottom: 1px;
  }
  &&-card > &-bar &-tab-inactive {
    padding: 0;
  }
  &&-card > &-bar &-nav-wrap {
    margin-bottom: 0;
  }
  &&-card > &-bar &-tab &-close-x {
    color: @text-color-secondary;
    transition: all .3s;
    font-size: @font-size-sm;
    margin-left: 3px;
    margin-right: -5px;
    overflow: hidden;
    vertical-align: middle;
    width: 16px;
    height: 16px;
    height: @font-size-base;
    &:hover {
      color: @heading-color;
    }
  }

  &&-card &-content > &-tabpane,
  &&-editable-card &-content > &-tabpane {
    transition: none !important;
    &-inactive {
      overflow: hidden;
    }
  }

  &&-card > &-bar &-tab:hover .@{iconfont-css-prefix}-close {
    opacity: 1;
  }

  &-extra-content {
    line-height: @tabs-card-height;

    .@{tab-prefix-cls}-new-tab {
      position: relative;
      width: 20px;
      height: 20px;
      line-height: 20px;
      text-align: center;
      cursor: pointer;
      border-radius: @border-radius-sm;
      border: @border-width-base @border-style-base @border-color-split;
      font-size: 12px;
      color: @text-color;
      transition: all .3s;
      &:hover {
        color: @tabs-card-active-color;
        border-color: @tabs-card-active-color;
      }
      svg {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto;
      }
    }
  }

  // https://github.com/ant-design/ant-design/issues/4669
  &-vertical&-card > .@{tab-prefix-cls}-bar {
    .@{tab-prefix-cls}-nav-container {
      height: auto;
    }
    .@{tab-prefix-cls}-tab {
      border-bottom: @border-width-base @border-style-base @border-color-split;
      margin-bottom: 8px;
      &-active {
        padding-bottom: 4px;
      }
      &:last-child {
        margin-bottom: 8px;
      }
    }
    .@{tab-prefix-cls}-new-tab {
      width: 90%;
    }
  }

  &-vertical&-card&-left > .@{tab-prefix-cls}-bar {
    .@{tab-prefix-cls}-nav-wrap {
      margin-right: 0;
    }
    .@{tab-prefix-cls}-tab {
      border-right: 0;
      border-radius: @border-radius-base 0 0 @border-radius-base;
      margin-right: 1px;
      &-active {
        margin-right: -1px;
        padding-right: 18px;
      }
    }
  }

  &-vertical&-card&-right > .@{tab-prefix-cls}-bar {
    .@{tab-prefix-cls}-nav-wrap {
      margin-left: 0;
    }
    .@{tab-prefix-cls}-tab {
      border-left: 0;
      border-radius: 0 @border-radius-base @border-radius-base 0;
      margin-left: 1px;
      &-active {
        margin-left: -1px;
        padding-left: 18px;
      }
    }
  }

  // https://github.com/ant-design/ant-design/issues/9104
  &&-card&-bottom > &-bar &-tab {
    border-bottom: @border-width-base @border-style-base @border-color-split;
    border-top: 0;
    border-radius: 0 0 @border-radius-base @border-radius-base;
  }

  &&-card&-bottom > &-bar &-tab-active {
    color: @primary-color;
    padding-bottom: 0;
    padding-top: 1px;
  }
}

@tab-prefix-cls: ~"@{ant-prefix}-tabs";

.@{tab-prefix-cls} {
  .reset-component;
  position: relative;
  overflow: hidden;
  .clearfix;

  &-ink-bar {
    z-index: 1;
    position: absolute;
    left: 0;
    bottom: 1px;
    box-sizing: border-box;
    height: 2px;
    background-color: @tabs-ink-bar-bg-color;
    transform-origin: 0 0;
  }

  &-bar {
    border-bottom: @border-width-base @border-style-base @border-color-split;
    margin: @tab-bar-margin;
    outline: none;
    transition: padding .3s @ease-in-out;
  }

  &-nav-container {
    overflow: hidden;
    font-size: @tabs-title-font-size;
    line-height: @line-height-base;
    box-sizing: border-box;
    position: relative;
    white-space: nowrap;
    margin-bottom: -1px;
    transition: padding .3s @ease-in-out;
    .clearfix;

    &-scrolling {
      padding-left: @tab-scrolling-size;
      padding-right: @tab-scrolling-size;
    }
  }

  // https://github.com/ant-design/ant-design/issues/9104
  &-bottom &-bar {
    border-bottom: none;
    border-top: @border-width-base @border-style-base @border-color-split;
  }

  &-bottom &-ink-bar {
    bottom: auto;
    top: 1px;
  }

  &-bottom &-nav-container {
    margin-bottom: 0;
    margin-top: -1px;
  }

  &-tab-prev,
  &-tab-next {
    user-select: none;
    z-index: 2;
    width: 0;
    height: 100%;
    cursor: pointer;
    border: 0;
    background-color: transparent;
    position: absolute;
    text-align: center;
    color: @text-color-secondary;
    transition: width .3s @ease-in-out, opacity .3s @ease-in-out, color .3s @ease-in-out;
    opacity: 0;
    pointer-events: none;

    &.@{tab-prefix-cls}-tab-arrow-show {
      opacity: 1;
      width: @tab-scrolling-size;
      height: 100%;
      pointer-events: auto;
    }

    &:hover {
      color: @text-color;
    }

    &-icon {
      font-style: normal;
      font-weight: bold;
      font-variant: normal;
      line-height: inherit;
      vertical-align: baseline;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
      text-transform: none;

      &-target {
        display: block;
        .iconfont-size-under-12px(10px);
      }
    }
  }

  &-tab-btn-disabled {
    cursor: not-allowed;
    &,
    &:hover {
      color: @disabled-color;
    }
  }

  &-tab-next {
    right: 2px;
  }

  &-tab-prev {
    left: 0;
    :root & {
      filter: none;
    }
  }

  &-nav-wrap {
    overflow: hidden;
    margin-bottom: -1px;
  }

  &-nav-scroll {
    overflow: hidden;
    white-space: nowrap;
  }

  &-nav {
    box-sizing: border-box;
    padding-left: 0;
    transition: transform 0.3s @ease-in-out;
    position: relative;
    margin: 0;
    list-style: none;
    display: inline-block;

    &:before,
    &:after {
      display: table;
      content: " ";
    }

    &:after {
      clear: both;
    }

    .@{tab-prefix-cls}-tab-disabled {
      pointer-events: none;
      cursor: default;
      color: @disabled-color;
    }

    .@{tab-prefix-cls}-tab {
      display: inline-block;
      height: 100%;
      margin: @tab-horizontal-margin;
      padding: @tab-horizontal-padding;
      box-sizing: border-box;
      position: relative;

      &:last-child {
        margin-right: 0;
      }

      transition: color 0.3s @ease-in-out;
      cursor: pointer;
      text-decoration: none;

      &:hover {
        color: @tab-hover-color;
      }

      &:active {
        color: @tab-active-color;
      }

      .@{iconfont-css-prefix} {
        margin-right: 8px;
      }
    }

    .@{tab-prefix-cls}-tab-active {
      color: @tab-highlight-color;
      font-weight: 500;
    }
  }

  &-large {
    > .@{tab-prefix-cls}-bar {
        .@{tab-prefix-cls}-nav-container {
          font-size: @tabs-title-font-size-lg;
        }
        .@{tab-prefix-cls}-tab {
          padding: 16px;
        }
    }
  }

  &-small {
    > .@{tab-prefix-cls}-bar {
        .@{tab-prefix-cls}-nav-container {
          font-size: @tabs-title-font-size-sm;
        }
        .@{tab-prefix-cls}-tab {
          padding: 8px 16px;
        }
    }
  }

  &:not(&-vertical) {
    > .@{tab-prefix-cls}-content {
      width: 100%;

      > .@{tab-prefix-cls}-tabpane {
        flex-shrink: 0;
        width: 100%;
        transition: opacity .45s;
        opacity: 1;
      }

      > .@{tab-prefix-cls}-tabpane-inactive {
        opacity: 0;
        height: 0;
        padding: 0 !important;
        pointer-events: none;
        input {
          visibility: hidden;
        }
      }
    }
    > .@{tab-prefix-cls}-content-animated {
      display: flex;
      flex-direction: row;
      will-change: margin-left;
      transition: margin-left 0.3s @ease-in-out;
    }
  }

  &-vertical {
    > .@{tab-prefix-cls}-bar {
      border-bottom: 0;
      height: 100%;
      &-tab-prev, &-tab-next {
        width: @tab-scrolling-size;
        height: 0;
        transition: height .3s @ease-in-out, opacity .3s @ease-in-out, color .3s @ease-in-out;
      }
      &-tab-prev.@{tab-prefix-cls}-tab-arrow-show,
      &-tab-next.@{tab-prefix-cls}-tab-arrow-show {
        width: 100%;
        height: @tab-scrolling-size;
      }

      .@{tab-prefix-cls}-tab {
        float: none;
        margin: @tab-vertical-margin;
        padding: @tab-vertical-padding;
        display: block;

        &:last-child {
          margin-bottom: 0;
        }
      }

      .@{tab-prefix-cls}-extra-content {
        text-align: center;
      }

      .@{tab-prefix-cls}-nav-scroll {
        width: auto;
      }

      .@{tab-prefix-cls}-nav-container,
      .@{tab-prefix-cls}-nav-wrap {
        height: 100%;
      }

      .@{tab-prefix-cls}-nav-container {
        margin-bottom: 0;

        &.@{tab-prefix-cls}-nav-container-scrolling {
          padding: @tab-scrolling-size 0;
        }
      }

      .@{tab-prefix-cls}-nav-wrap {
        margin-bottom: 0;
      }

      .@{tab-prefix-cls}-nav {
        width: 100%;
      }

      .@{tab-prefix-cls}-ink-bar {
        width: 2px;
        left: auto;
        height: auto;
        top: 0;
      }

      .@{tab-prefix-cls}-tab-next {
        width: 100%;
        bottom: 0;
        height: @tab-scrolling-size;
      }

      .@{tab-prefix-cls}-tab-prev {
        top: 0;
        width: 100%;
        height: @tab-scrolling-size;
      }
    }

    > .@{tab-prefix-cls}-content {
      overflow: hidden;
      width: auto;
      margin-top: 0 !important;
    }
  }

  &-vertical&-left {
    > .@{tab-prefix-cls}-bar {
      float: left;
      border-right: @border-width-base @border-style-base @border-color-split;
      margin-right: -1px;
      margin-bottom: 0;
      .@{tab-prefix-cls}-tab {
        text-align: right;
      }
      .@{tab-prefix-cls}-nav-container {
        margin-right: -1px;
      }
      .@{tab-prefix-cls}-nav-wrap {
        margin-right: -1px;
      }
      .@{tab-prefix-cls}-ink-bar {
        right: 1px;
      }
    }
    > .@{tab-prefix-cls}-content {
      padding-left: 24px;
      border-left: @border-width-base @border-style-base @border-color-split;
    }
  }

  &-vertical&-right {
    > .@{tab-prefix-cls}-bar {
      float: right;
      border-left: @border-width-base @border-style-base @border-color-split;
      margin-left: -1px;
      margin-bottom: 0;
      .@{tab-prefix-cls}-nav-container {
        margin-left: -1px;
      }
      .@{tab-prefix-cls}-nav-wrap {
        margin-left: -1px;
      }
      .@{tab-prefix-cls}-ink-bar {
        left: 1px;
      }
    }
    > .@{tab-prefix-cls}-content {
      padding-right: 24px;
      border-right: @border-width-base @border-style-base @border-color-split;
    }
  }

  &-bottom > &-bar {
    margin-bottom: 0;
    margin-top: 16px;
  }
}

.@{tab-prefix-cls}-top .@{tab-prefix-cls}-ink-bar-animated,
.@{tab-prefix-cls}-bottom .@{tab-prefix-cls}-ink-bar-animated {
  transition: transform .3s @ease-in-out, width .3s @ease-in-out;
}

.@{tab-prefix-cls}-left .@{tab-prefix-cls}-ink-bar-animated,
.@{tab-prefix-cls}-right .@{tab-prefix-cls}-ink-bar-animated {
  transition: transform .3s @ease-in-out, height .3s @ease-in-out;
}

.no-flex,
.@{tab-prefix-cls}-no-animation,
.@{tab-prefix-cls}-vertical {
  > .@{tab-prefix-cls}-content {
    &-animated {
      transform: none !important;
      margin-left: 0 !important;
    }
    > .@{tab-prefix-cls}-tabpane-inactive {
      display: none;
    }
  }
}

@tag-prefix-cls: ~"@{ant-prefix}-tag";

.@{tag-prefix-cls} {
  .reset-component;
  display: inline-block;
  line-height: 20px;
  height: 22px;
  padding: 0 7px;
  border-radius: @border-radius-base;
  border: @border-width-base @border-style-base @border-color-base;
  background: @tag-default-bg;
  font-size: @tag-font-size;
  transition: all 0.3s @ease-out;
  opacity: 1;
  margin-right: 8px;
  cursor: pointer;
  white-space: nowrap;

  &:hover {
    opacity: 0.85;
  }

  &,
  a,
  a:hover {
    color: @tag-default-color;
  }

  >a:first-child:last-child {
    display: inline-block;
    margin: 0 -8px;
    padding: 0 8px;
  }

  .@{iconfont-css-prefix}-close {
    .iconfont-size-under-12px(10px);
    cursor: pointer;
    margin-left: 3px;
    transition: all .3s;
    color: @text-color-secondary;
    font-weight: bold;

    &:hover {
      color: @heading-color;
    }
  }

  &-has-color {
    border-color: transparent;
    &,
    a,
    a:hover,
    .@{iconfont-css-prefix}-close,
    .@{iconfont-css-prefix}-close:hover {
      color: #fff;
    }
  }

  &-checkable {
    background-color: transparent;
    border-color: transparent;
    &:not(&-checked):hover {
      color: @primary-color;
    }
    &:active,
    &-checked {
      color: #fff;
    }
    &-checked {
      background-color: @primary-6;
    }
    &:active {
      background-color: @primary-7;
    }
  }

  &-close {
    width: 0 !important;
    padding: 0;
    margin: 0;
  }

  &-zoom-enter,
  &-zoom-appear {
    animation: antFadeIn .2s @ease-in-out-circ;
    animation-fill-mode: both;
  }

  &-zoom-leave {
    animation: antZoomOut .3s @ease-in-out-circ;
    animation-fill-mode: both;
  }

  @colors: pink, magenta, red, volcano, orange, yellow, gold, cyan, lime, green, blue, geekblue, purple;

  // mixin to iterate over colors and create CSS class for each one
  .make-color-classes(@i: length(@colors)) when (@i > 0) {
    .make-color-classes(@i - 1);
    @color: extract(@colors, @i);
    @lightColor: "@{color}-1";
    @lightBorderColor: "@{color}-3";
    @darkColor: "@{color}-6";
    &-@{color} {
      color: @@darkColor;
      background: @@lightColor;
      border-color: @@lightBorderColor;
    }
    &-@{color}-inverse {
      background: @@darkColor;
      border-color: @@darkColor;
      color: #fff;
    }
  }

  .make-color-classes();
}

@timepicker-prefix-cls: ~"@{ant-prefix}-time-picker";
@timepicker-item-height: 32px;

.@{timepicker-prefix-cls}-panel {
  .reset-component;
  font-family: @font-family;
  z-index: @zindex-picker;
  position: absolute;

  &-inner {
    position: relative;
    outline: none;
    list-style: none;
    font-size: @font-size-base;
    text-align: left;
    background-color: @component-background;
    border-radius: @border-radius-base;
    box-shadow: @box-shadow-base;
    background-clip: padding-box;
    overflow: hidden;
    left: -2px;
  }

  &-input {
    margin: 0;
    padding: 0;
    border: 0;
    max-width: @time-picker-panel-column-width * 3 - @control-padding-horizontal - 2px;
    cursor: auto;
    outline: 0;

    .placeholder;

    &-wrap {
      box-sizing: border-box;
      position: relative;
      padding: 7px 2px 7px @control-padding-horizontal;
      border-bottom: @border-width-base @border-style-base @border-color-split;
    }

    &-invalid {
      border-color: red;
    }
  }

  &-clear-btn {
    position: absolute;
    right: 8px;
    cursor: pointer;
    overflow: hidden;
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    top: 7px;
    margin: 0;

    &-icon svg {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      margin: auto;
      font-size: @font-size-base;
      color: @disabled-color;
      display: inline-block;
      transition: color 0.3s ease;

      &:hover {
        color: @text-color-secondary;
      }
    }
  }

  &-narrow &-input-wrap {
    max-width: @time-picker-panel-column-width * 2;
  }

  &-select {
    float: left;
    font-size: @font-size-base;
    border-left: @border-width-base @border-style-base @border-color-split;
    box-sizing: border-box;
    width: @time-picker-panel-column-width;
    overflow: hidden;
    position: relative; // Fix chrome weird render bug
    max-height: @timepicker-item-height * 6;

    &:hover {
      overflow-y: auto;
    }

    &:first-child {
      border-left: 0;
      margin-left: 0;
    }

    &:last-child {
      border-right: 0;
    }

    &:only-child {
      width: 100%;
    }

    ul {
      list-style: none;
      box-sizing: border-box;
      margin: 0;
      padding: 0 0 @timepicker-item-height * 5;
      width: 100%;
    }

    li {
      list-style: none;
      box-sizing: content-box;
      margin: 0;
      padding: 0 0 0 @control-padding-horizontal;
      width: 100%;
      height: @timepicker-item-height;
      line-height: @timepicker-item-height;
      text-align: left;
      cursor: pointer;
      user-select: none;
      transition: background 0.3s;
    }

    li:hover {
      background: @item-hover-bg;
    }

    li&-option-selected {
      background: @time-picker-selected-bg;
      font-weight: bold;
      &:hover {
        background: @time-picker-selected-bg;
      }
    }

    li&-option-disabled {
      color: @btn-disable-color;
      &:hover {
        background: transparent;
        cursor: not-allowed;
      }
    }
  }

  &-combobox {
    .clearfix;
  }

  &-addon {
    padding: 8px;
    border-top: @border-width-base @border-style-base @border-color-split;
  }

  &.slide-up-enter.slide-up-enter-active&-placement-topLeft,
  &.slide-up-enter.slide-up-enter-active&-placement-topRight,
  &.slide-up-appear.slide-up-appear-active&-placement-topLeft,
  &.slide-up-appear.slide-up-appear-active&-placement-topRight {
    animation-name: antSlideDownIn;
  }

  &.slide-up-enter.slide-up-enter-active&-placement-bottomLeft,
  &.slide-up-enter.slide-up-enter-active&-placement-bottomRight,
  &.slide-up-appear.slide-up-appear-active&-placement-bottomLeft,
  &.slide-up-appear.slide-up-appear-active&-placement-bottomRight {
    animation-name: antSlideUpIn;
  }

  &.slide-up-leave.slide-up-leave-active&-placement-topLeft,
  &.slide-up-leave.slide-up-leave-active&-placement-topRight {
    animation-name: antSlideDownOut;
  }

  &.slide-up-leave.slide-up-leave-active&-placement-bottomLeft,
  &.slide-up-leave.slide-up-leave-active&-placement-bottomRight {
    animation-name: antSlideUpOut;
  }
}

.@{timepicker-prefix-cls} {
  .reset-component;
  position: relative;
  display: inline-block;
  outline: none;
  transition: opacity .3s;
  width: 128px;

  &-input {
    .input;
    &[disabled] {
      .disabled;
    }
  }

  &-open {
    opacity: 0;
  }

  &-icon {
    position: absolute;
    user-select: none;
    transition: all .3s @ease-in-out;
    width: 14px;
    height: 14px;
    line-height: 14px;
    right: @control-padding-horizontal - 1px;
    color: @disabled-color;
    top: 50%;
    margin-top: -7px;
    .@{timepicker-prefix-cls}-clock-icon {
      color: @disabled-color;
      display: block;
      line-height: 1;
    }
  }

  &-large &-input {
    .input-lg;
  }

  &-small &-input {
    .input-sm;
  }

  &-small &-icon {
    right: @control-padding-horizontal-sm - 1px;
  }
}

@timeline-prefix-cls: ~"@{ant-prefix}-timeline";
@timeline-color: @border-color-split;

.@{timeline-prefix-cls} {
  .reset-component;
  list-style: none;
  margin: 0;
  padding: 0;

  &-item {
    position: relative;
    padding: 0 0 20px;
    list-style: none;
    margin: 0;
    font-size: @font-size-base;

    &-tail {
      position: absolute;
      left: 4px;
      top: 0.75em;
      height: 100%;
      border-left: 2px solid @timeline-color;
    }

    &-pending &-head {
      font-size: @font-size-sm;
    }

    &-pending &-tail {
      display: none;
    }

    &-head {
      position: absolute;
      width: 10px;
      height: 10px;
      background-color: @component-background;
      border-radius: 100px;
      border: 2px solid transparent;

      &-blue {
        border-color: @primary-color;
        color: @primary-color;
      }
      &-red {
        border-color: @error-color;
        color: @error-color;
      }
      &-green {
        border-color: @success-color;
        color: @success-color;
      }
    }

    &-head-custom {
      position: absolute;
      text-align: center;
      line-height: 1;
      margin-top: 0;
      border: 0;
      height: auto;
      border-radius: 0;
      padding: 3px 1px;
      transform: translate(-50%, -50%);
      top: 5.5px;
      left: 5px;
      width: auto;
    }

    &-content {
      margin: 0 0 0 18px;
      position: relative;
      top: -(@font-size-base * @line-height-base - @font-size-base) + 1px;
    }

    &-last {
      .@{timeline-prefix-cls}-item-tail {
        display: none;
      }
      .@{timeline-prefix-cls}-item-content {
        min-height: 48px;
      }
    }
  }

  &.@{timeline-prefix-cls}-alternate,
  &.@{timeline-prefix-cls}-right {
    .@{timeline-prefix-cls}-item {

      &-tail,
      &-head,
      &-head-custom {
        left: 50%;
      }

      &-head {
        margin-left: -4px;
        &-custom {
          margin-left: 1px;
        }
      }

      &-left {
        .@{timeline-prefix-cls}-item-content {
          text-align: left;
          left: 50%;
          width: 50%;
        }
      }

      &-right {
        .@{timeline-prefix-cls}-item-content {
          text-align: right;
          right: 50%;
          margin-right: 18px;
          width: 50%;
          left: -30px;
        }
      }
    }
  }

  &.@{timeline-prefix-cls}-right {
    .@{timeline-prefix-cls}-item-right {
      .@{timeline-prefix-cls}-item-tail,
      .@{timeline-prefix-cls}-item-head,
      .@{timeline-prefix-cls}-item-head-custom {
        left: 100%;
      }
      .@{timeline-prefix-cls}-item-content {
        right: 0;
        width: 100%;
        left: -30px;
      }
    }
  }

  &&-pending &-item-last &-item-tail {
    border-left: 2px dotted @timeline-color;
    display: block;
  }

  &&-reverse &-item-last &-item-tail {
    display: none;
  }

  &&-reverse &-item-pending {
    .@{timeline-prefix-cls}-item-tail {
      border-left: 2px dotted @timeline-color;
      display: block;
    }
    .@{timeline-prefix-cls}-item-content {
      min-height: 48px;
    }
  }
}

@tooltip-prefix-cls: ~"@{ant-prefix}-tooltip";

// Base class
.@{tooltip-prefix-cls} {
  .reset-component;
  position: absolute;
  z-index: @zindex-tooltip;
  display: block;
  visibility: visible;
  max-width: @tooltip-max-width;

  &-hidden {
    display: none;
  }

  &-placement-top,
  &-placement-topLeft,
  &-placement-topRight {
    padding-bottom: @tooltip-distance;
  }
  &-placement-right,
  &-placement-rightTop,
  &-placement-rightBottom {
    padding-left: @tooltip-distance;
  }
  &-placement-bottom,
  &-placement-bottomLeft,
  &-placement-bottomRight {
    padding-top: @tooltip-distance;
  }
  &-placement-left,
  &-placement-leftTop,
  &-placement-leftBottom {
    padding-right: @tooltip-distance;
  }

  // Wrapper for the tooltip content
  &-inner {
    padding: 6px 8px;
    color: @tooltip-color;
    text-align: left;
    text-decoration: none;
    background-color: @tooltip-bg;
    border-radius: @border-radius-base;
    box-shadow: @box-shadow-base;
    min-height: 32px;
    word-wrap: break-word;
  }

  // Arrows
  &-arrow {
    position: absolute;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
  }

  &-placement-top &-arrow,
  &-placement-topLeft &-arrow,
  &-placement-topRight &-arrow {
    bottom: @tooltip-distance - @tooltip-arrow-width;
    border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
    border-top-color: @tooltip-arrow-color;
  }

  &-placement-top &-arrow {
    left: 50%;
    margin-left: -@tooltip-arrow-width;
  }

  &-placement-topLeft &-arrow {
    left: 16px;
  }

  &-placement-topRight &-arrow {
    right: 16px;
  }

  &-placement-right &-arrow,
  &-placement-rightTop &-arrow,
  &-placement-rightBottom &-arrow {
    left: @tooltip-distance - @tooltip-arrow-width;
    border-width: @tooltip-arrow-width @tooltip-arrow-width @tooltip-arrow-width 0;
    border-right-color: @tooltip-arrow-color;
  }

  &-placement-right &-arrow {
    top: 50%;
    margin-top: -@tooltip-arrow-width;
  }

  &-placement-rightTop &-arrow {
    top: 8px;
  }

  &-placement-rightBottom &-arrow {
    bottom: 8px;
  }

  &-placement-left &-arrow,
  &-placement-leftTop &-arrow,
  &-placement-leftBottom &-arrow {
    right: @tooltip-distance - @tooltip-arrow-width;
    border-width: @tooltip-arrow-width 0 @tooltip-arrow-width @tooltip-arrow-width;
    border-left-color: @tooltip-arrow-color;
  }

  &-placement-left &-arrow {
    top: 50%;
    margin-top: -@tooltip-arrow-width;
  }

  &-placement-leftTop &-arrow {
    top: 8px;
  }

  &-placement-leftBottom &-arrow {
    bottom: 8px;
  }

  &-placement-bottom &-arrow,
  &-placement-bottomLeft &-arrow,
  &-placement-bottomRight &-arrow {
    top: @tooltip-distance - @tooltip-arrow-width;
    border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
    border-bottom-color: @tooltip-arrow-color;
  }

  &-placement-bottom &-arrow {
    left: 50%;
    margin-left: -@tooltip-arrow-width;
  }

  &-placement-bottomLeft &-arrow {
    left: 16px;
  }

  &-placement-bottomRight &-arrow {
    right: 16px;
  }
}

@transfer-prefix-cls: ~"@{ant-prefix}-transfer";

.@{transfer-prefix-cls} {
  .reset-component;
  position: relative;

  &-disabled {
    .@{transfer-prefix-cls}-list {
      background: @transfer-disabled-bg;
    }
  }

  &-list {
    border: @border-width-base @border-style-base @border-color-base;
    display: inline-block;
    border-radius: @border-radius-base;
    vertical-align: middle;
    position: relative;
    width: 180px;
    height: 200px;
    padding-top: 34px;

    &-with-footer {
      padding-bottom: 34px;
    }

    &-search {
      padding: 0 @control-padding-horizontal-sm;
      &-action {
        color: @disabled-color;
        position: absolute;
        top: 4px;
        right: 4px;
        bottom: 4px;
        width: 28px;
        line-height: @input-height-base;
        text-align: center;
        .@{iconfont-css-prefix} {
          transition: all .3s;
          color: @disabled-color;
          &:hover {
            color: @text-color-secondary;
          }
        }
        span& {
          pointer-events: none;
        }
      }
    }

    &-header {
      padding: 6px @control-padding-horizontal;
      border-radius: @border-radius-base @border-radius-base 0 0;
      background: @component-background;
      color: @text-color;
      border-bottom: @border-width-base @border-style-base @border-color-split;
      overflow: hidden;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;

      &-title {
        position: absolute;
        right: 12px;
      }
    }

    &-body {
      font-size: @font-size-base;
      position: relative;
      height: 100%;

      &-search-wrapper {
        position: absolute;
        top: 0;
        left: 0;
        padding: 4px;
        width: 100%;
      }
    }

    &-body-with-search {
      padding-top: @input-height-base + 8px;
    }

    &-content {
      height: 100%;
      overflow: auto;
      list-style: none;
      padding: 0;
      margin: 0;
      > .LazyLoad {
        animation: transferHighlightIn 1s;
      }

      &-item {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        padding: 6px @control-padding-horizontal;
        min-height: 32px;
        transition: all .3s;
        > span {
          padding-right: 0;
        }
      }

      &-item:not(&-item-disabled):hover {
        cursor: pointer;
        background-color: @item-hover-bg;
      }

      &-item-disabled {
        cursor: not-allowed;
        color: @btn-disable-color;
      }
    }

    &-body-not-found {
      padding-top: 0;
      color: @disabled-color;
      text-align: center;
      display: none;
      position: absolute;
      top: 50%;
      width: 100%;
      margin-top: -10px;
    }

    &-content:empty + &-body-not-found {
      display: block;
    }

    &-footer {
      border-top: @border-width-base @border-style-base @border-color-split;
      border-radius: 0 0 @border-radius-base @border-radius-base;
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
    }
  }

  &-operation {
    display: inline-block;
    overflow: hidden;
    margin: 0 8px;
    vertical-align: middle;

    .@{ant-prefix}-btn {
      display: block;

      &:first-child {
        margin-bottom: 4px;
      }

      .@{iconfont-css-prefix} {
        font-size: 12px;
      }
    }
  }
}

@keyframes transferHighlightIn {
  0% {
    background: @primary-2;
  }
  100% {
    background: transparent;
  }
}

@upload-prefix-cls: ~"@{ant-prefix}-upload";
@upload-item: ~"@{ant-prefix}-upload-list-item";
@upload-pictrue-card-size: 104px;

.@{upload-prefix-cls} {
  .reset-component;
  outline: 0;

  p {
    margin: 0;
  }

  &-btn {
    display: block;
    width: 100%;
    outline: none;
  }

  input[type="file"] {
    cursor: pointer;
  }

  &&-select {
    display: inline-block;
  }

  &&-select-picture-card {
    border: @border-width-base dashed @border-color-base;
    width: @upload-pictrue-card-size;
    height: @upload-pictrue-card-size;
    border-radius: @border-radius-base;
    background-color: @background-color-light;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.3s ease;
    vertical-align: top;
    margin-right: 8px;
    margin-bottom: 8px;
    display: table;

    > .@{upload-prefix-cls} {
      width: 100%;
      height: 100%;
      display: table-cell;
      text-align: center;
      vertical-align: middle;
      padding: 8px;
    }

    &:hover {
      border-color: @primary-color;
    }
  }

  &&-drag {
    border: @border-width-base dashed @border-color-base;
    transition: border-color .3s;
    cursor: pointer;
    border-radius: @border-radius-base;
    text-align: center;
    width: 100%;
    height: 100%;
    position: relative;
    background: @background-color-light;

    .@{upload-prefix-cls} {
      padding: 16px 0;
    }

    &.@{upload-prefix-cls}-drag-hover:not(.@{upload-prefix-cls}-disabled) {
      border: 2px dashed @primary-5;
    }

    &.@{upload-prefix-cls}-disabled {
      cursor: not-allowed;
    }

    .@{upload-prefix-cls}-btn {
      display: table;
      height: 100%;
    }

    .@{upload-prefix-cls}-drag-container {
      display: table-cell;
      vertical-align: middle;
    }

    &:not(.@{upload-prefix-cls}-disabled):hover {
      border-color: @primary-5;
    }

    p.@{upload-prefix-cls}-drag-icon {
      .@{iconfont-css-prefix} {
        font-size: 48px;
        color: @primary-5;
      }
      margin-bottom: 20px;
    }
    p.@{upload-prefix-cls}-text {
      font-size: @font-size-lg;
      margin: 0 0 4px;
      color: @heading-color;
    }
    p.@{upload-prefix-cls}-hint {
      font-size: @font-size-base;
      color: @text-color-secondary;
    }
    .@{iconfont-css-prefix}-plus {
      font-size: 30px;
      transition: all .3s;
      color: @disabled-color;
      &:hover {
        color: @text-color-secondary;
      }
    }
    &:hover .@{iconfont-css-prefix}-plus {
      color: @text-color-secondary;
    }
  }
}

.@{upload-prefix-cls}-list {
  .reset-component;
  .clearfix;
  &-item {
    margin-top: 8px;
    font-size: @font-size-base;
    position: relative;
    height: 22px;
    &-name {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      padding-left: @font-size-base + 8px;
      width: 100%;
      display: inline-block;
    }

    &-info {
      height: 100%;
      padding: 0 12px 0 4px;
      transition: background-color .3s;

      > span {
        display: block;
      }

      .@{iconfont-css-prefix}-loading,
      .@{iconfont-css-prefix}-paper-clip {
        font-size: @font-size-base;
        color: @text-color-secondary;
        position: absolute;
        top: @font-size-base / 2 - 2px;
      }
    }

    .@{iconfont-css-prefix}-close {
      .iconfont-size-under-12px(10px);
      transition: all .3s;
      opacity: 0;
      cursor: pointer;
      position: absolute;
      top: 6px;
      right: 4px;
      color: @text-color-secondary;
      line-height: 0;
      &:hover {
        color: @text-color;
      }
    }

    &:hover &-info {
      background-color: @item-hover-bg;
    }

    &:hover .@{iconfont-css-prefix}-close {
      opacity: 1;
    }

    &-error,
    &-error .@{iconfont-css-prefix}-paper-clip,
    &-error &-name {
      color: @error-color;
    }

    &-error .@{iconfont-css-prefix}-close {
      opacity: 1;
      color: @error-color !important;
    }

    &-progress {
      line-height: 0;
      font-size: @font-size-base;
      position: absolute;
      width: 100%;
      bottom: -12px;
      padding-left: @font-size-base + 12px;
    }
  }

  &-picture,
  &-picture-card {
    .@{upload-item} {
      padding: 8px;
      border-radius: @border-radius-base;
      border: @border-width-base @border-style-base @border-color-base;
      height: 66px;
      position: relative;
      &:hover {
        background: transparent;
      }
      &-error {
        border-color: @error-color;
      }
    }

    .@{upload-item}-info {
      padding: 0;
    }

    .@{upload-item}:hover .@{upload-item}-info {
      background: transparent;
    }

    .@{upload-item}-uploading {
      border-style: dashed;
    }

    .@{upload-item}-thumbnail {
      width: 48px;
      height: 48px;
      position: absolute;
      top: 8px;
      left: 8px;
      text-align: center;
    }

    .@{upload-item}-icon {
      color: @disabled-color;
      font-size: 36px;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -18px;
      margin-left: -18px;
    }

    .@{upload-item}-thumbnail img {
      width: 48px;
      height: 48px;
      display: block;
      overflow: hidden;
    }

    .@{upload-item}-thumbnail.@{iconfont-css-prefix}:before {
      line-height: 48px;
      font-size: 24px;
      color: @text-color-secondary;
    }

    .@{upload-item}-name {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      margin: 0 0 0 8px;
      line-height: 44px;
      transition: all .3s;
      padding-left: 48px;
      padding-right: 8px;
      max-width: 100%;
      display: inline-block;
      box-sizing: border-box;
    }

    .@{upload-item}-uploading .@{upload-item}-name {
      line-height: 28px;
    }

    .@{upload-item}-progress {
      padding-left: 56px;
      margin-top: 0;
      bottom: 14px;
      width: ~"calc(100% - 24px)";
    }

    .@{iconfont-css-prefix}-close {
      position: absolute;
      right: 8px;
      top: 8px;
      line-height: 1;
      opacity: 1;
    }
  }

  &-picture-card {
    // https://github.com/ant-design/ant-design/issues/11183
    float: left;

    &.@{upload-prefix-cls}-list:after {
      display: none;
    }
    .@{upload-item} {
      float: left;
      width: @upload-pictrue-card-size;
      height: @upload-pictrue-card-size;
      margin: 0 8px 8px 0;
    }

    .@{upload-item}-info {
      height: 100%;
      position: relative;
      overflow: hidden;

      &:before {
        content: ' ';
        position: absolute;
        z-index: 1;
        background-color: rgba(0, 0, 0, 0.5);
        transition: all .3s;
        width: 100%;
        height: 100%;
        opacity: 0;
      }
    }

    .@{upload-item}:hover .@{upload-item}-info:before {
      opacity: 1;
    }

    .@{upload-item}-actions {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      z-index: 10;
      white-space: nowrap;
      opacity: 0;
      transition: all .3s;

      .@{iconfont-css-prefix}-eye-o,
      .@{iconfont-css-prefix}-delete {
        z-index: 10;
        transition: all .3s;
        cursor: pointer;
        font-size: 16px;
        width: 16px;
        color: @text-color-dark;
        margin: 0 4px;
        &:hover {
          color: #fff;
        }
      }
    }

    .@{upload-item}-info:hover + .@{upload-item}-actions,
    .@{upload-item}-actions:hover {
      opacity: 1;
    }

    .@{upload-item}-thumbnail,
    .@{upload-item}-thumbnail img {
      display: block;
      width: 100%;
      height: 100%;
      position: static;
    }

    .@{upload-item}-name {
      margin: 8px 0 0;
      padding: 0;
      text-align: center;
      line-height: @line-height-base;
      display: none;
    }

    .anticon-picture + .@{upload-item}-name {
      display: block;
    }

    .@{upload-item}-uploading {
      &.@{upload-item} {
        background-color: @background-color-light;
      }

      .@{upload-item}-info {
        height: auto;
        &:before,
        .@{iconfont-css-prefix}-eye-o,
        .@{iconfont-css-prefix}-delete {
          display: none;
        }
      }

      &-text {
        margin-top: 18px;
        color: @text-color-secondary;
      }
    }

    .@{upload-item}-progress {
      padding-left: 0;
      bottom: 32px;
    }
  }

  .@{upload-prefix-cls}-success-icon {
    color: @success-color;
    font-weight: bold;
  }

  .@{upload-prefix-cls}-animate-enter,
  .@{upload-prefix-cls}-animate-leave,
  .@{upload-prefix-cls}-animate-inline-enter,
  .@{upload-prefix-cls}-animate-inline-leave {
    animation-duration: .3s;
    animation-fill-mode: @ease-in-out-circ;
  }

  .@{upload-prefix-cls}-animate-enter {
    animation-name: uploadAnimateIn;
  }

  .@{upload-prefix-cls}-animate-leave {
    animation-name: uploadAnimateOut;
  }

  .@{upload-prefix-cls}-animate-inline-enter {
    animation-name: uploadAnimateInlineIn;
  }

  .@{upload-prefix-cls}-animate-inline-leave {
    animation-name: uploadAnimateInlineOut;
  }
}

@keyframes uploadAnimateIn {
  from {
    height: 0;
    margin: 0;
    opacity: 0;
    padding: 0;
  }
}

@keyframes uploadAnimateOut {
  to {
    height: 0;
    margin: 0;
    padding: 0;
    opacity: 0;
  }
}

@keyframes uploadAnimateInlineIn {
  from {
    width: 0;
    height: 0;
    margin: 0;
    opacity: 0;
    padding: 0;
  }
}

@keyframes uploadAnimateInlineOut {
  to {
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
    opacity: 0;
  }
}

@input-prefix-cls: ~"@{ant-prefix}-input";
@select-prefix-cls: ~"@{ant-prefix}-select";
@autocomplete-prefix-cls: ~"@{select-prefix-cls}-auto-complete";

.@{autocomplete-prefix-cls} {
  .reset-component;

  &.@{select-prefix-cls} {
    .@{select-prefix-cls} {
      &-selection {
        border: 0;
        box-shadow: none;
        &__rendered {
          margin-left: 0;
          margin-right: 0;
          height: 100%;
          line-height: @input-height-base;
        }
        &__placeholder {
          margin-left: (@input-padding-horizontal-base + 1px);
          margin-right: (@input-padding-horizontal-base + 1px);
        }

        &--single {
          height: auto;
        }
      }
    }

    // Fix https://github.com/ant-design/ant-design/issues/7800
    .@{select-prefix-cls}-search--inline {
      position: static;
      float: left;
    }

    &-allow-clear {
      .@{select-prefix-cls}-selection:hover .@{select-prefix-cls}-selection__rendered {
        margin-right: 0 !important;
      }
    }

    .@{input-prefix-cls} {
      background: transparent;
      border-width: @border-width-base;
      line-height: @line-height-base;
      height: @input-height-base;
      &:focus,
      &:hover {
        .hover;
      }
      &[disabled] {
        .disabled;
      }
    }

    &-lg {
      .@{select-prefix-cls}-selection__rendered {
        line-height: @input-height-lg;
      }
      .@{input-prefix-cls} {
        padding-top: @input-padding-vertical-lg;
        padding-bottom: @input-padding-vertical-lg;
        height: @input-height-lg;
      }
    }

    &-sm {
      .@{select-prefix-cls}-selection__rendered {
        line-height: @input-height-sm;
      }
      .@{input-prefix-cls} {
        padding-top: @input-padding-vertical-sm;
        padding-bottom: @input-padding-vertical-sm;
        height: @input-height-sm;
      }
    }
  }
}

@tree-prefix-cls: ~"@{ant-prefix}-tree";
@tree-select-prefix-cls: ~"@{ant-prefix}-select";

.antTreeSwitcherIcon(@type: "tree-default-open-icon") {
  .@{tree-prefix-cls}-switcher-icon,
  .@{tree-select-prefix-cls}-switcher-icon {
    .iconfont-size-under-12px(7px);
    display: inline-block;
    font-weight: bold;
    svg {
      transition: transform .3s;
    }
  }
}

.antTreeShowLineIcon(@type) {
  .@{tree-prefix-cls}-switcher-icon,
  .@{tree-select-prefix-cls}-switcher-icon {
    .iconfont-size-under-12px(12px);
    display: inline-block;
    font-weight: normal;
    svg {
      transition: transform .3s;
    }
  }
}

@tree-prefix-cls: ~"@{ant-prefix}-tree";

.@{tree-prefix-cls} {
  &.@{tree-prefix-cls}-directory {
    position: relative;

    // Stretch selector width
    > li,
    .@{tree-prefix-cls}-child-tree > li {
      span {
        &.@{tree-prefix-cls}-switcher {
          position: relative;
          z-index: 1;

          &.@{tree-prefix-cls}-switcher-noop {
            pointer-events: none;
          }
        }

        &.@{tree-prefix-cls}-checkbox {
          position: relative;
          z-index: 1;
        }

        &.@{tree-prefix-cls}-node-content-wrapper {
          user-select: none;
          border-radius: 0;

          &:hover {
            background: transparent;

            &:before {
              background: @item-hover-bg;
            }
          }

          &.@{tree-prefix-cls}-node-selected {
            color: @tree-directory-selected-color;
            background: transparent;
          }

          &:before {
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            height: @tree-title-height;
            transition: all .3s;
          }

          > span {
            position: relative;
            z-index: 1;
          }
        }
      }

      &.@{tree-prefix-cls}-treenode-selected {
        > span {
          &.@{tree-prefix-cls}-switcher {
            color: @tree-directory-selected-color;
          }

          &.@{tree-prefix-cls}-checkbox {
            .@{tree-prefix-cls}-checkbox-inner {
              border-color: @primary-color;
            }

            &.@{tree-prefix-cls}-checkbox-checked {
              &:after {
                border-color: @checkbox-check-color;
              }

              .@{tree-prefix-cls}-checkbox-inner {
                background: @checkbox-check-color;

                &:after {
                  border-color: @primary-color;
                }
              }
            }
          }

          &.@{tree-prefix-cls}-node-content-wrapper {
            &:before {
              background: @tree-directory-selected-bg;
            }
          }
        }
      }
    }
  }
}

@tree-prefix-cls: ~"@{ant-prefix}-tree";
@tree-showline-icon-color: @text-color-secondary;

.antCheckboxFn(@checkbox-prefix-cls: ~"@{ant-prefix}-tree-checkbox");

.@{tree-prefix-cls} {
  .reset-component;
  margin: 0;
  padding: 0;

  ol, ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  li {
    padding: 4px 0;
    margin: 0;
    list-style: none;
    white-space: nowrap;
    outline: 0;
    span[draggable],
    span[draggable="true"] {
      user-select: none;
      border-top: 2px transparent solid;
      border-bottom: 2px transparent solid;
      /* Required to make elements draggable in old WebKit */
      -khtml-user-drag: element;
      -webkit-user-drag: element;

      line-height: @tree-title-height - 4px;
    }
    &.drag-over {
      > span[draggable] {
        background-color: @primary-color;
        color: white;
        opacity: 0.8;
      }
    }
    &.drag-over-gap-top {
      > span[draggable] {
        border-top-color: @primary-color;
      }
    }
    &.drag-over-gap-bottom {
      > span[draggable] {
        border-bottom-color: @primary-color;
      }
    }
    &.filter-node {
      > span {
        color: @highlight-color !important;
        font-weight: 500 !important;
      }
    }

    // When node is loading
    &.@{tree-prefix-cls}-treenode-loading {
      span {
        &.@{tree-prefix-cls}-switcher {
          &.@{tree-prefix-cls}-switcher_open,
          &.@{tree-prefix-cls}-switcher_close {
            .@{tree-prefix-cls}-switcher-loading-icon {
              display: inline-block;
              position: absolute;
              left: 0;
              width: 24px;
              height: 24px;
              color: @primary-color;
              transform: none;
              font-size: 14px;
              svg {
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                margin: auto;
              }
            }

            :root &:after {
              opacity: 0;
            }
          }
        }
      }
    }

    ul {
      margin: 0;
      padding: 0 0 0 @tree-child-padding;
    }
    .@{tree-prefix-cls}-node-content-wrapper {
      display: inline-block;
      padding: 0 5px;
      border-radius: @border-radius-sm;
      margin: 0;
      cursor: pointer;
      text-decoration: none;
      vertical-align: top;
      color: @text-color;
      transition: all .3s;
      height: @tree-title-height;
      line-height: @tree-title-height;
      &:hover {
        background-color: @item-hover-bg;
      }
      &.@{tree-prefix-cls}-node-selected {
        background-color: @primary-2;
      }
    }
    span {
      &.@{tree-prefix-cls}-checkbox {
        margin: 4px 4px 0 2px;
      }
      &.@{tree-prefix-cls}-switcher,
      &.@{tree-prefix-cls}-iconEle {
        margin: 0;
        width: 24px;
        height: 24px;
        line-height: @tree-title-height;
        display: inline-block;
        vertical-align: top;
        border: 0 none;
        cursor: pointer;
        outline: none;
        text-align: center;
      }

      &.@{tree-prefix-cls}-switcher {
        position: relative;

        &.@{tree-prefix-cls}-switcher-noop {
          cursor: default;
        }
        &.@{tree-prefix-cls}-switcher_open {
          .antTreeSwitcherIcon();
        }
        &.@{tree-prefix-cls}-switcher_close {
          .antTreeSwitcherIcon();
          .@{tree-prefix-cls}-switcher-icon {
            svg {
              transform: rotate(-90deg);
            }
          }
        }
      }
    }
    &:last-child > span {
      &.@{tree-prefix-cls}-switcher,
      &.@{tree-prefix-cls}-iconEle {
        &:before {
          display: none;
        }
      }
    }
  }

  > li {
    &:first-child {
      padding-top: 7px;
    }
    &:last-child {
      padding-bottom: 7px;
    }
  }
  &-child-tree {
    display: none;
    &-open {
      display: block;
    }
  }
  li&-treenode-disabled {
    > span:not(.@{tree-prefix-cls}-switcher),
    > .@{tree-prefix-cls}-node-content-wrapper,
    > .@{tree-prefix-cls}-node-content-wrapper span {
      color: @disabled-color;
      cursor: not-allowed;
    }
    > .@{tree-prefix-cls}-node-content-wrapper:hover {
      background: transparent;
    }
  }
  &-icon__open {
    margin-right: 2px;
    vertical-align: top;
  }
  &-icon__close {
    margin-right: 2px;
    vertical-align: top;
  }
  // Tree with line
  &&-show-line {
    li {
      position: relative;
      span {
        &.@{tree-prefix-cls}-switcher {
          background: @component-background;
          color: @tree-showline-icon-color;
          &.@{tree-prefix-cls}-switcher-noop {
            .antTreeShowLineIcon("tree-doc-icon");
          }
          &.@{tree-prefix-cls}-switcher_open {
            .antTreeShowLineIcon("tree-showline-open-icon");
          }
          &.@{tree-prefix-cls}-switcher_close {
            .antTreeShowLineIcon("tree-showline-close-icon");
          }
        }
      }
    }
    li:not(:last-child):before {
      content: ' ';
      width: 1px;
      border-left: 1px solid @border-color-base;
      height: 100%;
      position: absolute;
      left: 12px;
      margin: 22px 0;
    }
  }

  &.@{tree-prefix-cls}-icon-hide {
    .@{tree-prefix-cls}-treenode-loading {
      .@{tree-prefix-cls}-iconEle {
        display: none;
      }
    }
  }
}

@calendar-prefix-cls: ~"@{ant-prefix}-calendar";
@calendar-timepicker-prefix-cls: ~"@{ant-prefix}-calendar-time-picker";

.@{calendar-prefix-cls}-picker-container {
  .reset-component;
  font-family: @font-family;
  position: absolute;
  z-index: @zindex-picker;

  &.slide-up-enter.slide-up-enter-active&-placement-topLeft,
  &.slide-up-enter.slide-up-enter-active&-placement-topRight,
  &.slide-up-appear.slide-up-appear-active&-placement-topLeft,
  &.slide-up-appear.slide-up-appear-active&-placement-topRight {
    animation-name: antSlideDownIn;
  }

  &.slide-up-enter.slide-up-enter-active&-placement-bottomLeft,
  &.slide-up-enter.slide-up-enter-active&-placement-bottomRight,
  &.slide-up-appear.slide-up-appear-active&-placement-bottomLeft,
  &.slide-up-appear.slide-up-appear-active&-placement-bottomRight {
    animation-name: antSlideUpIn;
  }

  &.slide-up-leave.slide-up-leave-active&-placement-topLeft,
  &.slide-up-leave.slide-up-leave-active&-placement-topRight {
    animation-name: antSlideDownOut;
  }

  &.slide-up-leave.slide-up-leave-active&-placement-bottomLeft,
  &.slide-up-leave.slide-up-leave-active&-placement-bottomRight {
    animation-name: antSlideUpOut;
  }
}

.@{calendar-prefix-cls}-picker {
  .reset-component;
  position: relative;
  display: inline-block;
  outline: none;
  transition: opacity 0.3s;

  &-input {
    outline: none;
  }

  &:hover &-input:not(.@{ant-prefix}-input-disabled) {
    border-color: @primary-color;
  }

  &:focus &-input:not(.@{ant-prefix}-input-disabled) {
    .active();
  }

  &-clear,
  &-icon {
    position: absolute;
    width: 14px;
    height: 14px;
    right: @control-padding-horizontal;
    top: 50%;
    margin-top: -7px;
    line-height: 14px;
    font-size: @font-size-sm;
    transition: all .3s;
    user-select: none;
    z-index: 1;
  }

  &-clear {
    opacity: 0;
    z-index: 2;
    font-size: @font-size-base;
    color: @disabled-color;
    background: @input-bg;
    pointer-events: none;
    cursor: pointer;
    &:hover {
      color: @text-color-secondary;
    }
  }

  &:hover &-clear {
    opacity: 1;
    pointer-events: auto;
  }

  &-icon {
    font-family: "anticon";
    font-size: @font-size-base;
    color: @disabled-color;
    display: inline-block;
    line-height: 1;
  }

  &-small &-clear,
  &-small &-icon {
    right: @control-padding-horizontal-sm;
  }
}

.calendarPanelHeader(@calendar-prefix-cls) {
  height: 40px;
  line-height: 40px;
  text-align: center;
  user-select: none;
  border-bottom: @border-width-base @border-style-base @border-color-split;

  a:hover {
    color: @link-hover-color;
  }

  .@{calendar-prefix-cls}-century-select,
  .@{calendar-prefix-cls}-decade-select,
  .@{calendar-prefix-cls}-year-select,
  .@{calendar-prefix-cls}-month-select {
    padding: 0 2px;
    font-weight: 500;
    display: inline-block;
    color: @heading-color;
    line-height: 40px;
  }

  .@{calendar-prefix-cls}-century-select-arrow,
  .@{calendar-prefix-cls}-decade-select-arrow,
  .@{calendar-prefix-cls}-year-select-arrow,
  .@{calendar-prefix-cls}-month-select-arrow {
    display: none;
  }

  .@{calendar-prefix-cls}-prev-century-btn,
  .@{calendar-prefix-cls}-next-century-btn,
  .@{calendar-prefix-cls}-prev-decade-btn,
  .@{calendar-prefix-cls}-next-decade-btn,
  .@{calendar-prefix-cls}-prev-month-btn,
  .@{calendar-prefix-cls}-next-month-btn,
  .@{calendar-prefix-cls}-prev-year-btn,
  .@{calendar-prefix-cls}-next-year-btn {
    position: absolute;
    top: 0;
    color: @text-color-secondary;
    font-family: Arial, "Hiragino Sans GB", "Microsoft Yahei", "Microsoft Sans Serif", sans-serif;
    padding: 0 5px;
    font-size: 16px;
    display: inline-block;
    line-height: 40px;
  }

  .@{calendar-prefix-cls}-prev-century-btn,
  .@{calendar-prefix-cls}-prev-decade-btn,
  .@{calendar-prefix-cls}-prev-year-btn {
    left: 7px;

    &:after {
      content: '«';
    }
  }

  .@{calendar-prefix-cls}-next-century-btn,
  .@{calendar-prefix-cls}-next-decade-btn,
  .@{calendar-prefix-cls}-next-year-btn {
    right: 7px;

    &:after {
      content: '»';
    }
  }

  .@{calendar-prefix-cls}-prev-month-btn {
    left: 29px;

    &:after {
      content: '‹';
    }
  }

  .@{calendar-prefix-cls}-next-month-btn {
    right: 29px;

    &:after {
      content: '›';
    }
  }
}

.@{calendar-prefix-cls} {
  position: relative;
  outline: none;
  width: 280px;
  border: @border-width-base @border-style-base #fff;
  list-style: none;
  font-size: @font-size-base;
  text-align: left;
  background-color: @component-background;
  border-radius: @border-radius-base;
  box-shadow: @box-shadow-base;
  background-clip: padding-box;
  line-height: @line-height-base;

  &-input-wrap {
    height: 34px;
    padding: 6px @control-padding-horizontal - 2px;
    border-bottom: @border-width-base @border-style-base @border-color-split;
  }

  &-input {
    border: 0;
    width: 100%;
    cursor: auto;
    outline: 0;
    height: 22px;
    color: @input-color;
    background: @input-bg;
    .placeholder;
  }

  &-week-number {
    width: 286px;

    &-cell {
      text-align: center;
    }
  }

  &-header {
    .calendarPanelHeader(@calendar-prefix-cls);
  }

  &-body {
    padding: 8px 12px;
  }

  table {
    border-collapse: collapse;
    max-width: 100%;
    background-color: transparent;
    width: 100%;
  }

  table,
  th,
  td {
    border: 0;
    text-align: center;
  }

  &-calendar-table {
    border-spacing: 0;
    margin-bottom: 0;
  }

  &-column-header {
    line-height: 18px;
    width: 33px;
    padding: 6px 0;
    text-align: center;
    .@{calendar-prefix-cls}-column-header-inner {
      display: block;
      font-weight: normal;
    }
  }

  &-week-number-header {
    .@{calendar-prefix-cls}-column-header-inner {
      display: none;
    }
  }

  &-cell {
    padding: 3px 0;
    height: 30px;
  }

  &-date {
    display: block;
    margin: 0 auto;
    color: @text-color;
    border-radius: @border-radius-sm;
    width: 24px;
    height: 24px;
    line-height: 22px;
    border: @border-width-base @border-style-base transparent;
    padding: 0;
    background: transparent;
    text-align: center;
    transition: background 0.3s ease;

    &-panel {
      position: relative;
    }

    &:hover {
      background: @item-hover-bg;
      cursor: pointer;
    }

    &:active {
      color: #fff;
      background: @primary-5;
    }
  }

  &-today &-date {
    border-color: @primary-color;
    font-weight: bold;
    color: @primary-color;
  }

  &-last-month-cell &-date,
  &-next-month-btn-day &-date {
    color: @disabled-color;
  }

  &-selected-day &-date {
    background: tint(@primary-color, 80%);
  }

  &-selected-date, &-selected-start-date, &-selected-end-date {
    .@{calendar-prefix-cls}-date {
      background: @primary-color;
      color: #fff;
      border: @border-width-base @border-style-base transparent;

      &:hover {
        background: @primary-color;
      }
    }
  }

  &-disabled-cell &-date {
    cursor: not-allowed;
    color: #bcbcbc;
    background: @disabled-bg;
    border-radius: 0;
    width: auto;
    border: @border-width-base @border-style-base transparent;

    &:hover {
      background: @disabled-bg;
    }
  }
  &-disabled-cell&-today &-date {
    position: relative;
    margin-right: 5px;
    padding-left: 5px;
    &:before {
      content: " ";
      position: absolute;
      top: -1px;
      left: 5px;
      width: 24px;
      height: 24px;
      border: @border-width-base @border-style-base #bcbcbc;
      border-radius: @border-radius-sm;
    }
  }

  &-disabled-cell-first-of-row &-date {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
  }

  &-disabled-cell-last-of-row &-date {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
  }

  &-footer {
    border-top: @border-width-base @border-style-base @border-color-split;
    line-height: 38px;
    padding: 0 12px;
    &:empty {
      border-top: 0;
    }
    &-btn {
      text-align: center;
      display: block;
    }
    &-extra {
      text-align: left;
    }
  }

  .@{calendar-prefix-cls}-today-btn,
  .@{calendar-prefix-cls}-clear-btn {
    display: inline-block;
    text-align: center;
    margin: 0 0 0 8px;
    &-disabled {
      color: @disabled-color;
      cursor: not-allowed;
    }
    &:only-child {
      margin: 0;
    }
  }

  .@{calendar-prefix-cls}-clear-btn {
    display: none;
    position: absolute;
    right: 5px;
    text-indent: -76px;
    overflow: hidden;
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    top: 7px;
    margin: 0;
  }

  .@{calendar-prefix-cls}-clear-btn:after {
    font-size: @font-size-base;
    color: @disabled-color;
    display: inline-block;
    line-height: 1;
    width: 20px;
    text-indent: 43px;
    transition: color 0.3s ease;
  }

  .@{calendar-prefix-cls}-clear-btn:hover:after {
    color: @text-color-secondary;
  }

  .@{calendar-prefix-cls}-ok-btn {
    .btn;
    .btn-primary;
    .button-size(@btn-height-sm; @btn-padding-sm; @font-size-base; @border-radius-base);
    line-height: @btn-height-sm - 2px;

    &-disabled {
      .button-color(@btn-disable-color; @btn-disable-bg; @btn-disable-border);
      cursor: not-allowed;
      &:hover {
        .button-color(@btn-disable-color; @btn-disable-bg; @btn-disable-border);
      }
    }
  }
}

@input-box-height: 34px;

.@{calendar-prefix-cls}-range-picker-input {
  background-color: transparent;
  border: 0;
  height: 99%;
  outline: 0;
  width: 44%;
  text-align: center;
  .placeholder();

  &[disabled] {
    cursor: not-allowed;
  }
}

.@{calendar-prefix-cls}-range-picker-separator {
  color: @text-color-secondary;
  width: 10px;
  display: inline-block;
  height: 100%;
  vertical-align: top;
}

.@{calendar-prefix-cls}-range {
  width: 552px;
  overflow: hidden;

  .@{calendar-prefix-cls}-date-panel {
    &::after {
      content: ".";
      display: block;
      height: 0;
      clear: both;
      visibility: hidden;
    }
  }
  &-part {
    width: 50%;
    position: relative;
  }

  &-left {
    float: left;
    .@{calendar-prefix-cls} {
      &-time-picker-inner {
        border-right: 1px solid @border-color-split;
      }
    }
  }

  &-right {
    float: right;
    .@{calendar-prefix-cls} {
      &-time-picker-inner {
        border-left: 1px solid @border-color-split;
      }
    }
  }

  &-middle {
    position: absolute;
    left: 50%;
    width: 20px;
    margin-left: -132px;
    text-align: center;
    height: @input-box-height;
    line-height: @input-box-height;
    color: @text-color-secondary;
  }

  &-right .@{calendar-prefix-cls}-date-input-wrap {
    margin-left: -118px;
  }

  &.@{calendar-prefix-cls}-time &-middle {
    margin-left: -12px;
  }

  &.@{calendar-prefix-cls}-time &-right .@{calendar-prefix-cls}-date-input-wrap {
    margin-left: 0;
  }

  .@{calendar-prefix-cls}-input-wrap {
    position: relative;
    height: @input-box-height;
  }

  .@{calendar-prefix-cls}-input,
  .@{calendar-timepicker-prefix-cls}-input {
    .input;
    height: @input-height-sm;
    border: 0;
    box-shadow: none;
    padding-left: 0;
    padding-right: 0;

    &:focus {
      box-shadow: none;
    }
  }

  .@{calendar-timepicker-prefix-cls}-icon {
    display: none;
  }

  &.@{calendar-prefix-cls}-week-number {
    width: 574px;

    .@{calendar-prefix-cls}-range-part {
      width: 286px;
    }
  }

  .@{calendar-prefix-cls}-year-panel,
  .@{calendar-prefix-cls}-month-panel,
  .@{calendar-prefix-cls}-decade-panel {
    top: @input-box-height;
  }
  .@{calendar-prefix-cls}-month-panel .@{calendar-prefix-cls}-year-panel {
    top: 0;
  }
  .@{calendar-prefix-cls}-decade-panel-table,
  .@{calendar-prefix-cls}-year-panel-table,
  .@{calendar-prefix-cls}-month-panel-table {
    height: 208px;
  }

  .@{calendar-prefix-cls}-in-range-cell {
    border-radius: 0;
    position: relative;
    > div {
      position: relative;
      z-index: 1;
    }
    &:before {
      content: '';
      display: block;
      background: @item-active-bg;
      border-radius: 0;
      border: 0;
      position: absolute;
      top: 4px;
      bottom: 4px;
      left: 0;
      right: 0;
    }
  }

  .@{calendar-prefix-cls}-footer-extra {
    float: left;
  }

  // `div` for selector specificity
  div&-quick-selector {
    text-align: left;

    > a {
      margin-right: 8px;
    }
  }

  .@{calendar-prefix-cls},
  .@{calendar-prefix-cls}-month-panel,
  .@{calendar-prefix-cls}-year-panel {
    &-header {
      border-bottom: 0;
    }
    &-body {
      border-top: @border-width-base @border-style-base @border-color-split;
    }
  }

  &.@{calendar-prefix-cls}-time {
    .@{calendar-timepicker-prefix-cls} {
      height: 207px;
      width: 100%;
      top: 68px;
      z-index: 2; // cover .ant-calendar-range .ant-calendar-in-range-cell > div (z-index: 1)
      &-panel {
        height: 267px;
        margin-top: -34px;
      }

      &-inner {
        padding-top: 40px;
        height: 100%;
        background: none;
      }

      &-combobox {
        display: inline-block;
        height: 100%;
        background-color: @component-background;
        border-top: @border-width-base @border-style-base @border-color-split;
      }
      &-select {
        height: 100%;
        ul {
          max-height: 100%;
        }
      }
    }
    .@{calendar-prefix-cls}-footer .@{calendar-prefix-cls}-time-picker-btn {
      margin-right: 8px;
    }
    .@{calendar-prefix-cls}-today-btn {
      margin: 8px 12px;
      height: 22px;
      line-height: 22px;
    }
  }

  &-with-ranges.@{calendar-prefix-cls}-time .@{calendar-timepicker-prefix-cls} {
    height: 233px;
  }
}

.@{calendar-prefix-cls}-range.@{calendar-prefix-cls}-show-time-picker {
  .@{calendar-prefix-cls}-body {
    border-top-color: transparent;
  }
}

.@{calendar-timepicker-prefix-cls} {
  position: absolute;
  width: 100%;
  top: 40px;
  background-color: @component-background;

  &-panel {
    z-index: @zindex-picker;
    position: absolute;
    width: 100%;
  }

  &-inner {
    display: inline-block;
    position: relative;
    outline: none;
    list-style: none;
    font-size: @font-size-base;
    text-align: left;
    background-color: @component-background;
    background-clip: padding-box;
    line-height: 1.5;
    overflow: hidden;
    width: 100%;
  }
  &-combobox {
    width: 100%;
  }

  &-column-1,
  &-column-1 &-select {
    width: 100%;
  }
  &-column-2 &-select {
    width: 50%;
  }
  &-column-3 &-select {
    width: 33.33%;
  }
  &-column-4 &-select {
    width: 25%;
  }

  &-input-wrap {
    display: none;
  }

  &-select {
    float: left;
    font-size: @font-size-base;
    border-right: @border-width-base @border-style-base @border-color-split;
    box-sizing: border-box;
    overflow: hidden;
    position: relative; // Fix chrome weird render bug
    height: 226px;

    &:hover {
      overflow-y: auto;
    }

    &:first-child {
      border-left: 0;
      margin-left: 0;
    }

    &:last-child {
      border-right: 0;
    }

    ul {
      list-style: none;
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      width: 100%;
      max-height: 206px;
    }

    li {
      padding-left: 32px;
      list-style: none;
      box-sizing: content-box;
      margin: 0;
      width: 100%;
      height: 24px;
      line-height: 24px;
      cursor: pointer;
      user-select: none;
      transition: background 0.3s ease;
    }

    li:last-child:after {
      content: '';
      height: 202px;
      display: block;
    }

    li:hover {
      background: @item-hover-bg;
    }

    li&-option-selected {
      background: @time-picker-selected-bg;
      font-weight: bold;
    }

    li&-option-disabled {
      color: @btn-disable-color;
      &:hover {
        background: transparent;
        cursor: not-allowed;
      }
    }
  }
}

.@{calendar-prefix-cls}-time {
  .@{calendar-prefix-cls}-day-select {
    padding: 0 2px;
    font-weight: 500;
    display: inline-block;
    color: @heading-color;
    line-height: 34px;
  }

  .@{calendar-prefix-cls}-footer {
    position: relative;
    height: auto;

    &-btn {
      text-align: right;
    }

    .@{calendar-prefix-cls}-today-btn {
      float: left;
      margin: 0;
    }

    .@{calendar-prefix-cls}-time-picker-btn {
      display: inline-block;
      margin-right: 8px;

      &-disabled {
        color: @disabled-color;
      }
    }
  }
}

.@{calendar-prefix-cls}-month-panel {
  position: absolute;
  top: 1px;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10;
  border-radius: @border-radius-base;
  background: @component-background;
  outline: none;

  > div { // TODO: this is a useless wrapper, and we need to remove it in rc-calendar
    height: 100%;
  }
}

.@{calendar-prefix-cls}-month-panel-hidden {
  display: none;
}

.@{calendar-prefix-cls}-month-panel-header {
  .calendarPanelHeader(~"@{calendar-prefix-cls}-month-panel");
}

.@{calendar-prefix-cls}-month-panel-body {
  height: ~"calc(100% - 40px)";
}

.@{calendar-prefix-cls}-month-panel-table {
  table-layout: fixed;
  width: 100%;
  height: 100%;
  border-collapse: separate;
}

.@{calendar-prefix-cls}-month-panel-selected-cell .@{calendar-prefix-cls}-month-panel-month {
  background: @primary-color;
  color: #fff;

  &:hover {
    background: @primary-color;
    color: #fff;
  }
}

.@{calendar-prefix-cls}-month-panel-cell {
  text-align: center;

  &-disabled .@{calendar-prefix-cls}-month-panel-month {
    &,
    &:hover {
      cursor: not-allowed;
      color: #bcbcbc;
      background: @disabled-bg;
    }
  }
}

.@{calendar-prefix-cls}-month-panel-month {
  display: inline-block;
  margin: 0 auto;
  color: @text-color;
  background: transparent;
  text-align: center;
  height: 24px;
  line-height: 24px;
  padding: 0 8px;
  border-radius: @border-radius-sm;
  transition: background 0.3s ease;

  &:hover {
    background: @item-hover-bg;
    cursor: pointer;
  }
}

.@{calendar-prefix-cls}-year-panel {
  position: absolute;
  top: 1px;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10;
  border-radius: @border-radius-base;
  background: @component-background;
  outline: none;

  > div { // TODO: this is a useless wrapper, and we need to remove it in rc-calendar
    height: 100%;
  }
}

.@{calendar-prefix-cls}-year-panel-hidden {
  display: none;
}

.@{calendar-prefix-cls}-year-panel-header {
  .calendarPanelHeader(~"@{calendar-prefix-cls}-year-panel");
}

.@{calendar-prefix-cls}-year-panel-body {
  height: ~"calc(100% - 40px)";
}

.@{calendar-prefix-cls}-year-panel-table {
  table-layout: fixed;
  width: 100%;
  height: 100%;
  border-collapse: separate;
}

.@{calendar-prefix-cls}-year-panel-cell {
  text-align: center;
}

.@{calendar-prefix-cls}-year-panel-year {
  display: inline-block;
  margin: 0 auto;
  color: @text-color;
  background: transparent;
  text-align: center;
  height: 24px;
  line-height: 24px;
  padding: 0 8px;
  border-radius: @border-radius-sm;
  transition: background 0.3s ease;

  &:hover {
    background: @item-hover-bg;
    cursor: pointer;
  }
}

.@{calendar-prefix-cls}-year-panel-selected-cell .@{calendar-prefix-cls}-year-panel-year {
  background: @primary-color;
  color: #fff;

  &:hover {
    background: @primary-color;
    color: #fff;
  }
}

.@{calendar-prefix-cls}-year-panel-last-decade-cell,
.@{calendar-prefix-cls}-year-panel-next-decade-cell {
  .@{calendar-prefix-cls}-year-panel-year {
    user-select: none;
    color: @disabled-color;
  }
}

.@{calendar-prefix-cls}-decade-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10;
  background: @component-background;
  border-radius: @border-radius-base;
  outline: none;
}

.@{calendar-prefix-cls}-decade-panel-hidden {
  display: none;
}

.@{calendar-prefix-cls}-decade-panel-header {
  .calendarPanelHeader(~"@{calendar-prefix-cls}-decade-panel");
}

.@{calendar-prefix-cls}-decade-panel-body {
  height: ~"calc(100% - 40px)";
}

.@{calendar-prefix-cls}-decade-panel-table {
  table-layout: fixed;
  width: 100%;
  height: 100%;
  border-collapse: separate;
}

.@{calendar-prefix-cls}-decade-panel-cell {
  text-align: center;
  white-space: nowrap;
}

.@{calendar-prefix-cls}-decade-panel-decade {
  display: inline-block;
  margin: 0 auto;
  color: @text-color;
  background: transparent;
  text-align: center;
  height: 24px;
  line-height: 24px;
  padding: 0 6px;
  border-radius: @border-radius-sm;
  transition: background 0.3s ease;

  &:hover {
    background: @item-hover-bg;
    cursor: pointer;
  }
}

.@{calendar-prefix-cls}-decade-panel-selected-cell .@{calendar-prefix-cls}-decade-panel-decade {
  background: @primary-color;
  color: #fff;

  &:hover {
    background: @primary-color;
    color: #fff;
  }
}

.@{calendar-prefix-cls}-decade-panel-last-century-cell,
.@{calendar-prefix-cls}-decade-panel-next-century-cell {
  .@{calendar-prefix-cls}-decade-panel-decade {
    user-select: none;
    color: @disabled-color;
  }
}

.@{calendar-prefix-cls}-month {
  .@{calendar-prefix-cls}-month-header-wrap {
    position: relative;
    height: 288px;
  }
  .@{calendar-prefix-cls}-month-panel,
  .@{calendar-prefix-cls}-year-panel {
    top: 0;
    height: 100%;
  }
}

.@{calendar-prefix-cls}-week-number {
  &-cell {
    opacity: 0.5;
  }
  .@{calendar-prefix-cls}-body tr {
    transition: all .3s;
    cursor: pointer;
    &:hover {
      background: @primary-1;
    }
    &.@{calendar-prefix-cls}-active-week {
      background: @primary-2;
      font-weight: bold;
    }
    .@{calendar-prefix-cls}-selected-day .@{calendar-prefix-cls}-date,
    .@{calendar-prefix-cls}-selected-day:hover .@{calendar-prefix-cls}-date {
      background: transparent;
      color: @text-color;
    }
  }
}

@dawer-prefix-cls: ~"@{ant-prefix}-drawer";

.@{dawer-prefix-cls} {
  position: fixed;
  top: 0;
  width: 0%;
  height: 100%;
  z-index: @zindex-modal;
  > * {
    transition: transform @animation-duration-slow @ease-base-in;
  }

  &-content-wrapper {
    position: fixed;
  }
  .@{dawer-prefix-cls}-content {
    width: 100%;
    height: 100%;
  }
  &-left,
  &-right {
    width: 0%;
    height: 100%;
    .@{dawer-prefix-cls}-content-wrapper {
      height: 100%;
    }
    &.@{dawer-prefix-cls}-open {
      width: 100%;
    }
    &.@{dawer-prefix-cls}-open.no-mask {
      width: 0%;
    }
  }
  &-left {
    &.@{dawer-prefix-cls}-open {
      .@{dawer-prefix-cls}-content-wrapper {
        box-shadow: @shadow-1-right;
      }
    }
  }
  &-right {
    .@{dawer-prefix-cls} {
      &-content-wrapper {
        right: 0;
      }
    }
    &.@{dawer-prefix-cls}-open {
      .@{dawer-prefix-cls}-content-wrapper {
        box-shadow: @shadow-1-left;
      }
    }
  }

  &-top,
  &-bottom {
    width: 100%;
    height: 0%;
    .@{dawer-prefix-cls}-content-wrapper {
      width: 100%;
    }
    &.@{dawer-prefix-cls}-open {
      height: 100%;
    }
    &.@{dawer-prefix-cls}-open.no-mask {
      height: 0%;
    }
  }
  &-top {
    &.@{dawer-prefix-cls}-open {
      .@{dawer-prefix-cls}-content-wrapper {
        box-shadow: @shadow-1-down;
      }
    }
  }
  &-bottom {
    .@{dawer-prefix-cls} {
      &-content-wrapper {
        bottom: 0;
      }
    }
    &.@{dawer-prefix-cls}-open {
      .@{dawer-prefix-cls}-content-wrapper {
        box-shadow: @shadow-1-up;
      }
    }
  }
  &.@{dawer-prefix-cls}-open {
    .@{dawer-prefix-cls} {
      &-mask {
        opacity: 0.3;
        height: 100%;
        animation: antdDrawerFadeIn @animation-duration-slow @ease-base-out;
        transition: none;
      }
    }
  }

  &-title {
    margin: 0;
    font-size: @font-size-lg;
    line-height: 22px;
    font-weight: 500;
    color: @heading-color;
  }

  &-content {
    position: relative;
    background-color: @component-background;
    border: 0;
    background-clip: padding-box;
    z-index: 1;
  }

  &-close {
    cursor: pointer;
    border: 0;
    background: transparent;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 10;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    transition: color @animation-duration-slow;
    color: @text-color-secondary;
    outline: 0;
    padding: 0;

    &-x {
      display: block;
      font-style: normal;
      text-align: center;
      text-transform: none;
      text-rendering: auto;
      width: 56px;
      height: 56px;
      line-height: 56px;
      font-size: @font-size-lg;
    }

    &:focus,
    &:hover {
      color: #444;
      text-decoration: none;
    }
  }

  &-header {
    padding: 16px 24px;
    border-radius: @border-radius-base @border-radius-base 0 0;
    background: @component-background;
    color: @text-color;
    border-bottom: @border-width-base @border-style-base @border-color-split;
  }

  &-body {
    padding: 24px;
    font-size: @font-size-base;
    line-height: @line-height-base;
    word-wrap: break-word;
  }

  &-mask {
    position: fixed;
    width: 100%;
    height: 0;
    opacity: 0;
    background-color: @modal-mask-bg;
    filter: ~"alpha(opacity=50)";
    transition: opacity @animation-duration-slow linear, height 0s ease @animation-duration-slow;
  }
  &-open {
    transition: transform @animation-duration-slow @ease-base-out;
    &-content {
      box-shadow: @shadow-2;
    }
  }
}

@keyframes antdDrawerFadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 0.3;
  }
}

@skeleton-prefix-cls: ~"@{ant-prefix}-skeleton";
@skeleton-avatar-prefix-cls: ~"@{skeleton-prefix-cls}-avatar";
@skeleton-title-prefix-cls: ~"@{skeleton-prefix-cls}-title";
@skeleton-paragraph-prefix-cls: ~"@{skeleton-prefix-cls}-paragraph";

@skeleton-to-color: shade(@skeleton-color, 5%);

.@{skeleton-prefix-cls} {
  display: table;
  width: 100%;

  &-header {
    display: table-cell;
    vertical-align: top;
    padding-right: 16px;

    // Avatar
    .@{skeleton-avatar-prefix-cls} {
      display: inline-block;
      vertical-align: top;
      background: @skeleton-color;

      .avatar-size(@avatar-size-base);

      &-lg {
        .avatar-size(@avatar-size-lg);
      }

      &-sm {
        .avatar-size(@avatar-size-sm);
      }
    }
  }

  &-content {
    display: table-cell;
    vertical-align: top;
    width: 100%;

    // Title
    .@{skeleton-title-prefix-cls} {
      margin-top: 16px;
      height: 16px;
      width: 100%;
      background: @skeleton-color;

      + .@{skeleton-paragraph-prefix-cls} {
        margin-top: 24px;
      }
    }

    // paragraph
    .@{skeleton-paragraph-prefix-cls} {
      > li {
        height: 16px;
        background: @skeleton-color;
        list-style: none;
        width: 100%;

        &:last-child:not(:first-child):not(:nth-child(2)) {
          width: 61%;
        }

        + li {
          margin-top: 16px;
        }
      }
    }
  }

  &-with-avatar &-content {
    // Title
    .@{skeleton-title-prefix-cls} {
      margin-top: 12px;

      + .@{skeleton-paragraph-prefix-cls} {
        margin-top: 28px;
      }
    }
  }

  // With active animation
  &.@{skeleton-prefix-cls}-active {
    & .@{skeleton-prefix-cls}-content {
      .@{skeleton-title-prefix-cls},
      .@{skeleton-paragraph-prefix-cls} > li {
        .skeleton-color();
      }
    }

    .@{skeleton-avatar-prefix-cls} {
      .skeleton-color();
    }
  }
}

.avatar-size(@size) {
  width: @size;
  height: @size;
  line-height: @size;

  &.@{skeleton-avatar-prefix-cls}-circle {
    border-radius: 50%;
  }
}

.skeleton-color() {
  background: linear-gradient(90deg, @skeleton-color 25%, @skeleton-to-color 37%, @skeleton-color 63%);
  animation: ~"@{skeleton-prefix-cls}-loading" 1.4s ease infinite;
  background-size: 400% 100%;
}

@keyframes ~"@{skeleton-prefix-cls}-loading" {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}

// app
.freakMixin() {
    @functions: ~`(function() {
        function toColorList(list) {
            list = list.slice(1, list.length - 1).split(',');
            var ret = [];
            for (var i = 0, c = list.length; i < c; i++) {
                ret.push(list[i].trim().split(' '));
            }
            return ret;
        }

        var catchColors;
        function _initColor(list) {
            if (!catchColors) catchColors = toColorList(list);
        }

        this.getColor = function(list, name, position) {
            _initColor(list);
            var ret = '';
            for (var i = 0, c = catchColors.length; i < c; i++) {
                if (catchColors[i][0] === name) {
                    ret = catchColors[i][position - 1];
                    break;
                }
            }
            return ret;
        }
    })()`;
}
.freakMixin();
// Color contrast
.color-yiq(@color) {

    .yiq-mixin (@v) when (@v >= 150) {
        color: #111;
    }
    .yiq-mixin (@v) when (default()) {
        color: #fff;
    }

    @r: red(@color);
    @g: green(@color);
    @b: blue(@color);

    @yiq: ((@r * 299) + (@g * 587) + (@b * 114)) / 1000;
    .yiq-mixin(@yiq);
}

// Basic loop
.for(@adList, @adCode) {
    & {
        .loop(@adI:1) when (@adI =< length(@adList)) {
            @adIndex: @adI - 1;
			@adItem: extract(@adList, @adI);

			@adCode();

			.loop(@adI + 1);
        }
        .loop();
    }
}

.for-each(@adList, @adCode) {
    & {
        .loop(@adI:1) when (@adI =< length(@adList)) {
            @adIndex: @adI - 1;
            @adItem: extract(@adList, @adI);
            @adKey: extract(@adItem, 1);
            @adValue: extract(@adItem, 2);

			@adCode();

			.loop(@adI + 1);
        }
        .loop();
    }
}

// Angular
// router ant
@router-animation-name:     antFadeIn;
@router-animation-duration: 1s;

// https://github.com/angular/angular/issues/9845
// 一种路由切换动画的简单实现
app-layout router-outlet + * {
  display: block;
  animation-duration: @router-animation-duration;
  // animation-fill-mode: both;
	animation-name: @router-animation-name; // fadeIn;
}

.preserve-white-spaces-mixin(@enabled) when(@enabled=true) {

  sf + st {
    margin-top: @preserve-sf-and-st-spaces;
  }

  .ant-btn + .ant-btn,
  .ant-btn + nz-popconfirm,
  nz-popconfirm + .ant-btn,
  nz-popconfirm + nz-popconfirm,
  .ant-btn + nz-button-group,
  nz-popconfirm + nz-button-group {
    margin-left: @preserve-buttons-spaces;
  }
  .ant-btn-group {
    .ant-btn + .ant-btn {
      margin-left: -1px;
    }
  }
}

.preserve-white-spaces-mixin(@preserve-white-spaces-enabled);

@form-state-visual-feedback-enabled: false;

.form-state-visual-feedback-mixin(@enabled) when(@enabled = true) {
  .ng-invalid {
    &:focus {
      box-shadow: 0 0 @outline-blur-size @outline-width fade-out(@error-color, .8);
    }
    &,
    &:hover {
      border-color: @error-color;
    }
  }
}
.form-state-visual-feedback-mixin(@form-state-visual-feedback-enabled);

// Antd patch
.ant-card {
  margin-bottom: @md;
}

// Body no padding
.ant-card__body-nopadding {
  .ant-card-body {
    padding: 0 !important;
  }
}

@media (min-width: @drawer-sm) {
  .drawer-sm {
    max-width: @drawer-sm;
    width: auto !important;
  }
}
@media (max-width: @drawer-sm - 1) {
  .drawer-sm {
    width: 100% !important;
  }
}

@media (min-width: @drawer-md) {
  .drawer-md {
    max-width: @drawer-md;
    width: auto !important;
  }
}
@media (max-width: @drawer-md - 1) {
  .drawer-md {
    width: 100% !important;
  }
}

@media (min-width: @drawer-lg) {
  .drawer-lg {
    max-width: @drawer-lg;
    width: auto !important;
  }
}
@media (max-width: @drawer-lg - 1) {
  .drawer-lg {
    width: 100% !important;
  }
}

@media (min-width: @drawer-xl) {
  .drawer-xl {
    max-width: @drawer-xl;
    width: auto !important;
  }
}
@media (max-width: @drawer-xl - 1) {
  .drawer-xl {
    width: 100% !important;
  }
}

.drawer {
  &-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    border-top: @border-width-base @border-style-base @border-color-split;
    padding: 10px 16px;
    text-align: right;
    border-radius: 0 0 @border-radius-base @border-radius-base;
    background: #fff;
  }
}

.ant-form-item-label {
  em {
    color: @grey-6;
  }
}

.ant-form-item-children {
  em {
    margin-left: @layout-gutter;
  }
}

// Small screen / tablet
@media (min-width: @screen-sm) {
  .modal-sm .ant-modal {
    max-width: @modal-sm;
    width: auto !important;
  }
}

// Medium screen / desktop
@media (min-width: @screen-md) {
  .modal-md .ant-modal {
    max-width: @modal-md;
    width: auto !important;
  }
}

// Large screen / wide desktop
@media (min-width: @screen-lg) {
  .modal-lg .ant-modal {
    max-width: @modal-lg;
    width: auto !important;
  }
}

// Extra large screen / large descktop
@media (min-width: @screen-xxl) {
  .modal-xl .ant-modal {
    max-width: @modal-xl;
    width: auto !important;
  }
}

// 自定义模态框时非常有用，主要运用于查看、编辑页
.modal {
  &-header {
    padding: 16px 24px;
    margin: -24px -24px 24px -24px;
    border-radius: @border-radius-base @border-radius-base 0 0;
    background: @component-background;
    border-bottom: @border-width-base @border-style-base @border-color-split;
    display: flex;
    justify-content: space-between;
  }
  &-title {
    font-size: @font-size-lg;
    font-weight: 500;
    line-height: 22px;
    color: @heading-color;
    small {
      color: @muted-color;
      font-size: 12px;
      margin-left: @layout-gutter;
    }
  }
  &-spin {
    display: block;
    min-height: 150px;
    line-height: 150px;
    text-align: center;
  }
  &-footer {
    border-top: @border-width-base @border-style-base @border-color-split;
    padding: 10px 16px;
    text-align: right;
    border-radius: 0 0 @border-radius-base @border-radius-base;
    margin: 24px -24px -24px -24px;
  }
  &-include-tabs {
    nz-tabset {
      margin-top: -16px;
    }
  }
  &-body-nopadding {
    .ant-modal-body {
      padding: 0 !important;
    }
  }
}

.ant-table {
  td {
    > img,
    .img {
      border-radius: @nz-table-img-radius;
      vertical-align: middle;
      margin-right: @nz-table-img-margin-right;
      max-height: @nz-table-img-max-height;
      max-width: @nz-table-img-max-width;
    }
  }
}

.ant-table-rep {
  &__title {
    display: none;
  }
  &__hide-header-footer {
    .ant-table-title,
    .ant-table-footer {
      display: none;
    }
  }
}

@media screen and (max-width: @nz-table-rep-max-width) {
  .ant-table {
    &-rep {
      &__title {
        display: inline-block;
        width: @nz-table-rep-column-name-width;
        text-align: @nz-table-rep-column-name-text-align;
        padding-right: @nz-table-rep-column-name-padding-right;
        color: @nz-table-rep-column-name-color;
      }
      &__hide-header-footer {
        .ant-table-title,
        .ant-table-footer {
          display: block;
        }
      }
    }
    &-thead {
      display: none;
    }
    &-title {
      background: @nz-table-rep-header-background;
      text-align: center;
    }
    &-tbody {
      > tr {
        &:nth-child(3n) {
          background: @nz-table-rep-even-background;
        }
        > td {
          width: 100%;
          display: flex;
          align-items: center;
          text-align: left !important;
          border-bottom: none;
          padding: @nz-table-rep-padding-vertical
            @nz-table-rep-padding-horizontal;

          .ant-table-rep__title + *:not(.ant-avatar) {
            flex: 1;
          }
        }
      }
    }
  }
}

.ant-tag {
  &__plus {
    .ant-tag {
      background: rgb(255, 255, 255);
      border-style: dashed;
    }
  }
}

// issues: https://github.com/ant-design/ant-design/issues/13091
.ant-dropdown {
  &-trigger .anticon:not(.anticon-ellipsis),
  &-link .anticon:not(.anticon-ellipsis) {
    font-size: inherit !important;
  }
}

// Core CSS
.h1,
.h2,
.h3 {
  small,
  .small {
    font-size: 65%;
  }
}

.h4,
.h5,
.h6 {
  small,
  .small {
    font-size: 75%;
  }
}

.h1 { font-size: @h1-font-size !important; }
.h2 { font-size: @h2-font-size !important; }
.h3 { font-size: @h3-font-size !important; }
.h4 { font-size: @h4-font-size !important; }
.h5 { font-size: @h5-font-size !important; }
.h6 { font-size: @h6-font-size !important; }

// List
.list-styled {
  padding-left: @ul-ol-margin;
  list-style: inherit;
}

.list-unstyled {
  padding-left: 0;
  list-style: none;
}

// Forms
fieldset {
  border: none;
}

// Display
.display-1 {
  font-size: 32px;
}

.display-2 {
  font-size: 24px;
}

.display-3 {
  font-size: 20px;
}

// widgets
// 中心元素
@abs-enabled: true;

.widget-abs-mixin(@enabled) when(@enabled=true) {

  .abs-center-container {
    position: relative;
  }

  .abs-center {
    overflow: auto;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    &.abs-fixed {
      position: fixed;
      z-index: 999;
    }
    &.abs-right {
      left: auto;
      right: 20px;
      text-align: right;
    }
    &.abs-left {
      right: auto;
      left: 20px;
      text-align: left;
    }
  }

  @media (max-width: 320px) {
    .abs-center {
      padding: 0 10px;
    }
  }

  @media (max-height: @mobile-max) {
    .abs-center {
      position: relative;
    }
  }

}

.widget-abs-mixin(@abs-enabled);

// Badges
@badge-enabled:      true;
@badge-color:        @white;
@badge-font-size:    @font-size-base;
@badge-padding:      0 8px;

.widget-badge-mixin(@enabled) when(@enabled=true) {

  .badge {
    display: inline-block;
    padding: @badge-padding;
    font-size: @badge-font-size;
    line-height: 20px;
    color: @badge-color;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: @border-radius-base;

    // Empty badges collapse automatically
    &:empty {
      display: none;
    }

    em {
      font-style: normal;
    }

    &-dot {
      display: inline-block;
      width: @layout-gutter;
      height: @layout-gutter;
      padding: 0;
      border-radius: 50%;
      > * {
        display: none;
      }
    }
  }

  // Colors
  .badge-variant(@bg) {
    .color-yiq(@bg);
    background-color: @bg;
  }

  .for-each(@colors, {
    .badge-@{adKey} {
      .badge-variant(extract(@adItem, @color-basic-position));
    }
  });

  .for-each(@aliasColors, {
      @aliasColor: ~`getColor("@{colors}", "@{adValue}", @{color-basic-position})`;
      .badge-@{adKey} {
          .badge-variant(color(@aliasColor))
      }
  });

}

.widget-badge-mixin(@badge-enabled);

@search-form-enabled:   false;
@search-form-bg:        #fbfbfb;
@search-form-radius:    4px;

@search__form-enabled:   true;

.search-form-mixin(@enabled) when(@enabled = true) {
  .search-form {
    background: @search-form-bg;
    padding: @layout-gutter;
    border: @border-width-base @border-style-base @border-color-split;
    border-radius: @search-form-radius;
    margin-bottom: @layout-gutter * 2;
  }
}
.search-form-mixin(@search-form-enabled);

.search__form-mixin(@enabled) when(@enabled = true) {
  .search {
    &__form {
      // BUG: https://github.com/NG-ZORRO/ng-zorro-antd/issues/1202
      &.ant-form-inline {
        .ant-form-item-label,
        .ant-form-item-control-wrapper {
          padding: 0 !important;
        }
      }
      .ant-form-item {
        margin-bottom: 24px;
        margin-right: 0;
        display: flex;
        > .ant-form-item-label {
          width: auto;
          line-height: 32px;
          padding-right: 8px;
        }
        .ant-form-item-control {
          line-height: 32px;
        }
      }
      .ant-form-item-control-wrapper {
        flex: 1;
      }
    }
  }
}
.search__form-mixin(@search__form-enabled);

@hafl-enabled:      true;
@hafl-float-size:
  sm @layout-gutter * 8,
  md @layout-gutter * 10,
  lg @layout-gutter * 12;

.widget-hafl-mixin(@enabled) when(@enabled=true) {

  .half-float {
    position: relative;
    img {
      display: block;
      max-width: 100%;
      height: auto;
    }
    .half-float-bottom {
      position: absolute;
      left: 50%;
      z-index: 2;
    }

    .for-each(@hafl-float-size, {
      &.half-float-@{adKey} {
        margin-bottom: (@adValue / 2) + 10;
        .half-float-bottom {
          bottom: -(@adValue / 2);
          width: @adValue;
          height: @adValue;
          margin-left: -(@adValue / 2);
        }
      }
    });
  }

}

.widget-hafl-mixin(@hafl-enabled);

// masonry
@masonry-enabled:     true;
@masonry-column-gap:  @layout-gutter * 2;

.widget-masonry-mixin(@enabled) when(@enabled=true) {

  .row-masonry {
    position: relative;
    margin: 0;
    padding: 0;
    width: 100%;
    column-gap: @masonry-column-gap;
    > .col-masonry {
      display: inline-block;
      width: 100%;
      min-height: 1em;
      margin-bottom: 15px;
    }
    img {
      max-width: 100%;
    }
  }

  .for-each(@grid-breakpoints, {
    @media only screen and (min-width: @adValue) {
      .loopColumn(@pos: 1) when (@pos < 10) {
        .row-masonry-@{adKey}-@{pos} {
          column-count: @pos;
          columns: @pos;
        }
        .loopColumn(@pos + 1);
      }
      .loopColumn();
    }
  });

}

.widget-masonry-mixin(@masonry-enabled);

.scrollbar-style-mixin(@element-name) {
  @{element-name} {
    &::-webkit-scrollbar {
      height: @scrollbar-width;
      width: @scrollbar-height;
    }
    &::-webkit-scrollbar-track {
      -webkit-box-shadow: inset 0 0 @scrollbar-width @scrollbar-track-color;
    }
    &::-webkit-scrollbar-thumb {
      background-color: @scrollbar-thumb-color;
      outline: 1px solid #333;
    }
  }
}

// body scrollbar
.scrollbar-mixin(@enabled) when(@enabled=true) {
  .scrollbar-style-mixin(body);
}
.scrollbar-mixin(@scrollbar-enabled);

// 自定义div scrollbar
@scrollbar-prefix: ~'.scrollbar';

.scrollbar-style-mixin(@scrollbar-prefix);
@{scrollbar-prefix} {
  overflow: auto;

  &-x {
    overflow-x: auto;
    overflow-y: hidden;
  }
  &-y {
    overflow-x: hidden;
    overflow-y: auto;
  }
}

@setting-drawer-enabled:    true;
@setting-drawer-prefix:     ~'.setting-drawer';
@setting-drawer-width:      500px;

.widget-setting-drawer-mixin(@enabled) when(@enabled=true) {

  @{setting-drawer-prefix} {
    &__content {
      min-height: 100%;
      background: #fff;
      position: relative;
    }
    &__body {
      &-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 12px;
        padding-top: 12px;
        &:first-child {
          padding-top: 0;
        }
        &:last-child {
          padding-bottom: 0;
        }
      }
    }
    &__title {
      font-size: 14px;
      color: @heading-color;
      line-height: 22px;
      margin-bottom: 12px;
    }
    &__theme {
      margin-top: 24px;
      overflow: hidden;
      &-tag {
        width: 20px;
        height: 20px;
        border-radius: 2px;
        float: left;
        cursor: pointer;
        margin-right: 8px;
        text-align: center;
        color: #fff;
        font-weight: bold;
      }
    }
    &__handle {
      position: fixed;
      top: 240px;
      background: @primary-color;
      width: 48px;
      height: 48px;
      right: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      pointer-events: auto;
      z-index: 10000;
      text-align: center;
      font-size: 16px;
      border-radius: 4px 0 0 4px;
      transition: right @animation-duration-slow @ease-base-in;
      &-icon {
        color: #fff;
        font-size: 20px;
      }
      &-opened {
        right: @setting-drawer-width;
      }
    }
  }

}

.widget-setting-drawer-mixin(@setting-drawer-enabled);

// @delon
.sf {
  display: block;
  // mode
  &-search + .ad-st {
    margin-top: @layout-gutter * 2;
  }
  .optional {
    color: rgba(0, 0, 0, 0.45);
  }
  // 固定 label
  &-fixed {
    display: flex !important;
    nz-form-control,
    .ant-form-item-control-wrapper {
      flex: 1;
    }
  }
  &-array-container {
    nz-card {
      margin: 0 16px 0 0;
      .remove {
        display: none;
        position: absolute;
        right: -16px;
        top: -16px;
        font-size: 20px;
        text-align: center;
        height: 32px;
        line-height: 32px;
        width: 32px;
        background: rgba(0, 0, 0, 0.26);
        border-radius: 50%;
        cursor: pointer;
        i {
          color: #fff;
        }
      }
      &:hover {
        .remove {
          display: block;
        }
      }
    }
  }
  sf-array {
    .add {
      margin-right: 16px;
    }
  }
  &__checkbox-list {
    width: 100%;
    display: block;
    @media (min-width: @mobile-min) {
      nz-col {
        margin-top: 8px;
      }
    }
  }
  // upload
  .ant-upload-select-picture-card i {
    font-size: 32px;
    color: #999;
  }
  .ant-upload.ant-upload-drag {
    height: 180px;
  }
  // transfer
  .ant-transfer {
    &-list {
      background: #fff;
      &-header {
        label {
          position: unset;
        }
      }
    }
    .ant-btn + .ant-btn {
      margin-left: 0;
    }
  }
  // fix select width when inline mode
  .ant-form-inline {
    .ant-form-item {
      display: inline-flex;
      > .ant-form-item-control-wrapper {
        flex: 1 0 0;
      }
    }
  }
  &__no-error {
    .ant-form-item {
      margin-bottom: 8px;
    }
  }
}

.acl__hide {
  display: none !important;
}

// Utils
.align-baseline    { vertical-align: baseline !important; } // Browser default
.align-top         { vertical-align: top !important; }
.align-middle      { vertical-align: middle !important; }
.align-bottom      { vertical-align: bottom !important; }
.align-text-bottom { vertical-align: text-bottom !important; }
.align-text-top    { vertical-align: text-top !important; }

// see https://ant.design/docs/spec/colors#Neutral-color-application
@border-color: @border-color-split;
@border-grids:
  sm @border-radius-sm,
  md @border-radius-md,
  lg @border-radius-lg;

.border { border: 1px solid @border-color !important; }

@border-width-list: 0, 1;
.for(@border-width-list, {
  .border-css-mixin(@i) when(@i > 0) {
    @css-value: ~"@{i}px solid @{border-color}";
  }
  .border-css-mixin(@i) when(default()) {
    @css-value: 0;
  }
  .border-css-mixin(@adIndex);
  .border-@{adIndex}        { border: @css-value !important; }
  .border-top-@{adIndex}    { border-top: @css-value !important; }
  .border-right-@{adIndex}  { border-right: @css-value !important; }
  .border-bottom-@{adIndex} { border-bottom: @css-value !important; }
  .border-left-@{adIndex}   { border-left: @css-value !important; }
});

// color
.for-each(@colors, {
  .border-@{adKey} {
    border-color: extract(@adItem, @color-basic-position) !important;
  }
});

.for-each(@aliasColors, {
  .border-@{adKey} {
    border-color: ~`getColor("@{colors}", "@{adValue}", @{color-basic-position})` !important;
  }
});

.border-white {
  border-color: #fff !important;
}

// Border-radius
.for-each(@border-grids, {
  .rounded-@{adKey}                 { border-radius: @adValue !important; }
  .rounded-top-left-@{adKey}        { border-top-left-radius: @adValue !important; }
  .rounded-top-right-@{adKey}       { border-top-right-radius: @adValue !important; }
  .rounded-bottom-left-@{adKey}     { border-bottom-left-radius: @adValue !important; }
  .rounded-bottom-right-@{adKey}    { border-bottom-right-radius: @adValue !important; }
});

.rounded-circle {
  border-radius: 50%;
}

.rounded-0 {
  border-radius: 0;
}

// Inline code
code {
  padding: 2px 4px;
  margin: 0 4px;
  font-size: 90%;
  background-color: @code-bg;
  border: 1px solid @code-border-color;
  border-radius: @border-radius-base;
}

// color
.bg-white         { background-color: #fff !important; }
.bg-transparent   { background-color: transparent !important; }
.text-white       { color: #fff !important; }
.text-hover:hover { color: @primary-color !important; }

.for-each(@colors, {
  .bg-@{adKey}-light       { background-color: extract(@adItem, @color-light-position) !important; }
  .bg-@{adKey}             { background-color: extract(@adItem, @color-basic-position) !important; }
  .bg-@{adKey}-dark        { background-color: extract(@adItem, @color-dark-position) !important; }

  .bg-@{adKey}-light-h     { transition: background-color 300ms; &:hover { background-color: extract(@adItem, @color-light-position) !important; } }
  .bg-@{adKey}-h           { transition: background-color 300ms; &:hover { background-color: extract(@adItem, @color-basic-position) !important; } }
  .bg-@{adKey}-dark-h      { transition: background-color 300ms; &:hover { background-color: extract(@adItem, @color-dark-position) !important; } }

  .text-@{adKey}-light     { color: extract(@adItem, @color-light-position) !important; }
  .text-@{adKey}           { color: extract(@adItem, @color-basic-position) !important; }
  .text-@{adKey}-dark      { color: extract(@adItem, @color-dark-position) !important; }
});

.for-each(@aliasColors, {
  .bg-@{adKey}-light  { background-color: ~`getColor("@{colors}", "@{adValue}", @{color-light-position})` !important; }
  .bg-@{adKey}        { background-color: ~`getColor("@{colors}", "@{adValue}", @{color-basic-position})` !important; }
  .bg-@{adKey}-dark   { background-color: ~`getColor("@{colors}", "@{adValue}", @{color-dark-position})` !important; }

  .bg-@{adKey}-light-h  { transition: background-color 300ms; &:hover { background-color: ~`getColor("@{colors}", "@{adValue}", @{color-light-position})` !important; } }
  .bg-@{adKey}-h        { transition: background-color 300ms; &:hover { background-color: ~`getColor("@{colors}", "@{adValue}", @{color-basic-position})` !important; } }
  .bg-@{adKey}-dark-h   { transition: background-color 300ms; &:hover { background-color: ~`getColor("@{colors}", "@{adValue}", @{color-dark-position})` !important; } }

  .text-@{adKey}-light  { color: ~`getColor("@{colors}", "@{adValue}", @{color-light-position})` !important; }
  .text-@{adKey}        { color: ~`getColor("@{colors}", "@{adValue}", @{color-basic-position})` !important; }
  .text-@{adKey}-dark   { color: ~`getColor("@{colors}", "@{adValue}", @{color-dark-position})` !important; }
});

// grey
.for-each(@greyColorer, {
  .bg-grey-@{adKey}     { background-color: @adValue !important; }
  .bg-grey-@{adKey}-h   { &:hover { background-color: @adValue !important; } }
  .text-grey-@{adKey}   { color: @adValue !important; }
});

.all-colors-minin(@enabled) when (@enabled = true) {

  .loop-no(@adKey, @adValue, @i: 1) when (@i =< length(@color-no-list)) {
    // @color-no-list
    @name: "@{adKey}-@{i}";
    .bg-@{adKey}-@{i}    { background-color: @@name !important; }
    .bg-@{adKey}-@{i}-h  { transition: background-color 300ms; &:hover { background-color: @@name !important; } }
    .text-@{adKey}-@{i}  { color: @@name !important; }
    .loop-no(@adKey, @adValue, @i + 1);
  }

  .for-each(@colors, {
    .loop-no(@adKey, @adValue, 1);
  });

}
.all-colors-minin(@enable-all-colors);

.d-none             { display: none !important; }
.d-block            { display: block !important; }
.d-inline-block     { display: inline-block !important; }
.d-flex             { display: flex !important; }
.d-inline-flex      { display: inline-flex !important; }

.justify-content-start   { justify-content: flex-start !important; }
.justify-content-end     { justify-content: flex-end !important; }
.justify-content-center  { justify-content: center !important; }
.justify-content-between { justify-content: space-between !important; }
.justify-content-around  { justify-content: space-around !important; }

.align-items-start       { align-items: flex-start !important; }
.align-items-end         { align-items: flex-end !important; }
.align-items-center      { align-items: center !important; }
.align-items-baseline    { align-items: baseline !important; }
.align-items-stretch     { align-items: stretch !important; }

.align-content-start     { align-content: flex-start !important; }
.align-content-end       { align-content: flex-end !important; }
.align-content-center    { align-content: center !important; }
.align-content-between   { align-content: space-between !important; }
.align-content-around    { align-content: space-around !important; }
.align-content-stretch   { align-content: stretch !important; }

.align-self-auto         { align-self: auto !important; }
.align-self-start        { align-self: flex-start !important; }
.align-self-end          { align-self: flex-end !important; }
.align-self-center       { align-self: center !important; }
.align-self-baseline     { align-self: baseline !important; }
.align-self-stretch      { align-self: stretch !important; }

.flex-1 { flex: 1 !important; }
.flex-column { flex-direction: column !important; }
.flex-column-reverse { flex-direction: column-reverse !important; }
.flex-wrap { flex-wrap: wrap !important; }
.flex-nowrap { flex-wrap: nowrap !important; }
.flex-shrink-0 { flex-shrink: 0 !important; }
.flex-shrink-1 { flex-shrink: 1 !important; }
.flex-grow-0 { flex-grow: 0 !important; }
.flex-grow-1 { flex-grow: 1 !important; }

.float-none  { float:none !important; }
.float-left  { float:left !important; }
.float-right { float:right !important; }

// Sizing
.icon-sm { font-size: @icon-sm !important; }
.icon-md { font-size: @icon-md !important; }
.icon-lg { font-size: @icon-lg !important; }

.img-fluid {
  // Part 1: Set a maximum relative to the parent
  max-width: 100%;
  // Part 2: Override the height to auto, otherwise images will be stretched
  // when setting a width and height attribute on the img element.
  height: auto;
}

.img-fluid {
  .img-fluid;
}

.point {
  cursor: pointer;
}

.no {
  &-resize {
    resize: none;
    max-width: 100%;
    min-width: 100%;
  }
  &-data {
    color: rgba(0, 0, 0, 0.25);
    text-align: center;
    line-height: 64px;
    font-size: 16px;
    i {
      font-size: 24px;
      margin-right: 16px;
      position: relative;
      top: 3px;
    }
  }
}

.block-center {
  margin: 0 auto;
}

// Background image
.bg-center {
  background-position: center center;
  background-size: cover;
}

.page-loading {
  background: @background-color-base;
  z-index: 10000;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding-top: 200px;
  text-align: center;
}

.color-weak {
  filter: invert(80%);
  display: block;
}

.for-each(@positions, {
  .position-@{adKey}    { position: @adKey !important; }
});

.fixed-top {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: @zindex-fixed;
}

.fixed-bottom {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: @zindex-fixed;
}

.for-each(@overflows, {
  .overflow-@{adKey}    { overflow: @adKey !important; }
});

@media (max-width: @screen-xs-max) {
  .hidden-xs {
    display: none !important;
  }
}

@media (max-width: @screen-sm-max) {
  .hidden-sm {
    display: none !important;
  }
}

@media (max-width: @screen-md-max) {
  .hidden-md {
    display: none !important;
  }
}

@media (max-width: @screen-lg-max) {
  .hidden-lg {
    display: none !important;
  }
}

@media (min-width: @mobile-min) {
  .hidden-pc {
    display: none !important;
  }
}

@media (max-width: @mobile-max) {
  .hidden-mobile {
    display: none !important;
  }
}

@rotate-count: 24;
.rotate-loop (@i) when (@i > 0) {
  @num: @i * 15;
  .rotate-@{num} {
    transform: rotate(~'@{num}deg');
  }
  .rotate-loop(@i - 1);
}

.rotate-loop(@rotate-count);

@mp-list: margin m, padding p;

.loop-mp(@infix, @adKey, @adValue, @i: 1) when (@i =< length(@mp-list)) {
  @item: extract(@mp-list, @i);
  @abbrev: extract(@item, 2);
  @prop: extract(@item, 1);
  .@{abbrev}@{infix}  { @{prop}:        @adValue !important; }
  .@{abbrev}t@{infix} { @{prop}-top:    @adValue !important; }
  .@{abbrev}r@{infix} { @{prop}-right:  @adValue !important; }
  .@{abbrev}b@{infix} { @{prop}-bottom: @adValue !important; }
  .@{abbrev}l@{infix} { @{prop}-left:   @adValue !important; }
  .@{abbrev}x@{infix} {
    @{prop}-right: @adValue !important;
    @{prop}-left:  @adValue !important;
  }
  .@{abbrev}y@{infix} {
    @{prop}-top:    @adValue !important;
    @{prop}-bottom: @adValue !important;
  }

  .loop-mp(@infix, @adKey, @adValue, @i + 1);
}

.for-each(@spacings, {
  .infix-mixin(@adKey) when(@adKey = 0) {
    @infix: 0;
  }
  .infix-mixin(@adKey) when(default()) {
    @infix: ~"-@{adKey}";
  }
  .infix-mixin(@adKey);

  .loop-mp(@infix, @adKey, @adValue, 1);

});

// Alignment
.text-left          { text-align: left !important; }
.text-center        { text-align: center !important; }
.text-right         { text-align: right !important; }

// Transformation
.text-lowercase  { text-transform: lowercase !important; }
.text-uppercase  { text-transform: uppercase !important; }
.text-capitalize { text-transform: capitalize !important; }
.text-deleted    { text-decoration: line-through; }

// wrapping
.text-nowrap        { white-space: nowrap !important; }
.text-wrap          { white-space: pre-wrap !important; }
.text-truncate      { .text-truncate(); }

// Weight and italics

.font-weight-normal { font-weight: normal; }
.font-weight-bold   { font-weight: 700; }
.font-italic        { font-style: italic; }

// Sizing
.text-xs { font-size: @text-xs !important; }
.text-sm { font-size: @text-sm !important; }
.text-md { font-size: @text-md !important; }
.text-lg { font-size: @text-lg !important; }
.text-xl { font-size: @text-xl !important; }

.for-each(@widths, {
  .width-@{adKey}  { width: @adValue !important; }
  .max-width-@{adKey}  { max-width: @adValue !important; }
  .min-width-@{adKey}  { min-width: @adValue !important; }
});

@media (max-width: @mobile-max) {
  .width-sm,
  .max-width-sm,
  .min-width-sm {
    width: 100% !important;
  }
}

@alain-default-prefix:                ~'.alain-default';
@alain-default-zindex:                @zindex-base;
@alain-default-ease:                  cubic-bezier(.25, 0, .15, 1);
@alain-default-header-hg:             64px;
@alain-default-header-bg:             @primary-color;
@alain-default-header-padding:        @layout-gutter * 2;
@alain-default-header-search-enabled: true;
@alain-default-header-search-height:  34px;

@alain-default-aside-wd:                      200px;
@alain-default-aside-bg:                      #fff;
@alain-default-aside-scrollbar-width:         0;
@alain-default-aside-scrollbar-height:        0;
@alain-default-aside-scrollbar-track-color:   transparent;
@alain-default-aside-scrollbar-thumb-color:   transparent;

@alain-default-aside-nav-fs:                   14px;
@alain-default-aside-nav-icon-width:           14px;
@alain-default-aside-nav-img-wh:               14px;
@alain-default-aside-nav-padding-top-bottom:   @layout-gutter;
@alain-default-aside-nav-text-color:           @text-color;
@alain-default-aside-nav-text-hover-color:     @primary-color;
@alain-default-aside-nav-group-text-color:     @text-color-secondary;
@alain-default-aside-nav-selected-text-color:  @primary-color;
@alain-default-aside-nav-selected-bg:          #fcfcfc;
@alain-default-aside-nav-item-height:          38px;
@alain-default-aside-collapsed-wd:             @layout-gutter * 8;
@alain-default-aside-collapsed-nav-fs:         24px;
@alain-default-aside-collapsed-nav-img-wh:     24px;

@alain-default-content-heading-bg:             #fafbfc;
@alain-default-content-heading-border:         #efe3e5;
@alain-default-content-padding:                @layout-gutter * 3;
@alain-default-content-bg:                     #f5f7fa;

html {
  direction: ltr;
  height: 100%; // http://updates.html5rocks.com/2013/12/300ms-tap-delay-gone-away
  touch-action: manipulation;
}

html,
body,
app-root {
  // overflow-x: hidden;
  height: 100%;
}

body {
  color: @text-color;
  background-color: @alain-default-content-bg;
}

@{alain-default-prefix} {
  display: block;
  position: relative;
  width: 100%;
  height: auto;
  min-height: 100%;
  overflow-x: hidden;
  &__unwrap {
    margin-right: -@alain-default-content-padding;
    margin-left: -@alain-default-content-padding;
    @media (max-width: @mobile-max) {
      margin-right: 0;
      margin-left: 0;
    }
  }
  &__content {
    margin: 0 @alain-default-content-padding @alain-default-content-padding @alain-default-content-padding;
    &-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: #929292;
      padding: @alain-default-content-padding;
      padding-top: @alain-default-content-padding - 12;
      padding-bottom: @alain-default-content-padding - 12;
      margin-right: -@alain-default-content-padding;
      margin-left: -@alain-default-content-padding;
      margin-bottom: @alain-default-content-padding;
      background-color: @alain-default-content-heading-bg;
      border-bottom: 1px solid @alain-default-content-heading-border;
      > h1 {
        font-size: 18px;
        font-weight: normal;
        margin-bottom: 0;
        > small {
          display: block;
          font-size: 12px;
          color: @muted-color;
        }
      }
    }
    // fix width
    nz-input-group {
      width: auto;
    }
  }
}

// Desktop
@media (min-width: @mobile-min) {
  @{alain-default-prefix}__content {
    margin-left: (@alain-default-aside-wd + @alain-default-content-padding);
  }
  @{alain-default-prefix}__collapsed {
    @{alain-default-prefix} {
      &__sidebar {
        width: @alain-default-aside-collapsed-wd;
      }
      &__content {
        margin-left: (@alain-default-aside-collapsed-wd + @alain-default-content-padding);
      }
    }
  }
}

@{alain-default-prefix} {
  &__header {
    display: flex;
    align-items: center;
    padding: 0 @alain-default-header-padding;
    width: 100%;
    height: @alain-default-header-hg;
    background-color: @alain-default-header-bg;
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.2);
    z-index: @alain-default-zindex + 10;
    &-logo {
      margin-left: -@alain-default-header-padding;
      width: @alain-default-aside-wd;
      transition: width 0.2s @alain-default-ease;
      &-link {
        display: block;
        text-align: center;
      }
      &-expanded,
      &-collapsed {
        vertical-align: middle;
        max-width: 100%;
        animation: fadeIn 1s;
      }
      &-collapsed {
        display: none;
      }
      &-expanded {
        display: inline;
      }
    }
  }
  &__nav {
    &-wrap {
      flex: 1;
      display: flex;
      justify-content: space-between;
    }
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    > li {
      display: inline-block;
      vertical-align: middle;
    }
    &-item,
    nz-badge {
      color: #fff;
    }
    &-item {
      display: block;
      border-radius: 2px;
      text-align: center;
      line-height: 100%;
      padding: 8px 2px;
      min-width: 50px;
      transition: background-color 300ms;
      cursor: pointer;
      outline: none;
      &:hover {
        color: #fff;
        background-color: rgba(255, 255, 255, 0.2) !important;
      }
      > i,
      &-icon {
        font-size: 18px !important;
        // TODO: fix ant-dropdown-trigger
        transform: none !important;
      }
    }
  }
}

// Search
.header-search-mixin(@enabled) when(@enabled =true) {
  @{alain-default-prefix}__search {
    flex: 1;
    margin: 0 @layout-gutter * 3;
    position: relative;
    display: flex;
    align-items: center;
    .ant-input {
      padding-left: 0;
      &:focus {
        box-shadow: none;
      }
    }
    .ant-input,
    .ant-input-group-addon {
      background-color: rgba(255, 255, 255, 0.2);
      color: #fff;
      border: none;
      &::placeholder {
        color: #fff;
        opacity: 1;
      }
    }
    .ant-input-group-addon {
      i {
        transition: color 300ms, transform 400ms;
        font-size: 18px;
        color: #fff;
      }
    }
    &-focus {
      .ant-input,
      .ant-input-group-addon {
        background-color: #f3f3f3;
        color: @grey-8;
        &::placeholder {
          color: @grey-8;
          opacity: 1;
        }
      }
      .ant-input-group-addon {
        i {
          transform: rotate(90deg);
          color: @grey-8;
        }
      }
    }
  }

  @media (max-width: @mobile-max) {
    @{alain-default-prefix}__search {
      align-items: center;
      transition: transform 300ms;
      padding: 0 @alain-default-header-padding;
      margin: 0;
      position: absolute;
      left: 0;
      top: 0;
      height: 100%;
      width: 100%;
      background-color: #fff;
      z-index: @zindex+20;
      &-toggled {
        display: flex;
      }
      &:not(&-toggled) {
        transform: translate3d(0, -105%, 0);
      }
    }
  }
}

.header-search-mixin(@alain-default-header-search-enabled);

// Collapsed
@{alain-default-prefix}__collapsed {
  @{alain-default-prefix}__header {
    &-logo {
      width: @alain-default-aside-collapsed-wd;
      &-collapsed {
        display: inline;
      }
      &-expanded {
        display: none;
      }
    }
  }
}

// Desktop
// @media (min-width: @mobile-min) {}
// Under pad
@media (max-width: @mobile-max) {
  @{alain-default-prefix}__header {
    &-logo {
      width: @alain-default-aside-collapsed-wd;
      &-collapsed {
        display: inline;
      }
      &-expanded {
        display: none;
      }
    }
  }
}

@{alain-default-prefix}__aside {
  position: absolute;
  top: 0;
  bottom: 0;
  margin-top: @alain-default-header-hg;
  width: @alain-default-aside-wd;
  background-color: @alain-default-aside-bg;
  transition: width 0.2s @alain-default-ease, translate 0.2s @alain-default-ease;
  z-index: @zindex + 5;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-overflow-scrolling: touch;
  &:after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    border-right: 1px solid @alain-default-content-heading-border;
  }
  &-inner {
    overflow-x: hidden;
    overflow-y: scroll; // margin-right: -17px;
    height: 100%;
    -webkit-overflow-scrolling: touch;
    /*IE10,IE11*/
    -ms-scroll-chaining: chained;
    -ms-overflow-style: none;
    -ms-content-zooming: zoom;
    -ms-scroll-rails: none;
    -ms-content-zoom-limit-min: 100%;
    -ms-content-zoom-limit-max: 500%;
    -ms-scroll-snap-type: proximity;
    -ms-scroll-snap-points-x: snapList(100%, 200%, 300%, 400%, 500%);
    -ms-overflow-style: none;
    &::-webkit-scrollbar {
      height: @alain-default-aside-scrollbar-width;
      width: @alain-default-aside-scrollbar-height;
    }
    &::-webkit-scrollbar-track {
      -webkit-box-shadow: inset 0 0 @alain-default-aside-scrollbar-width
        @alain-default-aside-scrollbar-track-color;
    }
    &::-webkit-scrollbar-thumb {
      background-color: @alain-default-aside-scrollbar-thumb-color;
    }
  }
}

// Desktop
@media (min-width: @mobile-min) {
  @{alain-default-prefix}__collapsed {
    @{alain-default-prefix}__aside {
      width: @alain-default-aside-collapsed-wd;
    }
  }
}

// Under pad
@media (max-width: @mobile-max) {
  @{alain-default-prefix}__aside,
  @{alain-default-prefix}__content {
    transition: transform 0.3s ease;
  }
  @{alain-default-prefix}__content {
    transform: translate3d(@alain-default-aside-wd, 0, 0);
  }
  @{alain-default-prefix}__collapsed {
    @{alain-default-prefix}__aside {
      transform: translate3d(-100%, 0, 0);
    }
    @{alain-default-prefix}__content {
      transform: translateZ(0);
    }
  }
}

@{alain-default-prefix}__progress-bar {
  width: 100vw;
  height: 4px;
  overflow: hidden;
  background: fade(#ddd, 40%);
  position: fixed;
  z-index: @zindex-base + 20;
  &::after {
    content: ' ';
    height: 100%;
    width: 33.3vw;
    animation: gradcolours 5s steps(1) infinite, loadthird 1s infinite linear;
    display: block;
    transform-origin: top left;
  }
}

.grad(@hex) {
  background:
    linear-gradient(
      90deg,
      fade(@hex, 0) 0%,
      @hex 30%,
      @hex 50%,
      @hex 70%,
      fade(@hex, 0) 100%
    );
}

@keyframes loadthird {
    0% { transform: translateX(-33.3vw); }
  100% { transform: translateX(100vw); }
}

@keyframes gradcolours {
    0% { .grad(#e88098); }
  20% { .grad(#84bebe); }
  40% { .grad(#e98724); }
  60% { .grad(#afc94e); }
  80% { .grad(#6297a4); }
}

.app-icons {
  padding: @layout-gutter * 2;
  .ant-col-6 {
    padding: (@layout-gutter * 2) 0;
    border-radius: 4px;
    text-align: center;
    transition: background-color 300ms;
    cursor: pointer;
    &:hover {
      background-color: #ececec;
    }
  }
  i {
    border-radius: 50%;
    font-size: 22px;
    padding: 15px;
  }
  small {
    font-size: 14px;
    padding-top: 4px;
    color: #9c9c9c;
    display: block;
  }
}

@alain-default-user-block-width: @alain-default-aside-wd - (@layout-gutter * 6);
@alain-default-user-block-avatar-hw: @avatar-size-lg;

@{alain-default-prefix}__aside-user {
  padding-top: (@layout-gutter * 3);
  margin: 0 auto;
  display: block !important;
  width: @alain-default-user-block-width;
  cursor: pointer;
  .ant-dropdown-trigger {
    display: flex;
    align-items: center;
  }
  &-info {
    color: @text-color;
    width: @alain-default-user-block-width - @alain-default-user-block-avatar-hw - @layout-gutter;
  }
  &-avatar {
    margin-right: @layout-gutter;
  }
}

// Desktop
@media (min-width: @mobile-min) {
  @{alain-default-prefix}__collapsed {
    @{alain-default-prefix}__aside-user {
      width: @alain-default-aside-collapsed-wd;
      &-info {
        display: none;
      }
      &-avatar {
        margin: 0 auto;
      }
    }
  }
}

// Main Nav
@sidebar-nav-prefix-cls:      sidebar-nav;

.@{sidebar-nav-prefix-cls} {
  display: block;
  font-size: @alain-default-aside-nav-fs;
  margin: 0;
  padding: 0;
  &__item {
    position: relative;
    border-left: 3px solid transparent;
    transition: border-left-color 0.4s ease;
    &-link {
      color: @alain-default-aside-nav-text-color;
      text-decoration: none !important;
      padding: @alain-default-aside-nav-padding-top-bottom @layout-gutter * 2;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      position: relative;
      display: flex;
      align-items: center;
      user-select: none;
      &:hover {
        color: @alain-default-aside-nav-text-hover-color;
      }
    }
    &-icon {
      min-width: @alain-default-aside-nav-icon-width;
      display: inline-block;
      margin-right: @layout-gutter;
      transition: font-size 0.15s @ease-out, margin 0.3s @ease-in-out;
    }
    &-img {
      height: @alain-default-aside-nav-img-wh;
      width: @alain-default-aside-nav-img-wh;
    }
    &-text {
      transition: opacity 0.3s @ease-in-out, width 0.3s @ease-in-out;
      opacity: 1;
    }
  }
  // Selected
  &__selected {
    border-left-color: @alain-default-aside-nav-selected-text-color;
    background-color: @alain-default-aside-nav-selected-bg;
    > .@{sidebar-nav-prefix-cls}__item-link {
      color: @alain-default-aside-nav-selected-text-color;
    }
  }
  // Open Submenu
  &__open {
    > .@{sidebar-nav-prefix-cls}__sub {
      display: block;
      animation: fadeIn 0.5s;
    }
    > .@{sidebar-nav-prefix-cls}__item-link {
      .@{sidebar-nav-prefix-cls}__sub-arrow {
        transform: translateY(-2px);
        &:before {
          transform: rotate(45deg) translateX(2px);
        }
        &:after {
          transform: rotate(-45deg) translateX(-2px);
        }
      }
    }
  }
  &__group-title {
    color: @alain-default-aside-nav-group-text-color;
    padding: @alain-default-aside-nav-padding-top-bottom @layout-gutter * 2;
  }
  &__sub {
    display: none;
    overflow: hidden;
    .@{sidebar-nav-prefix-cls}__item {
      border-left: 0 !important;
    }
    &-arrow {
      transition: transform .3s @ease-in-out;
      position: absolute;
      top: 50%;
      right: @layout-gutter * 2;
      width: 10px;
      &:before,
      &:after {
        content: '';
        position: absolute;
        vertical-align: baseline;
        background: #fff;
        background-image: linear-gradient(to right, @menu-item-color, @menu-item-color);
        width: 6px;
        height: 1.5px;
        border-radius: 2px;
        transition: background .3s @ease-in-out, transform .3s @ease-in-out, top .3s @ease-in-out;
      }
      &:before {
        transform: rotate(-45deg) translateX(2px);
      }
      &:after {
        transform: rotate(45deg) translateX(-2px);
      }
    }
  }
  // Badge
  .badge {
    position: absolute;
    right: @layout-gutter * 2;
    @badge-height: @layout-gutter * 2;
    &:not(.badge-dot) {
      top: (@alain-default-aside-nav-item-height - @badge-height) / 2;
      height: @badge-height;
      width: @badge-height;
      line-height: @badge-height;
      padding: 0;
      overflow: hidden;
    }
    &-dot {
      top: (@alain-default-aside-nav-item-height - @layout-gutter) / 2;
    }
  }
  // Dept
  &__depth1 {
    .@{sidebar-nav-prefix-cls}__item-link {
      padding-left: (@layout-gutter * 3) + @alain-default-aside-nav-icon-width;
    }
  }
  &__depth2 {
    .@{sidebar-nav-prefix-cls}__item-link {
      padding-left: (@layout-gutter * 4) + @alain-default-aside-nav-icon-width;
    }
  }
  &__depth3 {
    .@{sidebar-nav-prefix-cls}__item-link {
      padding-left: (@layout-gutter * 5) + @alain-default-aside-nav-icon-width;
    }
  }
  &__depth4 {
    .@{sidebar-nav-prefix-cls}__item-link {
      padding-left: (@layout-gutter * 6) + @alain-default-aside-nav-icon-width;
    }
  }
  // Floating
  &__floating {
    position: absolute;
    z-index: @zindex + 7;
    min-width: 160px;
    border: 1px solid @alain-default-content-heading-border;
    background-color: @alain-default-aside-bg;
    border-radius: 4px;
    display: none;
    .@{sidebar-nav-prefix-cls}__item {
      &-link {
        padding-left: @layout-gutter * 2;
      }
    }
    &-show {
      display: block;
    }
    .@{sidebar-nav-prefix-cls}__sub {
      display: block;
      &-arrow {
        display: none;
      }
    }
    // Dept
    .@{sidebar-nav-prefix-cls}__depth2 {
      .@{sidebar-nav-prefix-cls}__item-link {
        padding-left: @layout-gutter * 3;
      }
    }
    .@{sidebar-nav-prefix-cls}__depth3 {
      .@{sidebar-nav-prefix-cls}__item-link {
        padding-left: @layout-gutter * 4;
      }
    }
    .@{sidebar-nav-prefix-cls}__depth4 {
      .@{sidebar-nav-prefix-cls}__item-link {
        padding-left: @layout-gutter * 5;
      }
    }
  }
}

@media (min-width: @mobile-min) {
  @{alain-default-prefix}__collapsed {
    .@{sidebar-nav-prefix-cls}:not(.@{sidebar-nav-prefix-cls}__sub) {
      .@{sidebar-nav-prefix-cls}__item {
        border: none;
        &-link {
          justify-content: center;
          padding: (@layout-gutter * 3) 0;
          .@{sidebar-nav-prefix-cls}__item-icon {
            margin-right: 0;
            font-size: @alain-default-aside-collapsed-nav-fs;
          }
          .@{sidebar-nav-prefix-cls}__item-img {
            width: @alain-default-aside-collapsed-nav-img-wh;
            height: @alain-default-aside-collapsed-nav-img-wh;
          }
          .@{sidebar-nav-prefix-cls}__item-text {
            opacity: 0;
            display: none;
          }
        }
      }
      .@{sidebar-nav-prefix-cls}__group-title {
        display: none;
      }
    }
    .@{sidebar-nav-prefix-cls} {
      &__sub {
        display: none !important;
        &-arrow {
          display: none;
        }
      }
    }
  }
}

@{footer-toolbar-prefix} {
  &__left {
    margin-left: @alain-default-aside-wd;
  }
}

@{alain-default-prefix}__collapsed {
  @{footer-toolbar-prefix} {
    &__left {
      margin-left: @alain-default-aside-collapsed-wd;
    }
  }
}

@{footer-toolbar-prefix}__body {
  @{alain-default-prefix}__content {
    margin-bottom: @layout-gutter + @footer-toolbar-height;
  }
}

@{full-content-prefix} {
  &__body {
    .alain-default__content {
      router-outlet + * {
        display: block;
        height: 100%;
        width: 100%;
      }
    }
    .alain-default__content-title {
      margin-left: -24px;
    }
  }
  &__opened {
    .alain-default__header,
    .alain-default__aside,
    reuse-tab {
      display: none !important;
    }
    .alain-default__content {
      margin: 24px !important;
    }
  }
  &__hidden-title {
    .alain-default__content-title,
    .page-header {
      display: none !important;
    }
  }
}

@{alain-default-prefix} {
  @{page-header-prefix} {
    padding: @alain-default-content-padding - 12 @alain-default-content-padding 0 @alain-default-content-padding;
    margin-right: -@alain-default-content-padding;
    margin-left: -@alain-default-content-padding;
    margin-bottom: @alain-default-content-padding;
    border-bottom: 1px solid @alain-default-content-heading-border;
  }
}

@{quick-menu-prefix} {
  @media (max-width: @mobile-max) {
    right: -(@alain-default-content-padding + @quick-menu-border-width) !important;
  }
}

@alain-default-reuse-tab-gutter: 24px;

@{reuse-tab-prefix} {
  margin: 0 -@alain-default-content-padding 0 -@alain-default-content-padding;
}

@{alain-default-prefix}__fixed {
  @{reuse-tab-prefix} {
    position: fixed;
    top: @alain-default-header-hg;
    left: @alain-default-aside-wd + @alain-default-reuse-tab-gutter;
    right: @alain-default-reuse-tab-gutter;
    z-index: @zindex-fixed + 1;
  }
}

@{alain-default-prefix}__collapsed {
  @{reuse-tab-prefix} {
    left: @alain-default-aside-collapsed-wd + @alain-default-reuse-tab-gutter;
  }
}

@media (min-width: @mobile-min) {
  @{alain-default-prefix}__fixed {
    @{reuse-tab-prefix} {
      + router-outlet {
        display: block;
        height: @reuse-tab-height;
      }
    }
  }
}

@media (max-width: @mobile-max) {
  @{alain-default-prefix}__fixed {
    @{reuse-tab-prefix} {
      position: unset;
      margin-top: @reuse-tab-height;
      width: initial;
    }
  }
}

@{alain-default-prefix}__fixed {
  @{alain-default-prefix} {
    &__header {
      position: fixed;
      top: 0;
      left: 0;
    }
    &__aside {
      position: fixed;
    }
    &__content {
      margin-top: @alain-default-header-hg;
    }
  }
}

@alain-fullscreen-prefix:                       ~'.alain-fullscreen';
@alain-fullscreen-zindex:                       @zindex-base;

@alain-fullscreen-bg:                         #f5f7fa;
@alain-fullscreen-content-padding-vertical:     0;
@alain-fullscreen-content-padding-horizontal:   @layout-gutter * 2;

@{alain-fullscreen-prefix} {
  display: block;
  background-color: @alain-fullscreen-bg;
  padding: @alain-fullscreen-content-padding-vertical @alain-fullscreen-content-padding-horizontal;
}

@{alain-fullscreen-prefix} {
@{page-header-prefix} {
  padding: @alain-fullscreen-content-padding-horizontal;
  padding-top: @alain-fullscreen-content-padding-horizontal - 12;
  padding-bottom: @alain-fullscreen-content-padding-horizontal - 12;
  margin-right: -@alain-fullscreen-content-padding-horizontal;
  margin-left: -@alain-fullscreen-content-padding-horizontal;
  margin-bottom: @alain-fullscreen-content-padding-vertical;
}

}

@st-prefix: ~'.st';

@{st-prefix} {
  display: block;
  &__selection {
    cursor: pointer;
    padding-left: 2px;
  }
  &__p-left {
    .ant-table-pagination {
      float: none;
      display: block;
      text-align: left;
    }
  }
  &__p-center {
    .ant-table-pagination {
      float: none;
      display: block;
      text-align: center;
    }
  }
  // 清除页码底部间距，在大部分列表中会包裹 `nz-card` 导致底部间距过大，若有需求可自行使用 `mb-md` 来调整
  .ant-table-pagination.ant-pagination {
    margin-bottom: 0;
  }
}

@sv-prefix: ~'.sv';
@sv-label-color: rgba(0, 0, 0, 0.5);
@sv-detail-color: @text-color;
@sv-type-primary-color: @primary-color;
@sv-type-success-color: @success-color;
@sv-type-danger-color: @error-color;
@sv-type-warning-color: @warning-color;
@sv-bottom: @layout-gutter * 2;
@sv-default-text: '-';

@{sv-prefix} {
  display: block;
  + @{sv-prefix} {
    margin-top: @sv-bottom;
  }
  &__container {
    display: block;
    // offset the padding-bottom of last row
    .ant-row {
      margin-bottom: -@sv-bottom;
      overflow: hidden;
    }
  }
  &__item {
    &-fixed {
      display: flex;
      @{sv-prefix}__label {
        text-align: right;
        flex: 0 0 auto;
        text-overflow: ellipsis;
        overflow: hidden;
      }
      @{sv-prefix}__detail {
        flex: 1 0 0;
      }
    }
  }
  &__title {
    display: block;
    font-size: 14px;
    color: @heading-color;
    font-weight: 500;
    margin-bottom: @sv-bottom;
  }
  &__label {
    line-height: 22px;
    padding-bottom: @sv-bottom;
    margin-right: 8px;
    color: @sv-label-color;
    white-space: nowrap;
    display: table-cell;
    &:not(@{sv-prefix}__label-empty) {
      &:after {
        content: ':';
        margin: 0 8px 0 2px;
        position: relative;
        top: -0.5px;
      }
    }
  }
  &__detail {
    line-height: 22px;
    width: 100%;
    padding-bottom: @sv-bottom;
    color: @sv-detail-color;
    display: table-cell;
    word-break: break-all;
  }
  &__type {
    &-primary @{sv-prefix}__detail {
      color: @sv-type-primary-color;
    }
    &-success @{sv-prefix}__detail {
      color: @sv-type-success-color;
    }
    &-danger @{sv-prefix}__detail {
      color: @sv-type-danger-color;
    }
    &-warning @{sv-prefix}__detail {
      color: @sv-type-warning-color;
    }
  }
  &__default {
    &:before {
      content: @sv-default-text;
    }
  }
  &__small {
    // offset the padding-bottom of last row
    .ant-row {
      margin-bottom: -8px;
    }
    @{sv-prefix}__title {
      margin-bottom: 12px;
      color: @text-color;
    }
    @{sv-prefix}__label,
    @{sv-prefix}__detail {
      padding-bottom: 8px;
    }
  }
  &__large {
    @{sv-prefix}__title {
      font-size: 16px;
    }
  }
  &__vertical {
    @{sv-prefix}__label {
      padding-bottom: 8px;
    }

    @{sv-prefix}__label,
    @{sv-prefix}__detail {
      display: block;
    }
  }
}

@se-prefix: ~'.se';
@se-label-color: rgba(0, 0, 0, 0.85);
@se-compact-bottom: @layout-gutter;

@{se-prefix} {
  &__title {
    display: block;
    font-size: 14px;
    color: @heading-color;
    font-weight: 500;
    line-height: @form-component-max-height - 0.0001px;
  }
  &__item {
    &:last-child {
      margin-bottom: 0;
      padding-bottom: 0;
    }
  }
  &__label {
    text-align: right;
    color: @se-label-color;
    white-space: nowrap;
    display: table-cell;
    flex: 0 0 auto;
    width: initial;
    &-optional {
      color: rgba(0, 0, 0, 0.45);
    }
  }
  &__control {
    flex: 1 0 0;
    width: 100%;
  }
  &__compact {
    @{se-prefix}__title,
    @{se-prefix}__item {
      margin-bottom: @se-compact-bottom;
    }
    .ant-form-extra {
      display: none;
    }
  }
  &__line {
    border-bottom: 1px dashed #e8e8e8;
    @{se-prefix}__label,
    @{se-prefix}__control {
      padding-bottom: @se-compact-bottom;
    }
  }
  &__inline,
  &__vertical {
    @{se-prefix}__nolabel {
      display: none !important;
    }
  }
  &__horizontal {
    @{se-prefix}__item {
      display: flex;
      &:last-child {
        margin-bottom: 0;
      }
    }
  }
  &__vertical {
    @{se-prefix}__item {
      display: block;
    }
  }
  &__inline {
    @{se-prefix}__label,
    @{se-prefix}__control {
      text-align: left;
      width: initial;
      flex: none;
    }
    @{se-prefix}__item {
      &:last-child {
        margin-right: 0;
      }
    }
  }
}

@media (min-width: @mobile-min) {
}

@media (max-width: @mobile-max) {
  @{se-prefix} {
    &__horizontal {
      @{se-prefix}__item {
        display: block;
      }
    }
    &__horizontal,
    &__vertical {
      @{se-prefix}__label,
      @{se-prefix}__control {
        width: 100% !important;
      }
    }
  }
}

@avatar-list-prefix: ~'.avatar-list';

@{avatar-list-prefix} {
  display: inline-block;
  &__wrap {
    display: inline-block;
    margin-left: 8px;
    font-size: 0;
    padding: 0;
  }
  &__item {
    display: inline-block;
    font-size: @font-size-base;
    margin-left: -8px;
    width: @avatar-size-base;
    height: @avatar-size-base;
    .ant-avatar {
      border: 1px solid #fff;
    }
    &-large {
      width: @avatar-size-lg;
      height: @avatar-size-lg;
    }
    &-small {
      width: @avatar-size-sm;
      height: @avatar-size-sm;
    }
    &-mini {
      width: 20px;
      height: 20px;
      .ant-avatar {
        width: 20px;
        height: 20px;
        line-height: 20px;
      }
    }
  }
}

.ellipsis {
  overflow: hidden;
  display: -webkit-box;
}

.error-collect {
  color: #f5222d;
  padding-right: 24px;
  cursor: pointer;
}

@exception-prefix: ~'.exception';
@{exception-prefix} {
  display: flex;
  align-items: center;
  height: 100%;
  &__img-block {
    flex: 0 0 62.5%;
    width: 62.5%;
    padding-right: 152px;
    zoom: 1;
    &:before,
    &:after {
      content: ' ';
      display: table;
    }
    &:after {
      clear: both;
      visibility: hidden;
      font-size: 0;
      height: 0;
    }
  }
  &__img {
    height: 360px;
    width: 100%;
    max-width: 430px;
    float: right;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: 100% 100%;
  }
  &__cont {
    flex: auto;
    &-title {
      color: #434e59;
      font-size: 72px;
      font-weight: 600;
      line-height: 72px;
      margin-bottom: 24px;
    }
    &-desc {
      color: @text-color-secondary;
      font-size: 20px;
      line-height: 28px;
      margin-bottom: 16px;
    }
    &-actions {
      button:not(:last-child) {
        margin-right: 8px;
      }
    }
  }
}

@media screen and (max-width: @screen-xl) {
  @{exception-prefix} {
    &__img-block {
      padding-right: 88px;
    }
  }
}

@media screen and (max-width: @screen-sm) {
  @{exception-prefix} {
    display: block;
    text-align: center;
    &__img-block {
      padding-right: 0;
      margin: 0 auto 24px;
    }
  }
}

@media screen and (max-width: @screen-xs) {
  @{exception-prefix} {
    &__img-block {
      margin-bottom: -24px;
      overflow: hidden;
    }
  }
}

@footer-toolbar-prefix: ~'.footer-toolbar';
@footer-toolbar-height: 56px;
@footer-toolbar-box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.03);
@footer-toolbar-bg: #fff;
@footer-toolbar-border-top: 1px solid @border-color-split;
@footer-toolbar-padding: 0 24px;

@{footer-toolbar-prefix} {
  display: flex;
  position: fixed;
  width: 100%;
  bottom: 0;
  right: 0;
  height: @footer-toolbar-height;
  line-height: @footer-toolbar-height;
  box-shadow: @footer-toolbar-box-shadow;
  background: @footer-toolbar-bg;
  border-top: @footer-toolbar-border-top;
  padding: @footer-toolbar-padding;
  transition: all 0.3s;
  z-index: @zindex;
  &__left {
    flex: 1;
  }
}

@full-content-prefix: ~'.full-content';

@{full-content-prefix} {
  display: block;
  height: 100%;
  overflow: hidden;
  &__body {
    overflow: hidden;
  }
  &__opened {
  }
  &__hidden-title {
  }
}

@global-footer-prefix: ~'.global-footer';

@{global-footer-prefix} {
  display: block;
  padding: 0 16px;
  margin: 48px 0 24px;
  text-align: center;
  &__links {
    margin-bottom: 8px;
    &-item {
      display: inline-block;
      color: @text-color-secondary;
      transition: all 0.3s;
      &:not(:last-child) {
        margin-right: 40px;
      }
      &:hover {
        color: @text-color;
      }
    }
  }
  &__copyright {
    color: @text-color-secondary;
    font-size: @font-size-base;
  }
}

@notice-icon-prefix: ~'.notice-icon';

@{notice-icon-prefix} {
  &__btn {
    cursor: pointer;
    display: inline-block;
    transition: all 0.3s;
  }

  width: 336px;

  .ant-popover-inner-content {
    padding: 0;
  }
  .ant-tabs-bar {
    margin-bottom: 4px;
  }
  .ant-tabs-nav-scroll {
    text-align: center;
  }
  .ant-tabs-nav {
    .ant-tabs-tab {
      margin-right: 32px;
      padding: 12px 16px;
      &:last-child {
        margin-right: 0;
      }
    }
  }
  .ant-list {
    max-height: 400px;
    overflow: auto;
    .ant-list-item {
      transition: all 0.3s;
      overflow: hidden;
      cursor: pointer;
      padding-left: 24px;
      padding-right: 24px;
      .ant-list-item-meta {
        width: 100%;
      }
      .ant-avatar {
        background: #fff;
        margin-top: 4px;
      }
      &:last-child {
        border-bottom: 0;
      }
      &:hover {
        background: @primary-1;
      }
      .ant-list-item-meta-title {
        font-weight: normal;
        margin-bottom: 8px;
      }
    }
  }
  &__notfound {
    text-align: center;
    padding: 73px 0 88px;
    color: @text-color-secondary;
    &-img {
      display: inline-block;
      margin-bottom: 16px;
      height: 76px;
    }
  }
  &__clear {
    height: 46px;
    line-height: 46px;
    text-align: center;
    color: @text-color;
    border-radius: 0 0 @border-radius-base @border-radius-base;
    border-top: 1px solid @border-color-split;
    transition: all 0.3s;
    cursor: pointer;
    &:hover {
      color: @heading-color;
    }
  }
  &__item {
    .ant-badge-count {
      top: -10px;
    }
    &-read {
      opacity: 0.4;
    }
    &-desc {
      font-size: 12px;
      line-height: @line-height-base;
    }
    &-time {
      font-size: 12px;
      margin-top: 4px;
      line-height: @line-height-base;
    }
    &-extra {
      float: right;
      color: @text-color-secondary;
      font-weight: normal;
      margin-right: 0;
      margin-top: -1.5px;
    }
  }
}

@page-header-prefix: ~'.page-header';
@page-header-bg: #fff;
@page-header-wide: 1200px;

@{page-header-prefix} {
  display: block;
  background-color: @page-header-bg;
  padding: 16px 32px 0 32px;
  border-bottom: @border-width-base @border-style-base @border-color-split;
  &__wide {
    max-width: @page-header-wide;
    margin: auto;
  }
  .ant-breadcrumb {
    margin-bottom: 16px;
  }
  .ant-tabs {
    margin: 0 0 -17px -8px;
    .ant-tabs-bar {
      border-bottom: @border-width-base @border-style-base @border-color-split;
    }
  }
  &__detail {
    display: flex;
  }
  &__row {
    display: flex;
    width: 100%;
  }
  &__logo {
    flex: 0 1 auto;
    margin-right: 16px;
    padding-top: 1px;
    img {
      width: 28px;
      height: 28px;
      border-radius: @border-radius-base;
      display: block;
    }
  }
  &__title {
    font-size: 20px;
    font-weight: 500;
    color: @heading-color;
    small {
      font-weight: normal;
      font-size: 14px;
      padding-left: @layout-gutter;
    }
  }
  &__action {
    margin-left: 56px;
    min-width: 266px;
  }

  &__title,
  &__desc {
    flex: auto;
  }

  &__action,
  &__extra,
  &__main {
    flex: 0 1 auto;
  }

  &__main {
    width: 100%;
  }

  &__title,
  &__action {
    margin-bottom: 16px;
  }

  &__logo,
  &__desc,
  &__extra {
    margin-bottom: 16px;
  }

  &__action,
  &__extra {
    text-align: right;
  }

  &__extra {
    margin-left: 88px;
    min-width: 242px;
  }
  @media screen and (max-width: @screen-xl) {
    &__extra {
      margin-left: 44px;
    }
  }
  @media screen and (max-width: @screen-lg) {
    &__extra {
      margin-left: 20px;
    }
  }
  @media screen and (max-width: @screen-md) {
    &__row {
      display: block;
    }
    &__action,
    &__extra {
      margin-left: 0;
      text-align: left;
    }
  }
  @media screen and (max-width: @screen-sm) {
    &__detail {
      display: block;
    }
  }
  @media screen and (max-width: @screen-xs) {
    &__action {
      .ant-btn-group,
      .ant-btn {
        display: block;
        margin-bottom: 8px;
      }
      .ant-input-search-enter-button {
        .ant-btn {
          margin-bottom: 0;
        }
      }
      .ant-btn-group > .ant-btn {
        display: inline-block;
        margin-bottom: 0;
      }
    }
  }
}

@quick-menu-prefix: ~'.quick-menu';
@quick-menu-border-width: 1px;
@quick-menu-ctrl-hw: 50px;
@quick-menu-border-color: #fff;

@{quick-menu-prefix} {
  display: block;
  position: fixed;
  right: -@quick-menu-border-width;
  left: auto;
  backface-visibility: hidden;
  border: @quick-menu-border-width solid @quick-menu-border-color;
  z-index: @zindex + 2;
  transition: margin 0.3s cubic-bezier(1, 0, 0, 1);
  &__inner {
    position: relative;
    padding: 0 12px;
  }
  &__ctrl {
    position: absolute;
    top: -1px;
    left: -@quick-menu-ctrl-hw;
    width: @quick-menu-ctrl-hw;
    height: @quick-menu-ctrl-hw;
    border: @quick-menu-border-width solid @quick-menu-border-color;
    border-right: 0;
    text-align: center;
    cursor: pointer;
    border-radius: 3px 0 0 3px;
    &-icon {
      line-height: @quick-menu-ctrl-hw - 1;
      font-size: 20px;
    }
  }
}

.qr {
  display: inline-block;
  &__img {
    max-width: 100%;
    max-height: 100%;
  }
}

@result-extra-bg: #fafafa;

.result {
  display: block;
  text-align: center;
  width: 72%;
  margin: 0 auto;

  @media screen and (max-width: @screen-xs) {
    width: 100%;
  }

  &__icon {
    font-size: 72px;
    line-height: 72px;
    margin-bottom: 24px;
    &-success {
      color: @success-color;
    }
    &-error {
      color: @error-color;
    }
  }
  &__title {
    font-size: 24px;
    color: @heading-color;
    font-weight: 500;
    line-height: 32px;
    margin-bottom: 16px;
  }
  &__desc {
    font-size: 14px;
    line-height: 22px;
    color: @text-color-secondary;
    margin-bottom: 24px;
  }
  &__extra {
    background: @result-extra-bg;
    padding: 24px 40px;
    border-radius: @border-radius-sm;
    text-align: left;

    @media screen and (max-width: @screen-xs) {
      padding: 18px 20px;
    }
  }
  &__actions {
    margin-top: 32px;
    button:not(:last-child) {
      margin-right: 8px;
    }
  }
  .ant-steps .ant-steps-head,
  .ant-steps .ant-steps-title {
    background: @result-extra-bg;
  }
}

@reuse-tab-prefix:          ~'.reuse-tab';
@reuse-tab-height:          52px;
@reuse-tab-bg:              #fff;
@reuse-tab-padding:         8px;
@reuse-tab-border-color:    #d9d9d9;

@{reuse-tab-prefix} {
  display: block;
  background-color: @reuse-tab-bg;
  padding: @reuse-tab-padding;
  border-bottom: 1px solid @reuse-tab-border-color;
  outline: none;
  user-select: none;
  .ant-tabs-bar {
    margin-bottom: 0;
    border-bottom: none;
  }
  .ant-tabs-nav .ant-tabs-tab {
    padding: 0;
    .name {
      display: inline-block;
      padding: 8px 20px;
    }
    @{reuse-tab-prefix}__op {
      display: none;
      position: absolute;
      top: 14px;
      right: 2px;
      margin: 0;
      font-size: 10px;
    }
    &:hover {
      @{reuse-tab-prefix}__op {
        display: block;
      }
    }
  }
}

@{reuse-tab-prefix}__cm {
  .ant-menu {
    border: 1px solid #e9e9e9;
  }
}

.tag-select {
  user-select: none;
  margin-left: -8px;
  position: relative;
  overflow: hidden;
  max-height: @form-component-max-height - 0.0001px;
  line-height: @form-component-max-height - 0.0001px;
  transition: all 0.3s;
  display: block;
  &__expanded {
    transition: all 0.3s;
    max-height: 200px;
  }
  &__has-expand {
    padding-right: 50px;
  }
  .ant-tag {
    padding: 0 8px;
    margin-right: 24px;
  }
  &__trigger {
    position: absolute;
    top: 0;
    right: 0;
    &-icon {
      margin-left: 8px;
      font-size: 12px;
    }
  }
}

g2-chart,
g2-bar,
g2-gauge,
g2-mini-area,
g2-mini-bar,
g2-tag-cloud,
g2-timeline,
g2,
g2-custom {
  display: block;
}

g2-bar,
g2-tag-cloud {
  width: 100%;
}

@g2-card-prefix: ~'.g2-card';

@{g2-card-prefix} {
  position: relative;
  &__top {
    position: relative;
    overflow: hidden;
    width: 100%;
    &-margin {
      margin-bottom: 12px;
    }
    &-has-margin {
      margin-bottom: 20px;
    }
  }
  &__meta {
    &-wrap {
      float: left;
    }
    color: @text-color-secondary;
    font-size: @font-size-base;
    line-height: 22px;
    height: 22px;
    &-action {
      cursor: pointer;
      position: absolute;
      top: 0;
      right: 0;
    }
  }
  &__avatar {
    position: relative;
    top: 4px;
    float: left;
    margin-right: 20px;
    img {
      border-radius: 100%;
    }
  }
  &__total {
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
    white-space: nowrap;
    color: @heading-color;
    margin-top: 4px;
    margin-bottom: 0;
    font-size: 30px;
    line-height: 38px;
    height: 38px;
  }
  &__desc {
    margin-bottom: 12px;
    width: 100%;
  }
  &__footer {
    border-top: 1px solid @border-color-split;
    padding-top: 9px;
    margin-top: 8px;
    & > * {
      position: relative;
    }
  }
}

@g2-mini-progress-prefix: ~'.g2-mini-progress';
@{g2-mini-progress-prefix} {
  display: block;
  padding: 5px 0;
  position: relative;
  width: 100%;
  &__wrap {
    background-color: @background-color-base;
    position: relative;
  }
  &__value {
    transition: all 0.4s cubic-bezier(0.08, 0.82, 0.17, 1) 0s;
    border-radius: 1px 0 0 1px;
    background-color: @primary-color;
    width: 0;
    height: 100%;
  }
  &__target {
    position: absolute;
    top: 0;
    bottom: 0;
    &-item {
      border-radius: 100px;
      position: absolute;
      top: 0;
      left: 0;
      height: 4px;
      width: 2px;
      &:last-child {
        top: auto;
        bottom: 0;
      }
    }
  }
}

@g2-pie-prefix: ~'.g2-pie';

@{g2-pie-prefix} {
  display: block;
  position: relative;
  &__chart {
    position: relative;
  }
  &__legend {
    position: absolute;
    right: 0;
    min-width: 200px;
    top: 50%;
    transform: translateY(-50%);
    margin: 0 20px;
    list-style: none;
    padding: 0;
    &-item {
      cursor: pointer;
      margin-bottom: 16px;
      height: 22px;
      line-height: 22px;
      &:last-child {
        margin-bottom: 0;
      }
    }
    &-title {
      color: @text-color;
    }
    &-dot {
      border-radius: 8px;
      display: inline-block;
      margin-right: 8px;
      position: relative;
      top: -1px;
      height: 8px;
      width: 8px;
    }
    &-percent {
      color: @text-color-secondary;
    }
    &-value {
      position: absolute;
      right: 0;
    }
    &-has {
      @{g2-pie-prefix}__chart {
        width: ~'calc(100% - 240px)';
      }
    }
    &-block {
      @{g2-pie-prefix}__chart {
        width: 100%;
        margin: 0 0 32px;
      }
      @{g2-pie-prefix}__legend {
        position: relative;
        transform: none;
      }
    }
  }
  &__total {
    position: absolute;
    left: 50%;
    top: 50%;
    text-align: center;
    height: 62px;
    transform: translate(-50%, -50%);
    &-title {
      color: @text-color-secondary;
      font-size: 14px;
      line-height: 22px;
      height: 22px;
      margin-bottom: 8px;
      font-weight: normal;
    }
    &-stat {
      color: @heading-color;
      display: block;
      font-size: 1.2em;
      height: 32px;
      line-height: 32px;
      white-space: nowrap;
    }
  }
  &__mini {
    @{g2-pie-prefix}__total {
      &-title {
        margin-bottom: 0;
        margin-top: 4px;
      }
    }
  }
}

@g2-radar-prefix: ~'.g2-radar';

@{g2-radar-prefix} {
  display: block;
  &__legend {
    margin-top: 16px;
    &-item {
      position: relative;
      text-align: center;
      cursor: pointer;
      color: @text-color-secondary;
      line-height: 22px;
      &:after {
        background-color: @border-color-split;
        position: absolute;
        top: 8px;
        right: 0;
        height: 40px;
        width: 1px;
        content: '';
      }
      &:last-child::after {
        display: none;
      }
    }
    &-title {
      color: @heading-color;
      padding-left: 16px;
      font-size: 24px;
      line-height: 32px;
      margin-top: 4px;
      margin-bottom: 0;
    }
    &-dot {
      border-radius: 6px;
      display: inline-block;
      margin-right: 6px;
      position: relative;
      top: -1px;
      height: 6px;
      width: 6px;
    }
  }
}

@g2-water-wave-prefix: ~'.g2-water-wave';

@{g2-water-wave-prefix} {
  display: inline-block;
  position: relative;
  transform-origin: left;
  &__desc {
    position: absolute;
    left: 0;
    top: 32px;
    text-align: center;
    width: 100%;
    &-title {
      color: @text-color-secondary;
      font-size: 14px;
      line-height: 22px;
    }
    &-percent {
      color: @heading-color;
      line-height: 32px;
      font-size: 24px;
    }
  }
  &__canvas {
    transform: scale(0.5);
    transform-origin: 0 0;
  }
}

@number-info-prefix: ~'.number-info';
@{number-info-prefix} {
  display: block;
  &__title {
    color: @text-color;
    font-size: @font-size-lg;
    margin-bottom: 16px;
    transition: all 0.3s;
    &-sub {
      color: @text-color-secondary;
      font-size: @font-size-base;
      height: 22px;
      line-height: 22px;
      overflow: hidden;
      text-overflow: ellipsis;
      word-break: break-all;
      white-space: nowrap;
    }
  }
  &__value {
    margin-top: 4px;
    font-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
    white-space: nowrap;
    &-suffix {
      color: @text-color;
      font-size: 16px;
      font-style: normal;
      margin-left: 4px;
    }
    &-text {
      color: @heading-color;
      display: inline-block;
      line-height: 32px;
      height: 32px;
      font-size: 24px;
      margin-right: 32px;
    }
    &-sub {
      color: @text-color-secondary;
      font-size: @font-size-lg;
      vertical-align: top;
      margin-right: 0;
      .anticon {
        font-size: 12px;
        transform: scale(0.82);
        margin-left: 4px;
      }
      .anticon-caret-up {
        color: @red-6;
      }
      .anticon-caret-down {
        color: @green-6;
      }
    }
  }
  &__light {
    @{number-info-prefix}__value-text {
      color: @text-color;
    }
  }
}

@trend-prefix: ~'.trend';

@{trend-prefix} {
  display: inline-block;
  font-size: @font-size-base;
  line-height: 22px;
  &__up,
  &__down {
    margin-left: 4px;
    position: relative;
    top: 1px;
    i {
      font-size: 12px;
      transform: scale(0.83);
    }
  }
  &__up {
    color: @red-6;
  }
  &__down {
    color: @green-6;
    top: -1px;
  }
  &__grey {
    @{trend-prefix}__up,
    @{trend-prefix}__down {
      color: @text-color;
    }
  }
  &__reverse {
    @{trend-prefix}__up {
      color: @green-6;
    }
    @{trend-prefix}__down {
      color: @red-6;
    }
  }
}

/* You can add global styles to this file, and also import other style files */

// 可以通过 https://ng-alain.github.io/ng-alain/ 获取主题参数代码
// The theme paraments can be generated at https://ng-alain.github.io/ng-alain/
