/* 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 = 0.16;
  var saturationStep2 = 0.05;
  var brightnessStep1 = 0.05;
  var brightnessStep2 = 0.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 = hsv.s - saturationStep * i;
    } else if (i === darkColorCount) {
      saturation = hsv.s + saturationStep;
    } else {
      saturation = hsv.s + saturationStep2 * i;
    }
    if (saturation > 1) {
      saturation = 1;
    }
    if (isLight && i === lightColorCount && saturation > 0.1) {
      saturation = 0.1;
    }
    if (saturation < 0.06) {
      saturation = 0.06;
    }
    return Number(saturation.toFixed(2));
  };
  var getValue = function(hsv, i, isLight) {
    var value;
    if (isLight) {
      value = hsv.v + brightnessStep1 * i;
    }else{
      value = hsv.v - brightnessStep2 * i
    }
    if (value > 1) {
      value = 1;
    }
    return Number(value.toFixed(2))
  };

  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-base: #1890ff;
@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: @blue-base;
@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-base: #722ed1;
@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: @purple-base;
@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-base: #13c2c2;
@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: @cyan-base;
@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-base: #52c41a;
@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: @green-base;
@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-base: #eb2f96;
@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: @magenta-base;
@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-base: #eb2f96;
@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: @pink-base;
@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-base: #f5222d;
@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: @red-base;
@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-base: #fa8c16;
@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: @orange-base;
@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-base: #fadb14;
@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: @yellow-base;
@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-base: #fa541c;
@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: @volcano-base;
@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-base: #2f54eb;
@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: @geekblue-base;
@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-base: #a0d911;
@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: @lime-base;
@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-base: #faad14;
@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: @gold-base;
@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) `);

@preset-colors: pink, magenta, red, volcano, orange, yellow, gold, cyan, lime, green, blue, geekblue,
  purple;

@theme: default;

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

// An override for the html selector for theme prefixes
@html-selector: html;

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

// 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;
// Popover background color
@popover-background: @component-background;
@popover-customize-border-color: @border-color-split;
@font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
  'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
  'Noto Color Emoji';
@code-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
@text-color: fade(@black, 65%);
@text-color-secondary: fade(@black, 45%);
@text-color-inverse: @white;
@icon-color: inherit;
@icon-color-hover: fade(@black, 75%);
@heading-color: fade(#000, 85%);
@heading-color-dark: fade(@white, 100%);
@text-color-dark: fade(@white, 85%);
@text-color-secondary-dark: fade(@white, 65%);
@text-selection-bg: @primary-color;
@font-variant-base: tabular-nums;
@font-feature-settings-base: 'tnum';
@font-size-base: 14px;
@font-size-lg: @font-size-base + 2px;
@font-size-sm: 12px;
@heading-1-size: ceil(@font-size-base * 2.71);
@heading-2-size: ceil(@font-size-base * 2.14);
@heading-3-size: ceil(@font-size-base * 1.71);
@heading-4-size: ceil(@font-size-base * 1.42);
// https://github.com/ant-design/ant-design/issues/20210
@line-height-base: 1.5715;
@border-radius-base: 2px;
@border-radius-sm: @border-radius-base;

// 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
@padding-xss: 4px; // more small

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

// vertical margins
@margin-lg: 24px; // containers
@margin-md: 16px; // small containers and buttons
@margin-sm: 12px; // Form controls and items
@margin-xs: 8px; // small items
@margin-xss: 4px; // more small

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

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

// 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;
@link-focus-decoration: none;
@link-focus-outline: 0;

// 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, 94%); // split border inside a component
@border-color-inverse: @white;
@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;
@outline-fade: 20%;

@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, 0.15);
@shadow-color-inverse: @component-background;
@box-shadow-base: @shadow-2;
@shadow-1-up: 0 -6px 16px -8px rgba(0, 0, 0, 0.08), 0 -9px 28px 0 rgba(0, 0, 0, 0.05),
  0 -12px 48px 16px rgba(0, 0, 0, 0.03);
@shadow-1-down: 0 6px 16px -8px rgba(0, 0, 0, 0.08), 0 9px 28px 0 rgba(0, 0, 0, 0.05),
  0 12px 48px 16px rgba(0, 0, 0, 0.03);
@shadow-1-left: -6px 0 16px -8px rgba(0, 0, 0, 0.08), -9px 0 28px 0 rgba(0, 0, 0, 0.05),
  -12px 0 48px 16px rgba(0, 0, 0, 0.03);
@shadow-1-right: 6px 0 16px -8px rgba(0, 0, 0, 0.08), 9px 0 28px 0 rgba(0, 0, 0, 0.05),
  12px 0 48px 16px rgba(0, 0, 0, 0.03);
@shadow-2: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08),
  0 9px 28px 8px rgba(0, 0, 0, 0.05);

// Buttons
@btn-font-weight: 400;
@btn-border-radius-base: @border-radius-base;
@btn-border-radius-sm: @border-radius-base;
@btn-border-width: @border-width-base;
@btn-border-style: @border-style-base;
@btn-shadow: 0 2px 0 rgba(0, 0, 0, 0.015);
@btn-primary-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);
@btn-text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);

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

@btn-default-color: @text-color;
@btn-default-bg: @component-background;
@btn-default-border: @border-color-base;

@btn-danger-color: #fff;
@btn-danger-bg: @error-color;
@btn-danger-border: @error-color;

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

@btn-default-ghost-color: @component-background;
@btn-default-ghost-bg: transparent;
@btn-default-ghost-border: @component-background;

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

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

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

@btn-square-size: @btn-height-base;
@btn-square-size-lg: @btn-height-lg;
@btn-square-size-sm: @btn-height-sm;
@btn-square-only-icon-size: @font-size-base + 2px;
@btn-square-only-icon-size-sm: @font-size-base;
@btn-square-only-icon-size-lg: @btn-font-size-lg + 2px;

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

@btn-link-hover-bg: transparent;
@btn-text-hover-bg: rgba(0, 0, 0, 0.018);

// Checkbox
@checkbox-size: 16px;
@checkbox-color: @primary-color;
@checkbox-check-color: #fff;
@checkbox-check-bg: @checkbox-check-color;
@checkbox-border-width: @border-width-base;
@checkbox-group-item-margin-right: 8px;

// Descriptions
@descriptions-bg: #fafafa;
@descriptions-title-margin-bottom: 20px;
@descriptions-default-padding: @padding-md @padding-lg;
@descriptions-middle-padding: @padding-sm @padding-lg;
@descriptions-small-padding: @padding-xs @padding-md;
@descriptions-item-padding-bottom: @padding-md;
@descriptions-item-trailing-colon: true;
@descriptions-item-label-colon-margin-right: 8px;
@descriptions-item-label-colon-margin-left: 2px;

// Divider
@divider-text-padding: 1em;
@divider-orientation-margin: 5%;

// Dropdown
@dropdown-selected-color: @primary-color;
@dropdown-menu-submenu-disabled-bg: @component-background;

// Empty
@empty-font-size: @font-size-base;

// Radio
@radio-size: 16px;
@radio-top: 0px;
@radio-dot-color: @primary-color;
@radio-dot-disabled-color: fade(@black, 20%);
@radio-solid-checked-color: @component-background;

// Radio buttons
@radio-button-bg: @btn-default-bg;
@radio-button-checked-bg: @btn-default-bg;
@radio-button-color: @btn-default-color;
@radio-button-hover-color: @primary-5;
@radio-button-active-color: @primary-7;
@radio-disabled-button-checked-bg: tint(@black, 90%);
@radio-disabled-button-checked-color: @text-color-inverse;
@radio-wrapper-margin-right: 8px;

// 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 desktop
@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;

// Layout
@layout-body-background: #f0f2f5;
@layout-header-background: #001529;
@layout-header-height: 64px;
@layout-header-padding: 0 50px;
@layout-header-color: @text-color;
@layout-footer-padding: 24px 50px;
@layout-footer-background: @layout-body-background;
@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, order by `z-index`
@zindex-badge: auto;
@zindex-table-fixed: auto;
@zindex-affix: 10;
@zindex-back-top: 10;
@zindex-picker-panel: 10;
@zindex-popup-close: 10;
@zindex-modal: 1000;
@zindex-modal-mask: 1000;
@zindex-message: 1010;
@zindex-notification: 1010;
@zindex-popover: 1030;
@zindex-dropdown: 1050;
@zindex-picker: 1050;
@zindex-popoconfirm: 1060;
@zindex-tooltip: 1070;

// Animation
@animation-duration-slow: 0.3s; // Modal
@animation-duration-base: 0.2s;
@animation-duration-fast: 0.1s; // Tooltip

//CollapsePanel
@collapse-panel-border-radius: @border-radius-base;

//Dropdown
@dropdown-menu-bg: @component-background;
@dropdown-vertical-padding: 5px;
@dropdown-edge-child-vertical-padding: 4px;
@dropdown-font-size: @font-size-base;
@dropdown-line-height: 22px;

// Form
// ---
@label-required-color: @highlight-color;
@label-color: @heading-color;
@form-warning-input-bg: @input-bg;
@form-item-margin-bottom: 24px;
@form-item-trailing-colon: true;
@form-vertical-label-padding: 0 0 8px;
@form-vertical-label-margin: 0;
@form-item-label-font-size: @font-size-base;
@form-item-label-height: @input-height-base;
@form-item-label-colon-margin-right: 8px;
@form-item-label-colon-margin-left: 2px;
@form-error-input-bg: @input-bg;

// Input
// ---
@input-height-base: @height-base;
@input-height-lg: @height-lg;
@input-height-sm: @height-sm;
@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: max(
  round((@input-height-base - @font-size-base * @line-height-base) / 2 * 10) / 10 -
    @border-width-base,
  3px
);
@input-padding-vertical-sm: max(
  round((@input-height-sm - @font-size-base * @line-height-base) / 2 * 10) / 10 - @border-width-base,
  0
);
@input-padding-vertical-lg: ceil((@input-height-lg - @font-size-lg * @line-height-base) / 2 * 10) /
  10 - @border-width-base;
@input-placeholder-color: hsv(0, 0, 75%);
@input-color: @text-color;
@input-icon-color: @input-color;
@input-border-color: @border-color-base;
@input-bg: @component-background;
@input-number-hover-border-color: @input-hover-border-color;
@input-number-handler-active-bg: #f4f4f4;
@input-number-handler-hover-bg: @primary-5;
@input-number-handler-bg: @component-background;
@input-number-handler-border-color: @border-color-base;
@input-addon-bg: @background-color-light;
@input-hover-border-color: @primary-5;
@input-disabled-bg: @disabled-bg;
@input-outline-offset: 0 0;
@input-icon-hover-color: fade(@black, 85%);
@input-disabled-color: @disabled-color;

// Mentions
// ---
@mentions-dropdown-bg: @component-background;
@mentions-dropdown-menu-item-hover-bg: @mentions-dropdown-bg;

// Select
// ---
@select-border-color: @border-color-base;
@select-item-selected-color: @text-color;
@select-item-selected-font-weight: 600;
@select-dropdown-bg: @component-background;
@select-item-selected-bg: @primary-1;
@select-item-active-bg: @item-hover-bg;
@select-dropdown-vertical-padding: @dropdown-vertical-padding;
@select-dropdown-font-size: @dropdown-font-size;
@select-dropdown-line-height: @dropdown-line-height;
@select-dropdown-height: 32px;
@select-background: @component-background;
@select-clear-background: @select-background;
@select-selection-item-bg: @background-color-base;
@select-selection-item-border-color: @border-color-split;
@select-single-item-height-lg: 40px;
@select-multiple-item-height: @input-height-base - @input-padding-vertical-base * 2; // Normal 24px
@select-multiple-item-height-lg: 32px;
@select-multiple-item-spacing-half: ceil(@input-padding-vertical-base / 2);

// Cascader
// ---
@cascader-bg: @component-background;
@cascader-item-selected-bg: @primary-1;
@cascader-menu-bg: @component-background;
@cascader-menu-border-color-split: @border-color-split;

// Cascader
// ----
@cascader-dropdown-vertical-padding: @dropdown-vertical-padding;
@cascader-dropdown-edge-child-vertical-padding: @dropdown-edge-child-vertical-padding;
@cascader-dropdown-font-size: @dropdown-font-size;
@cascader-dropdown-line-height: @dropdown-line-height;

// Anchor
// ---
@anchor-bg: @component-background;
@anchor-border-color: @border-color-split;
@anchor-link-top: 7px;
@anchor-link-left: 16px;
@anchor-link-padding: @anchor-link-top 0 @anchor-link-top @anchor-link-left;

// Tooltip
// ---
// Tooltip max width
@tooltip-max-width: 250px;
// Tooltip text color
@tooltip-color: #fff;
// Tooltip background color
@tooltip-bg: rgba(0, 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: @component-background;
// Popover text color
@popover-color: @text-color;
// Popover maximum width
@popover-min-width: 177px;
@popover-min-height: 32px;
// 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;
@popover-padding-horizontal: @padding-md;

// Modal
// --
@modal-header-padding-vertical: @padding-md;
@modal-header-padding-horizontal: @padding-lg;
@modal-body-padding: @padding-lg;
@modal-header-bg: @component-background;
@modal-header-padding: @modal-header-padding-vertical @modal-header-padding-horizontal;
@modal-header-border-width: @border-width-base;
@modal-header-border-style: @border-style-base;
@modal-header-title-line-height: 22px;
@modal-header-title-font-size: @font-size-lg;
@modal-header-border-color-split: @border-color-split;
@modal-header-close-size: 56px;
@modal-content-bg: @component-background;
@modal-heading-color: @heading-color;
@modal-close-color: @text-color-secondary;
@modal-footer-bg: transparent;
@modal-footer-border-color-split: @border-color-split;
@modal-footer-border-style: @border-style-base;
@modal-footer-padding-vertical: 10px;
@modal-footer-padding-horizontal: 16px;
@modal-footer-border-width: @border-width-base;
@modal-mask-bg: fade(@black, 45%);
@modal-confirm-body-padding: 32px 32px 24px;

// Progress
// --
@progress-default-color: @processing-color;
@progress-remaining-color: @background-color-base;
@progress-text-color: @text-color;
@progress-radius: 100px;
@progress-steps-item-bg: #f3f3f3;
@progress-text-font-size: 1em;
@progress-circle-text-font-size: 1em;
// Menu
// ---
@menu-inline-toplevel-item-height: 40px;
@menu-item-height: 40px;
@menu-item-group-height: @line-height-base;
@menu-collapsed-width: 80px;
@menu-bg: @component-background;
@menu-popup-bg: @component-background;
@menu-item-color: @text-color;
@menu-highlight-color: @primary-color;
@menu-highlight-danger-color: @error-color;
@menu-item-active-bg: @primary-1;
@menu-item-active-danger-bg: @red-1;
@menu-item-active-border-width: 3px;
@menu-item-group-title-color: @text-color-secondary;
@menu-item-vertical-margin: 4px;
@menu-item-font-size: @font-size-base;
@menu-item-boundary-margin: 8px;
@menu-item-padding: 0 20px;
@menu-horizontal-line-height: 46px;
@menu-icon-margin-right: 10px;
@menu-icon-size: @menu-item-font-size;
@menu-icon-size-lg: @font-size-lg;
@menu-item-group-title-font-size: @menu-item-font-size;

// dark theme
@menu-dark-color: @text-color-secondary-dark;
@menu-dark-danger-color: @error-color;
@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;
@menu-dark-item-active-danger-bg: @error-color;
@menu-dark-selected-item-icon-color: @white;
@menu-dark-selected-item-text-color: @white;
@menu-dark-item-hover-bg: transparent;
// Spin
// ---
@spin-dot-size-sm: 14px;
@spin-dot-size: 20px;
@spin-dot-size-lg: 32px;

// Table
// --
@table-bg: @component-background;
@table-header-bg: @background-color-light;
@table-header-color: @heading-color;
@table-header-sort-bg: @background-color-base;
@table-body-sort-bg: #fafafa;
@table-row-hover-bg: @background-color-light;
@table-selected-row-color: inherit;
@table-selected-row-bg: @primary-1;
@table-body-selected-sort-bg: @table-selected-row-bg;
@table-selected-row-hover-bg: darken(@table-selected-row-bg, 2%);
@table-expanded-row-bg: #fbfbfb;
@table-padding-vertical: 16px;
@table-padding-horizontal: 16px;
@table-padding-vertical-md: @table-padding-vertical * 3 / 4;
@table-padding-horizontal-md: @table-padding-horizontal / 2;
@table-padding-vertical-sm: @table-padding-vertical / 2;
@table-padding-horizontal-sm: @table-padding-horizontal / 2;
@table-border-radius-base: @border-radius-base;
@table-footer-bg: @background-color-light;
@table-footer-color: @heading-color;
@table-header-bg-sm: @table-header-bg;
@table-font-size: @font-size-base;
@table-font-size-md: @table-font-size;
@table-font-size-sm: @table-font-size;
// Sorter
// Legacy: `table-header-sort-active-bg` is used for hover not real active
@table-header-sort-active-bg: darken(@table-header-bg, 3%);
// Filter
@table-header-filter-active-bg: darken(@table-header-sort-active-bg, 5%);
@table-filter-btns-bg: inherit;
@table-filter-dropdown-bg: @component-background;
@table-expand-icon-bg: @component-background;
@table-selection-column-width: 60px;
@table-selection-extra-right: 0;

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

// TimePicker
// ---
@picker-bg: @component-background;
@picker-basic-cell-hover-color: @item-hover-bg;
@picker-basic-cell-active-with-range-color: @primary-1;
@picker-basic-cell-hover-with-range-color: lighten(@primary-color, 35%);
@picker-basic-cell-disabled-bg: @disabled-bg;
@picker-border-color: @border-color-split;
@picker-date-hover-range-border-color: lighten(@primary-color, 20%);
@picker-date-hover-range-color: @picker-basic-cell-hover-with-range-color;
@picker-time-panel-cell-height: 28px;
@picker-panel-cell-height: 24px;
@picker-panel-cell-width: 36px;
@picker-text-height: 40px;
@picker-panel-without-time-cell-height: 66px;

// Calendar
// ---
@calendar-bg: @component-background;
@calendar-input-bg: @input-bg;
@calendar-border-color: @border-color-inverse;
@calendar-item-active-bg: @item-active-bg;
@calendar-full-bg: @calendar-bg;
@calendar-full-panel-bg: @calendar-full-bg;

// 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;
@badge-text-color: @component-background;

// Rate
// ---
@rate-star-color: @yellow-6;
@rate-star-bg: @border-color-split;
@rate-star-size: 20px;
@rate-star-hover-scale: scale(1.1);

// Card
// ---
@card-head-color: @heading-color;
@card-head-background: transparent;
@card-head-font-size: @font-size-lg;
@card-head-font-size-sm: @font-size-base;
@card-head-padding: 16px;
@card-head-padding-sm: @card-head-padding / 2;
@card-head-height: 48px;
@card-head-height-sm: 36px;
@card-inner-head-padding: 12px;
@card-padding-base: 24px;
@card-padding-base-sm: @card-padding-base / 2;
@card-actions-background: @background-color-light;
@card-actions-li-margin: 12px 0;
@card-skeleton-bg: #cfd8dc;
@card-background: @component-background;
@card-shadow: 0 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.12),
  0 5px 12px 4px rgba(0, 0, 0, 0.09);
@card-radius: @border-radius-base;
@card-head-tabs-margin-bottom: -17px;
@card-head-extra-color: @text-color;

// Comment
// ---
@comment-bg: inherit;
@comment-padding-base: @padding-md 0;
@comment-nest-indent: 44px;
@comment-font-size-base: @font-size-base;
@comment-font-size-sm: @font-size-sm;
@comment-author-name-color: @text-color-secondary;
@comment-author-time-color: #ccc;
@comment-action-color: @text-color-secondary;
@comment-action-hover-color: #595959;
@comment-actions-margin-bottom: inherit;
@comment-actions-margin-top: @margin-sm;
@comment-content-detail-p-margin-bottom: inherit;

// Tabs
// ---
@tabs-card-head-background: @background-color-light;
@tabs-card-height: 40px;
@tabs-card-active-color: @primary-color;
@tabs-card-horizontal-padding: (@tabs-card-height - floor(@font-size-base * @line-height-base)) / 2 -
  @border-width-base @padding-md;
@tabs-card-horizontal-padding-sm: 6px @padding-md;
@tabs-card-horizontal-padding-lg: 7px @padding-md 6px;
@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 @margin-md 0;
@tabs-horizontal-margin: 0 32px 0 0;
@tabs-horizontal-margin-rtl: 0 0 0 32px;
@tabs-horizontal-padding: @padding-sm 0;
@tabs-horizontal-padding-lg: @padding-md 0;
@tabs-horizontal-padding-sm: @padding-xs 0;
@tabs-vertical-padding: @padding-xs @padding-lg;
@tabs-vertical-margin: 0 0 @margin-md 0;
@tabs-scrolling-size: 32px;
@tabs-highlight-color: @primary-color;
@tabs-hover-color: @primary-5;
@tabs-active-color: @primary-7;
@tabs-card-gutter: 2px;
@tabs-card-tab-active-border-top: 2px solid transparent;

// 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-min-width: 44px;
@switch-sm-min-width: 28px;
@switch-disabled-opacity: 0.4;
@switch-color: @primary-color;
@switch-bg: @component-background;
@switch-shadow-color: fade(#00230b, 20%);
@switch-padding: 2px;
@switch-inner-margin-min: ceil(@switch-height * 0.3);
@switch-inner-margin-max: ceil(@switch-height * 1.1);
@switch-sm-inner-margin-min: ceil(@switch-sm-height * 0.3);
@switch-sm-inner-margin-max: ceil(@switch-sm-height * 1.1);

// Pagination
// ---
@pagination-item-bg: @component-background;
@pagination-item-size: @height-base;
@pagination-item-size-sm: 24px;
@pagination-font-family: Arial;
@pagination-font-weight-active: 500;
@pagination-item-bg-active: @component-background;
@pagination-item-link-bg: @component-background;
@pagination-item-disabled-color-active: @white;
@pagination-item-disabled-bg-active: darken(@disabled-bg, 10%);
@pagination-item-input-bg: @component-background;
@pagination-mini-options-size-changer-top: 0px;

// PageHeader
// ---
@page-header-padding: @padding-lg;
@page-header-padding-vertical: @padding-md;
@page-header-padding-breadcrumb: @padding-sm;
@page-header-content-padding-vertical: @padding-sm;
@page-header-back-color: #000;
@page-header-ghost-bg: inherit;
@page-header-heading-title: @heading-4-size;
@page-header-heading-sub-title: 14px;
@page-header-tabs-tab-font-size: 16px;

// 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: 10px 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-border-width: 2px;
@slider-handle-background-color: @component-background;
@slider-handle-color: @primary-3;
@slider-handle-color-hover: @primary-4;
@slider-handle-color-focus: tint(@primary-color, 20%);
@slider-handle-color-focus-shadow: fade(@primary-color, 12%);
@slider-handle-color-tooltip-open: @primary-color;
@slider-handle-size: 14px;
@slider-handle-margin-top: -5px;
@slider-handle-shadow: 0;
@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-bg: @component-background;
@tree-title-height: 24px;
@tree-child-padding: 18px;
@tree-directory-selected-color: #fff;
@tree-directory-selected-bg: @primary-color;
@tree-node-hover-bg: @item-hover-bg;
@tree-node-selected-bg: @primary-2;

// Collapse
// ---
@collapse-header-padding: @padding-sm @padding-md;
@collapse-header-padding-extra: 40px;
@collapse-header-bg: @background-color-light;
@collapse-content-padding: @padding-md;
@collapse-content-bg: @component-background;
@collapse-header-arrow-left: 16px;

// Skeleton
// ---
@skeleton-color: #f2f2f2;
@skeleton-to-color: shade(@skeleton-color, 5%);
@skeleton-paragraph-margin-top: 28px;
@skeleton-paragraph-li-margin-top: @margin-md;
@skeleton-paragraph-li-height: 16px;
@skeleton-title-height: 16px;
@skeleton-title-paragraph-margin-top: @margin-lg;

// Transfer
// ---
@transfer-header-height: 40px;
@transfer-item-height: @height-base;
@transfer-disabled-bg: @disabled-bg;
@transfer-list-height: 200px;
@transfer-item-hover-bg: @item-hover-bg;
@transfer-item-padding-vertical: 6px;
@transfer-list-search-icon-top: 12px;

// Message
// ---
@message-notice-content-padding: 10px 16px;
@message-notice-content-bg: @component-background;
// 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;
@alert-message-color: @heading-color;
@alert-text-color: @text-color;
@alert-close-color: @text-color-secondary;
@alert-close-hover-color: @icon-color-hover;
@alert-no-icon-padding-vertical: @padding-xs;
@alert-with-description-no-icon-padding-vertical: @padding-md - 1px;
@alert-with-description-padding-vertical: @padding-md - 1px;
@alert-with-description-padding: @alert-with-description-padding-vertical 15px
  @alert-with-description-no-icon-padding-vertical @alert-with-description-icon-size * 2 +
  @alert-with-description-padding-vertical;
@alert-icon-top: 8px + @font-size-base * @line-height-base / 2 - @font-size-base / 2;
@alert-with-description-icon-size: 24px;
@alert-with-description-icon-top: @alert-with-description-padding-vertical;

// List
// ---
@list-header-background: transparent;
@list-footer-background: transparent;
@list-empty-text-padding: @padding-md;
@list-item-padding: @padding-sm 0;
@list-item-padding-sm: @padding-xs @padding-md;
@list-item-padding-lg: 16px 24px;
@list-item-meta-margin-bottom: @padding-md;
@list-item-meta-avatar-margin-right: @padding-md;
@list-item-meta-title-margin-bottom: @padding-sm;
@list-customize-card-bg: @component-background;
@list-item-meta-description-font-size: @font-size-base;

// Statistic
// ---
@statistic-title-font-size: @font-size-base;
@statistic-content-font-size: 24px;
@statistic-unit-font-size: 16px;
@statistic-font-family: @font-family;

// Drawer
// ---
@drawer-header-padding: @padding-md @padding-lg;
@drawer-body-padding: @padding-lg;
@drawer-bg: @component-background;
@drawer-footer-padding-vertical: @modal-footer-padding-vertical;
@drawer-footer-padding-horizontal: @modal-footer-padding-horizontal;
@drawer-header-close-size: 56px;

// Timeline
// ---
@timeline-width: 2px;
@timeline-color: @border-color-split;
@timeline-dot-border-width: 2px;
@timeline-dot-color: @primary-color;
@timeline-dot-bg: @component-background;
@timeline-item-padding-bottom: 20px;

// Typography
// ---
@typography-title-font-weight: 600;
@typography-title-margin-top: 1.2em;
@typography-title-margin-bottom: 0.5em;

// Upload
// ---
@upload-actions-color: @text-color-secondary;

// Steps
// ---
@process-tail-color: @border-color-split;
@steps-nav-arrow-color: fade(@black, 25%);
@steps-background: @component-background;
@steps-icon-size: 32px;
@steps-icon-custom-size: @steps-icon-size;
@steps-icon-custom-top: 0px;
@steps-icon-custom-font-size: 24px;
@steps-icon-top: -1px;
@steps-icon-font-size: @font-size-lg;
@steps-icon-margin: 0 8px 0 0;
@steps-title-line-height: @height-base;
@steps-small-icon-size: 24px;
@steps-small-icon-margin: 0 8px 0 0;
@steps-dot-size: 8px;
@steps-dot-top: 2px;
@steps-current-dot-size: 10px;
@steps-desciption-max-width: 140px;
@steps-nav-content-max-width: auto;
@steps-vertical-icon-width: 16px;
@steps-vertical-tail-width: 16px;
@steps-vertical-tail-width-sm: 12px;

// Notification
// ---
@notification-bg: @component-background;
@notification-padding-vertical: 16px;
@notification-padding-horizontal: 24px;

//  Result
// ---
@result-title-font-size: 24px;
@result-subtitle-font-size: @font-size-base;
@result-icon-font-size: 72px;
@result-extra-margin: 24px 0 0 0;

// Image
// ---
@image-size-base: 48px;
@image-font-size-base: 24px;
@image-bg: #ccc;
@image-color: #fff;

// 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 {
    opacity: 1; // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526
  }

  &::placeholder {
    color: @color;
  }

  &:placeholder-shown {
    text-overflow: ellipsis;
  }
}

// mixins for clearfix
// ------------------------
.clearfix() {
  // https://github.com/ant-design/ant-design/issues/21301#issuecomment-583955229
  &::before {
    display: table;
    content: '';
  }
  &::after {
    // https://github.com/ant-design/ant-design/issues/21864
    display: table;
    clear: both;
    content: '';
  }
}

.iconfont-mixin() {
  display: inline-block;
  color: @icon-color;
  font-style: normal;
  line-height: 0;
  text-align: center;
  text-transform: none;
  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-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
.iconfont-size-under-12px(@size) {
  display: inline-block;
  font-size: @size;
}

.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() {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  color: @text-color;
  font-size: @font-size-base;
  font-variant: @font-variant-base;
  line-height: @line-height-base;
  list-style: none;
  font-feature-settings: @font-feature-settings-base;
}

.operation-unit() {
  color: @link-color;
  text-decoration: none;
  outline: none;
  cursor: pointer;
  transition: color 0.3s;

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

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

// =============== Common ===============
.typography-paragraph() {
  margin-bottom: 1em;
}

.typography-title(@fontSize; @fontWeight; @lineHeight; @headingColor; @headingMarginBottom;) {
  margin-bottom: @headingMarginBottom;
  color: @headingColor;
  font-weight: @fontWeight;
  font-size: @fontSize;
  line-height: @lineHeight;
}

.typography-title-1() {
  .typography-title(
    @heading-1-size,
    @typography-title-font-weight,
    1.23,
    @heading-color,
    @typography-title-margin-bottom
  );
}
.typography-title-2() {
  .typography-title(
    @heading-2-size,
    @typography-title-font-weight,
    1.35,
    @heading-color,
    @typography-title-margin-bottom
  );
}
.typography-title-3() {
  .typography-title(
    @heading-3-size,
    @typography-title-font-weight,
    1.35,
    @heading-color,
    @typography-title-margin-bottom
  );
}
.typography-title-4() {
  .typography-title(
    @heading-4-size,
    @typography-title-font-weight,
    1.4,
    @heading-color,
    @typography-title-margin-bottom
  );
}

// customize dark components background in popover containers(like Modal, Drawer, Card, Popover, Popconfirm, Notification, ...)
// for dark theme
.popover-customize-bg(@containerClass, @background: @popover-background, @prefix: @ant-prefix) when (@theme = dark) {
  @picker-prefix-cls: ~'@{prefix}-picker';
  @slider-prefix-cls: ~'@{prefix}-slider';
  @anchor-prefix-cls: ~'@{prefix}-anchor';
  @collapse-prefix-cls: ~'@{prefix}-collapse';
  @tab-prefix-cls: ~'@{prefix}-tabs';
  @timeline-prefix-cls: ~'@{prefix}-timeline';
  @tree-prefix-cls: ~'@{prefix}-tree';
  @card-prefix-cls: ~'@{prefix}-card';
  @badge-prefix-cls: ~'@{prefix}-badge';
  @transfer-prefix-cls: ~'@{prefix}-transfer';
  @calendar-prefix-cls: ~'@{prefix}-picker-calendar';
  @calendar-picker-prefix-cls: ~'@{prefix}-picker';
  @table-prefix-cls: ~'@{prefix}-table';

  @popover-border: @border-width-base @border-style-base @popover-customize-border-color;

  .@{containerClass} {
    .@{picker-prefix-cls}-clear, .@{slider-prefix-cls}-handle, .@{anchor-prefix-cls}-wrapper, .@{collapse-prefix-cls}-content, .@{timeline-prefix-cls}-item-head, .@{card-prefix-cls} {
      background-color: @background;
    }

    .@{transfer-prefix-cls} {
      &-list {
        &-header {
          background: @background;
          border-bottom: @popover-border;
        }
        &-content-item:not(.@{transfer-prefix-cls}-list-content-item-disabled):hover {
          background-color: @item-hover-bg;
        }
      }
    }

    tr.@{table-prefix-cls}-expanded-row {
      &,
      &:hover {
        > td {
          background: #272727;
        }
      }
    }
    .@{table-prefix-cls}.@{table-prefix-cls}-small {
      thead {
        > tr {
          > th {
            background-color: @background;
            border-bottom: @popover-border;
          }
        }
      }
    }
    .@{table-prefix-cls} {
      background-color: @background;
      .@{table-prefix-cls}-row-expand-icon {
        border: @popover-border;
      }
      tfoot {
        > tr {
          > th,
          > td {
            border-bottom: @popover-border;
          }
        }
      }
      thead {
        > tr {
          > th {
            background-color: #272727;
            border-bottom: @popover-border;
          }
        }
      }
      tbody {
        > tr {
          > td {
            border-bottom: @popover-border;
            &.@{table-prefix-cls}-cell-fix-left, &.@{table-prefix-cls}-cell-fix-right {
              background-color: @background;
            }
          }
          &.@{table-prefix-cls}-row:hover {
            > td {
              background: @table-header-sort-active-bg;
            }
          }
        }
      }
      &.@{table-prefix-cls}-bordered {
        .@{table-prefix-cls}-title {
          border: @popover-border;
        }

        // ============================= Cell =============================
        thead > tr > th,
        tbody > tr > td,
        tfoot > tr > th,
        tfoot > tr > td {
          border-right: @popover-border;
        }

        // Fixed right should provides additional border
        .@{table-prefix-cls}-cell-fix-right-first::after {
          border-right: @popover-border;
        }

        // ============================ Header ============================
        table > {
          thead {
            > tr:not(:last-child) > th {
              border-bottom: @border-width-base @border-style-base @border-color-split;
            }
          }
        }

        // =========================== Content ============================
        .@{table-prefix-cls}-container {
          border: @popover-border;
        }

        // ========================== Expandable ==========================
        .@{table-prefix-cls}-expanded-row-fixed {
          &::after {
            border-right: @popover-border;
          }
        }

        .@{table-prefix-cls}-footer {
          border: @popover-border;
        }
      }
      .@{table-prefix-cls}-filter-trigger-container-open {
        background-color: #525252;
      }
    }

    .@{calendar-prefix-cls}-full {
      background-color: @background;
      .@{calendar-picker-prefix-cls}-panel {
        background-color: @background;
        .@{calendar-prefix-cls}-date {
          border-top: 2px solid @popover-customize-border-color;
        }
      }
    }

    .@{tab-prefix-cls} {
      &.@{tab-prefix-cls}-card .@{tab-prefix-cls}-card-bar .@{tab-prefix-cls}-tab-active {
        background-color: @background;
        border-bottom: @border-width-base solid @background;
      }
    }

    .@{badge-prefix-cls} {
      &-count {
        box-shadow: 0 0 0 1px @background;
      }
    }

    .@{tree-prefix-cls} {
      &-show-line {
        .@{tree-prefix-cls}-switcher {
          background: @background;
        }
      }
    }
  }
}

// Config global less under antd
[class^=~'@{ant-prefix}-'],
[class*=~' @{ant-prefix}-'] {
  // remove the clear button of a text input control in IE10+
  &::-ms-clear,
  input::-ms-clear,
  input::-ms-reveal {
    display: none;
  }

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

/* 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

// HTML & Body reset
@{html-selector},
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-selector} {
  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: fade(@black, 0%); // 6
}

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

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

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

// 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: 0.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
  border-bottom: 0; // 1
  cursor: help; // 3
}

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: 0.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: -0.25em;
}
sup {
  top: -0.5em;
}

//
// Links
//

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

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

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

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

  // https://github.com/ant-design/ant-design/issues/22503
  &:focus {
    text-decoration: @link-focus-decoration;
    outline: @link-focus-outline;
  }

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

//
// Code
//

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

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: 0.75em;
  padding-bottom: 0.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
  color: inherit;
  font-size: inherit;
  font-family: inherit;
  line-height: 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-selector} [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;
  margin: 0;
  // Reset the default outline behavior of fieldsets so they don't affect page layout.
  padding: 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
  margin-bottom: 0.5em;
  padding: 0;
  color: inherit; // 2
  font-size: 1.5em;
  line-height: inherit;
  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: 0.2em;
  background-color: @yellow-1;
}

::selection {
  color: @text-color-inverse;
  background: @text-selection-bg;
}

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

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

  &[tabindex] {
    cursor: pointer;
  }
}

.@{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: translateY(100%);
    transform-origin: 0 0;
    opacity: 0;
  }
  100% {
    transform: translateY(0%);
    transform-origin: 0 0;
    opacity: 1;
  }
}

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

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

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

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

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

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

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

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

@click-animating-true: ~"[@{ant-prefix}-click-animating='true']";
@click-animating-with-extra-node-true: ~"[@{ant-prefix}-click-animating-without-extra-node='true']";

@{click-animating-true},
@{click-animating-with-extra-node-true} {
  position: relative;
}

html {
  --antd-wave-shadow-color: @primary-color;
  --scroll-bar: 0;
}

@click-animating-with-extra-node-true-after: ~'@{click-animating-with-extra-node-true}::after';

@{click-animating-with-extra-node-true-after},
.@{ant-prefix}-click-animating-node {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  border-radius: inherit;
  box-shadow: 0 0 0 0 @primary-color;
  box-shadow: 0 0 0 0 var(--antd-wave-shadow-color);
  opacity: 0.2;
  animation: fadeEffect 2s @ease-out-circ, waveEffect 0.4s @ease-out-circ;
  animation-fill-mode: forwards;
  content: '';
  pointer-events: none;
}

@keyframes waveEffect {
  100% {
    box-shadow: 0 0 0 @primary-color;
    box-shadow: 0 0 0 @wave-animation-width var(--antd-wave-shadow-color);
  }
}

@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% {
    transform: scaleY(0.8);
    transform-origin: 0% 0%;
    opacity: 0;
  }
  100% {
    transform: scaleY(1);
    transform-origin: 0% 0%;
    opacity: 1;
  }
}

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

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

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

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

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

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

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

.zoom-motion(@className, @keyframeName, @duration: @animation-duration-base) {
  .make-motion(@className, @keyframeName, @duration);
  .@{className}-enter,
  .@{className}-appear {
    transform: scale(0); // need this by yiminghe
    opacity: 0;
    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% {
    transform: scale(0.2);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

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

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

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

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

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

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

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

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

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

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

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

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

.ant-motion-collapse {
  overflow: hidden;
  transition: height 0.15s @ease-in-out, opacity 0.15s @ease-in-out !important;
}

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

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

.@{alert-prefix-cls} {
  .reset-component;

  position: relative;
  max-height: 1000vh;
  padding: 8px 15px 8px 37px;
  word-wrap: break-word;
  border-radius: @border-radius-base;

  &&-no-icon {
    padding: @alert-no-icon-padding-vertical 15px;
    .@{alert-prefix-cls}-close-icon {
      top: @alert-no-icon-padding-vertical + @font-size-base * @line-height-base / 2 -
        @font-size-base / 2;
    }
  }

  &&-closable {
    padding-right: 30px;
  }

  &-icon {
    position: absolute;
    top: @alert-icon-top;
    left: 16px;
  }

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

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

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

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

  &-error {
    background-color: @alert-error-bg-color;
    border: @border-width-base @border-style-base @alert-error-border-color;

    .@{alert-prefix-cls}-icon {
      color: @alert-error-icon-color;
    }

    .@{alert-prefix-cls}-description > pre {
      margin: 0;
      padding: 0;
    }
  }

  &-close-icon {
    position: absolute;
    top: 8px + @font-size-base * @line-height-base / 2 - @font-size-base / 2;
    right: @padding-md;
    padding: 0;
    overflow: hidden;
    font-size: @font-size-sm;
    line-height: @font-size-sm;
    background-color: transparent;
    border: none;
    outline: none;
    cursor: pointer;

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

  &-close-text {
    color: @alert-close-color;
    transition: color 0.3s;
    &:hover {
      color: @alert-close-hover-color;
    }
  }

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

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

  &-with-description &-icon {
    position: absolute;
    top: @alert-with-description-icon-top;
    left: @alert-with-description-icon-size;
    font-size: @alert-with-description-icon-size;
  }

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

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

  &-message {
    color: @alert-message-color;
  }

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

  &&-closing {
    max-height: 0;
    margin: 0;
    padding-top: 0;
    padding-bottom: 0;
    transform-origin: 50% 0;
    transition: all 0.3s @ease-in-out-circ;
  }

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

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

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

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

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

.@{alert-prefix-cls} {
  &&-rtl {
    padding: 8px 37px 8px 15px;
    direction: rtl;
  }

  &&-no-icon {
    .@{alert-prefix-cls}-rtl& {
      padding: @alert-no-icon-padding-vertical 15px;
    }
  }

  &&-closable {
    .@{alert-prefix-cls}.@{alert-prefix-cls}-rtl& {
      padding-right: 37px;
      padding-left: 30px;
    }
  }

  &&-no-icon&-closable {
    .@{alert-prefix-cls}.@{alert-prefix-cls}-rtl& {
      padding-right: 15px;
      padding-left: 30px;
    }
  }

  &-icon {
    .@{alert-prefix-cls}-rtl & {
      right: @padding-md;
      left: auto;
    }
  }

  &-close-icon {
    .@{alert-prefix-cls}-rtl & {
      right: auto;
      left: @padding-md;
    }
  }

  &-with-description,
  &-with-description&-closable {
    .@{alert-prefix-cls}.@{alert-prefix-cls}-rtl& {
      padding: @alert-with-description-padding-vertical @alert-with-description-icon-size * 2 +
        @alert-with-description-padding-vertical @alert-with-description-no-icon-padding-vertical
        15px;
    }
  }

  &-with-description&-no-icon {
    .@{alert-prefix-cls}.@{alert-prefix-cls}-rtl& {
      padding: 15px;
    }
  }

  &-with-description &-icon {
    .@{alert-prefix-cls}-rtl& {
      right: @alert-with-description-icon-size;
      left: auto;
    }
  }

  &-with-description &-close-icon {
    .@{alert-prefix-cls}-rtl& {
      right: auto;
      left: @padding-md;
    }
  }
}

@anchor-border-width: 2px;

.@{ant-prefix}-anchor {
  .reset-component;

  position: relative;
  padding-left: @anchor-border-width;

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

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

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

  &-link {
    padding: @anchor-link-padding;
    line-height: 1.143;

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

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

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

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

@anchor-border-width: 2px;

.@{ant-prefix}-anchor {
  &-rtl {
    direction: rtl;
  }

  &-wrapper {
    .@{ant-prefix}-anchor-rtl& {
      margin-right: -4px;
      margin-left: 0;
      padding-right: 4px;
      padding-left: 0;
    }
  }

  &-ink {
    .@{ant-prefix}-anchor-rtl & {
      right: 0;
      left: auto;
    }

    &-ball {
      .@{ant-prefix}-anchor-rtl & {
        right: 50%;
        left: 0;
        transform: translateX(50%);
      }
    }
  }

  &-link {
    .@{ant-prefix}-anchor-rtl & {
      padding: @anchor-link-top @anchor-link-left @anchor-link-top 0;
    }
  }
}

@input-affix-with-clear-btn-width: 38px;

// size mixins for input
.input-lg() {
  padding: @input-padding-vertical-lg @input-padding-horizontal-lg;
  font-size: @font-size-lg;
}

.input-sm() {
  padding: @input-padding-vertical-sm @input-padding-horizontal-sm;
}

// input status
// == when focus or actived
.active(@color: @outline-color) {
  & when (@theme = dark) {
    border-color: @color;
  }
  & when not (@theme = dark) {
    border-color: ~`colorPalette('@{color}', 5) `;
  }
  border-right-width: @border-width-base !important;
  outline: 0;
  box-shadow: @input-outline-offset @outline-blur-size @outline-width fade(@color, @outline-fade);
}

// == when hoverd
.hover(@color: @input-hover-border-color) {
  border-color: @color;
  border-right-width: @border-width-base !important;
}

.disabled() {
  color: @input-disabled-color;
  background-color: @input-disabled-bg;
  cursor: not-allowed;
  opacity: 1;

  &:hover {
    .hover(@input-border-color);
  }
}

// Basic style for input
.input() {
  position: relative;
  display: inline-block;
  width: 100%;
  min-width: 0;
  padding: @input-padding-vertical-base @input-padding-horizontal-base;
  color: @input-color;
  font-size: @font-size-base;
  line-height: @line-height-base;
  background-color: @input-bg;
  background-image: none;
  border: @border-width-base @border-style-base @input-border-color;
  border-radius: @border-radius-base;
  transition: all 0.3s;
  .placeholder(); // Reset placeholder

  &:hover {
    .hover();
  }

  &:focus,
  &-focused {
    .active();
  }

  &-disabled {
    .disabled();
  }

  &[disabled] {
    .disabled();
  }

  // Reset height for `textarea`s
  textarea& {
    max-width: 100%; // prevent textearea resize from coming out of its container
    height: auto;
    min-height: @input-height-base;
    line-height: @line-height-base;
    vertical-align: bottom;
    transition: all 0.3s, height 0s;
  }

  // Size
  &-lg {
    .input-lg();
  }

  &-sm {
    .input-sm();
  }
}

// label input
.input-group(@inputClass) {
  position: relative;
  display: table;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;

  // Undo padding and float of grid classes
  &[class*='col-'] {
    float: none;
    padding-right: 0;
    padding-left: 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;
    text-align: inherit;

    &: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 {
    position: relative;
    padding: 0 @input-padding-horizontal-base;
    color: @input-color;
    font-weight: normal;
    font-size: @font-size-base;
    text-align: center;
    background-color: @input-addon-bg;
    border: @border-width-base @border-style-base @input-border-color;
    border-radius: @border-radius-base;
    transition: all 0.3s;

    // Reset Select's style in addon
    .@{ant-prefix}-select {
      margin: -(@input-padding-vertical-base + 1px) (-@input-padding-horizontal-base);

      &.@{ant-prefix}-select-single:not(.@{ant-prefix}-select-customize-input)
        .@{ant-prefix}-select-selector {
        background-color: inherit;
        border: @border-width-base @border-style-base transparent;
        box-shadow: none;
      }

      &-open,
      &-focused {
        .@{ant-prefix}-select-selector {
          color: @primary-color;
        }
      }
    }

    // Expand addon icon click area
    // https://github.com/ant-design/ant-design/issues/3714
    > i:only-child::after {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      content: '';
    }
  }

  // Reset rounded corners
  > .@{inputClass}:first-child,
  &-addon:first-child {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;

    // Reset Select's style in addon
    .@{ant-prefix}-select .@{ant-prefix}-select-selector {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }
  }

  > .@{inputClass}-affix-wrapper {
    &:not(:first-child) .@{inputClass} {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }

    &:not(:last-child) .@{inputClass} {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }
  }

  &-addon:first-child {
    border-right: 0;
  }

  &-addon:last-child {
    border-left: 0;
  }

  > .@{inputClass}:last-child,
  &-addon:last-child {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;

    // Reset Select's style in addon
    .@{ant-prefix}-select .@{ant-prefix}-select-selector {
      border-top-left-radius: 0;
      border-bottom-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-single .@{ant-prefix}-select-selector {
    height: @input-height-lg;
  }

  &-sm .@{ant-prefix}-select-single .@{ant-prefix}-select-selector {
    height: @input-height-sm;
  }

  .@{inputClass}-affix-wrapper {
    &:not(:first-child) {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }

    &:not(:last-child) {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }
  }

  &&-compact {
    display: block;
    .clearfix;

    &-addon,
    &-wrap,
    > .@{inputClass} {
      &:not(:first-child):not(:last-child) {
        border-right-width: @border-width-base;

        &:hover {
          z-index: 1;
        }

        &:focus {
          z-index: 1;
        }
      }
    }

    & > * {
      display: inline-block;
      float: none;
      vertical-align: top; // https://github.com/ant-design/ant-design-pro/issues/139
      border-radius: 0;
    }

    & > .@{inputClass}-affix-wrapper {
      display: inline-flex;
    }

    & > .@{ant-prefix}-picker-range {
      display: inline-flex;
    }

    & > *:not(:last-child) {
      margin-right: -@border-width-base;
      border-right-width: @border-width-base;
    }

    // Undo float for .ant-input-group .ant-input
    .@{inputClass} {
      float: none;
    }

    // reset border for Select, DatePicker, AutoComplete, Cascader, Mention, TimePicker, Input
    & > .@{ant-prefix}-select > .@{ant-prefix}-select-selector,
    & > .@{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,
    & > .@{ant-prefix}-input-group-wrapper .@{ant-prefix}-input {
      border-right-width: @border-width-base;
      border-radius: 0;

      &:hover {
        z-index: 1;
      }

      &:focus {
        z-index: 1;
      }
    }

    & > .@{ant-prefix}-select-focused {
      z-index: 1;
    }

    // update z-index for arrow icon
    & > .@{ant-prefix}-select > .@{ant-prefix}-select-arrow {
      z-index: 1; // https://github.com/ant-design/ant-design/issues/20371
    }

    & > *:first-child,
    & > .@{ant-prefix}-select:first-child > .@{ant-prefix}-select-selector,
    & > .@{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-selector,
    & > .@{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-right-width: @border-width-base;
      border-top-right-radius: @border-radius-base;
      border-bottom-right-radius: @border-radius-base;
    }

    // https://github.com/ant-design/ant-design/issues/12493
    & > .@{ant-prefix}-select-auto-complete .@{ant-prefix}-input {
      vertical-align: top;
    }
  }
}

@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;

  // https://github.com/ant-design/ant-design/issues/22302
  .@{select-prefix-cls}-clear {
    right: 13px;
  }
}

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

.@{avatar-prefix-cls} {
  .reset-component;

  position: relative;
  display: inline-block;
  overflow: hidden;
  color: @avatar-color;
  white-space: nowrap;
  text-align: center;
  vertical-align: middle;
  background: @avatar-bg;

  &-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 {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

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

  &-string {
    position: absolute;
    left: 50%;
    transform-origin: 0 center;
  }

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

    > .@{iconfont-css-prefix} {
      margin: 0;
    }
  }
}

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

.@{backtop-prefix-cls} {
  .reset-component;

  position: fixed;
  right: 100px;
  bottom: 50px;
  z-index: @zindex-back-top;
  width: 40px;
  height: 40px;
  cursor: pointer;

  &:empty {
    display: none;
  }

  &-rtl {
    right: auto;
    left: 100px;
    direction: rtl;
  }

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

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

  &-icon {
    font-size: 24px;
    line-height: 40px;
  }
}

@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;
  color: unset;
  line-height: 1;

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

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

  &-dot {
    z-index: @zindex-badge;
    width: @badge-dot-size;
    height: @badge-dot-size;
    background: @highlight-color;
    border-radius: 100%;
    box-shadow: 0 0 0 1px @shadow-color-inverse;
  }

  &-count,
  &-dot,
  .@{number-prefix-cls}-custom-component {
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(50%, -50%);
    transform-origin: 100% 0%;
  }

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

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

    // mixin to iterate over colors and create CSS class for each one
    .make-color-classes(@i: length(@preset-colors)) when (@i > 0) {
      .make-color-classes(@i - 1);
      @color: extract(@preset-colors, @i);
      @darkColor: '@{color}-6';
      &-@{color} {
        background: @@darkColor;
      }
    }
    .make-color-classes();

    &-text {
      margin-left: 8px;
      color: @text-color;
      font-size: @font-size-base;
    }
  }

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

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

  &-not-a-wrapper {
    &:not(.@{badge-prefix-cls}-status) {
      vertical-align: middle;
    }

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

    .@{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;
    height: @badge-height;
    transition: all 0.3s @ease-in-out;
    > p.@{number-prefix-cls}-only-unit {
      height: @badge-height;
      margin: 0;
    }
  }

  &-symbol {
    vertical-align: top;
  }
}

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

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

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

.@{badge-prefix-cls} {
  &-rtl {
    direction: rtl;
  }

  &-count,
  &-dot,
  .@{number-prefix-cls}-custom-component {
    .@{badge-prefix-cls}-rtl & {
      right: auto;
      left: 0;
      direction: ltr;
      transform: translate(-50%, -50%);
      transform-origin: 0% 0%;
    }
  }

  .@{badge-prefix-cls}-rtl& .@{number-prefix-cls}-custom-component {
    right: auto;
    left: 0;
    transform: translate(-50%, -50%);
    transform-origin: 0% 0%;
  }

  &-status {
    &-text {
      .@{badge-prefix-cls}-rtl & {
        margin-right: 8px;
        margin-left: 0;
      }
    }
  }

  &-zoom-appear,
  &-zoom-enter {
    .@{badge-prefix-cls}-rtl & {
      animation-name: antZoomBadgeInRtl;
    }
  }

  &-zoom-leave {
    .@{badge-prefix-cls}-rtl & {
      animation-name: antZoomBadgeOutRtl;
    }
  }

  &-not-a-wrapper {
    .@{badge-prefix-cls}-count {
      transform: none;
    }
  }
}

@keyframes antZoomBadgeInRtl {
  0% {
    transform: scale(0) translate(-50%, -50%);
    opacity: 0;
  }
  100% {
    transform: scale(1) translate(-50%, -50%);
  }
}

@keyframes antZoomBadgeOutRtl {
  0% {
    transform: scale(1) translate(-50%, -50%);
  }
  100% {
    transform: scale(0) translate(-50%, -50%);
    opacity: 0;
  }
}

@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 0.3s;
    &:hover {
      color: @breadcrumb-link-color-hover;
    }
  }

  & > span:last-child {
    color: @breadcrumb-last-item-color;
    a {
      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,
    > .@{iconfont-css-prefix} + a {
      margin-left: 4px;
    }
  }

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

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

.@{breadcrumb-prefix-cls} {
  &-rtl {
    .clearfix;
    direction: rtl;

    > span {
      float: right;
    }
  }

  &-link {
    > .@{iconfont-css-prefix} + span,
    > .@{iconfont-css-prefix} + a {
      .@{breadcrumb-prefix-cls}-rtl & {
        margin-right: 4px;
        margin-left: 0;
      }
    }
  }

  &-overlay-link {
    > .@{iconfont-css-prefix} {
      .@{breadcrumb-prefix-cls}-rtl & {
        margin-right: 4px;
        margin-left: 0;
      }
    }
  }
}

// mixins for button
// ------------------------
.button-size(@height; @padding-horizontal; @font-size; @border-radius) {
  @padding-vertical: max(
    round((@height - @font-size * @line-height-base) / 2 * 10) / 10 - @border-width-base,
    0
  );
  height: @height;
  padding: @padding-vertical @padding-horizontal;
  font-size: @font-size;
  border-radius: @border-radius;
}

.button-disabled(@color: @btn-disable-color; @background: @btn-disable-bg; @border: @btn-disable-border) {
  &[disabled] {
    &,
    &:hover,
    &:focus,
    &:active {
      .button-color(@color; @background; @border);

      text-shadow: none;
      box-shadow: none;
    }
  }
}

.button-variant-primary(@color; @background) {
  .button-color(@color; @background; @background);

  text-shadow: @btn-text-shadow;
  box-shadow: @btn-primary-shadow;

  &:hover,
  &:focus {
    & when (@theme = dark) {
      .button-color(
        @color; ~`colorPalette('@{background}', 7) `; ~`colorPalette('@{background}', 7) `
      );
    }
    & when not (@theme = dark) {
      .button-color(
        @color; ~`colorPalette('@{background}', 5) `; ~`colorPalette('@{background}', 5) `
      );
    }
  }

  &:active {
    & when (@theme = dark) {
      .button-color(
        @color; ~`colorPalette('@{background}', 5) `; ~`colorPalette('@{background}', 5) `
      );
    }
    & when not (@theme = dark) {
      .button-color(
        @color; ~`colorPalette('@{background}', 7) `; ~`colorPalette('@{background}', 7) `
      );
    }
  }

  .button-disabled();
}

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

  &:hover,
  &:focus {
    & when (@theme = dark) {
      .button-color(@primary-5; @background; @primary-5);
    }
    & when not (@theme = dark) {
      .button-color(
        ~`colorPalette('@{btn-primary-bg}', 5) `; @background;
          ~`colorPalette('@{btn-primary-bg}', 5) `
      );
    }
  }
  &:active {
    & when (@theme = dark) {
      .button-color(@primary-7; @background; @primary-7);
    }
    & when not (@theme = dark) {
      .button-color(
        ~`colorPalette('@{btn-primary-bg}', 7) `; @background;
          ~`colorPalette('@{btn-primary-bg}', 7) `
      );
    }
  }
  .button-disabled();
}
.button-variant-ghost(@color; @border: @color) {
  .button-color(@color; transparent; @border);
  text-shadow: none;
  &:hover,
  &:focus {
    & when (@border = transparent) {
      & when (@theme = dark) {
        .button-color(~`colorPalette('@{color}', 7) `; transparent; transparent);
      }
      & when not (@theme = dark) {
        .button-color(~`colorPalette('@{color}', 5) `; transparent; transparent);
      }
    }
    & when not (@border = transparent) {
      & when (@theme = dark) {
        .button-color(
          ~`colorPalette('@{color}', 7) `; transparent; ~`colorPalette('@{color}', 7) `
        );
      }
      & when not (@theme = dark) {
        .button-color(
          ~`colorPalette('@{color}', 5) `; transparent; ~`colorPalette('@{color}', 5) `
        );
      }
    }
  }
  &:active {
    & when (@border = transparent) {
      & when (@theme = dark) {
        .button-color(~`colorPalette('@{color}', 5) `; transparent; transparent);
      }
      & when not (@theme = dark) {
        .button-color(~`colorPalette('@{color}', 7) `; transparent; transparent);
      }
    }
    & when not(@border = transparent) {
      & when (@theme = dark) {
        .button-color(
          ~`colorPalette('@{color}', 5) `; transparent; ~`colorPalette('@{color}', 5) `
        );
      }
      & when not (@theme = dark) {
        .button-color(
          ~`colorPalette('@{color}', 7) `; transparent; ~`colorPalette('@{color}', 7) `
        );
      }
    }
  }
  .button-disabled();
}
.button-color(@color; @background; @border) {
  color: @color;
  background: @background;
  border-color: @border; // a inside Button which only work in Chrome
  // http://stackoverflow.com/a/17253457
  > a:only-child {
    color: currentColor;
    &::after {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background: transparent;
      content: '';
    }
  }
}
.button-group-base(@btnClassName) {
  position: relative;
  display: inline-flex;
  > .@{btnClassName},
  > span > .@{btnClassName} {
    position: relative;
    &:hover,
    &:focus,
    &:active {
      z-index: 2;
    }
    &[disabled] {
      z-index: 0;
    }
  }
  .@{btnClassName}-icon-only {
    font-size: @font-size-base;
  }
  // size
  &-lg > .@{btnClassName},
  &-lg > span > .@{btnClassName} {
    .button-size(@btn-height-lg; @btn-padding-horizontal-lg; @btn-font-size-lg; 0);
  }
  &-lg .@{btnClassName}.@{btnClassName}-icon-only {
    .square(@btn-height-lg);
    padding-right: 0;
    padding-left: 0;
  }
  &-sm > .@{btnClassName},
  &-sm > span > .@{btnClassName} {
    .button-size(@btn-height-sm; @btn-padding-horizontal-sm; @font-size-base; 0);
    > .@{iconfont-css-prefix} {
      font-size: @font-size-base;
    }
  }
  &-sm .@{btnClassName}.@{btnClassName}-icon-only {
    .square(@btn-height-sm);
    padding-right: 0;
    padding-left: 0;
  }
}
// Base styles of buttons
// --------------------------------------------------
.btn() {
  position: relative;
  display: inline-block;
  font-weight: @btn-font-weight;
  white-space: nowrap;
  text-align: center;
  background-image: none;
  border: @btn-border-width @btn-border-style transparent;
  box-shadow: @btn-shadow;
  cursor: pointer;
  transition: all 0.3s @ease-in-out;
  user-select: none;
  touch-action: manipulation;
  .button-size(
    @btn-height-base; @btn-padding-horizontal-base; @font-size-base; @btn-border-radius-base
  );
  > .@{iconfont-css-prefix} {
    line-height: 1;
  }
  &,
  &:active,
  &:focus {
    outline: 0;
  }
  &:not([disabled]):hover {
    text-decoration: none;
  }
  &:not([disabled]):active {
    outline: 0;
    box-shadow: none;
  }
  &[disabled] {
    cursor: not-allowed;
    > * {
      pointer-events: none;
    }
  }
  &-lg {
    .button-size(
      @btn-height-lg; @btn-padding-horizontal-lg; @btn-font-size-lg; @btn-border-radius-base
    );
  }
  &-sm {
    .button-size(
      @btn-height-sm; @btn-padding-horizontal-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 {
    text-decoration: none;
    background: @btn-default-bg;
  }
}
// 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-primary(@btn-danger-color, @btn-danger-bg);
}
// danger default button style
.btn-danger-default() {
  .button-color(@error-color, @btn-default-bg, @error-color);
  &:hover,
  &:focus {
    & when (@theme = dark) {
      .button-color(
        ~`colorPalette('@{error-color}', 7) `; @btn-default-bg; ~`colorPalette('@{error-color}', 7)
          `
      );
    }
    & when not (@theme = dark) {
      .button-color(
        ~`colorPalette('@{error-color}', 5) `; @btn-default-bg; ~`colorPalette('@{error-color}', 5)
          `
      );
    }
  }
  &:active {
    & when (@theme = dark) {
      .button-color(
        ~`colorPalette('@{error-color}', 5) `; @btn-default-bg; ~`colorPalette('@{error-color}', 5)
          `
      );
    }
    & when not (@theme = dark) {
      .button-color(
        ~`colorPalette('@{error-color}', 7) `; @btn-default-bg; ~`colorPalette('@{error-color}', 7)
          `
      );
    }
  }
  .button-disabled();
}
// danger link button style
.btn-danger-link() {
  .button-variant-other(@error-color, transparent, transparent);
  box-shadow: none;
  &:hover,
  &:focus {
    & when (@theme = dark) {
      .button-color(~`colorPalette('@{error-color}', 7) `; transparent; transparent);
    }
    & when not (@theme = dark) {
      .button-color(~`colorPalette('@{error-color}', 5) `; transparent; transparent);
    }
  }
  &:active {
    & when (@theme = dark) {
      .button-color(~`colorPalette('@{error-color}', 5) `; transparent; transparent);
    }
    & when not (@theme = dark) {
      .button-color(~`colorPalette('@{error-color}', 7) `; transparent; transparent);
    }
  }
  .button-disabled(@disabled-color; transparent; transparent);
}
// link button style
.btn-link() {
  .button-variant-other(@link-color, transparent, transparent);
  box-shadow: none;
  &:hover {
    background: @btn-link-hover-bg;
  }
  &:hover,
  &:focus,
  &:active {
    border-color: transparent;
  }
  .button-disabled(@disabled-color; transparent; transparent);
}
// text button style
.btn-text() {
  .button-variant-other(@text-color, transparent, transparent);
  box-shadow: none;
  &:hover,
  &:focus {
    color: @text-color;
    background: @btn-text-hover-bg;
    border-color: transparent;
  }

  &:active {
    color: @text-color;
    background: fadein(@btn-text-hover-bg, 1%);
    border-color: transparent;
  }

  .button-disabled(@disabled-color; transparent; transparent);
}
.btn-danger-text() {
  .button-variant-other(@error-color, transparent, transparent);
  box-shadow: none;
  &:hover,
  &:focus {
    & when (@theme = dark) {
      .button-color(~`colorPalette('@{error-color}', 7) `; @btn-text-hover-bg; transparent);
    }
    & when not (@theme = dark) {
      .button-color(~`colorPalette('@{error-color}', 5) `; @btn-text-hover-bg; transparent);
    }
  }

  &:active {
    & when (@theme = dark) {
      .button-color(~`colorPalette('@{error-color}', 5) `; fadein(@btn-text-hover-bg, 1%); transparent);
    }
    & when not (@theme = dark) {
      .button-color(~`colorPalette('@{error-color}', 7) `; fadein(@btn-text-hover-bg, 1%); transparent);
    }
  }
  .button-disabled(@disabled-color; transparent; transparent);
}
// round button
.btn-round(@btnClassName: btn) {
  .button-size(@btn-circle-size; @btn-circle-size / 2; @font-size-base; @btn-circle-size);
  &.@{btnClassName}-lg {
    .button-size(
      @btn-circle-size-lg; @btn-circle-size-lg / 2; @btn-font-size-lg; @btn-circle-size-lg
    );
  }
  &.@{btnClassName}-sm {
    .button-size(
      @btn-circle-size-sm; @btn-circle-size-sm / 2; @font-size-base; @btn-circle-size-sm
    );
  }
}
// square button: the content only contains icon
.btn-square(@btnClassName: btn) {
  .square(@btn-square-size);
  .button-size(@btn-square-size; 0; @btn-square-only-icon-size; @btn-border-radius-base);
  & > * {
    font-size: @btn-square-only-icon-size;
  }
  &.@{btnClassName}-lg {
    .square(@btn-square-size-lg);
    .button-size(@btn-square-size-lg; 0; @btn-square-only-icon-size-lg; @btn-border-radius-base);
    & > * {
      font-size: @btn-square-only-icon-size-lg;
    }
  }
  &.@{btnClassName}-sm {
    .square(@btn-square-size-sm);
    .button-size(@btn-square-size-sm; 0; @btn-square-only-icon-size-sm; @btn-border-radius-base);
    & > * {
      font-size: @btn-square-only-icon-size-sm;
    }
  }
}
// circle button: the content only contains icon
.btn-circle(@btnClassName: btn) {
  min-width: @btn-height-base;
  padding-right: 0;
  padding-left: 0;
  text-align: center;
  border-radius: 50%;
  &.@{btnClassName}-lg {
    min-width: @btn-height-lg;
    border-radius: 50%;
  }
  &.@{btnClassName}-sm {
    min-width: @btn-height-sm;
    border-radius: 50%;
  }
}
// Horizontal button groups style
// --------------------------------------------------
.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-top-left-radius: @btn-border-radius-base;
    border-bottom-left-radius: @btn-border-radius-base;
  }
  > .@{btnClassName}:last-child:not(:first-child),
  > span:last-child:not(:first-child) > .@{btnClassName} {
    border-top-right-radius: @btn-border-radius-base;
    border-bottom-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-top-left-radius: @btn-border-radius-sm;
      border-bottom-left-radius: @btn-border-radius-sm;
    }
    > .@{btnClassName}:last-child:not(:first-child),
    > span:last-child:not(:first-child) > .@{btnClassName} {
      border-top-right-radius: @btn-border-radius-sm;
      border-bottom-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 {
      padding-right: 8px;
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }
  }
  & > &:last-child:not(:first-child) > .@{btnClassName}:first-child {
    padding-left: 8px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
}

@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} {
  // Fixing https://github.com/ant-design/ant-design/issues/12978
  // Fixing https://github.com/ant-design/ant-design/issues/20058
  // Fixing https://github.com/ant-design/ant-design/issues/19972
  // Fixing https://github.com/ant-design/ant-design/issues/18107
  // Fixing https://github.com/ant-design/ant-design/issues/13214
  // It is a render problem of chrome, which is only happened in the codesandbox demo
  // 0.001px solution works and I don't why
  line-height: @line-height-base;
  .btn;
  .btn-default;

  // Fix loading button animation
  // https://github.com/ant-design/ant-design/issues/24323
  > span {
    display: inline-block;
  }

  &-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;
  }

  // type="danger" will deprecated
  // use danger instead
  &-danger {
    .btn-danger;
  }

  &-link {
    .btn-link;
  }

  &-text {
    .btn-text;
  }

  &-dangerous {
    .btn-danger-default;
  }

  &-dangerous&-primary {
    .btn-danger;
  }

  &-dangerous&-link {
    .btn-danger-link;
  }

  &-dangerous&-text {
    .btn-danger-text;
  }

  &-icon-only {
    .btn-square(@btn-prefix-cls);
    vertical-align: -0.5px;
  }

  &-round {
    .btn-round(@btn-prefix-cls);
    &.@{btn-prefix-cls}-icon-only {
      width: auto;
    }
  }

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

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

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

    // Follow icon blur under windows. Change the render.
    // https://github.com/ant-design/ant-design/issues/13924
    &.@{iconfont-css-prefix}-plus,
    &.@{iconfont-css-prefix}-minus {
      > svg {
        shape-rendering: optimizeSpeed;
      }
    }
  }

  &&-loading {
    position: relative;
    &:not([disabled]) {
      pointer-events: none;
    }

    &::before {
      display: block;
    }
  }

  & > &-loading-icon {
    transition: all 0.3s @ease-in-out;

    .@{iconfont-css-prefix} {
      padding-right: @margin-xs;
    }

    &:only-child {
      .@{iconfont-css-prefix} {
        padding-right: 0;
      }
    }
  }

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

  // 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: @margin-xs;
  }

  &-background-ghost {
    color: @btn-default-ghost-color;
    background: @btn-default-ghost-bg !important;
    border-color: @btn-default-ghost-border;
  }

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

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

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

  &-background-ghost&-dangerous&-link {
    .button-variant-ghost(@btn-danger-border, transparent);
  }

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

  &-two-chinese-chars > *:not(.@{iconfont-css-prefix}) {
    margin-right: -0.34em;
    letter-spacing: 0.34em;
  }

  &-block {
    width: 100%;
  }

  // https://github.com/ant-design/ant-design/issues/12681
  // same method as Select
  &:empty {
    display: inline-block;
    width: 0;
    visibility: hidden;
    content: '\a0';
  }
}

a.@{btn-prefix-cls} {
  // Fixing https://github.com/ant-design/ant-design/issues/12978
  // It is a render problem of chrome, which is only happened in the codesandbox demo
  // 0.1px for padding-top solution works and I don't why
  padding-top: 0.1px;
  line-height: @btn-height-base - 2px;

  &-lg {
    line-height: @btn-height-lg - 2px;
  }
  &-sm {
    line-height: @btn-height-sm - 2px;
  }
}

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

.@{btn-prefix-cls} {
  &-rtl {
    direction: rtl;
  }

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

  & > &-loading-icon {
    .@{iconfont-css-prefix} {
      .@{btn-prefix-cls}-rtl& {
        padding-right: 0;
        padding-left: @margin-xs;
      }
    }

    &:only-child {
      .@{iconfont-css-prefix} {
        padding-right: 0;
        padding-left: 0;
      }
    }
  }

  > .@{iconfont-css-prefix} + span,
  > span + .@{iconfont-css-prefix} {
    .@{btn-prefix-cls}-rtl& {
      margin-right: 8px;
      margin-left: 0;
    }
  }
}

// mixin
.btn-group(@btnClassName: btn) {
  .@{btnClassName} + .@{btnClassName},
  .@{btnClassName} + &,
  span + .@{btnClassName},
  .@{btnClassName} + span,
  > span + span,
  & + .@{btnClassName},
  & + & {
    .@{btnClassName}-rtl&,
    .@{btnClassName}-group-rtl& {
      margin-right: -1px;
      margin-left: auto;
    }
  }

  &.@{btnClassName}-group-rtl {
    direction: rtl;
  }

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

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

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

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

@calendar-prefix-cls: ~'@{ant-prefix}-picker-calendar';
@calendar-picker-prefix-cls: ~'@{ant-prefix}-picker';

.@{calendar-prefix-cls} {
  .reset-component;
  background: @calendar-full-bg;

  // ========================= Header =========================
  &-header {
    display: flex;
    justify-content: flex-end;
    padding: @padding-sm 0;

    .@{calendar-prefix-cls}-year-select {
      min-width: 80px;
    }

    .@{calendar-prefix-cls}-month-select {
      min-width: 70px;
      margin-left: @padding-xs;
    }

    .@{calendar-prefix-cls}-mode-switch {
      margin-left: @padding-xs;
    }
  }

  .@{calendar-picker-prefix-cls}-panel {
    background: @calendar-full-panel-bg;
    border: 0;
    border-top: @border-width-base @border-style-base @border-color-split;
    border-radius: 0;

    .@{calendar-picker-prefix-cls}-month-panel,
    .@{calendar-picker-prefix-cls}-date-panel {
      width: auto;
    }

    .@{calendar-picker-prefix-cls}-body {
      padding: @padding-xs 0;
    }

    .@{calendar-picker-prefix-cls}-content {
      width: 100%;
    }
  }

  // ========================== Mini ==========================
  &-mini {
    border-radius: @border-radius-base;

    .@{calendar-picker-prefix-cls}-calendar-header {
      padding-right: @padding-xs;
      padding-left: @padding-xs;
    }

    .@{calendar-picker-prefix-cls}-panel {
      border-radius: 0 0 @border-radius-base @border-radius-base;
    }

    .@{calendar-picker-prefix-cls}-content {
      height: 256px;

      th {
        height: auto;
        padding: 0;
        line-height: 18px;
      }
    }
  }

  // ========================== Full ==========================
  &-full {
    .@{calendar-picker-prefix-cls}-panel {
      display: block;
      width: 100%;
      text-align: right;
      background: @calendar-full-bg;
      border: 0;

      .@{calendar-picker-prefix-cls}-body {
        th,
        td {
          padding: 0;
        }

        th {
          height: auto;
          padding: 0 12px 5px 0;
          line-height: 18px;
        }
      }

      // Cell
      .@{calendar-picker-prefix-cls}-cell {
        &::before {
          display: none;
        }

        &:hover {
          .@{calendar-prefix-cls}-date {
            background: @item-hover-bg;
          }
        }

        .@{calendar-prefix-cls}-date-today::before {
          display: none;
        }

        &-selected,
        &-selected:hover {
          .@{calendar-prefix-cls}-date,
          .@{calendar-prefix-cls}-date-today {
            background: @calendar-item-active-bg;

            .@{calendar-prefix-cls}-date-value {
              color: @primary-color;
            }
          }
        }
      }

      // Cell date
      .@{calendar-prefix-cls}-date {
        display: block;
        width: auto;
        height: auto;
        margin: 0 @padding-xs / 2;
        padding: @padding-xs / 2 @padding-xs 0;
        border: 0;
        border-top: 2px solid @border-color-split;
        border-radius: 0;
        transition: background 0.3s;

        &-value {
          line-height: 24px;
          transition: color 0.3s;
        }

        &-content {
          position: static;
          width: auto;
          height: 86px;
          overflow-y: auto;
          color: @text-color;
          line-height: @line-height-base;
          text-align: left;
        }

        &-today {
          border-color: @primary-color;

          .@{calendar-prefix-cls}-date-value {
            color: @text-color;
          }
        }
      }
    }
  }
}

@media only screen and (max-width: @screen-xs) {
  .@{calendar-prefix-cls} {
    &-header {
      display: block;

      .@{calendar-prefix-cls}-year-select {
        width: 50%;
      }

      .@{calendar-prefix-cls}-month-select {
        width: ~'calc(50% - @{padding-xs})';
      }

      .@{calendar-prefix-cls}-mode-switch {
        width: 100%;
        margin-top: @padding-xs;
        margin-left: 0;

        > label {
          width: 50%;
          text-align: center;
        }
      }
    }
  }
}

@calendar-prefix-cls: ~'@{ant-prefix}-picker-calendar';
@calendar-picker-prefix-cls: ~'@{ant-prefix}-picker';

.@{calendar-prefix-cls} {
  &-rtl {
    direction: rtl;
  }

  &-header {
    .@{calendar-prefix-cls}-month-select {
      .@{calendar-prefix-cls}-rtl & {
        margin-right: @padding-xs;
        margin-left: 0;
      }
    }

    .@{calendar-prefix-cls}-mode-switch {
      .@{calendar-prefix-cls}-rtl & {
        margin-right: @padding-xs;
        margin-left: 0;
      }
    }
  }

  // ========================== Full ==========================
  &-full {
    .@{calendar-picker-prefix-cls}-panel {
      .@{calendar-prefix-cls}-rtl& {
        text-align: left;
      }

      .@{calendar-picker-prefix-cls}-body {
        th {
          .@{calendar-prefix-cls}-rtl& {
            padding: 0 0 5px 12px;
          }
        }
      }

      .@{calendar-prefix-cls}-date {
        &-content {
          .@{calendar-prefix-cls}-rtl& {
            text-align: right;
          }
        }
      }
    }
  }
}

@card-prefix-cls: ~'@{ant-prefix}-card';
@card-hoverable-hover-border: transparent;
@card-action-icon-size: 16px;

@gradient-min: fade(@card-skeleton-bg, 20%);
@gradient-max: fade(@card-skeleton-bg, 40%);

.@{card-prefix-cls} {
  .reset-component;

  position: relative;
  background: @card-background;
  border-radius: @card-radius;

  &-rtl {
    direction: rtl;
  }

  &-hoverable {
    cursor: pointer;
    transition: box-shadow 0.3s, border-color 0.3s;

    &:hover {
      border-color: @card-hoverable-hover-border;
      box-shadow: @card-shadow;
    }
  }

  &-bordered {
    border: @border-width-base @border-style-base @border-color-split;
  }

  &-head {
    min-height: @card-head-height;
    margin-bottom: -1px; // Fix card grid overflow bug: https://gw.alipayobjects.com/zos/rmsportal/XonYxBikwpgbqIQBeuhk.png
    padding: 0 @card-padding-base;
    color: @card-head-color;
    font-weight: 500;
    font-size: @card-head-font-size;
    background: @card-head-background;
    border-bottom: @border-width-base @border-style-base @border-color-split;
    border-radius: @card-radius @card-radius 0 0;
    .clearfix;

    &-wrapper {
      display: flex;
      align-items: center;
    }

    &-title {
      display: inline-block;
      flex: 1;
      padding: @card-head-padding 0;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    .@{ant-prefix}-tabs {
      clear: both;
      margin-bottom: @card-head-tabs-margin-bottom;
      color: @text-color;
      font-weight: normal;
      font-size: @font-size-base;

      &-bar {
        border-bottom: @border-width-base @border-style-base @border-color-split;
      }
    }
  }

  &-extra {
    float: right;
    // https://stackoverflow.com/a/22429853/3040605
    margin-left: auto;
    padding: @card-head-padding 0;
    color: @card-head-extra-color;
    font-weight: normal;
    font-size: @font-size-base;

    .@{card-prefix-cls}-rtl & {
      margin-right: auto;
      margin-left: 0;
    }
  }

  &-body {
    padding: @card-padding-base;
    .clearfix;
  }

  &-contain-grid:not(&-loading) &-body {
    margin: -1px 0 0 -1px;
    padding: 0;
  }

  &-grid {
    float: left;
    width: 33.33%;
    padding: @card-padding-base;
    border: 0;
    border-radius: 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;
    transition: all 0.3s;

    .@{card-prefix-cls}-rtl & {
      float: right;
    }

    &-hoverable {
      &:hover {
        position: relative;
        z-index: 1;
        box-shadow: @card-shadow;
      }
    }
  }

  &-contain-tabs > &-head &-head-title {
    min-height: @card-head-height - @card-head-padding;
    padding-bottom: 0;
  }

  &-contain-tabs > &-head &-extra {
    padding-bottom: 0;
  }

  &-bordered &-cover {
    margin-right: -1px;
    margin-left: -1px;
  }

  &-cover {
    > * {
      display: block;
      width: 100%;
    }

    img {
      border-radius: @card-radius @card-radius 0 0;
    }
  }

  &-actions {
    margin: 0;
    padding: 0;
    list-style: none;
    background: @card-actions-background;
    border-top: @border-width-base @border-style-base @border-color-split;
    .clearfix;

    & > li {
      float: left;
      margin: @card-actions-li-margin;
      color: @text-color-secondary;
      text-align: center;

      .@{card-prefix-cls}-rtl & {
        float: right;
      }

      > span {
        position: relative;
        display: block;
        min-width: 32px;
        font-size: @font-size-base;
        line-height: @line-height-base;
        cursor: pointer;

        &:hover {
          color: @primary-color;
          transition: color 0.3s;
        }

        a:not(.@{ant-prefix}-btn),
        > .anticon {
          display: inline-block;
          width: 100%;
          color: @text-color-secondary;
          line-height: 22px;
          transition: color 0.3s;

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

        > .anticon {
          font-size: @card-action-icon-size;
          line-height: 22px;
        }
      }

      &:not(:last-child) {
        border-right: @border-width-base @border-style-base @border-color-split;
      }
    }
  }

  &-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 {
      float: left;
      padding-right: 16px;

      .@{card-prefix-cls}-rtl & {
        float: right;
        padding-right: 0;
        padding-left: 16px;
      }
    }

    &-detail {
      overflow: hidden;
      > div:not(:last-child) {
        margin-bottom: @margin-xs;
      }
    }

    &-title {
      overflow: hidden;
      color: @card-head-color;
      font-weight: 500;
      font-size: @font-size-lg;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    &-description {
      color: @text-color-secondary;
    }
  }

  &-loading {
    overflow: hidden;
  }

  &-loading &-body {
    user-select: none;
  }

  &-loading-content {
    p {
      margin: 0;
    }
  }

  &-loading-block {
    height: 14px;
    margin: 4px 0;
    background: linear-gradient(90deg, @gradient-min, @gradient-max, @gradient-min);
    background-size: 600% 600%;
    border-radius: @card-radius;
    animation: card-loading 1.4s ease infinite;
  }
}

@keyframes card-loading {
  0%,
  100% {
    background-position: 0 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

.@{card-prefix-cls}-small {
  > .@{card-prefix-cls}-head {
    min-height: @card-head-height-sm;
    padding: 0 @card-padding-base-sm;
    font-size: @card-head-font-size-sm;

    > .@{card-prefix-cls}-head-wrapper {
      > .@{card-prefix-cls}-head-title {
        padding: @card-head-padding-sm 0;
      }
      > .@{card-prefix-cls}-extra {
        padding: @card-head-padding-sm 0;
        font-size: @card-head-font-size-sm;
      }
    }
  }
  > .@{card-prefix-cls}-body {
    padding: @card-padding-base-sm;
  }
}

@carousel-prefix-cls: ~'@{ant-prefix}-carousel';

.@{carousel-prefix-cls} {
  .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;
    display: block;
    margin: 0;
    padding: 0;
    overflow: hidden;

    &:focus {
      outline: none;
    }

    &.dragging {
      cursor: pointer;
    }

    .slick-slide {
      pointer-events: none;

      // https://github.com/ant-design/ant-design/issues/23294
      input.@{ant-prefix}-radio-input,
      input.@{ant-prefix}-checkbox-input {
        visibility: hidden;
      }

      &.slick-active {
        pointer-events: auto;

        input.@{ant-prefix}-radio-input,
        input.@{ant-prefix}-checkbox-input {
          visibility: visible;
        }
      }
    }
  }
  .slick-slider .slick-track,
  .slick-slider .slick-list {
    transform: translate3d(0, 0, 0);
  }

  .slick-track {
    position: relative;
    top: 0;
    left: 0;
    display: block;

    &::before,
    &::after {
      display: table;
      content: '';
    }

    &::after {
      clear: both;
    }

    .slick-loading & {
      visibility: hidden;
    }
  }
  .slick-slide {
    display: none;
    float: left;
    height: 100%;
    min-height: 1px;

    img {
      display: block;
    }
    &.slick-loading img {
      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;
    top: 50%;
    display: block;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    padding: 0;
    color: transparent;
    font-size: 0;
    line-height: 0;
    background: transparent;
    border: 0;
    outline: none;
    cursor: pointer;
    &:hover,
    &:focus {
      color: transparent;
      background: transparent;
      outline: none;
      &::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;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 15;
    display: flex !important;
    justify-content: center;
    margin-right: 15%;
    margin-left: 15%;
    padding-left: 0;
    list-style: none;

    &-bottom {
      bottom: 12px;
    }
    &-top {
      top: 12px;
    }
    li {
      position: relative;
      display: inline-block;
      flex: 0 1 auto;
      box-sizing: content-box;
      width: @carousel-dot-width;
      height: @carousel-dot-height;
      margin: 0 2px;
      margin-right: 3px;
      margin-left: 3px;
      padding: 0;
      text-align: center;
      text-indent: -999px;
      vertical-align: top;
      transition: all 0.5s;
      button {
        display: block;
        width: 100%;
        height: @carousel-dot-height;
        padding: 0;
        color: transparent;
        font-size: 0;
        background: @component-background;
        border: 0;
        border-radius: 1px;
        outline: none;
        cursor: pointer;
        opacity: 0.3;
        transition: all 0.5s;
        &:hover,
        &:focus {
          opacity: 0.75;
        }
      }
      &.slick-active {
        width: @carousel-dot-active-width;
        & button {
          background: @component-background;
          opacity: 1;
        }
        &:hover,
        &:focus {
          opacity: 1;
        }
      }
    }
  }
}

.@{ant-prefix}-carousel-vertical {
  .slick-dots {
    top: 50%;
    bottom: auto;
    flex-direction: column;
    width: @carousel-dot-height;
    height: auto;
    margin: 0;
    transform: translateY(-50%);

    &-left {
      right: auto;
      left: 12px;
    }
    &-right {
      right: 12px;
      left: auto;
    }
    li {
      width: @carousel-dot-height;
      height: @carousel-dot-width;
      margin: 4px 2px;
      vertical-align: baseline;
      button {
        width: @carousel-dot-height;
        height: @carousel-dot-width;
      }
      &.slick-active {
        width: @carousel-dot-height;
        height: @carousel-dot-active-width;

        button {
          width: @carousel-dot-height;
          height: @carousel-dot-active-width;
        }
      }
    }
  }
}

@carousel-prefix-cls: ~'@{ant-prefix}-carousel';

.@{carousel-prefix-cls} {
  &-rtl {
    direction: rtl;
  }

  .slick-track {
    .@{carousel-prefix-cls}-rtl & {
      right: 0;
      left: auto;
    }
  }

  .slick-prev {
    .@{carousel-prefix-cls}-rtl & {
      right: -25px;
      left: auto;
      &::before {
        content: '→';
      }
    }
  }

  .slick-next {
    .@{carousel-prefix-cls}-rtl & {
      right: auto;
      left: -25px;
      &::before {
        content: '←';
      }
    }
  }

  // Dots
  .slick-dots {
    .@{carousel-prefix-cls}-rtl& {
      flex-direction: row-reverse;
    }
  }
}

.@{ant-prefix}-carousel-vertical {
  .slick-dots {
    .@{carousel-prefix-cls}-rtl& {
      flex-direction: column;
    }
  }
}

@cascader-prefix-cls: ~'@{ant-prefix}-cascader';

.@{cascader-prefix-cls} {
  .reset-component;

  &-input.@{ant-prefix}-input {
    // Keep it static for https://github.com/ant-design/ant-design/issues/16738
    position: static;
    width: 100%;
    // https://github.com/ant-design/ant-design/issues/17582
    padding-right: 24px;
    // 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;
  }

  &-picker-show-search &-input.@{ant-prefix}-input {
    position: relative;
  }

  &-picker {
    .reset-component;

    position: relative;
    display: inline-block;
    background-color: @cascader-bg;
    border-radius: @border-radius-base;
    outline: 0;
    cursor: pointer;
    transition: color 0.3s;

    &-with-value &-label {
      color: transparent;
    }

    &-disabled {
      color: @disabled-color;
      background: @input-disabled-bg;
      cursor: not-allowed;
      .@{cascader-prefix-cls}-input {
        cursor: not-allowed;
      }
    }

    &:focus .@{cascader-prefix-cls}-input {
      .active;
    }

    &-borderless .@{cascader-prefix-cls}-input {
      border-color: transparent !important;
      box-shadow: none !important;
    }

    &-show-search&-focused {
      color: @disabled-color;
    }

    &-label {
      position: absolute;
      top: 50%;
      left: 0;
      width: 100%;
      height: 20px;
      margin-top: -10px;
      padding: 0 20px 0 @control-padding-horizontal;
      overflow: hidden;
      line-height: 20px;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    &-clear {
      position: absolute;
      top: 50%;
      right: @control-padding-horizontal;
      z-index: 2;
      width: 12px;
      height: 12px;
      margin-top: -6px;
      color: @disabled-color;
      font-size: @font-size-sm;
      line-height: 12px;
      background: @component-background;
      cursor: pointer;
      opacity: 0;
      transition: color 0.3s ease, opacity 0.15s ease;
      &:hover {
        color: @text-color-secondary;
      }
    }

    &:hover &-clear {
      opacity: 1;
    }

    // arrow
    &-arrow {
      position: absolute;
      top: 50%;
      right: @control-padding-horizontal;
      z-index: 1;
      width: 12px;
      height: 12px;
      margin-top: -6px;
      color: @disabled-color;
      font-size: 12px;
      line-height: 12px;
      transition: transform 0.2s;
      &&-expand {
        transform: rotate(180deg);
      }
    }
  }

  // https://github.com/ant-design/ant-design/pull/12407#issuecomment-424657810
  &-picker-label:hover + &-input {
    .hover;
  }

  &-picker-small &-picker-clear,
  &-picker-small &-picker-arrow {
    right: @control-padding-horizontal-sm;
  }

  &-menus {
    position: absolute;
    z-index: @zindex-dropdown;
    font-size: @cascader-dropdown-font-size;
    white-space: nowrap;
    background: @cascader-menu-bg;
    border-radius: @border-radius-base;
    box-shadow: @box-shadow-base;

    ul,
    ol {
      margin: 0;
      list-style: none;
    }

    &-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;
    min-width: 111px;
    height: 180px;
    margin: 0;
    padding: @cascader-dropdown-edge-child-vertical-padding 0;
    overflow: auto;
    vertical-align: top;
    list-style: none;
    border-right: @border-width-base @border-style-base @cascader-menu-border-color-split;
    -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 {
      margin-right: -1px;
      border-right-color: transparent;
      border-radius: 0 @border-radius-base @border-radius-base 0;
    }
    &:only-child {
      border-radius: @border-radius-base;
    }
  }
  &-menu-item {
    padding: @cascader-dropdown-vertical-padding @control-padding-horizontal;
    line-height: @cascader-dropdown-line-height;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.3s;
    &:hover {
      background: @item-hover-bg;
    }
    &-disabled {
      color: @disabled-color;
      cursor: not-allowed;
      &:hover {
        background: transparent;
      }
    }
    .@{cascader-prefix-cls}-menu-empty & {
      color: @disabled-color;
      cursor: default;
      pointer-events: none;
    }
    &-active:not(&-disabled) {
      &,
      &:hover {
        font-weight: @select-item-selected-font-weight;
        background-color: @cascader-item-selected-bg;
      }
    }
    &-expand {
      position: relative;
      padding-right: 24px;
    }

    &-expand &-expand-icon,
    &-loading-icon {
      .iconfont-size-under-12px(10px);

      position: absolute;
      right: @control-padding-horizontal;
      color: @text-color-secondary;

      .@{cascader-prefix-cls}-menu-item-disabled& {
        color: @disabled-color;
      }
    }

    & &-keyword {
      color: @highlight-color;
    }
  }
}

@cascader-prefix-cls: ~'@{ant-prefix}-cascader';
@picker-rtl-cls: ~'@{cascader-prefix-cls}-picker-rtl';
@menu-rtl-cls: ~'@{cascader-prefix-cls}-menu-rtl';

.@{cascader-prefix-cls} {
  &-input.@{ant-prefix}-input {
    .@{picker-rtl-cls} & {
      padding-right: @input-padding-horizontal-base;
      padding-left: 24px;
      text-align: right;
    }
  }

  &-picker {
    &-rtl {
      direction: rtl;
    }

    &-label {
      .@{picker-rtl-cls} & {
        padding: 0 @control-padding-horizontal 0 20px;
        text-align: right;
      }
    }

    &-clear {
      .@{picker-rtl-cls} & {
        right: auto;
        left: @control-padding-horizontal;
      }
    }

    &-arrow {
      .@{picker-rtl-cls} & {
        right: auto;
        left: @control-padding-horizontal;
      }
    }
  }

  &-picker-small &-picker-clear,
  &-picker-small &-picker-arrow {
    .@{picker-rtl-cls}& {
      right: auto;
      left: @control-padding-horizontal-sm;
    }
  }

  &-menu {
    &-rtl & {
      direction: rtl;
      border-right: none;
      border-left: @border-width-base @border-style-base @border-color-split;
      &:first-child {
        border-radius: 0 @border-radius-base @border-radius-base 0;
      }
      &:last-child {
        margin-right: 0;
        margin-left: -1px;
        border-left-color: transparent;
        border-radius: @border-radius-base 0 0 @border-radius-base;
      }
      &:only-child {
        border-radius: @border-radius-base;
      }
    }
  }

  &-menu-item {
    &-expand {
      .@{menu-rtl-cls} & {
        padding-right: @control-padding-horizontal;
        padding-left: 24px;
      }
    }

    &-expand &-expand-icon,
    &-loading-icon {
      .@{menu-rtl-cls} & {
        right: auto;
        left: @control-padding-horizontal;
      }
    }
  }
}

.antCheckboxFn(@checkbox-prefix-cls: ~'@{ant-prefix}-checkbox') {
  @checkbox-inner-prefix-cls: ~'@{checkbox-prefix-cls}-inner';
  // 一般状态
  .@{checkbox-prefix-cls} {
    .reset-component;

    position: relative;
    top: -0.09em;
    display: inline-block;
    line-height: 1;
    white-space: nowrap;
    vertical-align: middle;
    outline: none;
    cursor: pointer;

    .@{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: 1px solid @checkbox-color;
      border-radius: @border-radius-base;
      visibility: hidden;
      animation: antCheckboxEffect 0.36s ease-in-out;
      animation-fill-mode: backwards;
      content: '';
    }

    &: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;
      direction: ltr;
      background-color: @checkbox-check-bg;
      border: @checkbox-border-width @border-style-base @border-color-base;
      border-radius: @border-radius-base;
      // Fix IE checked style
      // https://github.com/ant-design/ant-design/issues/12597
      border-collapse: separate;
      transition: all 0.3s;

      &::after {
        @check-width: (@checkbox-size / 14) * 5px;
        @check-height: (@checkbox-size / 14) * 8px;

        position: absolute;
        top: 50%;
        left: 22%;
        display: table;
        width: @check-width;
        height: @check-height;
        border: 2px solid @checkbox-check-color;
        border-top: 0;
        border-left: 0;
        transform: rotate(45deg) scale(0) translate(-50%, -50%);
        opacity: 0;
        transition: all 0.1s @ease-in-back, opacity 0.1s;
        content: ' ';
      }
    }

    &-input {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 1;
      width: 100%;
      height: 100%;
      cursor: pointer;
      opacity: 0;
    }
  }

  // 选中状态
  .@{checkbox-prefix-cls}-checked .@{checkbox-inner-prefix-cls}::after {
    position: absolute;
    display: table;
    border: 2px solid @checkbox-check-color;
    border-top: 0;
    border-left: 0;
    transform: rotate(45deg) scale(1) translate(-50%, -50%);
    opacity: 1;
    transition: all 0.2s @ease-out-back 0.1s;
    content: ' ';
  }

  .@{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 {
        border-color: @disabled-color;
        animation-name: none;
      }
    }

    .@{checkbox-prefix-cls}-input {
      cursor: not-allowed;
    }

    .@{checkbox-inner-prefix-cls} {
      background-color: @input-disabled-bg;
      border-color: @border-color-base !important;
      &::after {
        border-color: @input-disabled-bg;
        border-collapse: separate;
        animation-name: none;
      }
    }

    & + span {
      color: @disabled-color;
      cursor: not-allowed;
    }

    // Not show highlight border of checkbox when disabled
    &:hover::after,
    .@{checkbox-prefix-cls}-wrapper:hover &::after {
      visibility: hidden;
    }
  }

  .@{checkbox-prefix-cls}-wrapper {
    .reset-component;

    display: inline-block;
    line-height: unset;
    cursor: pointer;
    &.@{checkbox-prefix-cls}-wrapper-disabled {
      cursor: not-allowed;
    }
    & + & {
      margin-left: 8px;
    }
  }

  .@{checkbox-prefix-cls} + span {
    padding-right: 8px;
    padding-left: 8px;
  }

  .@{checkbox-prefix-cls}-group {
    .reset-component;

    display: inline-block;
    &-item {
      display: inline-block;
      margin-right: @checkbox-group-item-margin-right;
      &:last-child {
        margin-right: 0;
      }
    }
    &-item + &-item {
      margin-left: 0;
    }
  }

  // 半选状态
  .@{checkbox-prefix-cls}-indeterminate {
    .@{checkbox-inner-prefix-cls} {
      background-color: @checkbox-check-bg;
      border-color: @border-color-base;
    }
    .@{checkbox-inner-prefix-cls}::after {
      @indeterminate-width: @checkbox-size - 8px;
      @indeterminate-height: @checkbox-size - 8px;

      top: 50%;
      left: 50%;
      width: @indeterminate-width;
      height: @indeterminate-height;
      background-color: @checkbox-color;
      border: 0;
      transform: translate(-50%, -50%) scale(1);
      opacity: 1;
      content: ' ';
    }

    &.@{checkbox-prefix-cls}-disabled .@{checkbox-inner-prefix-cls}::after {
      background-color: @disabled-color;
      border-color: @disabled-color;
    }
  }
}

@keyframes antCheckboxEffect {
  0% {
    transform: scale(1);
    opacity: 0.5;
  }
  100% {
    transform: scale(1.6);
    opacity: 0;
  }
}

.antCheckboxFn();

.antCheckboxFn(@checkbox-prefix-cls: ~'@{ant-prefix}-checkbox') {
  .@{checkbox-prefix-cls}-rtl {
    direction: rtl;
  }

  .@{checkbox-prefix-cls}-group {
    &-item {
      .@{checkbox-prefix-cls}-group-rtl & {
        margin-right: 0;
        margin-left: @checkbox-group-item-margin-right;
      }
      &:last-child {
        .@{checkbox-prefix-cls}-group-rtl & {
          margin-left: 0 !important;
        }
      }
    }
    &-item + &-item {
      .@{checkbox-prefix-cls}-group-rtl & {
        margin-left: @checkbox-group-item-margin-right;
      }
    }
  }
}

@collapse-prefix-cls: ~'@{ant-prefix}-collapse';

.@{collapse-prefix-cls} {
  .reset-component;

  background-color: @collapse-header-bg;
  border: @border-width-base @border-style-base @border-color-base;
  border-bottom: 0;
  border-radius: @collapse-panel-border-radius;

  & > &-item {
    border-bottom: @border-width-base @border-style-base @border-color-base;

    &:last-child {
      &,
      & > .@{collapse-prefix-cls}-header {
        border-radius: 0 0 @collapse-panel-border-radius @collapse-panel-border-radius;
      }
    }

    > .@{collapse-prefix-cls}-header {
      position: relative;
      padding: @collapse-header-padding;
      padding-left: @collapse-header-padding-extra;
      color: @heading-color;
      line-height: @line-height-base;
      cursor: pointer;
      transition: all 0.3s;
      .clearfix;

      .@{collapse-prefix-cls}-arrow {
        .iconfont-mixin();

        position: absolute;
        top: 50%;
        left: @collapse-header-arrow-left;
        display: inline-block;
        font-size: @font-size-sm;
        transform: translateY(-50%);

        & svg {
          transition: transform 0.24s;
        }
      }

      .@{collapse-prefix-cls}-extra {
        float: right;
      }

      &:focus {
        outline: none;
      }
    }

    &.@{collapse-prefix-cls}-no-arrow {
      > .@{collapse-prefix-cls}-header {
        padding-left: 12px;
      }
    }
  }

  // Expand Icon right
  &-icon-position-right {
    & > .@{collapse-prefix-cls}-item {
      > .@{collapse-prefix-cls}-header {
        padding: @collapse-header-padding;
        padding-right: @collapse-header-padding-extra;

        .@{collapse-prefix-cls}-arrow {
          right: @padding-md;
          left: auto;
        }
      }
    }
  }

  &-anim-active {
    transition: height 0.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 @collapse-panel-border-radius @collapse-panel-border-radius;
    }
  }

  &-borderless {
    background-color: @collapse-header-bg;
    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;
  }

  &-ghost {
    background-color: transparent;
    border: 0;
    > .@{collapse-prefix-cls}-item {
      border-bottom: 0;
      > .@{collapse-prefix-cls}-content {
        background-color: transparent;
        border-top: 0;
        > .@{collapse-prefix-cls}-content-box {
          padding-top: 12px;
          padding-bottom: 12px;
        }
      }
    }
  }

  & &-item-disabled > &-header {
    &,
    & > .arrow {
      color: @disabled-color;
      cursor: not-allowed;
    }
  }
}

@collapse-prefix-cls: ~'@{ant-prefix}-collapse';

.@{collapse-prefix-cls} {
  &-rtl {
    direction: rtl;
  }

  & > &-item {
    > .@{collapse-prefix-cls}-header {
      .@{collapse-prefix-cls}-rtl & {
        padding: @collapse-header-padding;
        padding-right: @collapse-header-padding-extra;
      }

      .@{collapse-prefix-cls}-arrow {
        & svg {
          .@{collapse-prefix-cls}-rtl& {
            transform: rotate(180deg);
          }
        }
      }

      .@{collapse-prefix-cls}-extra {
        .@{collapse-prefix-cls}-rtl& {
          float: left;
        }
      }
    }

    &.@{collapse-prefix-cls}-no-arrow {
      > .@{collapse-prefix-cls}-header {
        .@{collapse-prefix-cls}-rtl& {
          padding-right: 12px;
          padding-left: 0;
        }
      }
    }
  }
}

@comment-prefix-cls: ~'@{ant-prefix}-comment';

.@{comment-prefix-cls} {
  position: relative;
  background-color: @comment-bg;

  &-inner {
    display: flex;
    padding: @comment-padding-base;
  }

  &-avatar {
    position: relative;
    flex-shrink: 0;
    margin-right: @margin-sm;
    cursor: pointer;

    img {
      width: 32px;
      height: 32px;
      border-radius: 50%;
    }
  }

  &-content {
    position: relative;
    flex: 1 1 auto;
    min-width: 1px;
    font-size: @comment-font-size-base;
    word-wrap: break-word;

    &-author {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      margin-bottom: @margin-xss;
      font-size: @comment-font-size-base;
      & > a,
      & > span {
        padding-right: @padding-xs;
        font-size: @comment-font-size-sm;
        line-height: 18px;
      }

      &-name {
        color: @comment-author-name-color;
        font-size: @comment-font-size-base;
        transition: color 0.3s;
        > * {
          color: @comment-author-name-color;
          &:hover {
            color: @comment-author-name-color;
          }
        }
      }

      &-time {
        color: @comment-author-time-color;
        white-space: nowrap;
        cursor: auto;
      }
    }

    &-detail p {
      margin-bottom: @comment-content-detail-p-margin-bottom;
      white-space: pre-wrap;
    }
  }

  &-actions {
    margin-top: @comment-actions-margin-top;
    margin-bottom: @comment-actions-margin-bottom;
    padding-left: 0;

    > li {
      display: inline-block;
      color: @comment-action-color;
      > span {
        margin-right: 10px;
        color: @comment-action-color;
        font-size: @comment-font-size-sm;
        cursor: pointer;
        transition: color 0.3s;
        user-select: none;

        &:hover {
          color: @comment-action-hover-color;
        }
      }
    }
  }

  &-nested {
    margin-left: @comment-nest-indent;
  }
}

@comment-prefix-cls: ~'@{ant-prefix}-comment';

.@{comment-prefix-cls} {
  &-rtl {
    direction: rtl;
  }

  &-avatar {
    .@{comment-prefix-cls}-rtl & {
      margin-right: 0;
      margin-left: 12px;
    }
  }

  &-content {
    &-author {
      & > a,
      & > span {
        .@{comment-prefix-cls}-rtl & {
          padding-right: 0;
          padding-left: 8px;
        }
      }
    }
  }

  &-actions {
    .@{comment-prefix-cls}-rtl & {
      padding-right: 0;
    }
    > li {
      > span {
        .@{comment-prefix-cls}-rtl & {
          margin-right: 0;
          margin-left: 10px;
        }
      }
    }
  }

  &-nested {
    .@{comment-prefix-cls}-rtl & {
      margin-right: @comment-nest-indent;
      margin-left: 0;
    }
  }
}

// placeholder

@picker-cell-inner-cls: ~'@{picker-prefix-cls}-cell-inner';

.@{picker-prefix-cls} {
  @picker-arrow-size: 7px;
  @picker-year-month-cell-width: 60px;
  @picker-panel-width: @picker-panel-cell-width * 7 + @padding-sm * 2 + 4;

  &-panel {
    display: inline-flex;
    flex-direction: column;
    text-align: center;
    background: @calendar-bg;
    border: @border-width-base @border-style-base @picker-border-color;
    border-radius: @border-radius-base;
    outline: none;

    &-focused {
      border-color: @primary-color;
    }
  }

  // ========================================================
  // =                     Shared Panel                     =
  // ========================================================
  &-decade-panel,
  &-year-panel,
  &-quarter-panel,
  &-month-panel,
  &-week-panel,
  &-date-panel,
  &-time-panel {
    display: flex;
    flex-direction: column;
    width: @picker-panel-width;
  }

  // ======================= Header =======================
  &-header {
    display: flex;
    padding: 0 @padding-xs;
    color: @heading-color;
    border-bottom: @border-width-base @border-style-base @picker-border-color;

    > * {
      flex: none;
    }

    button {
      padding: 0;
      color: @disabled-color;
      line-height: @picker-text-height;
      background: transparent;
      border: 0;
      cursor: pointer;
      transition: color @animation-duration-slow;
    }

    > button {
      min-width: 1.6em;
      font-size: @font-size-base;

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

    &-view {
      flex: auto;
      font-weight: 500;
      line-height: @picker-text-height;

      button {
        color: inherit;
        font-weight: inherit;

        &:not(:first-child) {
          margin-left: @padding-xs;
        }

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

  // Arrow button
  &-prev-icon,
  &-next-icon,
  &-super-prev-icon,
  &-super-next-icon {
    position: relative;
    display: inline-block;
    width: @picker-arrow-size;
    height: @picker-arrow-size;

    &::before {
      position: absolute;
      top: 0;
      left: 0;
      display: inline-block;
      width: @picker-arrow-size;
      height: @picker-arrow-size;
      border: 0 solid currentColor;
      border-width: 1.5px 0 0 1.5px;
      content: '';
    }
  }

  &-super-prev-icon,
  &-super-next-icon {
    &::after {
      position: absolute;
      top: ceil(@picker-arrow-size / 2);
      left: ceil(@picker-arrow-size / 2);
      display: inline-block;
      width: @picker-arrow-size;
      height: @picker-arrow-size;
      border: 0 solid currentColor;
      border-width: 1.5px 0 0 1.5px;
      content: '';
    }
  }

  &-prev-icon,
  &-super-prev-icon {
    transform: rotate(-45deg);
  }

  &-next-icon,
  &-super-next-icon {
    transform: rotate(135deg);
  }

  // ======================== Body ========================
  &-content {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;

    th,
    td {
      position: relative;
      min-width: 24px;
      font-weight: 400;
    }

    th {
      height: 30px;
      color: @text-color;
      line-height: 30px;
    }
  }

  .picker-cell-inner(@cellClassName) {
    &::before {
      position: absolute;
      top: 50%;
      right: 0;
      left: 0;
      z-index: 1;
      height: @picker-panel-cell-height;
      transform: translateY(-50%);
      content: '';
    }

    // >>> Default
    .@{cellClassName} {
      position: relative;
      z-index: 2;
      display: inline-block;
      min-width: @picker-panel-cell-height;
      height: @picker-panel-cell-height;
      line-height: @picker-panel-cell-height;
      border-radius: @border-radius-base;
      transition: background @animation-duration-slow, border @animation-duration-slow;
    }

    // >>> Hover
    &:hover:not(&-in-view),
    &:hover:not(&-selected):not(&-range-start):not(&-range-end):not(&-range-hover-start):not(&-range-hover-end) {
      .@{cellClassName} {
        background: @picker-basic-cell-hover-color;
      }
    }

    // >>> Today
    &-in-view&-today .@{cellClassName} {
      &::before {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1;
        border: @border-width-base @border-style-base @primary-color;
        border-radius: @border-radius-base;
        content: '';
      }
    }

    // >>> In Range
    &-in-view&-in-range {
      position: relative;

      &::before {
        background: @picker-basic-cell-active-with-range-color;
      }
    }

    // >>> Selected
    &-in-view&-selected .@{cellClassName},
    &-in-view&-range-start .@{cellClassName},
    &-in-view&-range-end .@{cellClassName} {
      color: @text-color-inverse;
      background: @primary-color;
    }

    &-in-view&-range-start:not(&-range-start-single),
    &-in-view&-range-end:not(&-range-end-single) {
      &::before {
        background: @picker-basic-cell-active-with-range-color;
      }
    }

    &-in-view&-range-start::before {
      left: 50%;
    }

    &-in-view&-range-end::before {
      right: 50%;
    }

    // >>> Range Hover
    &-in-view&-range-hover-start:not(&-in-range):not(&-range-start):not(&-range-end),
    &-in-view&-range-hover-end:not(&-in-range):not(&-range-start):not(&-range-end),
    &-in-view&-range-hover-start&-range-start-single,
    &-in-view&-range-hover-end&-range-end-single,
    &-in-view&-range-hover:not(&-in-range) {
      &::after {
        position: absolute;
        top: 50%;
        z-index: 0;
        height: 24px;
        border-top: @border-width-base dashed @picker-date-hover-range-border-color;
        border-bottom: @border-width-base dashed @picker-date-hover-range-border-color;
        transform: translateY(-50%);
        content: '';
      }
    }

    // Add space for stash
    &-range-hover-start::after,
    &-range-hover-end::after,
    &-range-hover::after {
      right: 0;
      left: 2px;
    }

    // Hover with in range
    &-in-view&-in-range&-range-hover::before,
    &-in-view&-range-start&-range-hover::before,
    &-in-view&-range-end&-range-hover::before,
    &-in-view&-range-start:not(&-range-start-single)&-range-hover-start::before,
    &-in-view&-range-end:not(&-range-end-single)&-range-hover-end::before,
    .@{picker-prefix-cls}-panel
      > :not(.@{picker-prefix-cls}-date-panel)
      &-in-view&-in-range&-range-hover-start::before,
    .@{picker-prefix-cls}-panel
      > :not(.@{picker-prefix-cls}-date-panel)
      &-in-view&-in-range&-range-hover-end::before {
      background: @picker-date-hover-range-color;
    }

    // range start border-radius
    &-in-view&-range-start:not(&-range-start-single):not(&-range-end) .@{cellClassName} {
      border-radius: @border-radius-base 0 0 @border-radius-base;
    }
    // range end border-radius
    &-in-view&-range-end:not(&-range-end-single):not(&-range-start) .@{cellClassName} {
      border-radius: 0 @border-radius-base @border-radius-base 0;
    }

    // DatePanel only
    .@{picker-prefix-cls}-date-panel &-in-view&-in-range&-range-hover-start .@{cellClassName},
    .@{picker-prefix-cls}-date-panel &-in-view&-in-range&-range-hover-end .@{cellClassName} {
      &::after {
        position: absolute;
        top: 0;
        bottom: 0;
        z-index: -1;
        background: @picker-date-hover-range-color;
        content: '';
      }
    }
    .@{picker-prefix-cls}-date-panel
      &-in-view&-in-range&-range-hover-start
      .@{cellClassName}::after {
      right: -6px - @border-width-base;
      left: 0;
    }
    .@{picker-prefix-cls}-date-panel &-in-view&-in-range&-range-hover-end .@{cellClassName}::after {
      right: 0;
      left: -6px - @border-width-base;
    }

    // Hover with range start & end
    &-range-hover&-range-start::after {
      right: 50%;
    }
    &-range-hover&-range-end::after {
      left: 50%;
    }

    // Edge start
    tr > &-in-view&-range-hover:first-child::after,
    tr > &-in-view&-range-hover-end:first-child::after,
    &-in-view&-range-hover-edge-start:not(&-range-hover-edge-start-near-range)::after,
    &-in-view&-range-hover-start::after {
      left: 6px;
      border-left: @border-width-base dashed @picker-date-hover-range-border-color;
      border-top-left-radius: @border-radius-base;
      border-bottom-left-radius: @border-radius-base;
    }

    // Edge end
    tr > &-in-view&-range-hover:last-child::after,
    tr > &-in-view&-range-hover-start:last-child::after,
    &-in-view&-range-hover-edge-end:not(&-range-hover-edge-end-near-range)::after,
    &-in-view&-range-hover-end::after {
      right: 6px;
      border-right: @border-width-base dashed @picker-date-hover-range-border-color;
      border-top-right-radius: @border-radius-base;
      border-bottom-right-radius: @border-radius-base;
    }

    // >>> Disabled
    &-disabled {
      pointer-events: none;

      .@{cellClassName} {
        color: @disabled-color;
        background: transparent;
      }

      &::before {
        background: @picker-basic-cell-disabled-bg;
      }
    }
    &-disabled&-today .@{cellClassName}::before {
      border-color: @disabled-color;
    }
  }

  &-cell {
    padding: 3px 0;
    color: @disabled-color;
    cursor: pointer;

    // In view
    &-in-view {
      color: @text-color;
    }

    // Disabled
    &-disabled {
      cursor: not-allowed;
    }

    .picker-cell-inner(~'@{picker-cell-inner-cls}');
  }

  &-decade-panel,
  &-year-panel,
  &-quarter-panel,
  &-month-panel {
    .@{picker-prefix-cls}-content {
      height: @picker-panel-without-time-cell-height * 4;
    }

    .@{picker-cell-inner-cls} {
      padding: 0 @padding-xs;
    }

    .@{picker-prefix-cls}-cell {
      &-disabled .@{picker-cell-inner-cls} {
        background: @picker-basic-cell-disabled-bg;
      }
    }
  }

  &-quarter-panel {
    .@{picker-prefix-cls}-content {
      height: 56px;
    }
  }

  // ======================== Footer ========================
  &-footer {
    width: min-content;
    min-width: 100%;
    line-height: @picker-text-height - 2 * @border-width-base;
    text-align: center;
    border-bottom: @border-width-base @border-style-base transparent;

    .@{picker-prefix-cls}-panel & {
      border-top: @border-width-base @border-style-base @picker-border-color;
    }

    &-extra {
      padding: 0 @padding-sm;
      line-height: @picker-text-height - 2 * @border-width-base;
      text-align: left;

      &:not(:last-child) {
        border-bottom: @border-width-base @border-style-base @picker-border-color;
      }
    }
  }

  &-now {
    text-align: left;
  }

  &-today-btn {
    color: @link-color;

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

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

    &&-disabled {
      color: @disabled-color;
      cursor: not-allowed;
    }
  }

  // ========================================================
  // =                       Special                        =
  // ========================================================

  // ===================== Decade Panel =====================
  &-decade-panel {
    .@{picker-cell-inner-cls} {
      padding: 0 (@padding-xs / 2);
    }

    .@{picker-prefix-cls}-cell::before {
      display: none;
    }
  }

  // ============= Year & Quarter & Month Panel =============
  &-year-panel,
  &-quarter-panel,
  &-month-panel {
    @hover-cell-fixed-distance: (
        (@picker-panel-width - @padding-xs * 2) / 3 - @picker-year-month-cell-width
      ) / 2;

    .@{picker-prefix-cls}-body {
      padding: 0 @padding-xs;
    }

    .@{picker-cell-inner-cls} {
      width: @picker-year-month-cell-width;
    }

    .@{picker-prefix-cls}-cell-range-hover-start::after {
      left: @hover-cell-fixed-distance;
      border-left: @border-width-base dashed @picker-date-hover-range-border-color;
      border-radius: @border-radius-base 0 0 @border-radius-base;

      .@{picker-prefix-cls}-panel-rtl & {
        right: @hover-cell-fixed-distance;
        border-right: @border-width-base dashed @picker-date-hover-range-border-color;
        border-radius: 0 @border-radius-base @border-radius-base 0;
      }
    }
    .@{picker-prefix-cls}-cell-range-hover-end::after {
      right: @hover-cell-fixed-distance;
      border-right: @border-width-base dashed @picker-date-hover-range-border-color;
      border-radius: 0 @border-radius-base @border-radius-base 0;

      .@{picker-prefix-cls}-panel-rtl & {
        left: @hover-cell-fixed-distance;
        border-left: @border-width-base dashed @picker-date-hover-range-border-color;
        border-radius: @border-radius-base 0 0 @border-radius-base;
      }
    }
  }

  // ====================== Week Panel ======================
  &-week-panel {
    .@{picker-prefix-cls}-body {
      padding: @padding-xs @padding-sm;
    }

    // Clear cell style
    .@{picker-prefix-cls}-cell {
      &:hover .@{picker-cell-inner-cls},
      &-selected .@{picker-cell-inner-cls},
      .@{picker-cell-inner-cls} {
        background: transparent !important;
      }
    }

    &-row {
      td {
        transition: background @animation-duration-slow;
      }

      &:hover td {
        background: @picker-basic-cell-hover-color;
      }

      &-selected td,
      &-selected:hover td {
        background: @primary-color;

        &.@{picker-prefix-cls}-cell-week {
          color: fade(@text-color-inverse, 50%);
        }

        &.@{picker-prefix-cls}-cell-today .@{picker-cell-inner-cls}::before {
          border-color: @text-color-inverse;
        }

        .@{picker-cell-inner-cls} {
          color: @text-color-inverse;
        }
      }
    }
  }

  // ====================== Date Panel ======================
  &-date-panel {
    .@{picker-prefix-cls}-body {
      padding: @padding-xs @padding-sm;
    }

    .@{picker-prefix-cls}-content {
      width: @picker-panel-cell-width * 7;

      th {
        width: @picker-panel-cell-width;
      }
    }
  }

  // ==================== Datetime Panel ====================
  &-datetime-panel {
    display: flex;

    .@{picker-prefix-cls}-time-panel {
      border-left: @border-width-base @border-style-base @picker-border-color;
    }

    .@{picker-prefix-cls}-date-panel,
    .@{picker-prefix-cls}-time-panel {
      transition: opacity @animation-duration-slow;
    }

    // Keyboard
    &-active {
      .@{picker-prefix-cls}-date-panel,
      .@{picker-prefix-cls}-time-panel {
        opacity: 0.3;

        &-active {
          opacity: 1;
        }
      }
    }
  }

  // ====================== Time Panel ======================
  &-time-panel {
    width: auto;
    min-width: auto;

    .@{picker-prefix-cls}-content {
      display: flex;
      flex: auto;
      height: 224px;
    }

    &-column {
      flex: 1 0 auto;
      width: 56px;
      margin: 0;
      padding: 0;
      overflow-y: hidden;
      text-align: left;
      list-style: none;
      transition: background @animation-duration-slow;

      &::after {
        display: block;
        height: 224px - @picker-time-panel-cell-height;
        content: '';
        .@{picker-prefix-cls}-datetime-panel & {
          height: 224px - @picker-time-panel-cell-height + 2 * @border-width-base;
        }
      }

      &:not(:first-child) {
        border-left: @border-width-base @border-style-base @picker-border-color;
      }

      &-active {
        background: fade(@calendar-item-active-bg, 20%);
      }

      &:hover {
        overflow-y: auto;
      }

      > li {
        margin: 0;
        padding: 0;

        &.@{picker-prefix-cls}-time-panel-cell {
          .@{picker-prefix-cls}-time-panel-cell-inner {
            display: block;
            width: 100%;
            height: @picker-time-panel-cell-height;
            margin: 0;
            padding: 0;
            color: @text-color;
            line-height: @picker-time-panel-cell-height;
            text-align: center;
            border-radius: 0;
            cursor: pointer;
            transition: background @animation-duration-slow;

            &:hover {
              background: @item-hover-bg;
            }
          }

          &-selected {
            .@{picker-prefix-cls}-time-panel-cell-inner {
              background: @calendar-item-active-bg;
            }
          }

          &-disabled {
            .@{picker-prefix-cls}-time-panel-cell-inner {
              color: @disabled-color;
              background: transparent;
              cursor: not-allowed;
            }
          }
        }
      }
    }
  }
}

// Fix IE11 render bug by css hacks
// https://github.com/ant-design/ant-design/issues/21559
// https://codepen.io/afc163-1472555193/pen/mdJRaNj?editors=0110
/* stylelint-disable-next-line */
_:-ms-fullscreen,
:root {
  .@{picker-prefix-cls}-range-wrapper {
    .@{picker-prefix-cls}-month-panel .@{picker-prefix-cls}-cell,
    .@{picker-prefix-cls}-year-panel .@{picker-prefix-cls}-cell {
      padding: 21px 0;
    }
  }
}

@picker-prefix-cls: ~'@{ant-prefix}-picker';

.picker-padding(@input-height, @font-size, @padding-horizontal) {
  // font height probably 22.0001， So use floor better
  @font-height: floor(@font-size * @line-height-base) + 2;
  @padding-top: max((@input-height - @font-height) / 2, 0);
  @padding-bottom: max(@input-height - @font-height - @padding-top, 0);
  padding: @padding-top @padding-horizontal @padding-bottom;
}

.@{picker-prefix-cls} {
  @vertical-fix-base: @input-height-base - ceil(@font-size-base * @line-height-base) - 2 *
    @input-padding-vertical-base - 2 * @border-width-base;
  @vertical-fix-lg: @input-height-lg - ceil(@font-size-lg * @line-height-base) - 2 *
    @input-padding-vertical-lg - 2 * @border-width-base;
  @vertical-fix-sm: @input-height-sm - ceil(@font-size-base * @line-height-base) - 2 *
    @input-padding-vertical-sm - 2 * @border-width-base;
  @arrow-size: 10px;

  .reset-component;
  .picker-padding(@input-height-base, @font-size-base, @input-padding-horizontal-base);
  position: relative;
  display: inline-flex;
  align-items: center;
  background: @picker-bg;
  border: @border-width-base @border-style-base @select-border-color;
  border-radius: @border-radius-base;
  transition: border @animation-duration-slow, box-shadow @animation-duration-slow;

  &:hover,
  &-focused {
    .hover();
  }

  &-focused {
    .active();
  }

  &&-disabled {
    background: @input-disabled-bg;
    border-color: @select-border-color;
    cursor: not-allowed;
  }

  &&-disabled &-suffix {
    color: @disabled-color;
  }

  &&-borderless {
    background-color: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
  }

  // ======================== Input =========================
  &-input {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 100%;

    > input {
      .input();
      flex: auto;

      // Fix Firefox flex not correct:
      // https://github.com/ant-design/ant-design/pull/20023#issuecomment-564389553
      min-width: 1px;
      height: auto;
      padding: 0;
      background: transparent;

      border: 0;

      &:focus {
        box-shadow: none;
      }

      &[disabled] {
        background: transparent;
      }
    }

    &:hover {
      .@{picker-prefix-cls}-clear {
        opacity: 1;
      }
    }
  }

  // Size
  &-large {
    .picker-padding(@input-height-lg, @font-size-lg, @input-padding-horizontal-lg);

    .@{picker-prefix-cls}-input > input {
      font-size: @font-size-lg;
    }
  }

  &-small {
    .picker-padding(@input-height-sm, @font-size-base, @input-padding-horizontal-sm);
  }

  &-suffix {
    align-self: center;
    margin-left: @padding-xs / 2;
    color: @disabled-color;
    line-height: 1;
    pointer-events: none;

    > * {
      vertical-align: top;
    }
  }

  &-clear {
    position: absolute;
    top: 50%;
    right: 0;
    color: @disabled-color;
    line-height: 1;
    background: @component-background;
    transform: translateY(-50%);
    cursor: pointer;
    opacity: 0;
    transition: opacity @animation-duration-slow, color @animation-duration-slow;

    > * {
      vertical-align: top;
    }

    &:hover {
      color: @text-color-secondary;
    }
  }

  &-separator {
    position: relative;
    display: inline-block;
    width: 1em;
    height: @font-size-lg;
    color: @disabled-color;
    font-size: @font-size-lg;
    vertical-align: top;
    cursor: default;

    .@{picker-prefix-cls}-focused & {
      color: @text-color-secondary;
    }

    .@{picker-prefix-cls}-range-separator & {
      .@{picker-prefix-cls}-disabled & {
        cursor: not-allowed;
      }
    }
  }

  // ======================== Range =========================
  &-range {
    position: relative;
    display: inline-flex;

    // Clear
    .@{picker-prefix-cls}-clear {
      right: @input-padding-horizontal-base;
    }

    &:hover {
      .@{picker-prefix-cls}-clear {
        opacity: 1;
      }
    }

    // Active bar
    .@{picker-prefix-cls}-active-bar {
      bottom: -@border-width-base;
      height: 2px;
      margin-left: @input-padding-horizontal-base;
      background: @primary-color;
      opacity: 0;
      transition: all @animation-duration-slow ease-out;
      pointer-events: none;
    }

    &.@{picker-prefix-cls}-focused {
      .@{picker-prefix-cls}-active-bar {
        opacity: 1;
      }
    }

    &-separator {
      align-items: center;
      padding: 0 @padding-xs;
      line-height: 1;
    }

    &.@{picker-prefix-cls}-small {
      .@{picker-prefix-cls}-clear {
        right: @input-padding-horizontal-sm;
      }
    }
  }

  // ======================= Dropdown =======================
  &-dropdown {
    .reset-component;
    position: absolute;
    z-index: @zindex-picker;

    &-hidden {
      display: none;
    }

    &-placement-bottomLeft {
      .@{picker-prefix-cls}-range-arrow {
        top: @arrow-size / 2 - @arrow-size / 3;
        display: block;
        transform: rotate(-45deg);
      }
    }

    &-placement-topLeft {
      .@{picker-prefix-cls}-range-arrow {
        bottom: @arrow-size / 2 - @arrow-size / 3;
        display: block;
        transform: rotate(135deg);
      }
    }
  }

  &-dropdown-range {
    padding: (@arrow-size * 2 / 3) 0;

    &-hidden {
      display: none;
    }
  }

  // Time picker with additional style
  &-dropdown &-panel > &-time-panel {
    padding-top: @padding-xs / 2;
  }

  // ======================== Ranges ========================
  &-ranges {
    margin-bottom: 0;
    padding: @padding-xs / 2 @padding-sm;
    overflow: hidden;
    line-height: @picker-text-height - 2 * @border-width-base - @padding-xs / 2;
    text-align: left;
    list-style: none;

    > li {
      display: inline-block;
    }

    // https://github.com/ant-design/ant-design/issues/23687
    .@{picker-prefix-cls}-preset > .@{ant-prefix}-tag-blue {
      color: @primary-color;
      background: @primary-1;
      border-color: @primary-3;
      cursor: pointer;
    }

    .@{picker-prefix-cls}-ok {
      float: right;
      margin-left: @padding-xs;
    }
  }

  &-range-wrapper {
    display: flex;
  }

  &-range-arrow {
    position: absolute;
    z-index: 1;
    display: none;
    width: @arrow-size;
    height: @arrow-size;
    margin-left: @input-padding-horizontal-base * 1.5;
    box-shadow: 2px -2px 6px fade(@black, 6%);
    transition: left @animation-duration-slow ease-out;

    &::after {
      position: absolute;
      top: @border-width-base;
      right: @border-width-base;
      width: @arrow-size;
      height: @arrow-size;
      border: @arrow-size / 2 solid @border-color-split;
      border-color: @calendar-bg @calendar-bg transparent transparent;
      content: '';
    }
  }

  &-panel-container {
    overflow: hidden;
    vertical-align: top;
    background: @calendar-bg;
    border-radius: @border-radius-base;
    box-shadow: @box-shadow-base;
    transition: margin @animation-duration-slow;

    .@{picker-prefix-cls}-panels {
      display: inline-flex;
      flex-wrap: nowrap;
      direction: ltr;
    }

    .@{picker-prefix-cls}-panel {
      vertical-align: top;
      background: transparent;
      border-width: 0 0 @border-width-base 0;
      border-radius: 0;

      &-focused {
        border-color: @border-color-split;
      }
    }
  }
}

@picker-prefix-cls: ~'@{ant-prefix}-picker';
@picker-cell-inner-cls: ~'@{picker-prefix-cls}-cell-inner';

.@{picker-prefix-cls} {
  &-rtl {
    direction: rtl;
  }

  &-suffix {
    .@{picker-prefix-cls}-rtl & {
      margin-right: @padding-xs / 2;
      margin-left: 0;
    }
  }

  &-clear {
    .@{picker-prefix-cls}-rtl & {
      right: auto;
      left: 0;
    }
  }

  &-separator {
    .@{picker-prefix-cls}-rtl & {
      transform: rotate(180deg);
    }
  }

  &-header {
    &-view {
      button {
        &:not(:first-child) {
          .@{picker-prefix-cls}-panel-rtl & {
            margin-right: @padding-xs;
            margin-left: 0;
          }
        }
      }
    }
  }

  // ======================== Range =========================
  &-range {
    // Clear
    .@{picker-prefix-cls}-clear {
      .@{picker-prefix-cls}-rtl& {
        right: auto;
        left: @input-padding-horizontal-base;
      }
    }

    // Active bar
    .@{picker-prefix-cls}-active-bar {
      .@{picker-prefix-cls}-rtl& {
        margin-right: @input-padding-horizontal-base;
        margin-left: 0;
      }
    }
  }

  // ======================== Ranges ========================
  &-ranges {
    .@{picker-prefix-cls}-dropdown-rtl & {
      text-align: right;
    }

    .@{picker-prefix-cls}-ok {
      .@{picker-prefix-cls}-dropdown-rtl & {
        float: left;
        margin-right: @padding-xs;
        margin-left: 0;
      }
    }
  }

  // ======================== Panel ========================
  &-panel {
    &-rtl {
      direction: rtl;
    }
  }

  &-prev-icon,
  &-super-prev-icon {
    .@{picker-prefix-cls}-panel-rtl & {
      transform: rotate(135deg);
    }
  }

  &-next-icon,
  &-super-next-icon {
    .@{picker-prefix-cls}-panel-rtl & {
      transform: rotate(-45deg);
    }
  }

  &-cell {
    .picker-cell-inner(~'@{picker-cell-inner-cls}');
  }

  .picker-cell-inner(@cellClassName) {
    .@{cellClassName} {
      position: relative;
      z-index: 2;
      display: inline-block;
      min-width: @picker-panel-cell-height;
      height: @picker-panel-cell-height;
      line-height: @picker-panel-cell-height;
      border-radius: @border-radius-base;
      transition: background @animation-duration-slow, border @animation-duration-slow;
    }

    &-in-view&-range-start::before {
      .@{picker-prefix-cls}-panel-rtl & {
        right: 50%;
        left: 0;
      }
    }
    &-in-view&-range-end::before {
      .@{picker-prefix-cls}-panel-rtl & {
        right: 0;
        left: 50%;
      }
    }
    .@{picker-prefix-cls}-date-panel
      &-in-view&-in-range&-range-hover-start
      .@{cellClassName}::after {
      .@{picker-prefix-cls}-panel-rtl & {
        right: 0;
        left: -6px - @border-width-base;
      }
    }
    .@{picker-prefix-cls}-date-panel &-in-view&-in-range&-range-hover-end .@{cellClassName}::after {
      .@{picker-prefix-cls}-panel-rtl & {
        right: -6px - @border-width-base;
        left: 0;
      }
    }
    // Hover with range start & end
    &-range-hover&-range-start::after {
      .@{picker-prefix-cls}-panel-rtl & {
        right: 0;
        left: 50%;
      }
    }
    &-range-hover&-range-end::after {
      .@{picker-prefix-cls}-panel-rtl & {
        right: 50%;
        left: 0;
      }
    }

    // Edge start
    tr > &-in-view&-range-hover:first-child::after,
    tr > &-in-view&-range-hover-end:first-child::after,
    &-in-view&-range-hover-edge-start:not(&-range-hover-edge-start-near-range)::after,
    &-in-view&-range-hover-start::after {
      .@{picker-prefix-cls}-panel-rtl & {
        right: 6px;
        left: 0;
        border-right: @border-width-base dashed @picker-date-hover-range-border-color;
        border-left: none;
        border-top-left-radius: 0;
        border-top-right-radius: @border-radius-base;
        border-bottom-right-radius: @border-radius-base;
        border-bottom-left-radius: 0;
      }
    }

    // Edge end
    tr > &-in-view&-range-hover:last-child::after,
    tr > &-in-view&-range-hover-start:last-child::after,
    &-in-view&-range-hover-edge-end:not(&-range-hover-edge-end-near-range)::after,
    &-in-view&-range-hover-end::after {
      .@{picker-prefix-cls}-panel-rtl & {
        right: 0;
        left: 6px;
        border-right: none;
        border-left: @border-width-base dashed @picker-date-hover-range-border-color;
        border-top-left-radius: @border-radius-base;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        border-bottom-left-radius: @border-radius-base;
      }
    }

    tr > &-in-view&-range-hover-start:last-child::after,
    &-in-view&-range-hover-start&-in-view&-range-hover-end::after {
      .@{picker-prefix-cls}-panel-rtl & {
        right: 6px;
        border-right: @border-width-base dashed @picker-date-hover-range-border-color;
        border-top-right-radius: @border-radius-base;
        border-bottom-right-radius: @border-radius-base;
      }
    }

    tr > &-in-view&-range-hover-end:first-child::after {
      .@{picker-prefix-cls}-panel-rtl & {
        left: 6px;
        border-left: @border-width-base dashed @picker-date-hover-range-border-color;
        border-top-left-radius: @border-radius-base;
        border-bottom-left-radius: @border-radius-base;
      }
    }
  }

  &-time-panel {
    .@{picker-prefix-cls}-panel-rtl & {
      direction: ltr;
    }
  }
}

@descriptions-prefix-cls: ~'@{ant-prefix}-descriptions';

.@{descriptions-prefix-cls} {
  &-title {
    margin-bottom: @descriptions-title-margin-bottom;
    color: @heading-color;
    font-weight: bold;
    font-size: @font-size-lg;
    line-height: @line-height-base;
  }

  &-view {
    width: 100%;
    overflow: hidden;
    border-radius: @border-radius-base;
    table {
      width: 100%;
      table-layout: fixed;
    }
  }

  &-row {
    > th,
    > td {
      padding-bottom: @descriptions-item-padding-bottom;
    }
    &:last-child {
      border-bottom: none;
    }
  }

  &-item-label {
    color: @heading-color;
    font-weight: normal;
    font-size: @font-size-base;
    line-height: @line-height-base;
    text-align: start;

    &::after {
      & when (@descriptions-item-trailing-colon=true) {
        content: ':';
      }
      & when not (@descriptions-item-trailing-colon=true) {
        content: ' ';
      }

      position: relative;
      top: -0.5px;
      margin: 0 @descriptions-item-label-colon-margin-right 0
        @descriptions-item-label-colon-margin-left;
    }

    &.@{descriptions-prefix-cls}-item-no-colon::after {
      content: ' ';
    }
  }

  &-item-no-label {
    &::after {
      margin: 0;
      content: '';
    }
  }

  &-item-content {
    display: table-cell;
    color: @text-color;
    font-size: @font-size-base;
    line-height: @line-height-base;
  }

  &-item {
    padding-bottom: 0;
    > span {
      display: inline-flex;
      align-items: baseline;
    }
  }

  &-middle {
    .@{descriptions-prefix-cls}-row {
      > th,
      > td {
        padding-bottom: @padding-sm;
      }
    }
  }

  &-small {
    .@{descriptions-prefix-cls}-row {
      > th,
      > td {
        padding-bottom: @padding-xs;
      }
    }
  }

  &-bordered {
    .@{descriptions-prefix-cls}-view {
      border: 1px solid @border-color-split;
      > table {
        table-layout: auto;
      }
    }

    .@{descriptions-prefix-cls}-item-label,
    .@{descriptions-prefix-cls}-item-content {
      padding: @descriptions-default-padding;
      border-right: 1px solid @border-color-split;

      &:last-child {
        border-right: none;
      }
    }

    .@{descriptions-prefix-cls}-item-label {
      background-color: @descriptions-bg;
      &::after {
        display: none;
      }
    }

    .@{descriptions-prefix-cls}-row {
      border-bottom: 1px solid @border-color-split;
      &:last-child {
        border-bottom: none;
      }
    }

    &.@{descriptions-prefix-cls}-middle {
      .@{descriptions-prefix-cls}-item-label,
      .@{descriptions-prefix-cls}-item-content {
        padding: @descriptions-middle-padding;
      }
    }

    &.@{descriptions-prefix-cls}-small {
      .@{descriptions-prefix-cls}-item-label,
      .@{descriptions-prefix-cls}-item-content {
        padding: @descriptions-small-padding;
      }
    }
  }
}

@descriptions-prefix-cls: ~'@{ant-prefix}-descriptions';

.@{descriptions-prefix-cls} {
  &-rtl {
    direction: rtl;
  }

  &-item-label {
    &::after {
      .@{descriptions-prefix-cls}-rtl & {
        margin: 0 2px 0 8px;
      }
    }
  }
}

@divider-prefix-cls: ~'@{ant-prefix}-divider';

.@{divider-prefix-cls} {
  .reset-component;

  border-top: 1px solid @border-color-split;

  &-vertical {
    position: relative;
    top: -0.06em;
    display: inline-block;
    height: 0.9em;
    margin: 0 8px;
    vertical-align: middle;
    border-top: 0;
    border-left: 1px solid @border-color-split;
  }

  &-horizontal {
    display: flex;
    clear: both;
    width: 100%;
    min-width: 100%; // Fix https://github.com/ant-design/ant-design/issues/10914
    margin: 24px 0;
  }

  &-horizontal&-with-text {
    display: flex;
    margin: 16px 0;
    color: @heading-color;
    font-weight: 500;
    font-size: @font-size-lg;
    white-space: nowrap;
    text-align: center;
    border-top: 0;
    &::before,
    &::after {
      position: relative;
      top: 50%;
      width: 50%;
      border-top: 1px solid @border-color-split;
      transform: translateY(50%);
      content: '';
    }
  }

  &-horizontal&-with-text-left {
    &::before {
      top: 50%;
      width: @divider-orientation-margin;
    }
    &::after {
      top: 50%;
      width: 100% - @divider-orientation-margin;
    }
  }

  &-horizontal&-with-text-right {
    &::before {
      top: 50%;
      width: 100% - @divider-orientation-margin;
    }
    &::after {
      top: 50%;
      width: @divider-orientation-margin;
    }
  }

  &-inner-text {
    display: inline-block;
    padding: 0 @divider-text-padding;
  }

  &-dashed {
    background: none;
    border-color: @border-color-split;
    border-style: dashed;
    border-width: 1px 0 0;
  }

  &-horizontal&-with-text&-dashed {
    border-top: 0;
    &::before,
    &::after {
      border-style: dashed none none;
    }
  }

  &-vertical&-dashed {
    border-width: 0 0 0 1px;
  }

  &-plain&-with-text {
    color: @text-color;
    font-weight: normal;
    font-size: @font-size-base;
  }
}

@divider-prefix-cls: ~'@{ant-prefix}-divider';

.@{divider-prefix-cls} {
  &-rtl {
    direction: rtl;
  }

  &-horizontal&-with-text-left {
    &::before {
      .@{divider-prefix-cls}-rtl& {
        width: 100% - @divider-orientation-margin;
      }
    }
    &::after {
      .@{divider-prefix-cls}-rtl& {
        width: @divider-orientation-margin;
      }
    }
  }

  &-horizontal&-with-text-right {
    &::before {
      .@{divider-prefix-cls}-rtl& {
        width: @divider-orientation-margin;
      }
    }
    &::after {
      .@{divider-prefix-cls}-rtl& {
        width: 100% - @divider-orientation-margin;
      }
    }
  }
}

@drawer-prefix-cls: ~'@{ant-prefix}-drawer';
@picker-prefix-cls: ~'@{ant-prefix}-picker';

.@{drawer-prefix-cls} {
  @drawer-header-close-padding: ceil((@drawer-header-close-size - @font-size-lg) / 2);

  position: fixed;
  z-index: @zindex-modal;
  width: 0%;
  height: 100%;
  transition: transform @animation-duration-slow @ease-base-out,
    height 0s ease @animation-duration-slow, width 0s ease @animation-duration-slow;
  > * {
    transition: transform @animation-duration-slow @ease-base-out,
      box-shadow @animation-duration-slow @ease-base-out;
  }

  &-content-wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
  }

  .@{drawer-prefix-cls}-content {
    width: 100%;
    height: 100%;
  }

  &-left,
  &-right {
    top: 0;
    width: 0%;
    height: 100%;
    .@{drawer-prefix-cls}-content-wrapper {
      height: 100%;
    }
    &.@{drawer-prefix-cls}-open {
      width: 100%;
      transition: transform @animation-duration-slow @ease-base-out;
    }
  }

  &-left {
    left: 0;

    .@{drawer-prefix-cls} {
      &-content-wrapper {
        left: 0;
      }
    }

    &.@{drawer-prefix-cls}-open {
      .@{drawer-prefix-cls}-content-wrapper {
        box-shadow: @shadow-1-right;
      }
    }
  }

  &-right {
    right: 0;

    .@{drawer-prefix-cls} {
      &-content-wrapper {
        right: 0;
      }
    }
    &.@{drawer-prefix-cls}-open {
      .@{drawer-prefix-cls}-content-wrapper {
        box-shadow: @shadow-1-left;
      }
      // https://github.com/ant-design/ant-design/issues/18607, Avoid edge alignment bug.
      &.no-mask {
        right: 1px;
        transform: translateX(1px);
      }
    }
  }

  &-top,
  &-bottom {
    left: 0;
    width: 100%;
    height: 0%;

    .@{drawer-prefix-cls}-content-wrapper {
      width: 100%;
    }
    &.@{drawer-prefix-cls}-open {
      height: 100%;
      transition: transform @animation-duration-slow @ease-base-out;
    }
  }

  &-top {
    top: 0;

    &.@{drawer-prefix-cls}-open {
      .@{drawer-prefix-cls}-content-wrapper {
        box-shadow: @shadow-1-down;
      }
    }
  }

  &-bottom {
    bottom: 0;

    .@{drawer-prefix-cls} {
      &-content-wrapper {
        bottom: 0;
      }
    }
    &.@{drawer-prefix-cls}-open {
      .@{drawer-prefix-cls}-content-wrapper {
        box-shadow: @shadow-1-up;
      }
      &.no-mask {
        bottom: 1px;
        transform: translateY(1px);
      }
    }
  }

  &.@{drawer-prefix-cls}-open .@{drawer-prefix-cls}-mask {
    height: 100%;
    opacity: 1;
    transition: none;
    animation: antdDrawerFadeIn @animation-duration-slow @ease-base-out;
    pointer-events: auto;
  }

  &-title {
    margin: 0;
    color: @heading-color;
    font-weight: 500;
    font-size: @font-size-lg;
    line-height: 22px;
  }

  &-content {
    position: relative;
    z-index: 1;
    overflow: auto;
    background-color: @drawer-bg;
    background-clip: padding-box;
    border: 0;
  }

  &-close {
    position: absolute;
    top: 0;
    right: 0;
    z-index: @zindex-popup-close;
    display: block;
    padding: @drawer-header-close-padding;
    color: @modal-close-color;
    font-weight: 700;
    font-size: @font-size-lg;
    font-style: normal;
    line-height: 1;
    text-align: center;
    text-transform: none;
    text-decoration: none;
    background: transparent;
    border: 0;
    outline: 0;
    cursor: pointer;
    transition: color @animation-duration-slow;
    text-rendering: auto;

    &:focus,
    &:hover {
      color: @icon-color-hover;
      text-decoration: none;
    }

    .@{drawer-prefix-cls}-header-no-title & {
      margin-right: var(--scroll-bar);
      /* stylelint-disable-next-line function-calc-no-invalid */
      padding-right: ~"calc(@drawer-header-close-padding - var(--scroll-bar))";
    }
  }

  &-header {
    position: relative;
    padding: @drawer-header-padding;
    color: @text-color;
    background: @drawer-bg;
    border-bottom: @border-width-base @border-style-base @border-color-split;
    border-radius: @border-radius-base @border-radius-base 0 0;
  }

  &-header-no-title {
    color: @text-color;
    background: @drawer-bg;
  }

  &-wrapper-body {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    width: 100%;
    height: 100%;
  }

  &-body {
    flex-grow: 1;
    padding: @drawer-body-padding;
    overflow: auto;
    font-size: @font-size-base;
    line-height: @line-height-base;
    word-wrap: break-word;
  }

  &-footer {
    flex-shrink: 0;
    padding: @drawer-footer-padding-vertical @drawer-footer-padding-vertical;
    border-top: @border-width-base @border-style-base @border-color-split;
  }

  &-mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    background-color: @modal-mask-bg;
    opacity: 0;
    filter: ~'alpha(opacity=45)';
    transition: opacity @animation-duration-slow linear, height 0s ease @animation-duration-slow;
    pointer-events: none;
  }

  &-open {
    &-content {
      box-shadow: @shadow-2;
    }
  }

  // =================== Hook Components ===================
  .@{picker-prefix-cls} {
    &-clear {
      background: @popover-background;
    }
  }
}

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

.popover-customize-bg(@drawer-prefix-cls, @popover-background);

@drawer-prefix-cls: ~'@{ant-prefix}-drawer';

.@{drawer-prefix-cls} {
  &-rtl {
    direction: rtl;
  }

  &-close {
    .@{drawer-prefix-cls}-rtl & {
      right: auto;
      left: 0;
    }
  }
}

.@{dropdown-prefix-cls}-menu-item {
  &&-danger {
    color: @error-color;

    &:hover {
      color: @text-color-inverse;
      background-color: @error-color;
    }
  }
}

@dropdown-prefix-cls: ~'@{ant-prefix}-dropdown';

.@{dropdown-prefix-cls} {
  .reset-component;

  position: absolute;
  top: -9999px;
  left: -9999px;
  z-index: @zindex-dropdown;
  display: block;

  &::before {
    position: absolute;
    top: -7px;
    right: 0;
    bottom: -7px;
    left: -7px;
    z-index: -9999;
    opacity: 0.0001;
    content: ' ';
  }

  &-wrap {
    position: relative;

    .@{ant-prefix}-btn > .@{iconfont-css-prefix}-down {
      .iconfont-size-under-12px(10px);
    }

    .@{iconfont-css-prefix}-down::before {
      transition: transform 0.2s;
    }
  }

  &-wrap-open {
    .@{iconfont-css-prefix}-down::before {
      transform: rotate(180deg);
    }
  }

  &-hidden,
  &-menu-hidden {
    display: none;
  }

  // Offset the popover to account for the dropdown arrow
  &-show-arrow&-placement-topCenter,
  &-show-arrow&-placement-topLeft,
  &-show-arrow&-placement-topRight {
    padding-bottom: @popover-distance;
  }

  &-show-arrow&-placement-bottomCenter,
  &-show-arrow&-placement-bottomLeft,
  &-show-arrow&-placement-bottomRight {
    padding-top: @popover-distance;
  }

  // Arrows
  // .popover-arrow is outer, .popover-arrow:after is inner

  &-arrow {
    position: absolute;
    z-index: 1; // lift it up so the menu wouldn't cask shadow on it
    display: block;
    width: sqrt(@popover-arrow-width * @popover-arrow-width * 2);
    height: sqrt(@popover-arrow-width * @popover-arrow-width * 2);
    background: transparent;
    border-style: solid;
    border-width: sqrt(@popover-arrow-width * @popover-arrow-width * 2) / 2;
    transform: rotate(45deg);
  }

  &-placement-topCenter > &-arrow,
  &-placement-topLeft > &-arrow,
  &-placement-topRight > &-arrow {
    bottom: @popover-distance - @popover-arrow-width + 2.2px;
    border-top-color: transparent;
    border-right-color: @popover-bg;
    border-bottom-color: @popover-bg;
    border-left-color: transparent;
    box-shadow: 3px 3px 7px fade(@black, 7%);
  }
  &-placement-topCenter > &-arrow {
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
  }
  &-placement-topLeft > &-arrow {
    left: 16px;
  }
  &-placement-topRight > &-arrow {
    right: 16px;
  }

  &-placement-bottomCenter > &-arrow,
  &-placement-bottomLeft > &-arrow,
  &-placement-bottomRight > &-arrow {
    top: @popover-distance - @popover-arrow-width + 2px;
    border-top-color: @popover-bg;
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-left-color: @popover-bg;
    box-shadow: -2px -2px 5px fade(@black, 6%);
  }
  &-placement-bottomCenter > &-arrow {
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
  }
  &-placement-bottomLeft > &-arrow {
    left: 16px;
  }
  &-placement-bottomRight > &-arrow {
    right: 16px;
  }

  &-menu {
    position: relative;
    margin: 0;
    padding: @dropdown-edge-child-vertical-padding 0;
    text-align: left;
    list-style-type: none;
    background-color: @dropdown-menu-bg;
    background-clip: padding-box;
    border-radius: @border-radius-base;
    outline: none;
    box-shadow: @box-shadow-base;

    &-item-group-title {
      padding: 5px @control-padding-horizontal;
      color: @text-color-secondary;
      transition: all 0.3s;
    }

    &-submenu-popup {
      position: absolute;
      z-index: @zindex-dropdown;
      background: transparent;
      box-shadow: none;

      > .@{dropdown-prefix-cls}-menu {
        transform-origin: 0 0;
      }

      ul,
      li {
        list-style: none;
      }

      ul {
        margin-right: 0.3em;
        margin-left: 0.3em;
      }
    }

    &-item,
    &-submenu-title {
      clear: both;
      margin: 0;
      padding: @dropdown-vertical-padding @control-padding-horizontal;
      color: @text-color;
      font-weight: normal;
      font-size: @dropdown-font-size;
      line-height: @dropdown-line-height;
      white-space: nowrap;
      cursor: pointer;
      transition: all 0.3s;

      > .@{iconfont-css-prefix}:first-child,
      > span > .@{iconfont-css-prefix}:first-child {
        min-width: 12px;
        margin-right: 8px;
        font-size: @font-size-sm;
      }

      > a {
        display: block;
        margin: -5px -@control-padding-horizontal;
        padding: 5px @control-padding-horizontal;
        color: @text-color;
        transition: all 0.3s;
        &:hover {
          color: @text-color;
        }
      }

      > .@{iconfont-css-prefix} + span > a {
        color: @text-color;
        transition: all 0.3s;
        &:hover {
          color: @text-color;
        }
      }

      &:first-child {
        & when (@dropdown-edge-child-vertical-padding = 0) {
          border-radius: @border-radius-base @border-radius-base 0 0;
        }
      }

      &:last-child {
        & when (@dropdown-edge-child-vertical-padding = 0) {
          border-radius: 0 0 @border-radius-base @border-radius-base;
        }
      }

      &-selected,
      &-selected > a {
        color: @dropdown-selected-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: @dropdown-menu-submenu-disabled-bg;
          cursor: not-allowed;
        }
      }

      &-divider {
        height: 1px;
        margin: 4px 0;
        overflow: hidden;
        line-height: 0;
        background-color: @border-color-split;
      }

      .@{dropdown-prefix-cls}-menu-submenu-arrow {
        position: absolute;
        right: @padding-xs;

        &-icon {
          margin-right: 0 !important;
          color: @text-color-secondary;
          font-style: normal;
          .iconfont-size-under-12px(10px);
        }
      }
    }

    &-item-group-list {
      margin: 0 8px;
      padding: 0;
      list-style: none;
    }

    &-submenu-title {
      padding-right: @control-padding-horizontal + @font-size-sm;
    }

    &-submenu-vertical {
      position: relative;
    }

    &-submenu-vertical > & {
      position: absolute;
      top: 0;
      left: 100%;
      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;
        background-color: @dropdown-menu-submenu-disabled-bg;
        cursor: not-allowed;
      }
    }

    // https://github.com/ant-design/ant-design/issues/19264
    &-submenu-selected &-submenu-title {
      color: @primary-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,
.@{dropdown-prefix-cls}-button {
  > .@{iconfont-css-prefix}.@{iconfont-css-prefix}-down {
    vertical-align: baseline;
    .iconfont-size-under-12px(10px);
  }
}

.@{dropdown-prefix-cls}-button {
  white-space: nowrap;

  &.@{ant-prefix}-btn-group
    > .@{ant-prefix}-btn:last-child:not(:first-child):not(.@{ant-prefix}-btn-icon-only) {
    padding-right: @padding-xs;
    padding-left: @padding-xs;
  }
}

// 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,
  .@{dropdown-prefix-cls}-menu-item > .@{iconfont-css-prefix} + span > a {
    color: @text-color-secondary-dark;
    .@{dropdown-prefix-cls}-menu-submenu-arrow::after {
      color: @text-color-secondary-dark;
    }
    &:hover {
      color: @text-color-inverse;
      background: transparent;
    }
  }
  .@{dropdown-prefix-cls}-menu-item-selected {
    &,
    &:hover,
    > a {
      color: @text-color-inverse;
      background: @primary-color;
    }
  }
}

@dropdown-prefix-cls: ~'@{ant-prefix}-dropdown';

.@{dropdown-prefix-cls} {
  &-rtl {
    direction: rtl;
  }

  &::before {
    .@{dropdown-prefix-cls}-rtl& {
      right: -7px;
      left: 0;
    }
  }

  &-menu {
    &-rtl {
      direction: rtl;
      text-align: right;
    }

    &-item-group-title {
      .@{dropdown-prefix-cls}-rtl & {
        direction: rtl;
        text-align: right;
      }
    }

    &-submenu-popup {
      ul,
      li {
        .@{dropdown-prefix-cls}-rtl & {
          text-align: right;
        }
      }
    }

    &-item,
    &-submenu-title {
      .@{dropdown-prefix-cls}-rtl & {
        text-align: right;
      }

      > .anticon:first-child,
      > span > .anticon:first-child {
        .@{dropdown-prefix-cls}-rtl & {
          margin-right: 0;
          margin-left: 8px;
        }
      }

      .@{dropdown-prefix-cls}-menu-submenu-arrow {
        .@{dropdown-prefix-cls}-rtl & {
          right: auto;
          left: @padding-xs;
        }

        &-icon {
          .@{dropdown-prefix-cls}-rtl & {
            margin-left: 0 !important;
            transform: scaleX(-1);
          }
        }
      }
    }

    &-submenu-title {
      .@{dropdown-prefix-cls}-rtl & {
        padding-right: @control-padding-horizontal;
        padding-left: @control-padding-horizontal + @font-size-sm;
      }
    }

    &-submenu-vertical > & {
      .@{dropdown-prefix-cls}-rtl & {
        right: 100%;
        left: 0;
        margin-right: 4px;
        margin-left: 0;
      }
    }
  }
}

@empty-prefix-cls: ~'@{ant-prefix}-empty';
@empty-img-prefix-cls: ~'@{ant-prefix}-empty-img';

.@{empty-prefix-cls} {
  margin: 0 8px;
  font-size: @empty-font-size;
  line-height: @line-height-base;
  text-align: center;

  &-image {
    height: 100px;
    margin-bottom: 8px;

    img {
      height: 100%;
    }

    svg {
      height: 100%;
      margin: auto;
    }
  }

  &-description {
    margin: 0;
  }

  &-footer {
    margin-top: 16px;
  }

  // antd internal empty style
  &-normal {
    margin: 32px 0;
    color: @disabled-color;

    .@{empty-prefix-cls}-image {
      height: 40px;
    }
  }

  &-small {
    margin: 8px 0;
    color: @disabled-color;

    .@{empty-prefix-cls}-image {
      height: 35px;
    }
  }
}

.@{empty-img-prefix-cls}-default {
  // not support the definition because the less variables have no meaning
  & when (@theme = dark) {
    &-ellipse {
      fill-opacity: 0.08;
      fill: @white;
    }
    &-path {
      &-1 {
        fill: #262626;
      }
      &-2 {
        fill: url(#linearGradient-1);
      }
      &-3 {
        fill: #595959;
      }
      &-4 {
        fill: #434343;
      }
      &-5 {
        fill: #595959;
      }
    }
    &-g {
      fill: #434343;
    }
  }
  & when not (@theme = dark) {
    &-ellipse {
      fill-opacity: 0.8;
      fill: #f5f5f5;
    }
    &-path {
      &-1 {
        fill: #aeb8c2;
      }
      &-2 {
        fill: url(#linearGradient-1);
      }
      &-3 {
        fill: #f5f5f7;
      }
      &-4 {
        fill: #dce0e6;
      }
      &-5 {
        fill: #dce0e6;
      }
    }
    &-g {
      fill: @white;
    }
  }
}

.@{empty-img-prefix-cls}-simple {
  // not support the definition because the less variables have no meaning
  & when (@theme = dark) {
    &-ellipse {
      fill: @white;
      fill-opacity: 0.08;
    }
    &-g {
      stroke: #434343;
    }
    &-path {
      fill: #262626;
      stroke: #434343;
    }
  }
  & when not (@theme = dark) {
    &-ellipse {
      fill: #f5f5f5;
    }
    &-g {
      stroke: #d9d9d9;
    }
    &-path {
      fill: #fafafa;
    }
  }
}

@empty-prefix-cls: ~'@{ant-prefix}-empty';

.@{empty-prefix-cls} {
  &-rtl {
    direction: rtl;
  }
}

// mixins for grid system
// ------------------------

.loop-grid-columns(@index, @class) when (@index > 0) {
  .@{ant-prefix}-col@{class}-@{index} {
    display: block;
    flex: 0 0 percentage((@index / @grid-columns));
    max-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: ~'') {
  .loop-grid-columns(@grid-columns, @class);
}

// ================================================================
// =                      Children Component                      =
// ================================================================
.@{form-item-prefix-cls} {
  .@{ant-prefix}-mentions,
  textarea.@{ant-prefix}-input {
    height: auto;
  }

  // input[type=file]
  .@{ant-prefix}-upload {
    background: transparent;
  }
  .@{ant-prefix}-upload.@{ant-prefix}-upload-drag {
    background: @background-color-light;
  }

  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;
    margin-left: 8px;
    font-weight: normal;
    vertical-align: middle;
    cursor: pointer;

    &: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;
  }
}

.@{form-prefix-cls}-inline {
  display: flex;
  flex-wrap: wrap;

  .@{form-prefix-cls}-item {
    flex: none;
    flex-wrap: nowrap;
    margin-right: 16px;
    margin-bottom: 0;

    &-with-help {
      margin-bottom: @form-item-margin-bottom;
    }

    > .@{form-item-prefix-cls}-label,
    > .@{form-item-prefix-cls}-control {
      display: inline-block;
      vertical-align: top;
    }

    > .@{form-item-prefix-cls}-label {
      flex: none;
    }

    .@{form-prefix-cls}-text {
      display: inline-block;
    }

    .@{form-item-prefix-cls}-has-feedback {
      display: inline-block;
    }
  }
}

.@{form-prefix-cls}-horizontal {
  .@{form-item-prefix-cls}-label {
    flex-grow: 0;
  }
  .@{form-item-prefix-cls}-control {
    flex: 1 1 0;
  }
}

// ================== Label ==================
.make-vertical-layout-label() {
  margin: @form-vertical-label-margin;
  padding: @form-vertical-label-padding;
  line-height: @line-height-base;
  white-space: initial;
  text-align: left;

  > label {
    margin: 0;

    &::after {
      display: none;
    }
  }
}

.make-vertical-layout() {
  .@{form-prefix-cls}-item .@{form-prefix-cls}-item-label {
    .make-vertical-layout-label();
  }
  .@{form-prefix-cls} {
    .@{form-prefix-cls}-item {
      flex-wrap: wrap;
      .@{form-prefix-cls}-item-label,
      .@{form-prefix-cls}-item-control {
        flex: 0 0 100%;
        max-width: 100%;
      }
    }
  }
}

.@{form-prefix-cls}-vertical {
  .@{form-item-prefix-cls} {
    flex-direction: column;

    &-label > label {
      height: auto;
    }
  }
}

.@{form-prefix-cls}-vertical .@{form-item-prefix-cls}-label,
  // when labelCol is 24, it is a vertical form
.@{ant-prefix}-col-24.@{form-item-prefix-cls}-label,
.@{ant-prefix}-col-xl-24.@{form-item-prefix-cls}-label {
  .make-vertical-layout-label();
}

@media (max-width: @screen-xs-max) {
  .make-vertical-layout();
  .@{ant-prefix}-col-xs-24.@{form-item-prefix-cls}-label {
    .make-vertical-layout-label();
  }
}

@media (max-width: @screen-sm-max) {
  .@{ant-prefix}-col-sm-24.@{form-item-prefix-cls}-label {
    .make-vertical-layout-label();
  }
}

@media (max-width: @screen-md-max) {
  .@{ant-prefix}-col-md-24.@{form-item-prefix-cls}-label {
    .make-vertical-layout-label();
  }
}

@media (max-width: @screen-lg-max) {
  .@{ant-prefix}-col-lg-24.@{form-item-prefix-cls}-label {
    .make-vertical-layout-label();
  }
}

@media (max-width: @screen-xl-max) {
  .@{ant-prefix}-col-xl-24.@{form-item-prefix-cls}-label {
    .make-vertical-layout-label();
  }
}

.@{form-item-prefix-cls} {
  // ================================================================
  // =                            Status                            =
  // ================================================================
  /* Some non-status related component style is in `components.less` */

  &-has-feedback {
    // ========================= Input =========================
    .@{ant-prefix}-input {
      padding-right: 24px;
    }
    // https://github.com/ant-design/ant-design/issues/19884
    .@{ant-prefix}-input-affix-wrapper {
      .@{ant-prefix}-input-suffix {
        padding-right: 18px;
      }
    }

    // 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;
      }
    }

    // ======================== Switch =========================
    .@{ant-prefix}-switch {
      margin: 2px 0 4px;
    }

    // ======================== Select =========================
    // 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;
    }

    // ======================= Cascader ========================
    .@{ant-prefix}-cascader-picker {
      &-arrow {
        margin-right: 17px;
      }
      &-clear {
        right: 28px;
      }
    }

    // ======================== Picker =========================
    // Fix issue: https://github.com/ant-design/ant-design/issues/4783
    .@{ant-prefix}-picker {
      padding-right: @input-padding-horizontal-base + @font-size-base * 1.3;

      &-large {
        padding-right: @input-padding-horizontal-lg + @font-size-base * 1.3;
      }

      &-small {
        padding-right: @input-padding-horizontal-sm + @font-size-base * 1.3;
      }
    }

    // ===================== Status Group ======================
    &.@{form-item-prefix-cls} {
      &-has-success,
      &-has-warning,
      &-has-error,
      &-is-validating {
        // ====================== Icon ======================
        .@{form-item-prefix-cls}-children-icon {
          position: absolute;
          top: 50%;
          right: 0;
          z-index: 1;
          width: @input-height-base;
          height: 20px;
          margin-top: -10px;
          font-size: @font-size-base;
          line-height: 20px;
          text-align: center;
          visibility: visible;
          animation: zoomIn 0.3s @ease-out-back;
          pointer-events: none;

          & svg {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            margin: auto;
          }
        }
      }
    }
  }

  // ======================== Success ========================
  &-has-success {
    &.@{form-item-prefix-cls}-has-feedback .@{form-item-prefix-cls}-children-icon {
      color: @success-color;
      animation-name: diffZoomIn1 !important;
    }
  }

  // ======================== Warning ========================
  &-has-warning {
    .form-control-validation(@warning-color; @warning-color; @form-warning-input-bg);

    &.@{form-item-prefix-cls}-has-feedback .@{form-item-prefix-cls}-children-icon {
      color: @warning-color;
      animation-name: diffZoomIn3 !important;
    }

    //select
    .@{ant-prefix}-select:not(.@{ant-prefix}-select-borderless) {
      .@{ant-prefix}-select-selector {
        border-color: @warning-color !important;
      }
      &.@{ant-prefix}-select-open .@{ant-prefix}-select-selector,
      &.@{ant-prefix}-select-focused .@{ant-prefix}-select-selector {
        .active(@warning-color);
      }
    }

    //input-number, timepicker
    .@{ant-prefix}-input-number,
    .@{ant-prefix}-picker {
      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);
    }
  }

  // ========================= Error =========================
  &-has-error {
    .form-control-validation(@error-color; @error-color; @form-error-input-bg);

    &.@{form-item-prefix-cls}-has-feedback .@{form-item-prefix-cls}-children-icon {
      color: @error-color;
      animation-name: diffZoomIn2 !important;
    }

    //select
    .@{ant-prefix}-select:not(.@{ant-prefix}-select-borderless) {
      .@{ant-prefix}-select-selector {
        border-color: @error-color !important;
      }
      &.@{ant-prefix}-select-open .@{ant-prefix}-select-selector,
      &.@{ant-prefix}-select-focused .@{ant-prefix}-select-selector {
        .active(@error-color);
      }
    }

    // fixes https://github.com/ant-design/ant-design/issues/20482
    .@{ant-prefix}-input-group-addon .@{ant-prefix}-select {
      &.@{ant-prefix}-select-single:not(.@{ant-prefix}-select-customize-input)
        .@{ant-prefix}-select-selector {
        border: 0;
      }
    }

    .@{ant-prefix}-select.@{ant-prefix}-select-auto-complete {
      .@{ant-prefix}-input:focus {
        border-color: @error-color;
      }
    }

    //input-number, timepicker
    .@{ant-prefix}-input-number,
    .@{ant-prefix}-picker {
      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);
    }

    // transfer
    .@{ant-prefix}-transfer {
      &-list {
        border-color: @error-color;

        &-search:not([disabled]) {
          border-color: @input-border-color;

          &:hover {
            .hover();
          }

          &:focus {
            .active();
          }
        }
      }
    }
  }

  // Patch to keep error explain color
  &-has-error-leave {
    .@{form-item-prefix-cls}-explain {
      color: @error-color;
    }
  }

  // ====================== Validating =======================
  &-is-validating {
    &.@{form-item-prefix-cls}-has-feedback .@{form-item-prefix-cls}-children-icon {
      display: inline-block;
      color: @primary-color;
    }
  }
}

.form-control-validation(@text-color: @input-color; @border-color: @input-border-color; @background-color: @input-bg) {
  .@{ant-prefix}-form-item-explain,
  .@{ant-prefix}-form-item-split {
    color: @text-color;
  }
  // 输入框的不同校验状态
  .@{ant-prefix}-input,
  .@{ant-prefix}-input-affix-wrapper {
    &,
    &:hover {
      border-color: @border-color;
    }

    &:focus,
    &-focused {
      .active(@border-color);
    }
  }

  .@{ant-prefix}-input {
    &:not(&-disabled) {
      background-color: @background-color;
    }
  }

  .@{ant-prefix}-input-affix-wrapper {
    &:not(&-disabled) {
      background-color: @background-color;
    }
    input:focus {
      box-shadow: none !important;
    }
  }

  .@{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;
  }

  .has-feedback {
    color: @text-color;
  }
}

// Reset form styles
// -----------------------------
// Based on Bootstrap framework
.reset-form() {
  legend {
    display: block;
    width: 100%;
    margin-bottom: 20px;
    padding: 0;
    color: @text-color-secondary;
    font-size: @font-size-lg;
    line-height: inherit;
    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;
    outline-offset: -2px;
  }

  // Adjust output element
  output {
    display: block;
    padding-top: 15px;
    color: @input-color;
    font-size: @font-size-base;
    line-height: @line-height-base;
  }
}

@form-prefix-cls: ~'@{ant-prefix}-form';
@form-item-prefix-cls: ~'@{form-prefix-cls}-item';
@form-font-height: ceil(@font-size-base * @line-height-base);

.@{form-prefix-cls} {
  .reset-component;
  .reset-form;

  .@{form-prefix-cls}-text {
    display: inline-block;
    padding-right: 8px;
  }

  // ================================================================
  // =                             Size                             =
  // ================================================================
  .formSize(@input-height) {
    .@{form-item-prefix-cls}-label > label {
      height: @input-height;
    }

    .@{form-item-prefix-cls}-control-input {
      min-height: @input-height;
    }
  }

  &-small {
    .formSize(@input-height-sm);
  }
  &-large {
    .formSize(@input-height-lg);
  }
}

.explainAndExtraDistance(@num) when (@num >= 0) {
  padding-top: floor(@num);
}

.explainAndExtraDistance(@num) when (@num < 0) {
  margin-top: floor(@num);
  margin-bottom: floor(@num);
}

// ================================================================
// =                             Item                             =
// ================================================================
.@{form-item-prefix-cls} {
  .reset-component;

  margin-bottom: @form-item-margin-bottom;
  vertical-align: top;

  &-with-help {
    margin-bottom: 0;
  }

  &-hidden {
    display: none;
  }

  // ==============================================================
  // =                            Label                           =
  // ==============================================================
  &-label {
    display: inline-block;
    flex-grow: 0;
    overflow: hidden;
    white-space: nowrap;
    text-align: right;
    vertical-align: middle;

    &-left {
      text-align: left;
    }

    > label {
      position: relative;
      // display: inline;
      display: inline-flex;
      align-items: center;
      height: @form-item-label-height;
      color: @label-color;
      font-size: @form-item-label-font-size;

      > .@{iconfont-css-prefix} {
        font-size: @form-item-label-font-size;
        vertical-align: top;
      }

      &.@{form-item-prefix-cls}-required::before {
        display: inline-block;
        margin-right: 4px;
        color: @label-required-color;
        font-size: @form-item-label-font-size;
        font-family: SimSun, sans-serif;
        line-height: 1;
        content: '*';

        .@{form-prefix-cls}-hide-required-mark & {
          display: none;
        }
      }

      &::after {
        & when (@form-item-trailing-colon=true) {
          content: ':';
        }
        & when not (@form-item-trailing-colon=true) {
          content: ' ';
        }

        position: relative;
        top: -0.5px;
        margin: 0 @form-item-label-colon-margin-right 0 @form-item-label-colon-margin-left;
      }

      &.@{form-item-prefix-cls}-no-colon::after {
        content: ' ';
      }
    }
  }

  // ==============================================================
  // =                            Input                           =
  // ==============================================================
  &-control {
    display: flex;
    flex-direction: column;
    flex-grow: 1;

    &:first-child:not([class^=~"'@{ant-prefix}-col-'"]):not([class*=~"' @{ant-prefix}-col-'"]) {
      width: 100%;
    }
  }

  &-control-input {
    position: relative;
    display: flex;
    align-items: center;
    min-height: @input-height-base;

    &-content {
      flex: auto;
      max-width: 100%;
    }
  }

  &-explain,
  &-extra {
    clear: both;
    min-height: @form-item-margin-bottom;
    .explainAndExtraDistance((@form-item-margin-bottom - @form-font-height) / 2);
    color: @text-color-secondary;
    font-size: @font-size-base;
    line-height: @line-height-base;
    transition: color 0.3s @ease-out; // sync input color transition
  }
}

.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% {
    transform: translateY(-5px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes antShowHelpOut {
  to {
    transform: translateY(-5px);
    opacity: 0;
  }
}

// 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);
  }
}

@form-prefix-cls: ~'@{ant-prefix}-form';
@form-item-prefix-cls: ~'@{form-prefix-cls}-item';

.@{form-prefix-cls} {
  &-rtl {
    direction: rtl;
  }
}

// ================================================================
// =                             Item                             =
// ================================================================
.@{form-item-prefix-cls} {
  // ==============================================================
  // =                            Label                           =
  // ==============================================================
  &-label {
    .@{form-prefix-cls}-rtl & {
      text-align: left;
    }

    > label {
      &.@{form-item-prefix-cls}-required::before {
        .@{form-prefix-cls}-rtl & {
          margin-right: 0;
          margin-left: 4px;
        }
      }
      &::after {
        .@{form-prefix-cls}-rtl & {
          margin: 0 @form-item-label-colon-margin-left 0 @form-item-label-colon-margin-right;
        }
      }
    }
  }

  // ==============================================================
  // =                            Input                           =
  // ==============================================================
  &-control {
    .@{ant-prefix}-col-rtl &:first-child {
      width: 100%;
    }
  }

  // status
  &-has-feedback {
    .@{ant-prefix}-input {
      .@{form-prefix-cls}-rtl & {
        padding-right: @input-padding-horizontal-base;
        padding-left: 24px;
      }
    }

    .@{ant-prefix}-input-affix-wrapper {
      .@{ant-prefix}-input-suffix {
        .@{form-prefix-cls}-rtl & {
          padding-right: @input-padding-horizontal-base;
          padding-left: 18px;
        }
      }
      .@{ant-prefix}-input {
        .@{form-prefix-cls}-rtl & {
          padding: 0;
        }
      }
    }

    .@{ant-prefix}-input-search:not(.@{ant-prefix}-input-search-enter-button) {
      .@{ant-prefix}-input-suffix {
        .@{form-prefix-cls}-rtl & {
          right: auto;
          left: 28px;
        }
      }
    }

    .@{ant-prefix}-input-number {
      .@{form-prefix-cls}-rtl & {
        padding-left: 18px;
      }
    }

    > .@{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 {
      .@{form-prefix-cls}-rtl & {
        right: auto;
        left: 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 {
      .@{form-prefix-cls}-rtl & {
        padding-right: 0;
        padding-left: 42px;
      }
    }

    .@{ant-prefix}-cascader-picker {
      &-arrow {
        .@{form-prefix-cls}-rtl & {
          margin-right: 0;
          margin-left: 17px;
        }
      }
      &-clear {
        .@{form-prefix-cls}-rtl & {
          right: auto;
          left: 28px;
        }
      }
    }

    .@{ant-prefix}-picker {
      .@{form-prefix-cls}-rtl & {
        padding-right: @input-padding-horizontal-base;
        padding-left: @input-padding-horizontal-base + @font-size-base * 1.3;
      }

      &-large {
        .@{form-prefix-cls}-rtl & {
          padding-right: @input-padding-horizontal-lg;
          padding-left: @input-padding-horizontal-lg + @font-size-base * 1.3;
        }
      }

      &-small {
        .@{form-prefix-cls}-rtl & {
          padding-right: @input-padding-horizontal-sm;
          padding-left: @input-padding-horizontal-sm + @font-size-base * 1.3;
        }
      }
    }

    &.@{form-item-prefix-cls} {
      &-has-success,
      &-has-warning,
      &-has-error,
      &-is-validating {
        // ====================== Icon ======================
        .@{form-item-prefix-cls}-children-icon {
          .@{form-prefix-cls}-rtl & {
            right: auto;
            left: 0;
          }
        }
      }
    }
  }
}

// inline
.@{form-prefix-cls}-inline {
  .@{form-prefix-cls}-item {
    .@{form-prefix-cls}-rtl& {
      margin-right: 0;
      margin-left: 16px;
    }
  }
}

// vertical
.make-vertical-layout-label() {
  .@{form-prefix-cls}-rtl& {
    text-align: right;
  }
}

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

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

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

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

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

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

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

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

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

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

.@{ant-prefix}-col {
  position: relative;
  max-width: 100%;
  // Prevent columns from collapsing when empty
  min-height: 1px;
}

.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}-row {
  &-rtl {
    direction: rtl;
  }
}

.@{ant-prefix}-col {
  &&-rtl {
    float: right;
  }
}

// mixin
.loop-grid-columns(@index, @class) when (@index > 0) {
  .@{ant-prefix}-col@{class}-push-@{index} {
    // reset property in RTL direction
    &.@{ant-prefix}-col-rtl {
      right: percentage((@index / @grid-columns));
      left: auto;
    }
  }

  .@{ant-prefix}-col@{class}-pull-@{index} {
    // reset property in RTL direction
    &.@{ant-prefix}-col-rtl {
      right: auto;
      left: percentage((@index / @grid-columns));
    }
  }

  .@{ant-prefix}-col@{class}-offset-@{index} {
    // reset property in RTL direction
    &.@{ant-prefix}-col-rtl {
      margin-right: percentage((@index / @grid-columns));
      margin-left: 0;
    }
  }
}

.loop-grid-columns(@index, @class) when (@index = 0) {
  .@{ant-prefix}-col-push-@{index} {
    // reset property in RTL direction
    &.@{ant-prefix}-col-rtl {
      right: auto;
    }
  }

  .@{ant-prefix}-col-pull-@{index} {
    &.@{ant-prefix}-col-rtl {
      left: auto;
    }
  }

  .@{ant-prefix}-col@{class}-push-@{index} {
    &.@{ant-prefix}-col-rtl {
      right: auto;
    }
  }

  .@{ant-prefix}-col@{class}-pull-@{index} {
    &.@{ant-prefix}-col-rtl {
      left: auto;
    }
  }

  .@{ant-prefix}-col@{class}-offset-@{index} {
    &.@{ant-prefix}-col-rtl {
      margin-right: 0;
    }
  }
}

@icon-prefix-cls: ~'@{ant-prefix}-icon';

@input-affix-margin: 4px;

.@{ant-prefix}-input {
  &-affix-wrapper {
    .input();
    display: inline-flex;

    &-disabled {
      .@{ant-prefix}-input[disabled] {
        background: transparent;
      }
    }

    > input.@{ant-prefix}-input {
      padding: 0;
      border: none;
      outline: none;

      &:focus {
        box-shadow: none;
      }
    }

    &::before {
      width: 0;
      visibility: hidden;
      content: '\a0';
    }
  }

  &-prefix,
  &-suffix {
    display: flex;
    flex: none;
    align-items: center;
  }

  &-prefix {
    margin-right: @input-affix-margin;
  }

  &-suffix {
    margin-left: @input-affix-margin;
  }
}

.clear-icon() {
  color: @disabled-color;
  font-size: @font-size-sm;
  // https://github.com/ant-design/ant-design/pull/18151
  // https://codesandbox.io/s/wizardly-sun-u10br
  cursor: pointer;
  transition: color 0.3s;

  &:hover {
    color: @text-color-secondary;
  }

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

  + i {
    margin-left: 6px;
  }

  &-hidden {
    visibility: hidden;
  }
}

// ========================= Input =========================
.@{ant-prefix}-input-clear-icon {
  .clear-icon;
  margin: 0 @input-affix-margin;
  vertical-align: -1px;

  &:last-child {
    margin-right: 0;
  }
}

// ======================= TextArea ========================
.@{ant-prefix}-input-affix-wrapper-textarea-with-clear-btn {
  padding: 0 !important;
  border: 0 !important;
}

.@{ant-prefix}-input-textarea-clear-icon {
  .clear-icon;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  margin: 8px 8px 0 0;
}

// Input styles
.@{ant-prefix}-input {
  .reset-component;
  .input;

  //== Style for input-group: input with label, with button or dropdown...
  &-group {
    .reset-component;
    .input-group(~'@{ant-prefix}-input');
    &-wrapper {
      display: inline-block;
      width: 100%;
      text-align: start;
      vertical-align: top; // https://github.com/ant-design/ant-design/issues/6403
    }
  }

  &-password-icon {
    color: @text-color-secondary;
    cursor: pointer;
    transition: all 0.3s;

    &:hover {
      color: @input-icon-hover-color;
    }
  }

  &[type='color'] {
    height: @input-height-base;

    &.@{ant-prefix}-input-lg {
      height: @input-height-lg;
    }
    &.@{ant-prefix}-input-sm {
      height: @input-height-sm;
      padding-top: 3px;
      padding-bottom: 3px;
    }
  }
}

@search-prefix: ~'@{ant-prefix}-input-search';

.searchInputIcon(@input-height, @font-size) {
  .@{search-prefix}-icon {
    @horizontal-padding: (@input-height - @font-size) / 2;
    padding: 0 @horizontal-padding;

    &::before {
      transform: translateX(-@horizontal-padding - @border-width-base);
    }

    &::after {
      width: @input-height;
    }
  }
}

.searchInputIcon(@input-height-base, @font-size-base);

.@{ant-prefix}-input-affix-wrapper-lg {
  .searchInputIcon(@input-height-lg, @font-size-lg);
}
.@{ant-prefix}-input-affix-wrapper-sm {
  .searchInputIcon(@input-height-sm, @font-size-sm);
}

.@{search-prefix} {
  &-icon {
    margin-left: 0.5em;
    color: @text-color-secondary;
    cursor: pointer;
    transition: all 0.3s;
    &:hover {
      color: @input-icon-hover-color;
    }

    &::before {
      position: absolute;
      top: 0;
      bottom: 0;
      display: block;
      border-left: @border-width-base @border-style-base @input-border-color;
      transition: all 0.3s;
      content: '';
    }

    &::after {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      content: '';
    }
  }

  &:not(&-enter-button) {
    padding-right: 0;
  }

  &-enter-button {
    input {
      border-right: 0;

      &:hover,
      &:focus {
        border-color: @input-hover-border-color;
      }
    }

    &.@{ant-prefix}-input-affix-wrapper {
      border-right: 0;
    }

    & + .@{ant-prefix}-input-group-addon,
    input + .@{ant-prefix}-input-group-addon {
      padding: 0;
      border: 0;

      .@{search-prefix}-button {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
      }
    }
  }
}

//== Style for input-group: input with label, with button or dropdown...
.@{ant-prefix}-input-group {
  &-wrapper {
    &-rtl {
      direction: rtl;
    }
  }
  &-rtl {
    direction: rtl;
  }
}

// affix
@input-affix-margin: 4px;

.@{ant-prefix}-input {
  &-affix-wrapper&-affix-wrapper-rtl {
    > input.@{ant-prefix}-input {
      border: none;
      outline: none;
    }
  }

  &-affix-wrapper-rtl {
    .@{ant-prefix}-input-prefix {
      margin: 0 0 0 @input-affix-margin;
    }

    .@{ant-prefix}-input-suffix {
      margin: 0 @input-affix-margin 0 0;
    }
  }
}

// allow-clear
.@{ant-prefix}-input-clear-icon {
  &:last-child {
    .@{ant-prefix}-input-affix-wrapper-rtl & {
      margin-right: @input-affix-margin;
      margin-left: 0;
    }
  }
}

.@{ant-prefix}-input-textarea-clear-icon {
  .@{ant-prefix}-input-affix-wrapper-rtl & {
    right: auto;
    left: 0;
    margin: 8px 0 0 8px;
  }
}

// mixin
@input-rtl-cls: ~'@{ant-prefix}-input-rtl';

.active() {
  .@{input-rtl-cls} & {
    border-right-width: 0;
    border-left-width: @border-width-base !important;
  }
}

.hover() {
  .@{input-rtl-cls} & {
    border-right-width: 0;
    border-left-width: @border-width-base !important;
  }
}

.input() {
  &-rtl {
    direction: rtl;
  }
}

// label input
.input-group(@inputClass) {
  > .@{inputClass}-rtl:first-child,
  &-rtl &-addon:first-child {
    border-radius: 0 @border-radius-base @border-radius-base 0;
  }

  &-addon:first-child {
    .@{inputClass}-group-rtl & {
      border-right: @border-width-base @border-style-base @input-border-color;
      border-left: 0;
    }
  }

  &-addon:last-child {
    .@{inputClass}-group-rtl & {
      border-right: 0;
      border-left: @border-width-base @border-style-base @input-border-color;
    }
  }

  > .@{inputClass}:last-child,
  &-addon:last-child {
    .@{inputClass}-group-rtl & {
      border-radius: @border-radius-base 0 0 @border-radius-base;
    }
  }

  .@{inputClass}-affix-wrapper {
    &:not(:first-child) {
      .@{inputClass}-group-rtl& {
        border-radius: @border-radius-base 0 0 @border-radius-base;
      }
    }

    &:not(:last-child) {
      .@{inputClass}-group-rtl& {
        border-radius: 0 @border-radius-base @border-radius-base 0;
      }
    }
  }

  &&-compact {
    & > *:not(:last-child) {
      .@{inputClass}-group-rtl& {
        margin-right: 0;
        margin-left: -@border-width-base;
        border-left-width: @border-width-base;
      }
    }

    & > *:first-child,
    & > .@{ant-prefix}-select:first-child > .@{ant-prefix}-select-selector,
    & > .@{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 {
      .@{inputClass}-group-rtl& {
        border-radius: 0 @border-radius-base @border-radius-base 0;
      }
    }

    & > *:last-child,
    & > .@{ant-prefix}-select:last-child > .@{ant-prefix}-select-selector,
    & > .@{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 {
      .@{inputClass}-group-rtl& {
        border-left-width: @border-width-base;
        border-radius: @border-radius-base 0 0 @border-radius-base;
      }
    }
  }
}

// search-input
@search-prefix: ~'@{ant-prefix}-input-search';
@search-rtl-cls: ~'@{search-prefix}-rtl';

.@{search-prefix} {
  &-rtl {
    direction: rtl;
  }

  &-icon {
    .@{search-rtl-cls} & {
      margin-right: 0.5em;
      margin-left: 0;
    }

    &::before {
      .@{search-rtl-cls} & {
        border-left: none;
      }
    }

    &::after {
      .@{search-rtl-cls} & {
        right: auto;
        left: 0;
        border-right: @border-width-base @border-style-base @input-border-color;
        transition: all 0.3s;
      }
    }
  }

  &:not(&-enter-button) {
    .@{search-rtl-cls}& {
      padding-right: @input-padding-horizontal-base;
      padding-left: 0;
    }
  }

  &-enter-button {
    input {
      .@{search-rtl-cls}& {
        border-right: @border-width-base @border-style-base @input-border-color;
        border-left: 0;
      }

      &:hover,
      &:focus {
        .@{search-rtl-cls}& {
          border-color: @input-hover-border-color;
        }
      }
    }

    &.@{ant-prefix}-input-affix-wrapper {
      .@{search-rtl-cls}& {
        border-right: @border-width-base @border-style-base @input-border-color;
        border-left: 0;
      }

      &:hover,
      &:focus {
        .@{search-rtl-cls}& {
          border-color: @input-hover-border-color;
        }
      }
    }

    & + .@{ant-prefix}-input-group-addon,
    input + .@{ant-prefix}-input-group-addon {
      .@{search-rtl-cls}& {
        .@{search-prefix}-button {
          width: 100%;
          border-radius: @border-radius-base 0 0 @border-radius-base;
        }
      }
    }
  }
}

// Fix Input component height issue in IE11
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .@{ant-prefix}-input {
    height: @input-height-base;

    &-lg {
      height: @input-height-lg;
    }

    &-sm {
      height: @input-height-sm;
    }

    &-affix-wrapper {
      > input.@{ant-prefix}-input {
        height: auto;
      }
    }
  }
}

@input-number-prefix-cls: ~'@{ant-prefix}-input-number';
@form-item-prefix-cls: ~'@{ant-prefix}-form-item';

.@{input-number-prefix-cls} {
  .reset-component;
  .input;

  display: inline-block;
  width: 90px;
  margin: 0;
  padding: 0;
  border: @border-width-base @border-style-base @border-color-base;
  border-radius: @border-radius-base;

  &-handler {
    position: relative;
    display: block;
    width: 100%;
    height: 50%;
    overflow: hidden;
    color: @text-color-secondary;
    font-weight: bold;
    line-height: 0;
    text-align: center;
    transition: all 0.1s linear;
    &:active {
      background: @input-number-handler-active-bg;
    }
    &:hover &-up-inner,
    &:hover &-down-inner {
      color: @input-number-handler-hover-bg;
    }
  }

  &-handler-up-inner,
  &-handler-down-inner {
    .iconfont-mixin();

    position: absolute;
    right: 4px;
    width: 12px;
    height: 12px;
    color: @text-color-secondary;
    line-height: 12px;
    transition: all 0.1s linear;
    user-select: none;
  }

  &:hover {
    .hover(@input-number-hover-border-color);
    & + .@{form-item-prefix-cls}-children-icon {
      opacity: 0;
      transition: opacity 0.24s linear 0.24s;
    }
  }

  &-focused {
    .active();
  }

  &-disabled {
    .disabled();
    .@{input-number-prefix-cls}-input {
      cursor: not-allowed;
    }
    .@{input-number-prefix-cls}-handler-wrap {
      display: none;
    }
  }

  &-input {
    width: 100%;
    height: @input-height-base - 2px;
    padding: 0 @control-padding-horizontal - 1px;
    text-align: left;
    background-color: transparent;
    border: 0;
    border-radius: @border-radius-base;
    outline: 0;
    transition: all 0.3s linear;
    -moz-appearance: textfield !important;
    .placeholder();

    &[type='number']::-webkit-inner-spin-button,
    &[type='number']::-webkit-outer-spin-button {
      margin: 0;
      -webkit-appearance: none;
    }
  }

  &-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 {
    position: absolute;
    top: 0;
    right: 0;
    width: 22px;
    height: 100%;
    background: @input-number-handler-bg;
    border-left: @border-width-base @border-style-base @input-number-handler-border-color;
    border-radius: 0 @border-radius-base @border-radius-base 0;
    opacity: 0;
    transition: opacity 0.24s linear 0.1s;

    // Fix input number inside Menu makes icon too large
    // We arise the selector priority by nest selector here
    // https://github.com/ant-design/ant-design/issues/14367
    .@{input-number-prefix-cls}-handler {
      .@{input-number-prefix-cls}-handler-up-inner,
      .@{input-number-prefix-cls}-handler-down-inner {
        .iconfont-size-under-12px(7px);

        min-width: auto;
        margin-right: 0;
      }
    }
  }

  &-handler-wrap:hover &-handler {
    height: 40%;
  }

  &:hover &-handler-wrap {
    opacity: 1;
  }

  &-handler-up {
    border-top-right-radius: @border-radius-base;
    cursor: pointer;
    &-inner {
      top: 50%;
      margin-top: -5px;
      text-align: center;
    }
    &:hover {
      height: 60% !important;
    }
  }

  &-handler-down {
    top: 0;
    border-top: @border-width-base @border-style-base @border-color-base;
    border-bottom-right-radius: @border-radius-base;
    cursor: pointer;
    &-inner {
      top: 50%;
      text-align: center;
      transform: translateY(-50%);
    }
    &: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;
  }
}

@input-number-prefix-cls: ~'@{ant-prefix}-input-number';

.@{input-number-prefix-cls} {
  &-rtl {
    direction: rtl;
  }

  &-handler-wrap {
    .@{input-number-prefix-cls}-rtl & {
      right: auto;
      left: 0;
      border-right: @border-width-base @border-style-base @input-number-handler-border-color;
      border-left: 0;
      border-radius: @border-radius-base 0 0 @border-radius-base;
    }
  }

  &-input {
    .@{input-number-prefix-cls}-rtl & {
      direction: ltr;
      text-align: right;
    }
  }
}

@layout-prefix-cls: ~'@{ant-prefix}-layout';

.@{layout-prefix-cls} {
  display: flex;
  flex: auto;
  flex-direction: column;
  /* fix firefox can't set height smaller than content on flex item */
  min-height: 0;
  background: @layout-body-background;

  &,
  * {
    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 {
    height: @layout-header-height;
    padding: @layout-header-padding;
    color: @layout-header-color;
    line-height: @layout-header-height;
    background: @layout-header-background;
  }

  &-footer {
    padding: @layout-footer-padding;
    color: @text-color;
    font-size: @font-size-base;
    background: @layout-footer-background;
  }

  &-content {
    flex: auto;
    /* fix firefox can't set height smaller than content on flex item */
    min-height: 0;
  }

  &-sider {
    position: relative;

    /* fix firefox can't set width smaller than content on flex item */
    min-width: 0;
    background: @layout-sider-background;
    transition: all 0.2s;

    &-children {
      height: 100%;
      margin-top: -0.1px;
      // 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;
    }

    &-has-trigger {
      padding-bottom: @layout-trigger-height;
    }

    &-right {
      order: 1;
    }

    &-trigger {
      position: fixed;
      bottom: 0;
      z-index: 1;
      height: @layout-trigger-height;
      color: @layout-trigger-color;
      line-height: @layout-trigger-height;
      text-align: center;
      background: @layout-trigger-background;
      cursor: pointer;
      transition: all 0.2s;
    }

    &-zero-width {
      & > * {
        overflow: hidden;
      }

      &-trigger {
        position: absolute;
        top: @layout-header-height;
        right: -@layout-zero-trigger-width;
        z-index: 1;
        width: @layout-zero-trigger-width;
        height: @layout-zero-trigger-height;
        color: @layout-trigger-color;
        font-size: @layout-zero-trigger-width / 2;
        line-height: @layout-zero-trigger-height;
        text-align: center;
        background: @layout-sider-background;
        border-radius: 0 @border-radius-base @border-radius-base 0;
        cursor: pointer;
        transition: background 0.3s ease;

        &:hover {
          background: tint(@layout-sider-background, 10%);
        }

        &-right {
          left: -@layout-zero-trigger-width;
          border-radius: @border-radius-base 0 0 @border-radius-base;
        }
      }
    }
  }
}

.@{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;
    }
  }
}

@layout-prefix-cls: ~'@{ant-prefix}-layout';

.@{layout-prefix-cls} {
  &-rtl {
    direction: rtl;
  }
}

@card-prefix-cls: ~'@{ant-prefix}-card';

.@{list-prefix-cls} {
  // =================== Dard Hook Components ===================
  .@{card-prefix-cls} {
    & when (@theme = dark) {
      background: @list-customize-card-bg;
    }
  }
}

@list-prefix-cls: ~'@{ant-prefix}-list';

.@{list-prefix-cls} {
  .reset-component;

  position: relative;

  * {
    outline: none;
  }

  &-pagination {
    margin-top: @margin-lg;
    text-align: right;

    // https://github.com/ant-design/ant-design/issues/20037
    .@{ant-prefix}-pagination-options {
      text-align: left;
    }
  }

  &-more {
    margin-top: @margin-sm;
    text-align: center;
    button {
      padding-right: 32px;
      padding-left: 32px;
    }
  }

  &-spin {
    min-height: 40px;
    text-align: center;
  }

  &-empty-text {
    padding: @list-empty-text-padding;
    color: @disabled-color;
    font-size: @font-size-base;
    text-align: center;
  }

  &-items {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  &-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: @list-item-padding;
    color: @text-color;

    &-meta {
      display: flex;
      flex: 1;
      align-items: flex-start;
      max-width: 100%;

      &-avatar {
        margin-right: @list-item-meta-avatar-margin-right;
      }
      &-content {
        flex: 1 0;
        width: 0;
        color: @text-color;
      }
      &-title {
        margin-bottom: 4px;
        color: @text-color;
        font-size: @font-size-base;
        line-height: @line-height-base;
        > a {
          color: @text-color;
          transition: all 0.3s;
          &:hover {
            color: @primary-color;
          }
        }
      }
      &-description {
        color: @text-color-secondary;
        font-size: @list-item-meta-description-font-size;
        line-height: @line-height-base;
      }
    }
    &-action {
      flex: 0 0 auto;
      margin-left: 48px;
      padding: 0;
      font-size: 0;
      list-style: none;

      & > li {
        position: relative;
        display: inline-block;
        padding: 0 @padding-xs;
        color: @text-color-secondary;
        font-size: @font-size-base;
        line-height: @line-height-base;
        text-align: center;
        cursor: pointer;
      }
      & > li:first-child {
        padding-left: 0;
      }
      &-split {
        position: absolute;
        top: 50%;
        right: 0;
        width: 1px;
        height: 14px;
        margin-top: -7px;
        background-color: @border-color-split;
      }
    }
  }

  &-header {
    background: @list-header-background;
  }

  &-footer {
    background: @list-footer-background;
  }

  &-header,
  &-footer {
    padding-top: @padding-sm;
    padding-bottom: @padding-sm;
  }

  &-empty {
    padding: @padding-md 0;
    color: @text-color-secondary;
    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;
  }

  &-split&-empty &-footer {
    border-top: 1px solid @border-color-split;
  }

  &-loading &-spin-nested-loading {
    min-height: 32px;
  }

  &-split&-something-after-last-item .@{ant-prefix}-spin-container > &-items > &-item:last-child {
    border-bottom: 1px solid @border-color-split;
  }

  &-lg &-item {
    padding: @list-item-padding-lg;
  }

  &-sm &-item {
    padding: @list-item-padding-sm;
  }

  &-vertical &-item {
    align-items: initial;

    &-main {
      display: block;
      flex: 1;
    }

    &-extra {
      margin-left: 40px;
    }

    &-meta {
      margin-bottom: @list-item-meta-margin-bottom;

      &-title {
        margin-bottom: @list-item-meta-title-margin-bottom;
        color: @heading-color;
        font-size: @font-size-lg;
        line-height: 24px;
      }
    }

    &-action {
      margin-top: @padding-md;
      margin-left: auto;

      > li {
        padding: 0 @padding-md;
        &:first-child {
          padding-left: 0;
        }
      }
    }
  }

  &-grid .@{ant-prefix}-col > &-item {
    display: block;
    max-width: 100%;
    margin-bottom: @margin-md;
    padding-top: 0;
    padding-bottom: 0;
    border-bottom: none;
  }

  // ============================ without flex ============================
  &-item-no-flex {
    display: block;
  }

  // Horizontal
  &:not(.@{list-prefix-cls}-vertical) {
    .@{list-prefix-cls}-item-no-flex {
      .@{list-prefix-cls}-item-action {
        float: right;
      }
    }
  }
}

.@{list-prefix-cls}-bordered {
  border: 1px solid @border-color-base;
  border-radius: @border-radius-base;
  .@{list-prefix-cls}-header {
    padding-right: @padding-lg;
    padding-left: @padding-lg;
  }

  .@{list-prefix-cls}-footer {
    padding-right: @padding-lg;
    padding-left: @padding-lg;
  }

  .@{list-prefix-cls}-item {
    padding-right: @padding-lg;
    padding-left: @padding-lg;
  }

  .@{list-prefix-cls}-pagination {
    margin: @margin-md @margin-lg;
  }

  &.@{list-prefix-cls}-sm {
    .@{list-prefix-cls}-item {
      padding: @list-item-padding-sm;
    }
    .@{list-prefix-cls}-header,
    .@{list-prefix-cls}-footer {
      padding: @list-item-padding-sm;
    }
  }

  &.@{list-prefix-cls}-lg {
    .@{list-prefix-cls}-item {
      padding: @list-item-padding-lg;
    }
    .@{list-prefix-cls}-header,
    .@{list-prefix-cls}-footer {
      padding: @list-item-padding-lg;
    }
  }
}

@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-sm) {
  .@{list-prefix-cls} {
    &-item {
      flex-wrap: wrap;
      &-action {
        margin-left: 12px;
      }
    }
  }

  .@{list-prefix-cls}-vertical {
    .@{list-prefix-cls}-item {
      flex-wrap: wrap-reverse;
      &-main {
        min-width: 220px;
      }
      &-extra {
        margin: auto auto 16px;
      }
    }
  }
}

@list-prefix-cls: ~'@{ant-prefix}-list';

.@{list-prefix-cls} {
  &-rtl {
    direction: rtl;
    text-align: right;

    // fix for virtual scroll style attribute > (direction:ltr)
    .ReactVirtualized__List .@{list-prefix-cls}-item {
      direction: rtl;
    }
  }

  &-pagination {
    .@{list-prefix-cls}-rtl & {
      text-align: left;
    }
  }

  &-item {
    &-meta {
      &-avatar {
        .@{list-prefix-cls}-rtl & {
          margin-right: 0;
          margin-left: @list-item-meta-avatar-margin-right;
        }
      }
    }

    &-action {
      .@{list-prefix-cls}-rtl & {
        margin-right: 48px;
        margin-left: 0;
      }

      & > li:first-child {
        .@{list-prefix-cls}-rtl & {
          padding-right: 0;
          padding-left: 8px;
        }
      }

      &-split {
        .@{list-prefix-cls}-rtl & {
          right: auto;
          left: 0;
        }
      }
    }
  }

  &-vertical &-item {
    &-extra {
      .@{list-prefix-cls}-rtl& {
        margin-right: 40px;
        margin-left: 0;
      }
    }

    &-action {
      .@{list-prefix-cls}-rtl& {
        margin-right: auto;
      }

      > li {
        &:first-child {
          .@{list-prefix-cls}-rtl & {
            padding-right: 0;
            padding-left: 16px;
          }
        }
      }
    }
  }

  // Horizontal
  &:not(.@{list-prefix-cls}-vertical) {
    .@{list-prefix-cls}-item-no-flex {
      .@{list-prefix-cls}-item-action {
        .@{list-prefix-cls}-rtl & {
          float: left;
        }
      }
    }
  }
}

// responsive
@media screen and (max-width: @screen-md) {
  .@{list-prefix-cls} {
    &-item {
      &-action {
        .@{list-prefix-cls}-rtl & {
          margin-right: 24px;
          margin-left: 0;
        }
      }
    }
  }

  .@{list-prefix-cls}-vertical {
    .@{list-prefix-cls}-item {
      &-extra {
        .@{list-prefix-cls}-rtl & {
          margin-right: 24px;
          margin-left: 0;
        }
      }
    }
  }
}

@media screen and (max-width: @screen-sm) {
  .@{list-prefix-cls} {
    &-item {
      &-action {
        .@{list-prefix-cls}-rtl & {
          margin-right: 22px;
          margin-left: 0;
        }
      }
    }
  }

  .@{list-prefix-cls}-vertical {
    .@{list-prefix-cls}-item {
      &-extra {
        // to override margins on rtl view
        .@{list-prefix-cls}-rtl& {
          margin: auto auto 16px;
        }
      }
    }
  }
}

// placeholder

@mention-prefix-cls: ~'@{ant-prefix}-mentions';

.@{mention-prefix-cls} {
  .reset-component;
  .input;

  position: relative;
  display: inline-block;
  height: auto;
  padding: 0;
  overflow: hidden;
  line-height: @line-height-base;
  white-space: pre-wrap;
  vertical-align: bottom;

  // =================== Status ===================
  &-disabled {
    > textarea {
      .disabled();
    }
  }

  &-focused {
    .active();
  }

  // ================= Input Area =================
  > textarea,
  &-measure {
    min-height: @input-height-base - 2px;
    margin: 0;
    padding: @input-padding-vertical-base @input-padding-horizontal-base;
    overflow: inherit;
    overflow-x: hidden;
    overflow-y: auto;
    font-weight: inherit;
    font-size: inherit;
    font-family: inherit;
    font-style: inherit;
    font-variant: inherit;
    font-size-adjust: inherit;
    font-stretch: inherit;
    line-height: inherit;
    direction: inherit;
    letter-spacing: inherit;
    white-space: inherit;
    text-align: inherit;
    vertical-align: top;
    word-wrap: break-word;
    word-break: inherit;
    tab-size: inherit;
  }

  > textarea {
    width: 100%;
    border: none;
    outline: none;
    resize: none;
    & when (@theme = dark) {
      background-color: transparent;
    }
    .placeholder();

    &:read-only {
      cursor: default;
    }
  }

  &-measure {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    color: transparent;
    pointer-events: none;

    > span {
      display: inline-block;
      min-height: 1em;
    }
  }

  // ================== Dropdown ==================
  &-dropdown {
    // Ref select dropdown style
    .reset-component;

    position: absolute;
    top: -9999px;
    left: -9999px;
    z-index: @zindex-dropdown;
    box-sizing: border-box;
    font-size: @font-size-base;
    font-variant: initial;
    background-color: @mentions-dropdown-bg;
    border-radius: @border-radius-base;
    outline: none;
    box-shadow: @box-shadow-base;

    &-hidden {
      display: none;
    }

    &-menu {
      max-height: 250px;
      margin-bottom: 0;
      padding-left: 0; // Override default ul/ol
      overflow: auto;
      list-style: none;
      outline: none;

      &-item {
        position: relative;
        display: block;
        min-width: 100px;
        padding: 5px @control-padding-horizontal;
        overflow: hidden;
        color: @text-color;
        font-weight: normal;
        line-height: @line-height-base;
        white-space: nowrap;
        text-overflow: ellipsis;
        cursor: pointer;
        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: @mentions-dropdown-menu-item-hover-bg;
            cursor: not-allowed;
          }
        }

        &-selected {
          color: @text-color;
          font-weight: @select-item-selected-font-weight;
          background-color: @background-color-light;
        }

        &-active {
          background-color: @item-hover-bg;
        }
      }
    }
  }
}

@mention-prefix-cls: ~'@{ant-prefix}-mentions';

.@{mention-prefix-cls} {
  &-rtl {
    direction: rtl;
  }
}

.@{menu-prefix-cls} {
  // Danger
  &-item-danger&-item {
    color: @menu-highlight-danger-color;

    &:hover,
    &-active {
      color: @menu-highlight-danger-color;
    }

    &:active {
      background: @menu-item-active-danger-bg;
    }

    &-selected {
      color: @menu-highlight-danger-color;
      > a,
      > a:hover {
        color: @menu-highlight-danger-color;
      }
    }

    .@{menu-prefix-cls}:not(.@{menu-prefix-cls}-horizontal) &-selected {
      background-color: @menu-item-active-danger-bg;
    }

    .@{menu-prefix-cls}-inline &::after {
      border-right-color: @menu-highlight-danger-color;
    }
  }

  // ==================== Dark ====================
  &-dark &-item-danger&-item {
    &,
    &:hover,
    & > a {
      color: @menu-dark-danger-color;
    }
  }

  &-dark&-dark:not(&-horizontal) &-item-danger&-item-selected {
    color: @menu-dark-highlight-color;
    background-color: @menu-dark-item-active-danger-bg;
  }
}

@menu-prefix-cls: ~'@{ant-prefix}-menu';

// default theme
.@{menu-prefix-cls} {
  .reset-component;

  margin-bottom: 0;
  padding-left: 0; // Override default ul/ol
  color: @menu-item-color;
  font-size: @menu-item-font-size;
  line-height: 0; // Fix display inline-block gap
  text-align: left;
  list-style: none;
  background: @menu-bg;
  outline: none;
  box-shadow: @box-shadow-base;
  transition: background 0.3s, width 0.3s cubic-bezier(0.2, 0, 0, 1) 0s;
  .clearfix;

  ul,
  ol {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  &-hidden {
    display: none;
  }

  &-item-group-title {
    height: @menu-item-group-height;
    padding: 8px 16px;
    color: @menu-item-group-title-color;
    font-size: @menu-item-group-title-font-size;
    line-height: @menu-item-group-height;
    transition: all 0.3s;
  }

  &-submenu,
  &-submenu-inline {
    transition: border-color 0.3s @ease-in-out, background 0.3s @ease-in-out,
      padding 0.15s @ease-in-out;
  }

  &-submenu-selected {
    color: @menu-highlight-color;
  }

  &-item:active,
  &-submenu-title:active {
    background: @menu-item-active-bg;
  }

  &-submenu &-sub {
    cursor: initial;
    transition: background 0.3s @ease-in-out, padding 0.3s @ease-in-out;
  }

  &-item a {
    color: @menu-item-color;
    &:hover {
      color: @menu-highlight-color;
    }
    &::before {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background-color: transparent;
      content: '';
    }
  }

  // https://github.com/ant-design/ant-design/issues/19809
  &-item > .@{ant-prefix}-badge a {
    color: @menu-item-color;
    &:hover {
      color: @menu-highlight-color;
    }
  }

  &-item-divider {
    height: 1px;
    overflow: hidden;
    line-height: 0;
    background-color: @border-color-split;
  }

  &-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 {
    min-width: 160px;
    max-height: ~"calc(100vh - 100px)";
    padding: 0;
    overflow: hidden;
    border-right: 0;
    transform-origin: 0 0;

    // https://github.com/ant-design/ant-design/issues/22244
    &:not(.zoom-big-enter-active):not(.zoom-big-leave-active) {
      overflow-x: hidden;
      overflow-y: auto;
    }

    .@{menu-prefix-cls}-item {
      left: 0;
      margin-left: 0;
      border-right: 0;
      &::after {
        border-right: 0;
      }
    }
    > .@{menu-prefix-cls}-item,
    > .@{menu-prefix-cls}-submenu {
      transform-origin: 0 0;
    }
  }

  &-horizontal&-sub {
    min-width: 114px; // in case of submenu width is too big: https://codesandbox.io/s/qvpwm6mk66
  }

  &-item,
  &-submenu-title {
    position: relative;
    display: block;
    margin: 0;
    padding: @menu-item-padding;
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.3s @ease-in-out, border-color 0.3s @ease-in-out,
      background 0.3s @ease-in-out, padding 0.15s @ease-in-out;
    .@{iconfont-css-prefix} {
      min-width: 14px;
      margin-right: @menu-icon-margin-right;
      font-size: @menu-icon-size;
      transition: font-size 0.15s @ease-out, margin 0.3s @ease-in-out;
      + span {
        opacity: 1;
        transition: opacity 0.3s @ease-in-out, width 0.3s @ease-in-out;
      }
    }

    &.@{menu-prefix-cls}-item-only-child {
      > .@{iconfont-css-prefix} {
        margin-right: 0;
      }
    }
  }

  & > &-item-divider {
    height: 1px;
    margin: 1px 0;
    padding: 0;
    overflow: hidden;
    line-height: 0;
    background-color: @border-color-split;
  }

  &-submenu {
    &-popup {
      position: absolute;
      z-index: @zindex-dropdown;
      border-radius: @border-radius-base;
      box-shadow: none;

      // https://github.com/ant-design/ant-design/issues/13955
      &::before {
        position: absolute;
        top: -7px;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: -1;
        width: 100%;
        height: 100%;
        opacity: 0.0001;
        content: ' ';
      }
    }

    // https://github.com/ant-design/ant-design/issues/13955
    &-placement-rightTop::before {
      top: 0;
      left: -7px;
    }

    > .@{menu-prefix-cls} {
      background-color: @menu-bg;
      border-radius: @border-radius-base;
      &-submenu-title::after {
        transition: transform 0.3s @ease-in-out;
      }
    }

    &-popup > .@{menu-prefix-cls} {
      background-color: @menu-popup-bg;
    }

    &-vertical,
    &-vertical-left,
    &-vertical-right,
    &-inline {
      > .@{menu-prefix-cls}-submenu-title .@{menu-prefix-cls}-submenu-arrow {
        position: absolute;
        top: 50%;
        right: 16px;
        width: 10px;
        transition: transform 0.3s @ease-in-out;

        &::before,
        &::after {
          position: absolute;
          width: 6px;
          height: 1.5px;
          // background + background-image to makes before & after cross have same color.
          // ref: https://github.com/ant-design/ant-design/issues/15910
          background-image: linear-gradient(to right, @menu-item-color, @menu-item-color);
          border-radius: 2px;
          transition: background 0.3s @ease-in-out, transform 0.3s @ease-in-out,
            top 0.3s @ease-in-out;
          content: '';
        }
        &::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);
        }
      }
    }

    &-vertical,
    &-vertical-left,
    &-vertical-right {
      > .@{menu-prefix-cls}-submenu-title .@{menu-prefix-cls}-submenu-arrow {
        &::before {
          transform: rotate(45deg) translateY(-2px);
        }
        &::after {
          transform: rotate(-45deg) translateY(2px);
        }
      }
    }

    &-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;
  }

  &-horizontal {
    line-height: @menu-horizontal-line-height;
    white-space: nowrap;
    border: 0;
    border-bottom: @border-width-base @border-style-base @border-color-split;
    box-shadow: none;

    > .@{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 {
        color: @menu-highlight-color;
        border-bottom: 2px solid @menu-highlight-color;
      }
    }

    > .@{menu-prefix-cls}-item {
      a {
        color: @menu-item-color;
        &:hover {
          color: @menu-highlight-color;
        }
        &::before {
          bottom: -2px;
        }
      }
      &-selected a {
        color: @menu-highlight-color;
      }
    }

    &::after {
      display: block;
      clear: both;
      height: 0;
      content: '\20';
    }
  }

  &-vertical,
  &-vertical-left,
  &-vertical-right,
  &-inline {
    .@{menu-prefix-cls}-item {
      position: relative;
      &::after {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        border-right: @menu-item-active-border-width solid @menu-highlight-color;
        transform: scaleY(0.0001);
        opacity: 0;
        transition: transform 0.15s @ease-out, opacity 0.15s @ease-out;
        content: '';
      }
    }

    .@{menu-prefix-cls}-item,
    .@{menu-prefix-cls}-submenu-title {
      height: @menu-item-height;
      margin-top: @menu-item-vertical-margin;
      margin-bottom: @menu-item-vertical-margin;
      padding: 0 16px;
      overflow: hidden;
      line-height: @menu-item-height;
      text-overflow: ellipsis;
    }

    // disable margin collapsed
    .@{menu-prefix-cls}-submenu {
      padding-bottom: 0.02px;
    }

    .@{menu-prefix-cls}-item:not(:last-child) {
      margin-bottom: @menu-item-boundary-margin;
    }

    > .@{menu-prefix-cls}-item,
    > .@{menu-prefix-cls}-submenu > .@{menu-prefix-cls}-submenu-title {
      height: @menu-inline-toplevel-item-height;
      line-height: @menu-inline-toplevel-item-height;
    }
  }

  &-vertical {
    .@{menu-prefix-cls}-submenu-title {
      padding-right: 34px;
    }
  }

  &-inline {
    width: 100%;
    .@{menu-prefix-cls}-selected,
    .@{menu-prefix-cls}-item-selected {
      &::after {
        transform: scaleY(1);
        opacity: 1;
        transition: transform 0.15s @ease-in-out, opacity 0.15s @ease-in-out;
      }
    }

    .@{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;
      padding: 0 (@menu-collapsed-width - @menu-icon-size-lg) / 2;
      text-overflow: clip;
      .@{menu-prefix-cls}-submenu-arrow {
        display: none;
      }
      .@{iconfont-css-prefix} {
        margin: 0;
        font-size: @menu-icon-size-lg;
        line-height: @menu-item-height;
        + span {
          display: inline-block;
          max-width: 0;
          opacity: 0;
        }
      }
    }

    .@{iconfont-css-prefix} {
      display: inline-block;
    }

    &-tooltip {
      pointer-events: none;
      .@{iconfont-css-prefix} {
        display: none;
      }
      a {
        color: @text-color-dark;
      }
    }

    .@{menu-prefix-cls}-item-group-title {
      padding-right: 4px;
      padding-left: 4px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }

  &-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;
  }

  &-root&-inline-collapsed {
    .@{menu-prefix-cls}-item,
    .@{menu-prefix-cls}-submenu .@{menu-prefix-cls}-submenu-title {
      > .@{menu-prefix-cls}-inline-collapsed-noicon {
        font-size: @menu-icon-size-lg;
        text-align: center;
      }
    }
  }

  &-sub&-inline {
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    & > .@{menu-prefix-cls}-item,
    & > .@{menu-prefix-cls}-submenu > .@{menu-prefix-cls}-submenu-title {
      height: @menu-item-height;
      line-height: @menu-item-height;
      list-style-position: inside;
      list-style-type: disc;
    }

    & .@{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;
    background: none;
    border-color: transparent !important;
    cursor: not-allowed;
    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;
        }
      }
    }
  }
}

// Integration with header element so menu items have the same height
.@{ant-prefix}-layout-header {
  .@{menu-prefix-cls} {
    line-height: inherit;
  }
}

.@{menu-prefix-cls} {
  // dark theme
  &&-dark,
  &-dark &-sub,
  &&-dark &-sub {
    color: @menu-dark-color;
    background: @menu-dark-bg;
    .@{menu-prefix-cls}-submenu-title .@{menu-prefix-cls}-submenu-arrow {
      opacity: 0.45;
      transition: all 0.3s;
      &::after,
      &::before {
        background: @menu-dark-arrow-color;
      }
    }
  }

  &-dark&-submenu-popup {
    background: transparent;
  }

  &-dark &-inline&-sub {
    background: @menu-dark-submenu-bg;
  }

  &-dark&-horizontal {
    border-bottom: 0;
  }

  &-dark&-horizontal > &-item,
  &-dark&-horizontal > &-submenu {
    top: 0;
    margin-top: 0;
    border-color: @menu-dark-bg;
    border-bottom: 0;
  }

  &-dark&-horizontal > &-item > a::before {
    bottom: 0;
  }

  &-dark &-item,
  &-dark &-item-group-title,
  &-dark &-item > a,
  &-dark &-item > span > 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 {
    left: 0;
    margin-left: 0;
    border-right: 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 {
    color: @menu-dark-highlight-color;
    background-color: transparent;
    > a,
    > span > 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:hover {
    background-color: @menu-dark-item-hover-bg;
  }

  &-dark&-dark:not(&-horizontal) &-item-selected {
    background-color: @menu-dark-item-active-bg;
  }

  &-dark &-item-selected {
    color: @menu-dark-highlight-color;
    border-right: 0;
    &::after {
      border-right: 0;
    }
    > a,
    > span > a,
    > a:hover,
    > span > a:hover {
      color: @menu-dark-highlight-color;
    }
    .@{iconfont-css-prefix} {
      color: @menu-dark-selected-item-icon-color;
    }
    .@{iconfont-css-prefix} + span {
      color: @menu-dark-selected-item-text-color;
    }
  }

  &&-dark &-item-selected,
  &-submenu-popup&-dark &-item-selected {
    background-color: @menu-dark-item-active-bg;
  }

  // Disabled state sets text to dark gray and nukes hover/tab effects
  &-dark &-item-disabled,
  &-dark &-submenu-disabled {
    &,
    > a,
    > span > a {
      color: @disabled-color-dark !important;
      opacity: 0.8;
    }
    > .@{menu-prefix-cls}-submenu-title {
      color: @disabled-color-dark !important;
      > .@{menu-prefix-cls}-submenu-arrow {
        &::before,
        &::after {
          background: @disabled-color-dark !important;
        }
      }
    }
  }
}

@menu-prefix-cls: ~'@{ant-prefix}-menu';

.@{menu-prefix-cls} {
  &-rtl {
    direction: rtl;
    text-align: right;
  }

  &-item-group-title {
    .@{menu-prefix-cls}-rtl & {
      text-align: right;
    }
  }

  &-inline,
  &-vertical {
    .@{menu-prefix-cls}-rtl& {
      border-right: none;
      border-left: @border-width-base @border-style-base @border-color-split;
    }
  }

  &-dark&-inline,
  &-dark&-vertical {
    .@{menu-prefix-cls}-rtl& {
      border-left: none;
    }
  }

  &-vertical&-sub,
  &-vertical-left&-sub,
  &-vertical-right&-sub {
    .@{menu-prefix-cls}-rtl& {
      transform-origin: top right;
    }

    > .@{menu-prefix-cls}-item,
    > .@{menu-prefix-cls}-submenu {
      .@{menu-prefix-cls}-rtl& {
        transform-origin: top right;
      }
    }
  }

  &-item,
  &-submenu-title {
    .@{iconfont-css-prefix} {
      .@{menu-prefix-cls}-rtl & {
        margin-right: auto;
        margin-left: @menu-icon-margin-right;
      }
    }

    &.@{menu-prefix-cls}-item-only-child {
      > .@{iconfont-css-prefix} {
        .@{menu-prefix-cls}-rtl & {
          margin-left: 0;
        }
      }
    }
  }

  &-submenu {
    &-vertical,
    &-vertical-left,
    &-vertical-right,
    &-inline {
      > .@{menu-prefix-cls}-submenu-title .@{menu-prefix-cls}-submenu-arrow {
        .@{menu-prefix-cls}-rtl & {
          right: auto;
          left: 16px;
        }
      }
    }

    &-vertical,
    &-vertical-left,
    &-vertical-right {
      > .@{menu-prefix-cls}-submenu-title .@{menu-prefix-cls}-submenu-arrow {
        &::before {
          .@{menu-prefix-cls}-rtl & {
            transform: rotate(-45deg) translateY(-2px);
          }
        }
        &::after {
          .@{menu-prefix-cls}-rtl & {
            transform: rotate(45deg) translateY(2px);
          }
        }
      }
    }
  }

  &-vertical,
  &-vertical-left,
  &-vertical-right,
  &-inline {
    .@{menu-prefix-cls}-item {
      &::after {
        .@{menu-prefix-cls}-rtl& {
          right: auto;
          left: 0;
        }
      }
    }

    .@{menu-prefix-cls}-item,
    .@{menu-prefix-cls}-submenu-title {
      .@{menu-prefix-cls}-rtl& {
        text-align: right;
      }
    }
  }

  &-inline {
    .@{menu-prefix-cls}-submenu-title {
      .@{menu-prefix-cls}-rtl& {
        padding-right: 0;
        padding-left: 34px;
      }
    }
  }

  &-vertical {
    .@{menu-prefix-cls}-submenu-title {
      .@{menu-prefix-cls}-rtl& {
        padding-right: 16px;
        padding-left: 34px;
      }
    }
  }

  &-inline-collapsed&-vertical {
    .@{menu-prefix-cls}-submenu-title {
      .@{menu-prefix-cls}-rtl& {
        padding: 0 (@menu-collapsed-width - @menu-icon-size-lg) / 2;
      }
    }
  }

  &-item-group-list {
    .@{menu-prefix-cls}-item,
    .@{menu-prefix-cls}-submenu-title {
      .@{menu-prefix-cls}-rtl & {
        padding: 0 28px 0 16px;
      }
    }
  }

  &-sub&-inline {
    border: 0;
    & .@{menu-prefix-cls}-item-group-title {
      .@{menu-prefix-cls}-rtl& {
        padding-right: 32px;
        padding-left: 0;
      }
    }
  }
}

@message-prefix-cls: ~'@{ant-prefix}-message';

.@{message-prefix-cls} {
  .reset-component;

  position: fixed;
  top: 16px;
  left: 0;
  z-index: @zindex-message;
  width: 100%;
  pointer-events: none;

  &-notice {
    padding: 8px;
    text-align: center;
    &:first-child {
      margin-top: -8px;
    }
  }

  &-notice-content {
    display: inline-block;
    padding: @message-notice-content-padding;
    background: @message-notice-content-bg;
    border-radius: @border-radius-base;
    box-shadow: @shadow-2;
    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} {
    position: relative;
    top: 1px;
    margin-right: 8px;
    font-size: @font-size-lg;
  }

  &-notice.move-up-leave.move-up-leave-active {
    animation-name: MessageMoveOut;
    animation-duration: 0.3s;
  }
}

@keyframes MessageMoveOut {
  0% {
    max-height: 150px;
    padding: 8px;
    opacity: 1;
  }
  100% {
    max-height: 0;
    padding: 0;
    opacity: 0;
  }
}

@message-prefix-cls: ~'@{ant-prefix}-message';

.@{message-prefix-cls}-rtl {
  direction: rtl;

  span {
    direction: rtl;
  }

  .@{iconfont-css-prefix} {
    margin-right: 0;
    margin-left: 8px;
  }
}

@dialog-prefix-cls: ~'@{ant-prefix}-modal';
@table-prefix-cls: ~'@{ant-prefix}-table';

.@{dialog-prefix-cls} {
  .reset-component;

  position: relative;
  top: 100px;
  width: auto;
  margin: 0 auto;
  padding-bottom: 24px;
  pointer-events: none;

  &-wrap {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: @zindex-modal;
    overflow: auto;
    outline: 0;
    -webkit-overflow-scrolling: touch;
  }

  &-title {
    margin: 0;
    color: @modal-heading-color;
    font-weight: 500;
    font-size: @modal-header-title-font-size;
    line-height: @modal-header-title-line-height;
    word-wrap: break-word;
  }

  &-content {
    position: relative;
    background-color: @modal-content-bg;
    background-clip: padding-box;
    border: 0;
    border-radius: @border-radius-base;
    box-shadow: @shadow-2;
    pointer-events: auto;
  }

  &-close {
    position: absolute;
    top: 0;
    right: 0;
    z-index: @zindex-popup-close;
    padding: 0;
    color: @modal-close-color;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    background: transparent;
    border: 0;
    outline: 0;
    cursor: pointer;
    transition: color 0.3s;

    &-x {
      display: block;
      width: @modal-header-close-size;
      height: @modal-header-close-size;
      font-size: @font-size-lg;
      font-style: normal;
      line-height: @modal-header-close-size;
      text-align: center;
      text-transform: none;
      text-rendering: auto;
    }

    &:focus,
    &:hover {
      color: @icon-color-hover;
      text-decoration: none;
    }
  }

  &-header {
    padding: @modal-header-padding;
    color: @text-color;
    background: @modal-header-bg;
    border-bottom: @modal-header-border-width @modal-header-border-style @modal-header-border-color-split;
    border-radius: @border-radius-base @border-radius-base 0 0;
  }

  &-body {
    padding: @modal-body-padding;
    font-size: @font-size-base;
    line-height: @line-height-base;
    word-wrap: break-word;
  }

  &-footer {
    padding: @modal-footer-padding-vertical @modal-footer-padding-horizontal;
    text-align: right;
    background: @modal-footer-bg;
    border-top: @modal-footer-border-width @modal-footer-border-style @modal-footer-border-color-split;
    border-radius: 0 0 @border-radius-base @border-radius-base;

    button + button {
      margin-bottom: 0;
      margin-left: 8px;
    }
  }

  &.zoom-enter,
  &.zoom-appear {
    transform: none; // reset scale avoid mousePosition bug
    opacity: 0;
    animation-duration: @animation-duration-slow;
    user-select: none; // https://github.com/ant-design/ant-design/issues/11777
  }

  &-mask {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: @zindex-modal-mask;
    height: 100%;
    background-color: @modal-mask-bg;
    filter: ~'alpha(opacity=50)';

    &-hidden {
      display: none;
    }
  }

  &-open {
    overflow: hidden;
  }
}

.@{dialog-prefix-cls}-centered {
  text-align: center;
  &::before {
    display: inline-block;
    width: 0;
    height: 100%;
    vertical-align: middle;
    content: '';
  }
  .@{dialog-prefix-cls} {
    top: 0;
    display: inline-block;
    text-align: left;
    vertical-align: middle;
  }
}

@media (max-width: @screen-sm-max) {
  .@{dialog-prefix-cls} {
    max-width: ~"calc(100vw - 16px)";
    margin: 8px auto;
  }
  .@{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: @modal-confirm-body-padding;
  }

  &-body-wrapper {
    .clearfix();
  }

  &-body {
    .@{confirm-prefix-cls}-title {
      display: block;
      // create BFC to avoid
      // https://user-images.githubusercontent.com/507615/37702510-ba844e06-2d2d-11e8-9b67-8e19be57f445.png
      overflow: hidden;
      color: @heading-color;
      font-weight: 500;
      font-size: @font-size-lg;
      line-height: 1.4;
    }

    .@{confirm-prefix-cls}-content {
      margin-top: 8px;
      color: @text-color;
      font-size: @font-size-base;
    }

    > .@{iconfont-css-prefix} {
      float: left;
      margin-right: 16px;
      font-size: 22px;

      // `content` after `icon` should set marginLeft
      + .@{confirm-prefix-cls}-title + .@{confirm-prefix-cls}-content {
        margin-left: 38px;
      }
    }
  }

  .@{confirm-prefix-cls}-btns {
    float: right;
    margin-top: 24px;

    button + button {
      margin-bottom: 0;
      margin-left: 8px;
    }
  }

  &-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;
  }
}

.popover-customize-bg(@dialog-prefix-cls, @popover-background);

@dialog-prefix-cls: ~'@{ant-prefix}-modal';
@confirm-prefix-cls: ~'@{ant-prefix}-modal-confirm';
@dialog-wrap-rtl-cls: ~'@{dialog-prefix-cls}-wrap-rtl';

.@{dialog-prefix-cls} {
  &-wrap {
    &-rtl {
      direction: rtl;
    }
  }

  &-close {
    .@{dialog-wrap-rtl-cls} & {
      right: initial;
      left: 0;
    }
  }

  &-footer {
    .@{dialog-wrap-rtl-cls} & {
      text-align: left;
    }
    button + button {
      .@{dialog-wrap-rtl-cls} & {
        margin-right: 8px;
        margin-left: 0;
      }
    }
  }

  &-confirm {
    &-body {
      .@{dialog-wrap-rtl-cls} & {
        direction: rtl;
      }
      > .@{iconfont-css-prefix} {
        .@{dialog-wrap-rtl-cls} & {
          float: right;
          margin-right: 0;
          margin-left: 16px;
        }
        + .@{confirm-prefix-cls}-title + .@{confirm-prefix-cls}-content {
          .@{dialog-wrap-rtl-cls} & {
            margin-right: 38px;
            margin-left: 0;
          }
        }
      }
    }
    &-btns {
      .@{dialog-wrap-rtl-cls} & {
        float: left;
      }
      button + button {
        .@{dialog-wrap-rtl-cls} & {
          margin-right: 8px;
          margin-left: 0;
        }
      }
    }
  }
}

.@{dialog-prefix-cls}-centered {
  .@{dialog-prefix-cls} {
    .@{dialog-wrap-rtl-cls}& {
      text-align: right;
    }
  }
}

.popover-customize-bg(@notification-prefix-cls, @popover-background);

@notification-prefix-cls: ~'@{ant-prefix}-notification';
@notification-width: 384px;
@notification-padding: @notification-padding-vertical @notification-padding-horizontal;
@notification-margin-bottom: 16px;

.@{notification-prefix-cls} {
  .reset-component;

  position: fixed;
  z-index: @zindex-notification;
  max-width: ~'calc(100vw - 32px)';
  margin-right: 24px;

  &-topLeft,
  &-bottomLeft {
    margin-right: 0;
    margin-left: 24px;

    .@{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;
  }

  &-hook-holder,
  &-notice {
    position: relative;
    width: @notification-width;
    margin-bottom: @notification-margin-bottom;
    margin-left: auto;
    overflow: hidden;
    background: @notification-bg;
    border-radius: @border-radius-base;
    box-shadow: @shadow-2;

    .@{notification-prefix-cls}-topLeft &,
    .@{notification-prefix-cls}-bottomLeft & {
      margin-right: auto;
      margin-left: 0;
    }
  }

  &-hook-holder > &-notice {
    margin-bottom: 0;
    box-shadow: none;
  }

  &-notice {
    padding: @notification-padding;
    line-height: @line-height-base;

    &-message {
      display: inline-block;
      margin-bottom: 8px;
      color: @heading-color;
      font-size: @font-size-lg;
      line-height: 24px;

      // https://github.com/ant-design/ant-design/issues/5846#issuecomment-296244140
      &-single-line-auto-margin {
        display: block;
        width: ~'calc(@{notification-width} - @{notification-padding-horizontal} * 2 - 24px - 48px - 100%)';
        max-width: 4px;
        background-color: transparent;
        pointer-events: none;
        &::before {
          display: block;
          content: '';
        }
      }
    }

    &-description {
      font-size: @font-size-base;
    }

    &-closable &-message {
      padding-right: 24px;
    }

    &-with-icon &-message {
      margin-bottom: 4px;
      margin-left: 48px;
      font-size: @font-size-lg;
    }

    &-with-icon &-description {
      margin-left: 48px;
      font-size: @font-size-base;
    }

    // Icon & color style in different selector level
    // https://github.com/ant-design/ant-design/issues/16503
    // https://github.com/ant-design/ant-design/issues/15512
    &-icon {
      position: absolute;
      margin-left: 4px;
      font-size: 24px;
      line-height: 24px;
    }

    .@{iconfont-css-prefix}&-icon {
      &-success {
        color: @success-color;
      }
      &-info {
        color: @info-color;
      }
      &-warning {
        color: @warning-color;
      }
      &-error {
        color: @error-color;
      }
    }

    &-close {
      position: absolute;
      top: 16px;
      right: 22px;
      color: @text-color-secondary;
      outline: none;

      &:hover {
        & when (@theme = dark) {
          color: fade(@white, 85%);
        }
        & when not (@theme = dark) {
          color: shade(@text-color-secondary, 40%);
        }
      }
    }

    &-btn {
      float: right;
      margin-top: 16px;
    }
  }

  .notification-fade-effect {
    animation-duration: 0.24s;
    animation-timing-function: @ease-in-out;
    animation-fill-mode: both;
  }

  &-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% {
    left: @notification-width;
    opacity: 0;
  }
  100% {
    left: 0;
    opacity: 1;
  }
}

@keyframes NotificationLeftFadeIn {
  0% {
    right: @notification-width;
    opacity: 0;
  }
  100% {
    right: 0;
    opacity: 1;
  }
}

@keyframes NotificationFadeOut {
  0% {
    max-height: 150px;
    margin-bottom: @notification-margin-bottom;
    padding-top: @notification-padding-vertical;
    padding-bottom: @notification-padding-vertical;
    opacity: 1;
  }
  100% {
    max-height: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
  }
}

@notification-prefix-cls: ~'@{ant-prefix}-notification';

.@{notification-prefix-cls} {
  &-rtl {
    direction: rtl;
  }

  &-notice {
    &-closable &-message {
      .@{notification-prefix-cls}-rtl & {
        padding-right: 0;
        padding-left: 24px;
      }
    }

    &-with-icon &-message {
      .@{notification-prefix-cls}-rtl & {
        margin-right: 48px;
        margin-left: 0;
      }
    }

    &-with-icon &-description {
      .@{notification-prefix-cls}-rtl & {
        margin-right: 48px;
        margin-left: 0;
      }
    }

    &-icon {
      .@{notification-prefix-cls}-rtl & {
        margin-right: 4px;
        margin-left: 0;
      }
    }

    &-close {
      .@{notification-prefix-cls}-rtl & {
        right: auto;
        left: 22px;
      }
    }

    &-btn {
      .@{notification-prefix-cls}-rtl & {
        float: left;
      }
    }
  }
}

@pageheader-prefix-cls: ~'@{ant-prefix}-page-header';

.@{pageheader-prefix-cls} {
  .reset-component;
  position: relative;
  padding: @page-header-padding-vertical @page-header-padding;
  background-color: @component-background;

  &-ghost {
    background-color: @page-header-ghost-bg;
  }

  &.has-breadcrumb {
    padding-top: @page-header-padding-breadcrumb;
  }

  &.has-footer {
    padding-bottom: 0;
  }

  &-back {
    margin-right: @margin-md;
    font-size: 16px;
    line-height: 1;

    &-button {
      .operation-unit();
      color: @page-header-back-color;
      cursor: pointer;
    }
  }

  .@{ant-prefix}-divider-vertical {
    height: 14px;
    margin: 0 @margin-sm;
    vertical-align: middle;
  }

  .@{ant-prefix}-breadcrumb + &-heading {
    margin-top: @margin-xs;
  }

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

  &-heading {
    display: flex;
    justify-content: space-between;

    &-left {
      display: flex;
      align-items: center;
      margin: (@margin-xs / 2) 0;
      overflow: hidden;
    }

    &-title {
      margin-right: @margin-sm;
      margin-bottom: 0;
      color: @heading-color;
      font-weight: 600;
      font-size: @page-header-heading-title;
      line-height: 32px;
      .text-overflow-ellipsis;
    }

    .@{ant-prefix}-avatar {
      margin-right: @margin-sm;
    }

    &-sub-title {
      margin-right: @margin-sm;
      color: @text-color-secondary;
      font-size: @page-header-heading-sub-title;
      line-height: @line-height-base;
      .text-overflow-ellipsis;
    }

    &-extra {
      margin: (@margin-xs / 2) 0;
      white-space: nowrap;

      > * {
        margin-left: @margin-sm;
        white-space: unset;
      }
      > *:first-child {
        margin-left: 0;
      }
    }
  }

  &-content {
    padding-top: @page-header-content-padding-vertical;
  }

  &-footer {
    margin-top: @margin-md;
    .@{ant-prefix}-tabs {
      > .@{ant-prefix}-tabs-nav {
        margin: 0;
        &::before {
          border: none;
        }
      }

      .@{ant-prefix}-tabs-tab {
        padding: @tabs-horizontal-padding-sm;
        font-size: @page-header-tabs-tab-font-size;
      }
    }
  }

  &-compact &-heading {
    flex-wrap: wrap;
  }
}

@pageheader-prefix-cls: ~'@{ant-prefix}-page-header';

.@{pageheader-prefix-cls} {
  &-rtl {
    direction: rtl;
  }

  &-back {
    .@{pageheader-prefix-cls}-rtl & {
      float: right;
      margin-right: 0;
      margin-left: 16px;
    }
  }

  &-heading {
    &-title {
      .@{pageheader-prefix-cls}-rtl & {
        margin-right: 0;
        margin-left: @margin-sm;
      }
    }

    .@{ant-prefix}-avatar {
      .@{pageheader-prefix-cls}-rtl & {
        margin-right: 0;
        margin-left: @margin-sm;
      }
    }

    &-sub-title {
      .@{pageheader-prefix-cls}-rtl & {
        float: right;
        margin-right: 0;
        margin-left: 12px;
      }
    }

    &-tags {
      .@{pageheader-prefix-cls}-rtl & {
        float: right;
      }
    }

    &-extra {
      .@{pageheader-prefix-cls}-rtl & {
        float: left;
      }

      > * {
        .@{pageheader-prefix-cls}-rtl & {
          margin-right: @margin-sm;
          margin-left: 0;
        }
      }
      > *:first-child {
        .@{pageheader-prefix-cls}-rtl & {
          margin-right: 0;
        }
      }
    }
  }

  &-footer {
    .@{ant-prefix}-tabs-bar {
      .@{ant-prefix}-tabs-nav {
        .@{pageheader-prefix-cls}-rtl & {
          float: right;
        }
      }
    }
  }
}

@pagination-prefix-cls: ~'@{ant-prefix}-pagination';

.@{pagination-prefix-cls} {
  .reset-component;

  ul,
  ol {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  &::after {
    display: block;
    clear: both;
    height: 0;
    overflow: hidden;
    visibility: hidden;
    content: ' ';
  }

  &-total-text {
    display: inline-block;
    height: @pagination-item-size;
    margin-right: 8px;
    line-height: @pagination-item-size - 2px;
    vertical-align: middle;
  }

  &-item {
    display: inline-block;
    min-width: @pagination-item-size;
    height: @pagination-item-size;
    margin-right: 8px;
    font-family: @pagination-font-family;
    line-height: @pagination-item-size - 2px;
    text-align: center;
    vertical-align: middle;
    list-style: none;
    background-color: @pagination-item-bg;
    border: @border-width-base @border-style-base @border-color-base;
    border-radius: @border-radius-base;
    outline: 0;
    cursor: pointer;
    user-select: none;

    a {
      display: block;
      padding: 0 6px;
      color: @text-color;
      transition: none;

      &:hover {
        text-decoration: none;
      }
    }

    &:focus,
    &:hover {
      border-color: @primary-color;
      transition: all 0.3s;
      a {
        color: @primary-color;
      }
    }

    &-active {
      font-weight: @pagination-font-weight-active;
      background: @pagination-item-bg-active;
      border-color: @primary-color;

      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 {
        color: @primary-color;
        font-size: @font-size-sm;
        letter-spacing: -1px;
        opacity: 0;
        transition: all 0.2s;
        &-svg {
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
          margin: auto;
        }
      }

      .@{pagination-prefix-cls}-item-ellipsis {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        display: block;
        margin: auto;
        color: @disabled-color;
        letter-spacing: 2px;
        text-align: center;
        text-indent: 0.13em;
        opacity: 1;
        transition: all 0.2s;
      }
    }

    &: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 {
    display: inline-block;
    min-width: @pagination-item-size;
    height: @pagination-item-size;
    color: @text-color;
    font-family: @pagination-font-family;
    line-height: @pagination-item-size;
    text-align: center;
    vertical-align: middle;
    list-style: none;
    border-radius: @border-radius-base;
    cursor: pointer;
    transition: all 0.3s;
  }

  &-prev,
  &-next {
    outline: 0;

    button {
      color: @text-color;
      user-select: none;
    }

    &:hover button {
      border-color: @primary-5;
    }

    .@{pagination-prefix-cls}-item-link {
      display: block;
      width: 100%;
      height: 100%;
      font-size: 12px;
      text-align: center;
      background-color: @pagination-item-link-bg;
      border: @border-width-base @border-style-base @border-color-base;
      border-radius: @border-radius-base;
      outline: none;
      transition: all 0.3s;
    }

    &:focus .@{pagination-prefix-cls}-item-link,
    &:hover .@{pagination-prefix-cls}-item-link {
      color: @primary-color;
      border-color: @primary-color;
    }
  }

  &-disabled {
    &,
    &:hover,
    &:focus {
      cursor: not-allowed;
      .@{pagination-prefix-cls}-item-link {
        color: @disabled-color;
        border-color: @border-color-base;
        cursor: not-allowed;
      }
    }
  }

  &-slash {
    margin: 0 10px 0 5px;
  }

  &-options {
    display: inline-block;
    margin-left: 16px;
    vertical-align: middle;

    // IE11 css hack. `*::-ms-backdrop,` is a must have
    @media all and (-ms-high-contrast: none) {
      *::-ms-backdrop,
      & {
        vertical-align: top;
      }
    }

    &-size-changer.@{ant-prefix}-select {
      display: inline-block;
      width: auto;
      margin-right: 8px;
    }

    &-quick-jumper {
      display: inline-block;
      height: @input-height-base;
      line-height: @input-height-base;
      vertical-align: top;

      input {
        .input;

        width: 50px;
        margin: 0 8px;
      }
    }
  }

  &-simple &-prev,
  &-simple &-next {
    height: @pagination-item-size-sm;
    line-height: @pagination-item-size-sm;
    vertical-align: top;
    .@{pagination-prefix-cls}-item-link {
      height: @pagination-item-size-sm;
      background-color: transparent;
      border: 0;
      &::after {
        height: @pagination-item-size-sm;
        line-height: @pagination-item-size-sm;
      }
    }
  }

  &-simple &-simple-pager {
    display: inline-block;
    height: @pagination-item-size-sm;
    margin-right: 8px;

    input {
      box-sizing: border-box;
      height: 100%;
      margin-right: 8px;
      padding: 0 6px;
      text-align: center;
      background-color: @pagination-item-input-bg;
      border: @border-width-base @border-style-base @border-color-base;
      border-radius: @border-radius-base;
      outline: none;
      transition: border-color 0.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 {
    min-width: @pagination-item-size-sm;
    height: @pagination-item-size-sm;
    margin: 0;
    line-height: @pagination-item-size-sm - 2px;
  }

  &.mini &-item:not(&-item-active) {
    background: transparent;
    border-color: transparent;
  }

  &.mini &-prev,
  &.mini &-next {
    min-width: @pagination-item-size-sm;
    height: @pagination-item-size-sm;
    margin: 0;
    line-height: @pagination-item-size-sm;
  }

  &.mini &-prev &-item-link,
  &.mini &-next &-item-link {
    background: transparent;
    border-color: transparent;
    &::after {
      height: @pagination-item-size-sm;
      line-height: @pagination-item-size-sm;
    }
  }

  &.mini &-jump-prev,
  &.mini &-jump-next {
    height: @pagination-item-size-sm;
    margin-right: 0;
    line-height: @pagination-item-size-sm;
  }

  &.mini &-options {
    margin-left: 2px;

    &-size-changer {
      top: @pagination-mini-options-size-changer-top;
    }

    &-quick-jumper {
      height: @pagination-item-size-sm;
      line-height: @pagination-item-size-sm;

      input {
        .input-sm;

        width: 44px;
      }
    }
  }

  // ============================ Disabled ============================
  &&-disabled {
    cursor: not-allowed;

    .@{pagination-prefix-cls}-item {
      background: @disabled-bg;
      border-color: @border-color-base;
      cursor: not-allowed;

      a {
        color: @disabled-color;
        background: transparent;
        border: none;
        cursor: not-allowed;
      }

      &-active {
        background: @pagination-item-disabled-bg-active;
        border-color: transparent;
        a {
          color: @pagination-item-disabled-color-active;
        }
      }
    }

    .@{pagination-prefix-cls}-item-link {
      color: @disabled-color;
      background: @disabled-bg;
      border-color: @border-color-base;
      cursor: not-allowed;
    }

    .@{pagination-prefix-cls}-item-link-icon {
      opacity: 0;
    }

    .@{pagination-prefix-cls}-item-ellipsis {
      opacity: 1;
    }
  }
}

@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;
  }
}

@pagination-prefix-cls: ~'@{ant-prefix}-pagination';

.@{pagination-prefix-cls} {
  &-rtl {
    direction: rtl;
  }

  &-total-text {
    .@{pagination-prefix-cls}-rtl & {
      margin-right: 0;
      margin-left: 8px;
    }
  }

  &-item {
    .@{pagination-prefix-cls}-rtl & {
      margin-right: 0;
      margin-left: 8px;
    }
  }

  &-prev,
  &-jump-prev,
  &-jump-next {
    .@{pagination-prefix-cls}-rtl & {
      margin-right: 0;
      margin-left: 8px;
    }
  }

  &-slash {
    .@{pagination-prefix-cls}-rtl & {
      margin: 0 5px 0 10px;
    }
  }

  &-options {
    .@{pagination-prefix-cls}-rtl & {
      margin-right: 16px;
      margin-left: 0;
    }

    &-size-changer.@{ant-prefix}-select {
      .@{pagination-prefix-cls}-rtl & {
        margin-right: 0;
        margin-left: 8px;
      }
    }
  }

  &-simple &-simple-pager {
    .@{pagination-prefix-cls}-rtl& {
      margin-right: 0;
      margin-left: 8px;
    }

    input {
      .@{pagination-prefix-cls}-rtl& {
        margin-right: 0;
        margin-left: 8px;
      }
    }
  }

  &.mini &-options {
    .@{pagination-prefix-cls}-rtl& {
      margin-right: 2px;
      margin-left: 0;
    }
  }
}

@popconfirm-prefix-cls: ~'@{ant-prefix}-popconfirm';

.@{popconfirm-prefix-cls} {
  z-index: @zindex-popoconfirm;
}

@popover-prefix-cls: ~'@{ant-prefix}-popover';

.@{popover-prefix-cls} {
  .reset-component;

  position: absolute;
  top: 0;
  left: 0;
  z-index: @zindex-popover;
  font-weight: normal;
  white-space: normal;
  text-align: left;
  cursor: auto;
  user-select: text;

  &::after {
    position: absolute;
    background: fade(@white, 1%);
    content: '';
  }

  &-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;
    box-shadow: ~'0 0 8px @{shadow-color} \9';
  }

  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    /* IE10+ */
    &-inner {
      box-shadow: @box-shadow-base;
    }
  }

  &-title {
    min-width: @popover-min-width;
    min-height: @popover-min-height;
    margin: 0; // reset heading margin
    padding: 5px @popover-padding-horizontal 4px;
    color: @heading-color;
    font-weight: 500;
    border-bottom: 1px solid @border-color-split;
  }

  &-inner-content {
    padding: @padding-sm @popover-padding-horizontal;
    color: @popover-color;
  }

  &-message {
    position: relative;
    padding: 4px 0 12px;
    color: @popover-color;
    font-size: @font-size-base;
    > .@{iconfont-css-prefix} {
      position: absolute;
      top: 4px + (@line-height-base * @font-size-base - @font-size-base)/2; // 4px for padding-top, 4px for vertical middle;
      color: @warning-color;
      font-size: @font-size-base;
    }
    &-title {
      padding-left: @font-size-base + 8px;
    }
  }

  &-buttons {
    margin-bottom: 4px;
    text-align: right;

    button {
      margin-left: 8px;
    }
  }

  // Arrows
  // .popover-arrow is outer, .popover-arrow:after is inner

  &-arrow {
    position: absolute;
    display: block;
    width: sqrt(@popover-arrow-width * @popover-arrow-width * 2);
    height: sqrt(@popover-arrow-width * @popover-arrow-width * 2);
    background: transparent;
    border-style: solid;
    border-width: sqrt(@popover-arrow-width * @popover-arrow-width * 2) / 2;
    transform: rotate(45deg);
  }

  &-placement-top > &-content > &-arrow,
  &-placement-topLeft > &-content > &-arrow,
  &-placement-topRight > &-content > &-arrow {
    bottom: @popover-distance - @popover-arrow-width + 2.2px;
    border-top-color: transparent;
    border-right-color: @popover-bg;
    border-bottom-color: @popover-bg;
    border-left-color: transparent;
    box-shadow: 3px 3px 7px fade(@black, 7%);
  }
  &-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;
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: @popover-bg;
    border-left-color: @popover-bg;
    box-shadow: -3px 3px 7px fade(@black, 7%);
  }
  &-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;
    border-top-color: @popover-bg;
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-left-color: @popover-bg;
    box-shadow: -2px -2px 5px fade(@black, 6%);
  }
  &-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;
    border-top-color: @popover-bg;
    border-right-color: @popover-bg;
    border-bottom-color: transparent;
    border-left-color: transparent;
    box-shadow: 3px -3px 7px fade(@black, 7%);
  }
  &-placement-left > &-content > &-arrow {
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
  }
  &-placement-leftTop > &-content > &-arrow {
    top: 12px;
  }
  &-placement-leftBottom > &-content > &-arrow {
    bottom: 12px;
  }
}

@popover-prefix-cls: ~'@{ant-prefix}-popover';

.@{popover-prefix-cls} {
  &-rtl {
    direction: rtl;
    text-align: right;
  }

  &-message {
    &-title {
      .@{popover-prefix-cls}-rtl & {
        padding-right: @font-size-base + 8px;
        padding-left: @padding-md;
      }
    }
  }

  &-buttons {
    .@{popover-prefix-cls}-rtl & {
      text-align: left;
    }

    button {
      .@{popover-prefix-cls}-rtl & {
        margin-right: 8px;
        margin-left: 0;
      }
    }
  }
}

@progress-prefix-cls: ~'@{ant-prefix}-progress';

.@{progress-prefix-cls} {
  .reset-component;

  display: inline-block;

  &-line {
    position: relative;
    width: 100%;
    font-size: @font-size-base;
  }

  &-steps {
    display: inline-block;
    &-outer {
      display: flex;
      flex-direction: row;
      align-items: center;
    }
    &-item {
      flex-shrink: 0;
      min-width: 2px;
      margin-right: 2px;
      background: @progress-steps-item-bg;
      transition: all 0.3s;

      &-active {
        background: @progress-default-color;
      }
    }
  }

  &-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 & {
      margin-right: ~'calc(-2em - 8px)';
      padding-right: ~'calc(2em + 8px)';
    }
  }

  &-inner {
    position: relative;
    display: inline-block;
    width: 100%;
    overflow: hidden;
    vertical-align: middle;
    background-color: @progress-remaining-color;
    border-radius: @progress-radius;
  }

  &-circle-trail {
    stroke: @progress-remaining-color;
  }

  &-circle-path {
    animation: ~'@{ant-prefix}-progress-appear' 0.3s;
  }

  &-inner:not(.@{ant-prefix}-progress-circle-gradient) {
    .@{ant-prefix}-progress-circle-path {
      stroke: @progress-default-color;
    }
  }

  &-success-bg,
  &-bg {
    position: relative;
    background-color: @progress-default-color;
    border-radius: @progress-radius;
    transition: all 0.4s @ease-out-circ 0s;
  }

  &-success-bg {
    position: absolute;
    top: 0;
    left: 0;
    background-color: @success-color;
  }

  &-text {
    display: inline-block;
    width: 2em;
    margin-left: 8px;
    color: @text-color-secondary;
    font-size: @progress-text-font-size;
    line-height: 1;
    white-space: nowrap;
    text-align: left;
    vertical-align: middle;
    word-break: normal;
    .@{iconfont-css-prefix} {
      font-size: @font-size-base;
    }
  }

  &-status-active {
    .@{progress-prefix-cls}-bg::before {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background: @component-background;
      border-radius: 10px;
      opacity: 0;
      animation: ~'@{ant-prefix}-progress-active' 2.4s @ease-out-quint infinite;
      content: '';
    }
  }

  &-status-exception {
    .@{progress-prefix-cls}-bg {
      background-color: @error-color;
    }
    .@{progress-prefix-cls}-text {
      color: @error-color;
    }
  }

  &-status-exception &-inner:not(.@{progress-prefix-cls}-circle-gradient) {
    .@{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;
    }
  }

  &-status-success &-inner:not(.@{progress-prefix-cls}-circle-gradient) {
    .@{progress-prefix-cls}-circle-path {
      stroke: @success-color;
    }
  }

  &-circle &-inner {
    position: relative;
    line-height: 1;
    background-color: transparent;
  }

  &-circle &-text {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    margin: 0;
    padding: 0;
    color: @progress-text-color;
    font-size: @progress-circle-text-font-size;
    line-height: 1;
    white-space: normal;
    text-align: center;
    transform: translate(-50%, -50%);

    .@{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% {
    width: 0;
    opacity: 0.1;
  }
  20% {
    width: 0;
    opacity: 0.5;
  }
  100% {
    width: 100%;
    opacity: 0;
  }
}

@progress-prefix-cls: ~'@{ant-prefix}-progress';

.@{progress-prefix-cls} {
  &-rtl {
    direction: rtl;
  }

  &-outer {
    .@{progress-prefix-cls}-show-info & {
      .@{progress-prefix-cls}-rtl& {
        margin-right: 0;
        margin-left: ~'calc(-2em - 8px)';
        padding-right: 0;
        padding-left: ~'calc(2em + 8px)';
      }
    }
  }

  &-success-bg {
    .@{progress-prefix-cls}-rtl & {
      right: 0;
      left: auto;
    }
  }

  &-line &-text,
  &-steps &-text {
    .@{progress-prefix-cls}-rtl& {
      margin-right: 8px;
      margin-left: 0;
      text-align: right;
    }
  }
}

@radio-prefix-cls: ~'@{ant-prefix}-radio';
@radio-group-prefix-cls: ~'@{radio-prefix-cls}-group';
@radio-inner-prefix-cls: ~'@{radio-prefix-cls}-inner';
@radio-duration: 0.3s;
@radio-focus-shadow: 0 0 0 3px fade(@radio-dot-color, 8%);
@radio-button-focus-shadow: @radio-focus-shadow;

.@{radio-group-prefix-cls} {
  .reset-component;

  display: inline-block;
  font-size: 0;
  line-height: unset;

  .@{ant-prefix}-badge-count {
    z-index: 1;
  }

  > .@{ant-prefix}-badge:not(:first-child) > .@{radio-prefix-cls}-button-wrapper {
    border-left: none;
  }
}

// 一般状态
.@{radio-prefix-cls}-wrapper {
  .reset-component;

  position: relative;
  display: inline-block;
  margin-right: @radio-wrapper-margin-right;
  white-space: nowrap;
  cursor: pointer;
}

.@{radio-prefix-cls} {
  .reset-component;

  position: relative;
  top: @radio-top;
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  vertical-align: sub;
  outline: none;
  cursor: pointer;

  .@{radio-prefix-cls}-wrapper:hover &,
  &:hover .@{radio-inner-prefix-cls},
  &-input:focus + .@{radio-inner-prefix-cls} {
    border-color: @radio-dot-color;
  }

  &-input:focus + .@{radio-inner-prefix-cls} {
    box-shadow: @radio-focus-shadow;
  }

  &-checked::after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 1px solid @radio-dot-color;
    border-radius: 50%;
    visibility: hidden;
    animation: antRadioEffect 0.36s ease-in-out;
    animation-fill-mode: both;
    content: '';
  }

  &:hover::after,
  .@{radio-prefix-cls}-wrapper:hover &::after {
    visibility: visible;
  }

  &-inner {
    &::after {
      @radio-dot-size: @radio-size - 8px;

      position: absolute;
      top: (@radio-size - @radio-dot-size) / 2 - 1px;
      left: (@radio-size - @radio-dot-size) / 2 - 1px;
      display: table;
      width: @radio-dot-size;
      height: @radio-dot-size;
      background-color: @radio-dot-color;
      border-top: 0;
      border-left: 0;
      border-radius: @radio-dot-size;
      transform: scale(0);
      opacity: 0;
      transition: all @radio-duration @ease-in-out-circ;
      content: ' ';
    }

    position: relative;
    top: 0;
    left: 0;
    display: block;
    width: @radio-size;
    height: @radio-size;
    background-color: @radio-button-bg;
    border-color: @border-color-base;
    border-style: solid;
    border-width: 1px;
    border-radius: 100px;
    transition: all @radio-duration;
  }

  &-input {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    cursor: pointer;
    opacity: 0;
  }
}

// 选中状态
.@{radio-prefix-cls}-checked {
  .@{radio-inner-prefix-cls} {
    border-color: @radio-dot-color;
    &::after {
      transform: scale(1);
      opacity: 1;
      transition: all @radio-duration @ease-in-out-circ;
    }
  }
}

.@{radio-prefix-cls}-disabled {
  .@{radio-inner-prefix-cls} {
    background-color: @input-disabled-bg;
    border-color: @border-color-base !important;
    cursor: not-allowed;
    &::after {
      background-color: @radio-dot-disabled-color;
    }
  }

  .@{radio-prefix-cls}-input {
    cursor: not-allowed;
  }

  & + span {
    color: @disabled-color;
    cursor: not-allowed;
  }
}

span.@{radio-prefix-cls} + * {
  padding-right: 8px;
  padding-left: 8px;
}

.@{radio-prefix-cls}-button-wrapper {
  position: relative;
  display: inline-block;
  height: @btn-height-base;
  margin: 0;
  padding: 0 @padding-md - 1px;
  color: @radio-button-color;
  font-size: @font-size-base;
  line-height: @btn-height-base - 2px;
  background: @radio-button-bg;
  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;
  border-left-width: 0;
  cursor: pointer;
  transition: color 0.3s, background 0.3s, border-color 0.3s, box-shadow 0.3s;

  a {
    color: @radio-button-color;
  }

  > .@{radio-prefix-cls}-button {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  .@{radio-group-prefix-cls}-large & {
    height: @input-height-lg;
    font-size: @font-size-lg;
    line-height: @input-height-lg - 2px;
  }

  .@{radio-group-prefix-cls}-small & {
    height: @input-height-sm;
    padding: 0 @control-padding-horizontal-sm - 1px;
    line-height: @input-height-sm - 2px;
  }

  &:not(:first-child) {
    &::before {
      position: absolute;
      top: @border-width-base * -1;
      left: -1px;
      display: block;
      box-sizing: content-box;
      width: 1px;
      height: 100%;
      padding: @border-width-base 0;
      background-color: @border-color-base;
      transition: background-color 0.3s;
      content: '';
    }
  }

  &:first-child {
    border-left: @border-width-base @border-style-base @border-color-base;
    border-radius: @border-radius-base 0 0 @border-radius-base;
  }

  &:last-child {
    border-radius: 0 @border-radius-base @border-radius-base 0;
  }

  &:first-child:last-child {
    border-radius: @border-radius-base;
  }

  &:hover {
    position: relative;
    color: @radio-dot-color;
  }

  &:focus-within {
    box-shadow: @radio-button-focus-shadow;
  }

  .@{radio-prefix-cls}-inner,
  input[type='checkbox'],
  input[type='radio'] {
    width: 0;
    height: 0;
    opacity: 0;
    pointer-events: none;
  }

  &-checked:not(&-disabled) {
    z-index: 1;
    color: @radio-dot-color;
    background: @radio-button-checked-bg;
    border-color: @radio-dot-color;

    &::before {
      background-color: @radio-dot-color;
    }

    &:first-child {
      border-color: @radio-dot-color;
    }

    &:hover {
      color: @radio-button-hover-color;
      border-color: @radio-button-hover-color;
      &::before {
        background-color: @radio-button-hover-color;
      }
    }

    &:active {
      color: @radio-button-active-color;
      border-color: @radio-button-active-color;
      &::before {
        background-color: @radio-button-active-color;
      }
    }

    &:focus-within {
      box-shadow: @radio-button-focus-shadow;
    }
  }

  .@{radio-group-prefix-cls}-solid &-checked:not(&-disabled) {
    color: @radio-solid-checked-color;
    background: @radio-dot-color;
    border-color: @radio-dot-color;
    &:hover {
      color: @radio-solid-checked-color;
      background: @radio-button-hover-color;
      border-color: @radio-button-hover-color;
    }
    &:active {
      color: @radio-solid-checked-color;
      background: @radio-button-active-color;
      border-color: @radio-button-active-color;
    }
    &:focus-within {
      box-shadow: @radio-button-focus-shadow;
    }
  }

  &-disabled {
    color: @disabled-color;
    background-color: @input-disabled-bg;
    border-color: @border-color-base;
    cursor: not-allowed;

    &:first-child,
    &:hover {
      color: @disabled-color;
      background-color: @input-disabled-bg;
      border-color: @border-color-base;
    }
    &:first-child {
      border-left-color: @border-color-base;
    }
  }

  &-disabled&-checked {
    color: @radio-disabled-button-checked-color;
    background-color: @radio-disabled-button-checked-bg;
    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;
  }
}

@radio-prefix-cls: ~'@{ant-prefix}-radio';
@radio-group-prefix-cls: ~'@{radio-prefix-cls}-group';
@radio-prefix-cls-button-wrapper: ~'@{radio-prefix-cls}-button-wrapper';

.@{radio-group-prefix-cls} {
  &&-rtl {
    direction: rtl;
  }
}

// 一般状态
.@{radio-prefix-cls}-wrapper {
  &&-rtl {
    margin-right: 0;
    margin-left: @radio-wrapper-margin-right;
    direction: rtl;
  }
}

.@{radio-prefix-cls-button-wrapper} {
  &&-rtl {
    border-right-width: 0;
    border-left-width: @border-width-base;
  }

  &:not(:first-child) {
    &::before {
      .@{radio-prefix-cls-button-wrapper}.@{radio-prefix-cls-button-wrapper}-rtl& {
        right: -1px;
        left: 0;
      }
    }
  }

  &:first-child {
    .@{radio-prefix-cls-button-wrapper}.@{radio-prefix-cls-button-wrapper}-rtl& {
      border-right: @border-width-base @border-style-base @border-color-base;
      border-radius: 0 @border-radius-base @border-radius-base 0;
    }
    .@{radio-prefix-cls-button-wrapper}-checked:not([class*=~"' @{radio-prefix-cls}-button-wrapper-disabled'"])& {
      border-right-color: @radio-button-hover-color;
    }
  }

  &:last-child {
    .@{radio-prefix-cls-button-wrapper}.@{radio-prefix-cls-button-wrapper}-rtl& {
      border-radius: @border-radius-base 0 0 @border-radius-base;
    }
  }

  &-disabled {
    &:first-child {
      .@{radio-prefix-cls-button-wrapper}.@{radio-prefix-cls-button-wrapper}-rtl& {
        border-right-color: @border-color-base;
      }
    }
  }
}

@rate-prefix-cls: ~'@{ant-prefix}-rate';

.@{rate-prefix-cls} {
  .reset-component;

  display: inline-block;
  margin: 0;
  padding: 0;
  color: @rate-star-color;
  font-size: @rate-star-size;
  line-height: unset;
  list-style: none;
  outline: none;

  &-disabled &-star {
    cursor: default;
    &:hover {
      transform: scale(1);
    }
  }

  &-star {
    position: relative;
    display: inline-block;
    margin: 0;
    padding: 0;
    color: inherit;
    cursor: pointer;
    transition: all 0.3s;

    &:not(:last-child) {
      margin-right: 8px;
    }

    > div {
      &:focus {
        outline: 0;
      }

      &:hover,
      &:focus {
        transform: @rate-star-hover-scale;
      }
    }

    &-first,
    &-second {
      color: @rate-star-bg;
      transition: all 0.3s;
      user-select: none;
      .@{iconfont-css-prefix} {
        vertical-align: middle;
      }
    }

    &-first {
      position: absolute;
      top: 0;
      left: 0;
      width: 50%;
      height: 100%;
      overflow: hidden;
      opacity: 0;
    }

    &-half &-first,
    &-half &-second {
      opacity: 1;
    }

    &-half &-first,
    &-full &-second {
      color: inherit;
    }
  }

  &-text {
    display: inline-block;
    margin: 0 8px;
    font-size: @font-size-base;
  }
}

@rate-prefix-cls: ~'@{ant-prefix}-rate';

.@{rate-prefix-cls} {
  &-rtl {
    direction: rtl;
  }

  &-star {
    &:not(:last-child) {
      .@{rate-prefix-cls}-rtl & {
        margin-right: 0;
        margin-left: 8px;
      }
    }

    &-first {
      .@{rate-prefix-cls}-rtl & {
        right: 0;
        left: auto;
      }
    }
  }
}

@result-prefix-cls: ~'@{ant-prefix}-result';

.@{result-prefix-cls} {
  padding: 48px 32px;
  // status color
  &-success &-icon > .anticon {
    color: @success-color;
  }

  &-error &-icon > .anticon {
    color: @error-color;
  }

  &-info &-icon > .anticon {
    color: @info-color;
  }

  &-warning &-icon > .anticon {
    color: @warning-color;
  }

  // Exception Status image
  &-image {
    width: 250px;
    height: 295px;
    margin: auto;
  }

  &-icon {
    margin-bottom: 24px;
    text-align: center;

    > .anticon {
      font-size: @result-icon-font-size;
    }
  }

  &-title {
    color: @heading-color;
    font-size: @result-title-font-size;
    line-height: 1.8;
    text-align: center;
  }

  &-subtitle {
    color: @text-color-secondary;
    font-size: @result-subtitle-font-size;
    line-height: 1.6;
    text-align: center;
  }

  &-extra {
    margin: @result-extra-margin;
    text-align: center;
    > * {
      margin-right: 8px;

      &:last-child {
        margin-right: 0;
      }
    }
  }

  &-content {
    margin-top: 24px;
    padding: 24px 40px;
    background-color: @background-color-light;
  }
}

@result-prefix-cls: ~'@{ant-prefix}-result';

.@{result-prefix-cls} {
  &-rtl {
    direction: rtl;
  }

  &-extra {
    > * {
      .@{result-prefix-cls}-rtl & {
        margin-right: 0;
        margin-left: 8px;
      }

      &:last-child {
        .@{result-prefix-cls}-rtl & {
          margin-left: 0;
        }
      }
    }
  }
}

@selection-item-padding: ceil(@font-size-base * 1.25);

.@{select-prefix-cls}-single {
  // ========================= Selector =========================
  .@{select-prefix-cls}-selector {
    display: flex;

    .@{select-prefix-cls}-selection-search {
      position: absolute;
      top: 0;
      right: @input-padding-horizontal-base;
      bottom: 0;
      left: @input-padding-horizontal-base;

      &-input {
        width: 100%;
      }
    }

    .@{select-prefix-cls}-selection-item,
    .@{select-prefix-cls}-selection-placeholder {
      padding: 0;
      line-height: @select-height-without-border;
      transition: all 0.3s;

      // Firefox inline-block position calculation is not same as Chrome & Safari. Patch this:
      @supports (-moz-appearance: meterbar) {
        & {
          line-height: @select-height-without-border;
        }
      }
    }

    .@{select-prefix-cls}-selection-item {
      position: relative;
      user-select: none;
    }

    .@{select-prefix-cls}-selection-placeholder {
      pointer-events: none;
    }

    // For common baseline align
    &::after,
    // For '' value baseline align
    .@{select-prefix-cls}-selection-item::after,
    // For undefined value baseline align
    .@{select-prefix-cls}-selection-placeholder::after {
      display: inline-block;
      width: 0;
      visibility: hidden;
      content: '\a0';
    }
  }

  // With arrow should provides `padding-right` to show the arrow
  &.@{select-prefix-cls}-show-arrow .@{select-prefix-cls}-selection-search {
    right: @input-padding-horizontal-base + @font-size-base;
  }

  &.@{select-prefix-cls}-show-arrow .@{select-prefix-cls}-selection-item,
  &.@{select-prefix-cls}-show-arrow .@{select-prefix-cls}-selection-placeholder {
    padding-right: @selection-item-padding;
  }

  // Opacity selection if open
  &.@{select-prefix-cls}-open .@{select-prefix-cls}-selection-item {
    opacity: 0.4;
  }

  // ========================== Input ==========================
  // We only change the style of non-customize input which is only support by `combobox` mode.

  // Not customize
  &:not(.@{select-prefix-cls}-customize-input) {
    .@{select-prefix-cls}-selector {
      .select-selector();
      .select-search-input-without-border();
      width: 100%;

      height: @input-height-base;
      padding: 0 @input-padding-horizontal-base;

      .@{select-prefix-cls}-selection-search-input {
        height: @select-height-without-border;
      }

      &::after {
        line-height: @select-height-without-border;
      }
    }
  }

  &.@{select-prefix-cls}-customize-input {
    .@{select-prefix-cls}-selector {
      &::after {
        display: none;
      }

      .@{select-prefix-cls}-selection-search {
        position: static;
        width: 100%;
      }

      .@{select-prefix-cls}-selection-placeholder {
        position: absolute;
        right: 0;
        left: 0;
        padding: 0 @input-padding-horizontal-base;

        &::after {
          display: none;
        }
      }
    }
  }

  // ============================================================
  // ==                          Size                          ==
  // ============================================================
  .select-size(@suffix, @input-height) {
    @merged-cls: ~'@{select-prefix-cls}-@{suffix}';

    &.@{merged-cls}:not(.@{select-prefix-cls}-customize-input) {
      .@{select-prefix-cls}-selector {
        height: @input-height;

        &::after,
        .@{select-prefix-cls}-selection-item,
        .@{select-prefix-cls}-selection-placeholder {
          line-height: @input-height - 2 * @border-width-base;
        }
      }

      // Not customize
      &:not(.@{select-prefix-cls}-customize-input) {
        .@{select-prefix-cls}-selection-search-input {
          height: @input-height - 2 * @border-width-base;
        }
      }
    }
  }

  .select-size('lg', @select-single-item-height-lg);
  .select-size('sm', @input-height-sm);

  // Size small need additional set padding
  &.@{select-prefix-cls}-sm {
    &:not(.@{select-prefix-cls}-customize-input) {
      .@{select-prefix-cls}-selection-search {
        right: @input-padding-horizontal-sm;
        left: @input-padding-horizontal-sm;
      }

      .@{select-prefix-cls}-selector {
        padding: 0 @input-padding-horizontal-sm;
      }

      // With arrow should provides `padding-right` to show the arrow
      &.@{select-prefix-cls}-show-arrow .@{select-prefix-cls}-selection-search {
        right: @input-padding-horizontal-sm + @font-size-base * 1.5;
      }

      &.@{select-prefix-cls}-show-arrow .@{select-prefix-cls}-selection-item,
      &.@{select-prefix-cls}-show-arrow .@{select-prefix-cls}-selection-placeholder {
        padding-right: @font-size-base * 1.5;
      }
    }
  }

  &.@{select-prefix-cls}-lg {
    &:not(.@{select-prefix-cls}-customize-input) {
      .@{select-prefix-cls}-selector {
        padding: 0 @input-padding-horizontal-lg;
      }
    }
  }
}

@select-multiple-item-border-width: 1px;

@select-multiple-padding: max(
  @input-padding-vertical-base - @select-multiple-item-border-width -
    @select-multiple-item-spacing-half,
  0
);

/**
 * Do not merge `height` & `line-height` under style with `selection` & `search`,
 * since chrome may update to redesign with its align logic.
 */

.@{select-prefix-cls} {
  &-multiple {
    // ========================= Selector =========================
    .@{select-prefix-cls}-selector {
      .select-selector();
      .select-search-input-without-border();

      display: flex;
      flex-wrap: wrap;
      align-items: center;
      // Multiple is little different that horizontal is follow the vertical
      padding: @select-multiple-padding @input-padding-vertical-base;

      .@{select-prefix-cls}-show-search& {
        cursor: text;
      }

      &::after {
        display: inline-block;
        width: 0;
        margin: @select-multiple-item-spacing-half 0;
        line-height: @select-multiple-item-height;
        content: '\a0';
      }
    }

    &.@{select-prefix-cls}-allow-clear .@{select-prefix-cls}-selector {
      padding-right: @font-size-sm + @control-padding-horizontal;
    }

    // ======================== Selections ========================
    .@{select-prefix-cls}-selection-item {
      position: relative;
      display: flex;
      flex: none;
      box-sizing: border-box;
      max-width: 100%;

      height: @select-multiple-item-height;
      margin-top: @select-multiple-item-spacing-half;
      margin-right: @input-padding-vertical-base;
      margin-bottom: @select-multiple-item-spacing-half;
      padding: 0 (@padding-xs / 2) 0 @padding-xs;
      line-height: @select-multiple-item-height - @select-multiple-item-border-width * 2;
      background: @select-selection-item-bg;
      border: 1px solid @select-selection-item-border-color;
      border-radius: @border-radius-base;
      cursor: default;
      transition: font-size 0.3s, line-height 0.3s, height 0.3s;
      user-select: none;

      // It's ok not to do this, but 24px makes bottom narrow in view should adjust
      &-content {
        display: inline-block;
        margin-right: @padding-xs / 2;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }

      &-remove {
        .iconfont-mixin();
        display: inline-block;
        color: @text-color-secondary;
        font-weight: bold;
        font-size: @font-size-sm;
        line-height: inherit;
        cursor: pointer;
        .iconfont-size-under-12px(10px);

        > .@{iconfont-css-prefix} {
          vertical-align: -0.2em;
        }

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

    // ========================== Input ==========================
    .@{select-prefix-cls}-selection-search {
      position: relative;
      margin-left: @select-multiple-padding / 2;

      &-input,
      &-mirror {
        font-family: @font-family;
        line-height: @line-height-base;
        transition: all 0.3s;
      }

      &-input {
        width: 100%;
        min-width: 3px;
      }

      &-mirror {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 999;
        white-space: nowrap;
        visibility: hidden;
      }

      // https://github.com/ant-design/ant-design/issues/22906
      &:first-child .@{select-prefix-cls}-selection-search-input {
        margin-left: 6.5px;
      }
    }

    // ======================= Placeholder =======================
    .@{select-prefix-cls}-selection-placeholder {
      position: absolute;
      top: 50%;
      right: @input-padding-horizontal;
      left: @input-padding-horizontal;
      transform: translateY(-50%);
      transition: all 0.3s;
    }

    // ============================================================
    // ==                          Size                          ==
    // ============================================================
    .select-size(@suffix, @input-height) {
      @merged-cls: ~'@{select-prefix-cls}-@{suffix}';
      &.@{merged-cls} {
        @select-selection-height: @input-height - @input-padding-vertical-base * 2;
        @select-height-without-border: @input-height - @border-width-base * 2;

        .@{select-prefix-cls}-selector::after {
          line-height: @select-selection-height;
        }

        .@{select-prefix-cls}-selection-item {
          height: @select-selection-height;
          line-height: @select-selection-height - @border-width-base * 2;
        }

        .@{select-prefix-cls}-selection-search {
          height: @select-selection-height + @select-multiple-padding;
          line-height: @select-selection-height + @select-multiple-padding;

          &-input,
          &-mirror {
            height: @select-selection-height;
            line-height: @select-selection-height - @border-width-base * 2;
          }
        }
      }
    }

    .select-size('lg', @input-height-lg);
    .select-size('sm', @input-height-sm);

    // Size small need additional set padding
    &.@{select-prefix-cls}-sm {
      .@{select-prefix-cls}-selection-placeholder {
        left: @input-padding-horizontal-sm;
      }
      // https://github.com/ant-design/ant-design/issues/22906
      .@{select-prefix-cls}-selection-search:first-child
        .@{select-prefix-cls}-selection-search-input {
        margin-left: 3px;
      }
    }
    &.@{select-prefix-cls}-lg {
      .@{select-prefix-cls}-selection-item {
        height: @select-multiple-item-height-lg;
        line-height: @select-multiple-item-height-lg;
      }
    }
  }

  &-disabled .@{select-prefix-cls}-selection-item-remove {
    display: none;
  }
}

@select-prefix-cls: ~'@{ant-prefix}-select';
@select-height-without-border: @input-height-base - 2 * @border-width-base;
@select-dropdown-edge-child-vertical-padding: @dropdown-edge-child-vertical-padding;

.select-selector() {
  position: relative;
  background-color: @select-background;
  border: @border-width-base @border-style-base @select-border-color;
  border-radius: @border-radius-base;
  transition: all 0.3s @ease-in-out;

  input {
    cursor: pointer;
  }

  .@{select-prefix-cls}-show-search& {
    cursor: text;

    input {
      cursor: auto;
    }
  }

  .@{select-prefix-cls}-focused& {
    .active();
  }

  .@{select-prefix-cls}-disabled& {
    color: @disabled-color;
    background: @input-disabled-bg;
    cursor: not-allowed;

    input {
      cursor: not-allowed;
    }
  }
}

/* Reset search input style */
.select-search-input-without-border() {
  .@{select-prefix-cls}-selection-search-input {
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
    outline: none;
  }
}

.@{select-prefix-cls} {
  .reset-component;
  position: relative;
  display: inline-block;
  cursor: pointer;

  &:not(.@{select-prefix-cls}-disabled):hover &-selector {
    .hover();
  }

  // ======================== Selection ========================
  &-selection-item {
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

    // IE11 css hack. `*::-ms-backdrop,` is a must have
    @media all and (-ms-high-contrast: none) {
      *::-ms-backdrop,
      & {
        flex: auto;
      }
    }
  }

  // ======================= Placeholder =======================
  &-selection-placeholder {
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    opacity: 0.4;

    // IE11 css hack. `*::-ms-backdrop,` is a must have
    @media all and (-ms-high-contrast: none) {
      *::-ms-backdrop,
      & {
        flex: auto;
      }
    }
  }

  // ========================== Arrow ==========================
  &-arrow {
    .iconfont-mixin();
    position: absolute;
    top: 53%;
    right: @control-padding-horizontal - 1px;
    width: @font-size-sm;
    height: @font-size-sm;
    margin-top: -@font-size-sm / 2;
    color: @disabled-color;
    font-size: @font-size-sm;
    line-height: 1;
    text-align: center;
    pointer-events: none;

    .@{iconfont-css-prefix} {
      vertical-align: top;
      transition: transform 0.3s;

      > svg {
        vertical-align: top;
      }

      &:not(.@{select-prefix-cls}-suffix) {
        pointer-events: auto;
      }
    }
  }

  // ========================== Clear ==========================
  &-clear {
    position: absolute;
    top: 50%;
    right: @control-padding-horizontal - 1px;
    z-index: 1;
    display: inline-block;
    width: @font-size-sm;
    height: @font-size-sm;
    margin-top: -@font-size-sm / 2;
    color: @disabled-color;
    font-size: @font-size-sm;
    font-style: normal;
    line-height: 1;
    text-align: center;
    text-transform: none;
    background: @select-clear-background;
    cursor: pointer;
    opacity: 0;
    transition: color 0.3s ease, opacity 0.15s ease;
    text-rendering: auto;
    &::before {
      display: block;
    }
    &:hover {
      color: @text-color-secondary;
    }

    .@{select-prefix-cls}:hover & {
      opacity: 1;
    }
  }

  // ========================== Popup ==========================
  &-dropdown {
    .reset-component;
    position: absolute;
    top: -9999px;
    left: -9999px;
    z-index: @zindex-dropdown;
    box-sizing: border-box;
    padding: @select-dropdown-edge-child-vertical-padding 0;
    overflow: hidden;
    font-size: @font-size-base;
    // 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;
    background-color: @select-dropdown-bg;
    border-radius: @border-radius-base;
    outline: none;
    box-shadow: @box-shadow-base;

    &.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;
    }

    &-empty {
      color: @disabled-color;
    }
  }

  // ========================= Options =========================
  .item() {
    position: relative;
    display: block;
    min-height: @select-dropdown-height;
    padding: @select-dropdown-vertical-padding @control-padding-horizontal;
    color: @text-color;
    font-weight: normal;
    font-size: @select-dropdown-font-size;
    line-height: @select-dropdown-line-height;
  }

  &-item-empty {
    .item();
    color: @disabled-color;
  }

  &-item {
    .item();

    cursor: pointer;
    transition: background 0.3s ease;

    // =========== Group ============
    &-group {
      color: @text-color-secondary;
      font-size: @font-size-sm;
      cursor: default;
    }

    // =========== Option ===========
    &-option {
      display: flex;

      &-content {
        flex: auto;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }

      &-state {
        flex: none;
      }

      &-active:not(&-disabled) {
        background-color: @select-item-active-bg;
      }

      &-selected:not(&-disabled) {
        color: @select-item-selected-color;
        font-weight: @select-item-selected-font-weight;
        background-color: @select-item-selected-bg;

        .@{select-prefix-cls}-item-option-state {
          color: @primary-color;
        }
      }

      &-disabled {
        color: @disabled-color;
        cursor: not-allowed;
      }

      &-grouped {
        padding-left: @control-padding-horizontal * 2;
      }
    }
  }

  // ============================================================
  // ==                          Size                          ==
  // ============================================================
  &-lg {
    font-size: @font-size-lg;
  }

  // no border style
  &-borderless &-selector {
    background-color: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
  }
}

@select-prefix-cls: ~'@{ant-prefix}-select';

.@{select-prefix-cls} {
  &-rtl {
    direction: rtl;
  }

  // ========================== Arrow ==========================
  &-arrow {
    .@{select-prefix-cls}-rtl & {
      right: initial;
      left: @control-padding-horizontal - 1px;
    }
  }

  // ========================== Clear ==========================
  &-clear {
    .@{select-prefix-cls}-rtl & {
      right: initial;
      left: @control-padding-horizontal - 1px;
    }
  }

  // ========================== Popup ==========================
  &-dropdown {
    &-rtl {
      direction: rtl;
    }
  }

  // ========================= Options =========================
  &-item {
    &-option {
      &-grouped {
        .@{select-prefix-cls}-dropdown-rtl & {
          padding-right: @control-padding-horizontal * 2;
          padding-left: @control-padding-horizontal;
        }
      }
    }
  }
}

// multiple
@select-multiple-item-border-width: 1px;
@select-multiple-item-spacing-half: ceil(@input-padding-vertical-base / 2);
@select-multiple-padding: max(
  @input-padding-vertical-base - @select-multiple-item-border-width -
    @select-multiple-item-spacing-half,
  0
);

.@{select-prefix-cls}-multiple {
  &.@{select-prefix-cls}-allow-clear .@{select-prefix-cls}-selector {
    .@{select-prefix-cls}-rtl& {
      padding-right: @input-padding-vertical-base;
      padding-left: @font-size-sm + @control-padding-horizontal;
    }
  }
  // ======================== Selections ========================
  .@{select-prefix-cls}-selection-item {
    .@{select-prefix-cls}-rtl& {
      margin-right: 0;
      margin-left: @input-padding-vertical-base;
      padding: 0 @padding-xs 0 (@padding-xs / 2);
      text-align: right;
    }
    // It's ok not to do this, but 24px makes bottom narrow in view should adjust
    &-content {
      .@{select-prefix-cls}-rtl& {
        margin-right: 0;
        margin-left: @padding-xs / 2;
        text-align: right;
      }
    }
  }

  // ========================== Input ==========================
  .@{select-prefix-cls}-selection-search {
    .@{select-prefix-cls}-rtl& {
      margin-right: @select-multiple-padding / 2;
      margin-left: @input-padding-vertical-base;
    }

    &-mirror {
      .@{select-prefix-cls}-rtl& {
        right: 0;
        left: auto;
      }
    }
  }

  // ======================= Placeholder =======================
  .@{select-prefix-cls}-selection-placeholder {
    .@{select-prefix-cls}-rtl& {
      right: @input-padding-horizontal;
      left: auto;
    }
  }

  // ============================================================
  // ==                          Size                          ==
  // ============================================================

  // Size small need additional set padding
  &.@{select-prefix-cls}-sm {
    .@{select-prefix-cls}-selection-placeholder {
      .@{select-prefix-cls}-rtl& {
        right: @input-padding-horizontal-sm;
      }
    }
  }
}

// single
@selection-item-padding: ceil(@font-size-base * 1.25);

.@{select-prefix-cls}-single {
  // ========================= Selector =========================
  .@{select-prefix-cls}-selector {
    .@{select-prefix-cls}-selection-item,
    .@{select-prefix-cls}-selection-placeholder {
      .@{select-prefix-cls}-rtl& {
        right: 0;
        left: 9px;
        text-align: right;
      }
    }
  }

  // With arrow should provides `padding-right` to show the arrow
  &.@{select-prefix-cls}-show-arrow .@{select-prefix-cls}-selection-search {
    .@{select-prefix-cls}-rtl& {
      right: @input-padding-horizontal-base;
      left: @input-padding-horizontal-base + @font-size-base;
    }
  }

  &.@{select-prefix-cls}-show-arrow .@{select-prefix-cls}-selection-item,
  &.@{select-prefix-cls}-show-arrow .@{select-prefix-cls}-selection-placeholder {
    .@{select-prefix-cls}-rtl& {
      padding-right: 0;
      padding-left: @selection-item-padding;
    }
  }

  // ========================== Input ==========================
  // We only change the style of non-customize input which is only support by `combobox` mode.

  // Not customize
  &:not(.@{select-prefix-cls}-customize-input) {
    .@{select-prefix-cls}-selector {
      .@{select-prefix-cls}-rtl& {
        padding: 0 @input-padding-horizontal-base;
      }
    }
  }

  // ============================================================
  // ==                          Size                          ==
  // ============================================================

  // Size small need additional set padding
  &.@{select-prefix-cls}-sm {
    &:not(.@{select-prefix-cls}-customize-input) {
      // With arrow should provides `padding-right` to show the arrow
      &.@{select-prefix-cls}-show-arrow .@{select-prefix-cls}-selection-search {
        .@{select-prefix-cls}-rtl& {
          right: 0;
        }
      }

      &.@{select-prefix-cls}-show-arrow .@{select-prefix-cls}-selection-item,
      &.@{select-prefix-cls}-show-arrow .@{select-prefix-cls}-selection-placeholder {
        .@{select-prefix-cls}-rtl& {
          padding-right: 0;
          padding-left: @font-size-base * 1.5;
        }
      }
    }
  }
}

@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-button-prefix-cls: ~'@{skeleton-prefix-cls}-button';
@skeleton-input-prefix-cls: ~'@{skeleton-prefix-cls}-input';
@skeleton-image-prefix-cls: ~'@{skeleton-prefix-cls}-image';

.@{skeleton-prefix-cls} {
  display: table;
  width: 100%;

  &-header {
    display: table-cell;
    padding-right: @padding-md;
    vertical-align: top;

    // Avatar
    .@{skeleton-avatar-prefix-cls} {
      .skeleton-element-avatar();
    }
  }

  &-content {
    display: table-cell;
    width: 100%;
    vertical-align: top;

    // Title
    .@{skeleton-title-prefix-cls} {
      width: 100%;
      height: @skeleton-title-height;
      margin-top: @margin-md;
      background: @skeleton-color;

      + .@{skeleton-paragraph-prefix-cls} {
        margin-top: @skeleton-title-paragraph-margin-top;
      }
    }

    // paragraph
    .@{skeleton-paragraph-prefix-cls} {
      padding: 0;

      > li {
        width: 100%;
        height: @skeleton-paragraph-li-height;
        list-style: none;
        background: @skeleton-color;

        &:last-child:not(:first-child):not(:nth-child(2)) {
          width: 61%;
        }

        + li {
          margin-top: @skeleton-paragraph-li-margin-top;
        }
      }
    }
  }

  &-with-avatar &-content {
    // Title
    .@{skeleton-title-prefix-cls} {
      margin-top: @margin-sm;

      + .@{skeleton-paragraph-prefix-cls} {
        margin-top: @skeleton-paragraph-margin-top;
      }
    }
  }

  &-round &-content {
    .@{skeleton-title-prefix-cls},
    .@{skeleton-paragraph-prefix-cls} > li {
      border-radius: 100px;
    }
  }

  // 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();
    }

    .@{skeleton-button-prefix-cls} {
      .skeleton-color();
    }

    .@{skeleton-input-prefix-cls} {
      .skeleton-color();
    }

    .@{skeleton-image-prefix-cls} {
      .skeleton-color();
    }
  }

  // Skeleton element
  &-element {
    display: inline-block;
    width: auto;

    .@{skeleton-button-prefix-cls} {
      .skeleton-element-button();
    }

    .@{skeleton-avatar-prefix-cls} {
      .skeleton-element-avatar();
    }

    .@{skeleton-input-prefix-cls} {
      .skeleton-element-input();
    }

    .@{skeleton-image-prefix-cls} {
      .skeleton-element-image();
    }
  }
}
// Button
.skeleton-element-button() {
  display: inline-block;
  vertical-align: top;
  background: @skeleton-color;
  border-radius: @border-radius-base;

  .skeleton-element-button-size(@btn-height-base);

  &-lg {
    .skeleton-element-button-size(@btn-height-lg);
  }

  &-sm {
    .skeleton-element-button-size(@btn-height-sm);
  }
}
// Avatar
.skeleton-element-avatar() {
  display: inline-block;
  vertical-align: top;
  background: @skeleton-color;

  .skeleton-element-avatar-size(@avatar-size-base);

  &-lg {
    .skeleton-element-avatar-size(@avatar-size-lg);
  }

  &-sm {
    .skeleton-element-avatar-size(@avatar-size-sm);
  }
}

// Input
.skeleton-element-input() {
  display: inline-block;
  vertical-align: top;
  background: @skeleton-color;

  .skeleton-element-input-size(@input-height-base);

  &-lg {
    .skeleton-element-input-size(@input-height-lg);
  }

  &-sm {
    .skeleton-element-input-size(@input-height-sm);
  }
}

// Image
.skeleton-element-image() {
  display: flex;
  align-items: center;
  justify-content: center;
  vertical-align: top;
  background: @skeleton-color;

  .skeleton-element-image-size(@image-size-base*2);

  &-path {
    fill: #bfbfbf;
  }

  &-svg {
    .skeleton-element-image-size(@image-size-base);
    max-width: @image-size-base * 4;
    max-height: @image-size-base * 4;
  }
}

.skeleton-element-avatar-size(@size) {
  width: @size;
  .skeleton-element-common-size(@size);

  &.@{skeleton-avatar-prefix-cls}-circle {
    border-radius: 50%;
  }
}

.skeleton-element-button-size(@size) {
  width: @size * 2;
  .skeleton-element-common-size(@size);

  &.@{skeleton-button-prefix-cls}-circle {
    width: @size;
    border-radius: 50%;
  }

  &.@{skeleton-button-prefix-cls}-round {
    border-radius: @size;
  }
}

.skeleton-element-input-size(@size) {
  width: 100%;
  .skeleton-element-common-size(@size);
}

.skeleton-element-image-size(@size) {
  width: @size;
  .skeleton-element-common-size(@size);

  &.@{skeleton-image-prefix-cls}-circle {
    border-radius: 50%;
  }
}

.skeleton-element-common-size(@size) {
  height: @size;
  line-height: @size;
}

.skeleton-color() {
  background: linear-gradient(
    90deg,
    @skeleton-color 25%,
    @skeleton-to-color 37%,
    @skeleton-color 63%
  );
  background-size: 400% 100%;
  animation: ~'@{skeleton-prefix-cls}-loading' 1.4s ease infinite;
}

@keyframes ~"@{skeleton-prefix-cls}-loading" {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}

@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-prefix-cls} {
  &-rtl {
    direction: rtl;
  }

  &-header {
    .@{skeleton-prefix-cls}-rtl & {
      padding-right: 0;
      padding-left: 16px;
    }
  }

  // With active animation
  &.@{skeleton-prefix-cls}-active {
    & .@{skeleton-prefix-cls}-content {
      .@{skeleton-title-prefix-cls},
      .@{skeleton-paragraph-prefix-cls} > li {
        .@{skeleton-prefix-cls}-rtl& {
          animation-name: ~'@{skeleton-prefix-cls}-loading-rtl';
        }
      }
    }

    .@{skeleton-avatar-prefix-cls} {
      .@{skeleton-prefix-cls}-rtl& {
        animation-name: ~'@{skeleton-prefix-cls}-loading-rtl';
      }
    }
  }
}

@keyframes ~"@{skeleton-prefix-cls}-loading-rtl" {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}

@slider-prefix-cls: ~'@{ant-prefix}-slider';

.@{slider-prefix-cls} {
  .reset-component;

  position: relative;
  height: 12px;
  margin: @slider-margin;
  padding: 4px 0;
  cursor: pointer;
  touch-action: none;

  .vertical();

  &-with-marks {
    margin-bottom: 28px;
  }

  &-rail {
    position: absolute;
    width: 100%;
    height: 4px;
    background-color: @slider-rail-background-color;
    border-radius: @border-radius-base;
    transition: background-color 0.3s;
  }

  &-track {
    position: absolute;
    height: 4px;
    background-color: @slider-track-background-color;
    border-radius: @border-radius-base;
    transition: background-color 0.3s;
  }

  &-handle {
    position: absolute;
    width: @slider-handle-size;
    height: @slider-handle-size;
    margin-top: @slider-handle-margin-top;
    background-color: @slider-handle-background-color;
    border: solid @slider-handle-border-width @slider-handle-color;
    border-radius: 50%;
    box-shadow: @slider-handle-shadow;
    cursor: pointer;
    transition: border-color 0.3s, box-shadow 0.6s,
      transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);

    &-dragging&-dragging&-dragging {
      border-color: @slider-handle-color-focus;
      box-shadow: 0 0 0 5px @slider-handle-color-focus-shadow;
    }

    &:focus {
      border-color: @slider-handle-color-focus;
      outline: none;
      box-shadow: 0 0 0 5px @slider-handle-color-focus-shadow;
    }

    &.@{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;
    color: @text-color-secondary;
    text-align: center;
    word-break: keep-all;
    cursor: pointer;
    user-select: none;

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

  &-step {
    position: absolute;
    width: 100%;
    height: 4px;
    background: transparent;
  }

  &-dot {
    position: absolute;
    top: -2px;
    width: 8px;
    height: 8px;
    margin-left: -4px;
    background-color: @component-background;
    border: 2px solid @slider-dot-border-color;
    border-radius: 50%;
    cursor: pointer;

    &: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 {
      background-color: @component-background;
      border-color: @slider-disabled-color !important;
      box-shadow: none;
      cursor: not-allowed;
    }

    .@{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 {
      width: 4px;
      height: 100%;
    }

    .@{slider-prefix-cls}-track {
      width: 4px;
    }

    .@{slider-prefix-cls}-handle {
      margin-top: -6px; // we chould consider border width as well: (10 + 2 ) / 2
      margin-left: -5px;
    }

    .@{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;
    }
  }

  &-tooltip {
    // https://github.com/ant-design/ant-design/issues/20014
    .@{ant-prefix}-tooltip-inner {
      min-width: unset;
    }
  }
}

@slider-prefix-cls: ~'@{ant-prefix}-slider';

.@{slider-prefix-cls} {
  &-rtl {
    direction: rtl;
  }

  &-mark {
    .@{slider-prefix-cls}-rtl & {
      right: 0;
      left: auto;
    }
  }

  &-dot {
    .@{slider-prefix-cls}-rtl & {
      margin-right: -4px;
      margin-left: 0;
    }

    &:first-child {
      .@{slider-prefix-cls}-rtl & {
        margin-right: -4px;
        margin-left: 0;
      }
    }

    &:last-child {
      .@{slider-prefix-cls}-rtl & {
        margin-right: -4px;
        margin-left: 0;
      }
    }
  }
}

.vertical() {
  &-vertical {
    .@{slider-prefix-cls}-handle {
      .@{slider-prefix-cls}-rtl& {
        margin-right: -5px;
        margin-left: 0;
      }
    }

    .@{slider-prefix-cls}-mark {
      .@{slider-prefix-cls}-rtl& {
        right: 12px;
        left: auto;
      }
    }

    .@{slider-prefix-cls}-mark-text {
      .@{slider-prefix-cls}-rtl& {
        right: 4px;
        left: auto;
      }
    }

    .@{slider-prefix-cls}-dot {
      .@{slider-prefix-cls}-rtl& {
        right: 2px;
        left: auto;
      }
    }
  }
}

@space-prefix-cls: ~'@{ant-prefix}-space';

.@{space-prefix-cls} {
  display: inline-flex;
  &-vertical {
    flex-direction: column;
  }

  &-align {
    &-center {
      align-items: center;
    }
    &-start {
      align-items: flex-start;
    }
    &-end {
      align-items: flex-end;
    }
    &-baseline {
      align-items: baseline;
    }
  }
}

@space-prefix-cls: ~'@{ant-prefix}-space';

.@{space-prefix-cls} {
  &-rtl {
    direction: rtl;
  }
}

@spin-prefix-cls: ~'@{ant-prefix}-spin';
@spin-dot-default: @text-color-secondary;

.@{spin-prefix-cls} {
  .reset-component;

  position: absolute;
  display: none;
  color: @primary-color;
  text-align: center;
  vertical-align: middle;
  opacity: 0;
  transition: transform 0.3s @ease-in-out-circ;

  &-spinning {
    position: static;
    display: inline-block;
    opacity: 1;
  }

  &-nested-loading {
    position: relative;
    > div > .@{spin-prefix-cls} {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 4;
      display: block;
      width: 100%;
      height: 100%;
      max-height: 400px;
      .@{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 @shadow-color-inverse;
      }
      &.@{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 0.3s;

    &::after {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 10;
      display: ~'none \9';
      width: 100%;
      height: 100%;
      background: @component-background;
      opacity: 0;
      transition: all 0.3s;
      content: '';
      pointer-events: none;
    }
  }

  &-blur {
    clear: both;
    overflow: hidden;
    opacity: 0.5;
    user-select: none;
    pointer-events: none;

    &::after {
      opacity: 0.4;
      pointer-events: auto;
    }
  }

  // tip
  // ------------------------------
  &-tip {
    color: @spin-dot-default;
  }

  // dots
  // ------------------------------

  &-dot {
    position: relative;
    display: inline-block;
    font-size: @spin-dot-size;

    .square(1em);

    &-item {
      position: absolute;
      display: block;
      width: 9px;
      height: 9px;
      background-color: @primary-color;
      border-radius: 100%;
      transform: scale(0.75);
      transform-origin: 50% 50%;
      opacity: 0.3;
      animation: antSpinMove 1s infinite linear alternate;

      &:nth-child(1) {
        top: 0;
        left: 0;
      }
      &:nth-child(2) {
        top: 0;
        right: 0;
        animation-delay: 0.4s;
      }
      &:nth-child(3) {
        right: 0;
        bottom: 0;
        animation-delay: 0.8s;
      }
      &:nth-child(4) {
        bottom: 0;
        left: 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;

    i {
      width: 6px;
      height: 6px;
    }
  }

  // large
  &-lg &-dot {
    font-size: @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);
  }
}

@spin-prefix-cls: ~'@{ant-prefix}-spin';

.@{spin-prefix-cls} {
  &-rtl {
    direction: rtl;
  }

  &-dot {
    &-spin {
      .@{spin-prefix-cls}-rtl & {
        transform: rotate(-45deg);
        animation-name: antRotateRtl;
      }
    }
  }
}

@keyframes antRotateRtl {
  to {
    transform: rotate(-405deg);
  }
}

@statistic-prefix-cls: ~'@{ant-prefix}-statistic';

.@{statistic-prefix-cls} {
  .reset-component;

  &-title {
    margin-bottom: @margin-xss;
    color: @text-color-secondary;
    font-size: @statistic-title-font-size;
  }

  &-content {
    color: @heading-color;
    font-size: @statistic-content-font-size;
    font-family: @statistic-font-family;

    &-value {
      display: inline-block;
      direction: ltr;
      &-decimal {
        font-size: @statistic-unit-font-size;
      }
    }

    &-prefix,
    &-suffix {
      display: inline-block;
    }

    &-prefix {
      margin-right: 4px;
    }

    &-suffix {
      margin-left: 4px;
      font-size: @statistic-unit-font-size;
    }
  }
}

@statistic-prefix-cls: ~'@{ant-prefix}-statistic';

.@{statistic-prefix-cls} {
  &-rtl {
    direction: rtl;
  }

  &-content {
    &-prefix {
      .@{statistic-prefix-cls}-rtl & {
        margin-right: 0;
        margin-left: 4px;
      }
    }

    &-suffix {
      .@{statistic-prefix-cls}-rtl & {
        margin-right: 4px;
        margin-left: 0;
      }
    }
  }
}

@steps-prefix-cls: ~'@{ant-prefix}-steps';
@process-icon-color: @primary-color;
@process-title-color: @heading-color;
@process-description-color: @text-color;
@process-icon-text-color: @text-color-inverse;
@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-nav-active-color: @primary-color;

.@{steps-prefix-cls} {
  .reset-component;

  display: flex;
  width: 100%;
  font-size: 0;
  text-align: initial;
}

.@{steps-prefix-cls}-item {
  position: relative;
  display: inline-block;
  flex: 1;
  overflow: hidden;
  vertical-align: top;

  &-container {
    outline: none;
  }

  &:last-child {
    flex: none;
  }

  &:last-child > &-container > &-tail,
  &:last-child > &-container > &-content > &-title::after {
    display: none;
  }

  &-icon,
  &-content {
    display: inline-block;
    vertical-align: top;
  }

  &-icon {
    width: @steps-icon-size;
    height: @steps-icon-size;
    margin: @steps-icon-margin;
    font-size: @steps-icon-font-size;
    font-family: @font-family;
    line-height: @steps-icon-size;
    text-align: center;
    border: @border-width-base @border-style-base @wait-icon-color;
    border-radius: @steps-icon-size;
    transition: background-color 0.3s, border-color 0.3s;

    > .@{steps-prefix-cls}-icon {
      position: relative;
      top: @steps-icon-top;
      color: @primary-color;
      line-height: 1;
    }
  }
  &-tail {
    position: absolute;
    top: 12px;
    left: 0;
    width: 100%;
    padding: 0 10px;

    &::after {
      display: inline-block;
      width: 100%;
      height: 1px;
      background: @border-color-split;
      border-radius: 1px;
      transition: background 0.3s;
      content: '';
    }
  }
  &-title {
    position: relative;
    display: inline-block;
    padding-right: 16px;
    color: @text-color;
    font-size: @font-size-lg;
    line-height: @steps-title-line-height;

    &::after {
      position: absolute;
      top: @steps-title-line-height / 2;
      left: 100%;
      display: block;
      width: 9999px;
      height: 1px;
      background: @wait-tail-color;
      content: '';
    }
  }
  &-subtitle {
    display: inline;
    margin-left: 8px;
    color: @text-color-secondary;
    font-weight: normal;
    font-size: @font-size-base;
  }
  &-description {
    color: @text-color-secondary;
    font-size: @font-size-base;
  }
  .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;
  }

  &-disabled {
    cursor: not-allowed;
  }
}

// ===================== Clickable =====================
.@{steps-prefix-cls} .@{steps-prefix-cls}-item {
  &:not(.@{steps-prefix-cls}-item-active) {
    & > .@{steps-prefix-cls}-item-container[role='button'] {
      cursor: pointer;

      .@{steps-prefix-cls}-item {
        &-title,
        &-subtitle,
        &-description,
        &-icon .@{steps-prefix-cls}-icon {
          transition: color 0.3s;
        }
      }

      &:hover {
        .@{steps-prefix-cls}-item {
          &-title,
          &-subtitle,
          &-description {
            color: @primary-color;
          }
        }
      }
    }

    &:not(.@{steps-prefix-cls}-item-process) {
      & > .@{steps-prefix-cls}-item-container[role='button']:hover {
        .@{steps-prefix-cls}-item {
          &-icon {
            border-color: @primary-color;

            .@{steps-prefix-cls}-icon {
              color: @primary-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 {
    background-color: @steps-background;
    border-color: @@icon-color;
    > .@{steps-prefix-cls}-icon {
      color: @@icon-color;
      .@{steps-prefix-cls}-icon-dot {
        background: @@icon-color;
      }
    }
  }
  &-@{status} > &-container > &-content > &-title {
    color: @@title-color;
    &::after {
      background-color: @@tail-color;
    }
  }
  &-@{status} > &-container > &-content > &-description {
    color: @@description-color;
  }
  &-@{status} > &-container > &-tail::after {
    background-color: @@tail-color;
  }
}

.@{steps-prefix-cls}-item-custom {
  .@{steps-prefix-cls}-item-icon {
    height: auto;
    background: none;
    border: 0;
    > .@{steps-prefix-cls}-icon {
      top: @steps-icon-custom-top;
      left: 0.5px;
      width: @steps-icon-custom-size;
      height: @steps-icon-custom-size;
      font-size: @steps-icon-custom-font-size;
      line-height: @steps-icon-custom-size;
    }
  }
  &.@{steps-prefix-cls}-item-process {
    .@{steps-prefix-cls}-item-icon > .@{steps-prefix-cls}-icon {
      color: @process-icon-color;
    }
  }
}

// Only adjust horizontal customize icon width
.@{steps-prefix-cls} {
  &:not(.@{steps-prefix-cls}-vertical) {
    .@{steps-prefix-cls}-item-custom {
      .@{steps-prefix-cls}-item-icon {
        width: auto;
        background: none;
      }
    }
  }
}

.@{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;
    margin: @steps-small-icon-margin;
    font-size: @font-size-sm;
    line-height: @steps-small-icon-size;
    text-align: center;
    border-radius: @steps-small-icon-size;
  }
  .@{steps-prefix-cls}-item-title {
    padding-right: 12px;
    font-size: @font-size-base;
    line-height: @steps-small-icon-size;
    &::after {
      top: @steps-small-icon-size / 2;
    }
  }
  .@{steps-prefix-cls}-item-description {
    color: @text-color-secondary;
    font-size: @font-size-base;
  }
  .@{steps-prefix-cls}-item-tail {
    top: 8px;
  }
  .@{steps-prefix-cls}-item-custom .@{steps-prefix-cls}-item-icon {
    width: inherit;
    height: inherit;
    line-height: inherit;
    background: none;
    border: 0;
    border-radius: 0;
    > .@{steps-prefix-cls}-icon {
      font-size: @steps-small-icon-size;
      line-height: @steps-small-icon-size;
      transform: none;
    }
  }
}

.steps-vertical() {
  display: flex;
  flex-direction: column;
  .@{steps-prefix-cls}-item {
    display: block;
    flex: 1 0 auto;
    overflow: visible;
    &-icon {
      float: left;
      margin-right: @steps-vertical-icon-width;
    }
    &-content {
      display: block;
      min-height: 48px;
      overflow: hidden;
    }
    &-title {
      line-height: @steps-icon-size;
    }
    &-description {
      padding-bottom: 12px;
    }
  }

  > .@{steps-prefix-cls}-item
    > .@{steps-prefix-cls}-item-container
    > .@{steps-prefix-cls}-item-tail {
    position: absolute;
    top: 0;
    left: @steps-vertical-tail-width;
    width: 1px;
    height: 100%;
    padding: @steps-icon-size + 6px 0 6px;

    &::after {
      width: 1px;
      height: 100%;
    }
  }

  > .@{steps-prefix-cls}-item:not(:last-child)
    > .@{steps-prefix-cls}-item-container
    > .@{steps-prefix-cls}-item-tail {
    display: block;
  }

  > .@{steps-prefix-cls}-item
    > .@{steps-prefix-cls}-item-container
    > .@{steps-prefix-cls}-item-content
    > .@{steps-prefix-cls}-item-title {
    &::after {
      display: none;
    }
  }

  &.@{steps-prefix-cls}-small .@{steps-prefix-cls}-item-container {
    .@{steps-prefix-cls}-item-tail {
      position: absolute;
      top: 0;
      left: @steps-vertical-tail-width-sm;
      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 {
      margin-left: 58px;
      padding: 3.5px 24px;
    }
    &-content {
      display: block;
      width: (@steps-icon-size / 2 + 42px) * 2;
      margin-top: 8px;
      text-align: center;
    }
    &-icon {
      display: inline-block;
      margin-left: 42px;
    }
    &-title {
      padding-right: 0;
      padding-left: 0;
      &::after {
        display: none;
      }
    }
    &-subtitle {
      display: block;
      margin-bottom: 4px;
      margin-left: 0;
      line-height: @line-height-base;
    }
  }
  &.@{steps-prefix-cls}-small:not(.@{steps-prefix-cls}-dot) {
    .@{steps-prefix-cls}-item {
      &-icon {
        margin-left: 46px;
      }
    }
  }
}

.@{steps-prefix-cls}-dot,
.@{steps-prefix-cls}-dot.@{steps-prefix-cls}-small {
  .@{steps-prefix-cls}-item {
    &-title {
      line-height: @line-height-base;
    }
    &-tail {
      top: @steps-dot-top;
      width: 100%;
      margin: 0 0 0 @steps-desciption-max-width / 2;
      padding: 0;

      &::after {
        width: ~'calc(100% - 20px)';
        height: 3px;
        margin-left: 12px;
      }
    }
    &:first-child .@{steps-prefix-cls}-icon-dot {
      left: 2px;
    }
    &-icon {
      width: @steps-dot-size;
      height: @steps-dot-size;
      margin-left: 67px;
      padding-right: 0;
      line-height: @steps-dot-size;
      background: transparent;
      border: 0;

      .@{steps-prefix-cls}-icon-dot {
        position: relative;
        float: left;
        width: 100%;
        height: 100%;
        border-radius: 100px;
        transition: all 0.3s;
        /* expand hover area */
        &::after {
          position: absolute;
          top: -12px;
          left: -26px;
          width: 60px;
          height: 32px;
          background: fade(@black, 0.1%);
          content: '';
        }
      }
    }
    &-process .@{steps-prefix-cls}-item-icon {
      position: relative;
      top: -1px;
      width: @steps-current-dot-size;
      height: @steps-current-dot-size;
      line-height: @steps-current-dot-size;
    }
  }
}

.@{steps-prefix-cls}-vertical.@{steps-prefix-cls}-dot {
  .@{steps-prefix-cls}-item-icon {
    margin-top: 8px;
    margin-left: 0;
    background: none;
  }
  // https://github.com/ant-design/ant-design/issues/18354
  .@{steps-prefix-cls}-item > .@{steps-prefix-cls}-item-container > .@{steps-prefix-cls}-item-tail {
    top: 2px;
    left: -9px;
    margin: 0;
    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;
  }
}

.@{steps-prefix-cls}-navigation {
  padding-top: 12px;

  &.@{steps-prefix-cls}-small {
    .@{steps-prefix-cls}-item {
      &-container {
        margin-left: -12px;
      }
    }
  }

  .@{steps-prefix-cls}-item {
    overflow: visible;
    text-align: center;

    &-container {
      display: inline-block;
      height: 100%;
      margin-left: -16px;
      padding-bottom: 12px;
      text-align: left;
      transition: opacity 0.3s;

      .@{steps-prefix-cls}-item-content {
        max-width: @steps-nav-content-max-width;
      }

      .@{steps-prefix-cls}-item-title {
        max-width: 100%;
        padding-right: 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;

        &::after {
          display: none;
        }
      }
    }

    &:not(.@{steps-prefix-cls}-item-active) {
      .@{steps-prefix-cls}-item-container[role='button'] {
        cursor: pointer;
        &:hover {
          opacity: 0.85;
        }
      }
    }

    &:last-child {
      flex: 1;
      &::after {
        display: none;
      }
    }

    &::after {
      position: absolute;
      top: 50%;
      left: 100%;
      display: inline-block;
      width: 12px;
      height: 12px;
      margin-top: -14px;
      margin-left: -2px;
      border: 1px solid @steps-nav-arrow-color;
      border-bottom: none;
      border-left: none;
      transform: rotate(45deg);
      content: '';
    }

    &::before {
      position: absolute;
      bottom: 0;
      left: 50%;
      display: inline-block;
      width: 0;
      height: 2px;
      background-color: @steps-nav-active-color;
      transition: width 0.3s, left 0.3s;
      transition-timing-function: ease-out;
      content: '';
    }
  }

  .@{steps-prefix-cls}-item.@{steps-prefix-cls}-item-active::before {
    left: 0;
    width: 100%;
  }
}

@media (max-width: @screen-xs) {
  .@{steps-prefix-cls}-navigation {
    > .@{steps-prefix-cls}-item {
      margin-right: 0 !important;
      &::before {
        display: none;
      }
      &.@{steps-prefix-cls}-item-active::before {
        top: 0;
        right: 0;
        left: unset;
        display: block;
        width: 3px;
        height: ~"calc(100% - 24px)";
      }
      &::after {
        position: relative;
        top: -2px;
        left: 50%;
        display: block;
        width: 8px;
        height: 8px;
        margin-bottom: 8px;
        text-align: center;
        transform: rotate(135deg);
      }
      > .@{steps-prefix-cls}-item-container > .@{steps-prefix-cls}-item-tail {
        visibility: hidden;
      }
    }
  }
}

@steps-prefix-cls: ~'@{ant-prefix}-steps';

.@{steps-prefix-cls} {
  &-rtl {
    direction: rtl;
  }
}

.@{steps-prefix-cls}-item {
  &-icon {
    .@{steps-prefix-cls}.@{steps-prefix-cls}-rtl & {
      margin-right: 0;
      margin-left: 8px;
    }
  }

  &-tail {
    .@{steps-prefix-cls}-rtl & {
      right: 0;
      left: auto;
    }
  }

  &-title {
    .@{steps-prefix-cls}-rtl & {
      padding-right: 0;
      padding-left: 16px;
    }

    &::after {
      .@{steps-prefix-cls}-rtl & {
        right: 100%;
        left: auto;
      }
    }
  }
}

.@{steps-prefix-cls}-horizontal:not(.@{steps-prefix-cls}-label-vertical) {
  .@{steps-prefix-cls}-item {
    .@{steps-prefix-cls}-rtl& {
      margin-right: 0;
      margin-left: 16px;
    }

    &:last-child {
      .@{steps-prefix-cls}-rtl& {
        margin-left: 0;
      }
    }
    &:last-child .@{steps-prefix-cls}-item-title {
      .@{steps-prefix-cls}-rtl& {
        padding-left: 0;
      }
    }
  }
}

// custom-icon
.@{steps-prefix-cls}-item-custom {
  .@{steps-prefix-cls}-item-icon {
    > .@{steps-prefix-cls}-icon {
      .@{steps-prefix-cls}-rtl & {
        right: 0.5px;
        left: auto;
      }
    }
  }
}

// nav
.@{steps-prefix-cls}-navigation {
  &.@{steps-prefix-cls}-small {
    .@{steps-prefix-cls}-item {
      &-container {
        .@{steps-prefix-cls}-rtl& {
          margin-right: -12px;
          margin-left: 0;
        }
      }
    }
  }

  .@{steps-prefix-cls}-item {
    &-container {
      .@{steps-prefix-cls}-rtl& {
        margin-right: -16px;
        margin-left: 0;
        text-align: right;
      }
      .@{steps-prefix-cls}-item-title {
        .@{steps-prefix-cls}-rtl& {
          padding-left: 0;
        }
      }
    }

    &::after {
      .@{steps-prefix-cls}-rtl& {
        right: 100%;
        left: auto;
        margin-right: -2px;
        margin-left: 0;
        transform: rotate(225deg);
      }
    }
  }
}

// small
.@{steps-prefix-cls}-small {
  &.@{steps-prefix-cls}-horizontal:not(.@{steps-prefix-cls}-label-vertical)
    .@{steps-prefix-cls}-item {
    .@{steps-prefix-cls}-rtl& {
      margin-right: 0;
      margin-left: 12px;
    }

    &:last-child {
      .@{steps-prefix-cls}-rtl& {
        margin-left: 0;
      }
    }
  }

  .@{steps-prefix-cls}-item-title {
    .@{steps-prefix-cls}-rtl& {
      padding-right: 0;
      padding-left: 12px;
    }
  }
}

// vertical
.steps-vertical() {
  .@{steps-prefix-cls}-item {
    &-icon {
      .@{steps-prefix-cls}-rtl& {
        float: right;
        margin-right: 0;
        margin-left: @steps-vertical-icon-width;
      }
    }
  }

  > .@{steps-prefix-cls}-item
    > .@{steps-prefix-cls}-item-container
    > .@{steps-prefix-cls}-item-tail {
    .@{steps-prefix-cls}-rtl& {
      right: @steps-vertical-tail-width;
      left: auto;
    }
  }

  &.@{steps-prefix-cls}-small .@{steps-prefix-cls}-item-container {
    .@{steps-prefix-cls}-item-tail {
      .@{steps-prefix-cls}-rtl& {
        right: @steps-vertical-tail-width-sm;
        left: auto;
      }
    }
  }
}

// label
.@{steps-prefix-cls}-label-vertical {
  .@{steps-prefix-cls}-item {
    &-title {
      .@{steps-prefix-cls}-rtl& {
        padding-left: 0;
      }
    }
  }
}

// progress-dot
.@{steps-prefix-cls}-dot,
.@{steps-prefix-cls}-dot.@{steps-prefix-cls}-small {
  .@{steps-prefix-cls}-item {
    &-tail {
      .@{steps-prefix-cls}-rtl& {
        margin: 0 @steps-desciption-max-width / 2 0 0;
      }

      &::after {
        .@{steps-prefix-cls}-rtl& {
          margin-right: 12px;
          margin-left: 0;
        }
      }
    }
    &:first-child .@{steps-prefix-cls}-icon-dot {
      .@{steps-prefix-cls}-rtl& {
        right: 2px;
        left: auto;
      }
    }
    &-icon {
      .@{steps-prefix-cls}-rtl& {
        margin-right: 67px;
        margin-left: 0;
      }

      .@{steps-prefix-cls}-icon-dot {
        .@{steps-prefix-cls}-rtl& {
          float: right;
        }
        /* expand hover area */
        &::after {
          .@{steps-prefix-cls}-rtl& {
            right: -26px;
            left: auto;
          }
        }
      }
    }
  }
}

.@{steps-prefix-cls}-vertical.@{steps-prefix-cls}-dot {
  .@{steps-prefix-cls}-item-icon {
    .@{steps-prefix-cls}-rtl& {
      margin-right: 0;
      margin-left: 16px;
    }
  }
  // https://github.com/ant-design/ant-design/issues/18354
  .@{steps-prefix-cls}-item > .@{steps-prefix-cls}-item-container > .@{steps-prefix-cls}-item-tail {
    .@{steps-prefix-cls}-rtl& {
      right: -9px;
      left: auto;
    }
  }
  .@{steps-prefix-cls}-item:first-child .@{steps-prefix-cls}-icon-dot {
    .@{steps-prefix-cls}-rtl& {
      right: 0;
      left: auto;
    }
  }
  .@{steps-prefix-cls}-item-process .@{steps-prefix-cls}-icon-dot {
    .@{steps-prefix-cls}-rtl& {
      right: -2px;
      left: auto;
    }
  }
}

@switch-prefix-cls: ~'@{ant-prefix}-switch';
@switch-duration: 0.2s;

@switch-pin-size: @switch-height - 4px;
@switch-sm-pin-size: @switch-sm-height - 4px;

.@{switch-prefix-cls} {
  .reset-component;

  position: relative;
  display: inline-block;
  box-sizing: border-box;
  min-width: @switch-min-width;
  height: @switch-height;
  line-height: @switch-height;
  vertical-align: middle;
  background-color: @disabled-color;
  border: 0;
  border-radius: 100px;
  cursor: pointer;
  transition: all @switch-duration;
  user-select: none;

  &:focus {
    outline: 0;
    box-shadow: 0 0 0 2px fade(@disabled-color, 10%);
  }

  &-checked:focus {
    box-shadow: 0 0 0 2px fade(@switch-color, 20%);
  }

  &:focus:hover {
    box-shadow: none;
  }

  &-checked {
    background-color: @switch-color;
  }

  &-loading,
  &-disabled {
    cursor: not-allowed;
    opacity: @switch-disabled-opacity;
    * {
      box-shadow: none;
      cursor: not-allowed;
    }
  }

  // ========================= Inner ==========================
  &-inner {
    display: block;
    margin: 0 @switch-inner-margin-min 0 @switch-inner-margin-max;
    color: @text-color-inverse;
    font-size: @font-size-sm;
    transition: margin @switch-duration;
  }

  &-checked &-inner {
    margin: 0 @switch-inner-margin-max 0 @switch-inner-margin-min;
  }

  // ========================= Handle =========================
  &-handle {
    position: absolute;
    top: @switch-padding;
    left: @switch-padding;
    width: @switch-pin-size;
    height: @switch-pin-size;
    transition: all @switch-duration ease-in-out;

    &::before {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background-color: @switch-bg;
      border-radius: @switch-pin-size / 2;
      box-shadow: 0 2px 4px 0 @switch-shadow-color;
      transition: all @switch-duration ease-in-out;
      content: '';
    }
  }

  &-checked &-handle {
    left: ~"calc(100% - @switch-pin-size - @switch-padding)";
  }

  &:not(&-disabled):active {
    .@{switch-prefix-cls}-handle::before {
      right: -30%;
      left: 0;
    }

    &.@{switch-prefix-cls}-checked {
      .@{switch-prefix-cls}-handle::before {
        right: 0;
        left: -30%;
      }
    }
  }

  // ======================== Loading =========================
  &-loading-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    color: rgba(0, 0, 0, 0.65);
    transform: translate(-50%, -50%);
  }

  &-checked &-loading-icon {
    color: @switch-color;
  }

  // ========================== Size ==========================
  &-small {
    min-width: @switch-sm-min-width;
    height: @switch-sm-height;
    line-height: @switch-sm-height;

    .@{switch-prefix-cls}-inner {
      margin: 0 @switch-sm-inner-margin-min 0 @switch-sm-inner-margin-max;
      font-size: @font-size-sm;
    }

    .@{switch-prefix-cls}-handle {
      width: @switch-sm-pin-size;
      height: @switch-sm-pin-size;
    }

    .@{switch-prefix-cls}-loading-icon {
      transform: translate(-50%, -50%) scale(0.66667);
    }

    &.@{switch-prefix-cls}-checked {
      .@{switch-prefix-cls}-inner {
        margin: 0 @switch-sm-inner-margin-max 0 @switch-sm-inner-margin-min;
      }

      .@{switch-prefix-cls}-handle {
        left: ~"calc(100% - @switch-sm-pin-size - @switch-padding)";
      }
    }
  }
}

@switch-prefix-cls: ~'@{ant-prefix}-switch';

.@{switch-prefix-cls}-rtl {
  direction: rtl;

  .@{switch-prefix-cls}-inner {
    margin: 0 @switch-inner-margin-max 0 @switch-inner-margin-min;
  }

  .@{switch-prefix-cls}-handle {
    right: @switch-padding;
    left: auto;
  }

  &:not(&-disabled):active {
    .@{switch-prefix-cls}-handle::before {
      right: 0;
      left: -30%;
    }

    &.@{switch-prefix-cls}-checked {
      .@{switch-prefix-cls}-handle::before {
        right: -30%;
        left: 0;
      }
    }
  }

  &.@{switch-prefix-cls}-checked {
    .@{switch-prefix-cls}-inner {
      margin: 0 @switch-inner-margin-min 0 @switch-inner-margin-max;
    }

    .@{switch-prefix-cls}-handle {
      right: ~"calc(100% - @switch-pin-size - @switch-padding)";
    }
  }

  &.@{switch-prefix-cls}-small {
    &.@{switch-prefix-cls}-checked {
      .@{switch-prefix-cls}-handle {
        right: ~"calc(100% - @switch-sm-pin-size - @switch-padding)";
      }
    }
  }
}

.table-size(@size, @padding-vertical, @padding-horizontal, @font-size) {
  .@{table-prefix-cls}.@{table-prefix-cls}-@{size} {
    font-size: @font-size;

    .@{table-prefix-cls}-title,
    .@{table-prefix-cls}-footer,
    .@{table-prefix-cls}-thead > tr > th,
    .@{table-prefix-cls}-tbody > tr > td,
    tfoot > tr > th,
    tfoot > tr > td {
      padding: @padding-vertical @padding-horizontal;
    }

    .@{table-prefix-cls}-thead {
      th.@{table-prefix-cls}-column-has-sorters {
        padding: 0;
      }

      .@{table-prefix-cls}-filter-column {
        margin: -@padding-vertical -@padding-horizontal;
      }

      .@{table-prefix-cls}-filter-column-title {
        padding: @padding-vertical 2.3em @padding-vertical @padding-horizontal;
      }

      .@{table-prefix-cls}-column-sorters {
        padding: @padding-vertical @padding-horizontal;
      }
    }

    .@{table-prefix-cls}-expanded-row-fixed {
      margin: -@padding-vertical -@padding-horizontal;
    }

    .@{table-prefix-cls}-tbody {
      // ========================= Nest Table ===========================
      .@{table-prefix-cls}-wrapper:only-child {
        .@{table-prefix-cls} {
          margin: -@padding-vertical -@padding-horizontal -@padding-vertical (@padding-horizontal +
                ceil(@font-size-sm * 1.4));
        }
      }
    }
  }
}

// ================================================================
// =                            Middle                            =
// ================================================================
.table-size(~'middle', @table-padding-vertical-md, @table-padding-horizontal-md, @table-font-size-md);

// ================================================================
// =                            Small                             =
// ================================================================
.table-size(~'small', @table-padding-vertical-sm, @table-padding-horizontal-sm, @table-font-size-sm);

.@{table-prefix-cls}-small {
  .@{table-prefix-cls}-thead > tr > th {
    background-color: @table-header-bg-sm;
  }
  .@{table-prefix-cls}-selection-column {
    width: 46px;
    min-width: 46px;
  }
}

@table-border: @border-width-base @border-style-base @border-color-split;

.@{table-prefix-cls}.@{table-prefix-cls}-bordered {
  // ============================ Title =============================
  > .@{table-prefix-cls}-title {
    border: @table-border;
    border-bottom: 0;
  }

  > .@{table-prefix-cls}-container {
    // ============================ Content ============================
    border: @table-border;
    border-right: 0;
    border-bottom: 0;

    > .@{table-prefix-cls}-content,
    > .@{table-prefix-cls}-header,
    > .@{table-prefix-cls}-body {
      > table {
        // ============================= Cell =============================
        > thead > tr > th,
        > tbody > tr > td,
        > tfoot > tr > th,
        > tfoot > tr > td {
          border-right: @table-border;
        }
        // ============================ Header ============================
        > thead {
          > tr:not(:last-child) > th {
            border-bottom: @border-width-base @border-style-base @border-color-split;
          }
        }

        // Fixed right should provides additional border
        > thead > tr,
        > tbody > tr,
        > tfoot > tr {
          > .@{table-prefix-cls}-cell-fix-right-first::after {
            border-right: @table-border;
          }
        }
      }

      // ========================== Expandable ==========================
      > table > tbody > tr > td {
        > .@{table-prefix-cls}-expanded-row-fixed {
          margin: -@table-padding-vertical (-@table-padding-horizontal - @border-width-base);

          &::after {
            position: absolute;
            top: 0;
            right: @border-width-base;
            bottom: 0;
            border-right: @table-border;
            content: '';
          }
        }
      }
    }
  }

  &.@{table-prefix-cls}-scroll-horizontal {
    > .@{table-prefix-cls}-container > .@{table-prefix-cls}-body {
      > table > tbody {
        > tr.@{table-prefix-cls}-expanded-row,
        > tr.@{table-prefix-cls}-placeholder {
          > td {
            border-right: 0;
          }
        }
      }
    }
  }

  // Size related
  &.@{table-prefix-cls}-middle {
    > .@{table-prefix-cls}-container {
      > .@{table-prefix-cls}-content,
      > .@{table-prefix-cls}-body {
        > table > tbody > tr > td {
          > .@{table-prefix-cls}-expanded-row-fixed {
            margin: -@table-padding-vertical-md (-@table-padding-horizontal-md - @border-width-base);
          }
        }
      }
    }
  }

  &.@{table-prefix-cls}-small {
    > .@{table-prefix-cls}-container {
      > .@{table-prefix-cls}-content,
      > .@{table-prefix-cls}-body {
        > table > tbody > tr > td {
          > .@{table-prefix-cls}-expanded-row-fixed {
            margin: -@table-padding-vertical-sm (-@table-padding-horizontal-sm - @border-width-base);
          }
        }
      }
    }
  }

  // ============================ Footer ============================
  > .@{table-prefix-cls}-footer {
    border: @table-border;
    border-top: 0;
  }
}

.@{table-prefix-cls}-cell {
  // ============================ Nested ============================
  .@{table-prefix-cls}-container:first-child {
    // :first-child to avoid the case when bordered and title is set
    border-top: 0;
  }

  &-scrollbar {
    box-shadow: 0 @border-width-base 0 @border-width-base @table-header-bg;
  }
}

@table-prefix-cls: ~'@{ant-prefix}-table';
@dropdown-prefix-cls: ~'@{ant-prefix}-dropdown';
@descriptions-prefix-cls: ~'@{ant-prefix}-descriptions';
@table-header-icon-color: #bfbfbf;
@table-header-icon-color-hover: darken(@table-header-icon-color, 10%);
@table-header-sort-active-filter-bg: lighten(@table-header-sort-active-bg, 2%);

.@{table-prefix-cls}-wrapper {
  max-width: 100%;
  .clearfix;
}

.@{table-prefix-cls} {
  .reset-component;
  position: relative;
  z-index: 0;
  clear: both;
  font-size: @table-font-size;
  background: @table-bg;
  border-radius: @border-radius-base;

  // https://github.com/ant-design/ant-design/issues/17611
  table {
    width: 100%;
    text-align: left;
    border-radius: @table-border-radius-base @table-border-radius-base 0 0;
    border-collapse: separate;
    border-spacing: 0;
  }

  // ============================= Cell =============================
  &-thead > tr > th,
  &-tbody > tr > td,
  tfoot > tr > th,
  tfoot > tr > td {
    position: relative;
    padding: @table-padding-vertical @table-padding-horizontal;
    overflow-wrap: break-word;
  }

  &-cell-ellipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    word-break: keep-all;

    // Fixed first or last should special process
    &.@{table-prefix-cls}-cell-fix-left-last,
    &.@{table-prefix-cls}-cell-fix-right-first {
      overflow: visible;

      .@{table-prefix-cls}-cell-content {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }

  // ============================ Title =============================
  &-title {
    padding: @table-padding-vertical @table-padding-horizontal;
  }

  // ============================ Footer ============================
  &-footer {
    padding: @table-padding-vertical @table-padding-horizontal;
    color: @table-footer-color;
    background: @table-footer-bg;
  }

  // ============================ Header ============================
  &-thead {
    > tr {
      > th {
        color: @table-header-color;
        font-weight: 500;
        text-align: left;
        background: @table-header-bg;
        border-bottom: @border-width-base @border-style-base @border-color-split;
        transition: background 0.3s ease;

        &[colspan]:not([colspan='1']) {
          text-align: center;
        }
      }
    }

    > tr:not(:last-child) > th {
      &[colspan] {
        border-bottom: 0;
      }
    }
  }

  // ============================= Body =============================
  &-tbody {
    > tr {
      > td {
        border-bottom: @border-width-base @border-style-base @border-color-split;
        transition: background 0.3s;
      }

      &.@{table-prefix-cls}-row:hover {
        > td {
          background: @table-row-hover-bg;
        }
      }

      &.@{table-prefix-cls}-row-selected {
        > td {
          background: @table-selected-row-bg;
          border-color: rgba(0, 0, 0, 0.03);
        }

        &:hover {
          > td {
            background: @table-selected-row-hover-bg;
          }
        }
      }

      // ========================= Nest Table ===========================
      .@{table-prefix-cls}-wrapper:only-child {
        .@{table-prefix-cls} {
          margin: -@table-padding-vertical -@table-padding-horizontal -@table-padding-vertical (@table-padding-horizontal +
                ceil(@font-size-sm * 1.4));

          &-tbody > tr:last-child > td {
            border-bottom: 0;

            &:first-child,
            &:last-child {
              border-radius: 0;
            }
          }
        }
      }
    }
  }

  // =========================== Summary ============================
  tfoot {
    > tr {
      > th,
      > td {
        border-bottom: @border-width-base @border-style-base @border-color-split;
      }
    }
  }

  // ========================== Pagination ==========================
  &-pagination.@{ant-prefix}-pagination {
    margin: 16px 0;
  }

  &-pagination {
    &-left {
      float: left;
    }

    &-center {
      text-align: center;
    }

    &-right {
      float: right;
    }
  }

  // ================================================================
  // =                           Function                           =
  // ================================================================

  // ============================ Sorter ============================
  &-thead th.@{table-prefix-cls}-column-has-sorters {
    padding: 0;
    cursor: pointer;
    transition: all 0.3s;

    &:hover {
      background: @table-header-sort-active-bg;

      .@{table-prefix-cls}-filter-trigger-container {
        background: @table-header-sort-active-filter-bg;
      }
    }
  }

  &-thead th.@{table-prefix-cls}-column-sort {
    background: @table-header-sort-bg;
  }
  td&-column-sort {
    background: @table-body-sort-bg;
  }

  &-column-sorters-with-tooltip {
    display: inline-block;
    width: 100%;
  }

  &-column-sorters {
    display: inline-flex;
    align-items: center;
    padding: @table-padding-vertical @table-padding-horizontal;
  }

  &-column-sorter {
    margin-top: 0.15em;
    margin-bottom: -0.15em;
    margin-left: @padding-xs;
    color: @table-header-icon-color;

    &-full {
      margin-top: -0.2em;
      margin-bottom: 0;
    }

    &-inner {
      display: inline-flex;
      flex-direction: column;
      align-items: center;
    }

    &-up,
    &-down {
      .iconfont-size-under-12px(11px);

      &.active {
        color: @primary-color;
      }
    }

    &-up + &-down {
      margin-top: -0.3em;
    }
  }

  // ============================ Filter ============================
  &-filter-column {
    display: flex;
    align-items: center;
    margin: -@table-padding-vertical -@table-padding-horizontal;
  }

  &-filter-column-title {
    flex: auto;
    padding: @table-padding-vertical 2.3em @table-padding-vertical @table-padding-horizontal;
  }

  // Remove padding when sorter also provided
  &-thead tr th.@{table-prefix-cls}-column-has-sorters {
    .@{table-prefix-cls}-filter-column {
      margin: 0;
    }

    .@{table-prefix-cls}-filter-column-title {
      padding: 0 2.3em 0 0;
    }
  }

  &-filter-trigger-container {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex: none;
    align-items: stretch;
    align-self: stretch;
    cursor: pointer;
    transition: background-color 0.3s;

    &-open,
    &:hover,
    .@{table-prefix-cls}-thead th.@{table-prefix-cls}-column-has-sorters:hover &:hover {
      background: @table-header-filter-active-bg;
    }
  }

  &-filter-trigger {
    display: block;
    width: 2.3em;
    color: @table-header-icon-color;
    font-size: @font-size-sm;
    transition: color 0.3s;

    .@{iconfont-css-prefix} {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    .@{table-prefix-cls}-filter-trigger-container-open &,
    &:hover {
      color: @text-color-secondary;
    }

    &.active {
      color: @primary-color;
    }
  }

  // Dropdown
  &-filter-dropdown {
    .reset-component;

    // Reset menu
    .@{dropdown-prefix-cls}-menu {
      // https://github.com/ant-design/ant-design/issues/4916
      // https://github.com/ant-design/ant-design/issues/19542
      max-height: 264px;
      overflow-x: hidden;
      border: 0;
      box-shadow: none;
    }

    min-width: 120px;
    background-color: @table-filter-dropdown-bg;

    border-radius: @border-radius-base;
    box-shadow: @box-shadow-base;

    &-submenu > ul {
      max-height: ~"calc(100vh - 130px)";
      overflow-x: hidden;
      overflow-y: auto;
    }

    // Checkbox
    &,
    &-submenu {
      .@{ant-prefix}-checkbox-wrapper + span {
        padding-left: 8px;
      }
    }

    // Operation
    &-btns {
      display: flex;
      justify-content: space-between;
      padding: 7px 8px 7px 3px;
      overflow: hidden;
      background-color: @table-filter-btns-bg;
      border-top: @border-width-base @border-style-base @border-color-split;
    }
  }

  // ========================== Selections ==========================
  .@{table-prefix-cls}-selection-col {
    width: @table-selection-column-width;
  }

  table tr th&-selection-column,
  table tr td&-selection-column {
    padding-right: @padding-xs;
    padding-left: @padding-xs;
    text-align: center;

    .@{ant-prefix}-radio-wrapper {
      margin-right: 0;
    }
  }

  &-selection {
    position: relative;

    &-extra {
      position: absolute;
      top: 0;
      right: @table-selection-extra-right;
      cursor: pointer;
      transition: all 0.3s;

      .@{iconfont-css-prefix} {
        .iconfont-size-under-12px(10px);
        color: @table-header-icon-color;

        &:hover {
          color: @table-header-icon-color-hover;
        }
      }
    }
  }

  // ========================== Expandable ==========================
  &-expand-icon-col {
    width: 48px;
  }

  &-row-expand-icon-cell {
    text-align: center;
  }

  &-row-indent {
    float: left;
    height: 1px;
  }

  &-row-expand-icon {
    .operation-unit();
    position: relative;
    display: inline-flex;
    float: left;
    box-sizing: border-box;

    width: ceil(@font-size-sm * 1.4);
    height: ceil(@font-size-sm * 1.4);
    padding: 0;
    color: inherit;
    line-height: @font-size-sm;
    vertical-align: floor((@font-size-base - ceil(@font-size-sm * 1.4)) / 2);
    background: @table-expand-icon-bg;
    border: @border-width-base @border-style-base @border-color-split;
    border-radius: @border-radius-base;
    outline: none;
    transition: all 0.3s;
    user-select: none;

    &:focus,
    &:hover,
    &:active {
      border-color: currentColor;
    }

    &::before,
    &::after {
      position: absolute;
      background: currentColor;
      transition: transform 0.3s ease-out;
      content: '';
    }

    &::before {
      top: 7px;
      right: 3px;
      left: 3px;
      height: @border-width-base;
    }

    &::after {
      top: 3px;
      bottom: 3px;
      left: 7px;
      width: @border-width-base;
      transform: rotate(90deg);
    }

    // Motion effect
    &-collapsed::before {
      transform: rotate(-180deg);
    }
    &-collapsed::after {
      transform: rotate(0deg);
    }

    &-spaced {
      &::before,
      &::after {
        display: none;
        content: none;
      }
      background: transparent;
      border: 0;
      visibility: hidden;
    }

    .@{table-prefix-cls}-row-indent + & {
      margin-top: (@font-size-base * @line-height-base - ceil(@font-size-sm * 1.4)) / 2;
      margin-right: @padding-xs;
    }
  }

  tr&-expanded-row {
    &,
    &:hover {
      > td {
        background: @table-expanded-row-bg;
      }
    }

    // https://github.com/ant-design/ant-design/issues/25573
    .@{descriptions-prefix-cls}-view table {
      width: auto;
    }
  }

  // With fixed
  .@{table-prefix-cls}-expanded-row-fixed {
    position: relative;
    margin: -@table-padding-vertical -@table-padding-horizontal;
    padding: @table-padding-vertical @table-padding-horizontal;
  }

  // ========================= Placeholder ==========================
  &-tbody > tr&-placeholder {
    text-align: center;
    .@{table-prefix-cls}-empty & {
      color: @disabled-color;
    }
    &:hover {
      > td {
        background: @component-background;
      }
    }
  }

  // ============================ Fixed =============================
  &-cell-fix-left,
  &-cell-fix-right {
    position: -webkit-sticky !important;
    position: sticky !important;
    z-index: 2;
    background: @table-bg;
  }

  &-cell-fix-left-first::after,
  &-cell-fix-left-last::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: -1px;
    width: 30px;
    transform: translateX(100%);
    transition: box-shadow 0.3s;
    content: '';
    pointer-events: none;
  }
  &-cell-fix-right-first::after,
  &-cell-fix-right-last::after {
    position: absolute;
    top: 0;
    bottom: -1px;
    left: 0;
    width: 30px;
    transform: translateX(-100%);
    transition: box-shadow 0.3s;
    content: '';
    pointer-events: none;
  }

  .@{table-prefix-cls}-container {
    &::before,
    &::after {
      position: absolute;
      top: 0;
      bottom: 0;
      z-index: 1;
      width: 30px;
      transition: box-shadow 0.3s;
      content: '';
      pointer-events: none;
    }

    &::before {
      left: 0;
    }
    &::after {
      right: 0;
    }
  }

  &-ping-left {
    &:not(.@{table-prefix-cls}-has-fix-left) .@{table-prefix-cls}-container {
      position: relative;

      &::before {
        box-shadow: inset 10px 0 8px -8px darken(@shadow-color, 5%);
      }
    }

    .@{table-prefix-cls}-cell-fix-left-first::after,
    .@{table-prefix-cls}-cell-fix-left-last::after {
      box-shadow: inset 10px 0 8px -8px darken(@shadow-color, 5%);
    }
  }

  &-ping-right {
    &:not(.@{table-prefix-cls}-has-fix-right) .@{table-prefix-cls}-container {
      position: relative;

      &::after {
        box-shadow: inset -10px 0 8px -8px darken(@shadow-color, 5%);
      }
    }

    .@{table-prefix-cls}-cell-fix-right-first::after,
    .@{table-prefix-cls}-cell-fix-right-last::after {
      box-shadow: inset -10px 0 8px -8px darken(@shadow-color, 5%);
    }
  }
}

@media all and (-ms-high-contrast: none) {
  .@{table-prefix-cls} {
    &-ping-left {
      .@{table-prefix-cls}-cell-fix-left-last::after {
        box-shadow: none !important;
      }
    }
    &-ping-right {
      .@{table-prefix-cls}-cell-fix-right-first::after {
        box-shadow: none !important;
      }
    }
  }
}

// ================================================================
// =                         Border Radio                         =
// ================================================================
.@{table-prefix-cls} {
  /* title + table */
  &-title {
    border-radius: @table-border-radius-base @table-border-radius-base 0 0;
  }

  &-title + &-container {
    border-top-left-radius: 0;
    border-top-right-radius: 0;

    table > thead > tr:first-child {
      th:first-child {
        border-radius: 0;
      }

      th:last-child {
        border-radius: 0;
      }
    }
  }

  /* table */
  &-container {
    border-top-left-radius: @table-border-radius-base;
    border-top-right-radius: @table-border-radius-base;

    table > thead > tr:first-child {
      th:first-child {
        border-top-left-radius: @table-border-radius-base;
      }

      th:last-child {
        border-top-right-radius: @table-border-radius-base;
      }
    }
  }

  /* table + footer */
  &-footer {
    border-radius: 0 0 @table-border-radius-base @table-border-radius-base;
  }
}

@table-prefix-cls: ~'@{ant-prefix}-table';
@table-wrapepr-cls: ~'@{table-prefix-cls}-wrapper';
@table-wrapepr-rtl-cls: ~'@{table-prefix-cls}-wrapper-rtl';

.@{table-prefix-cls}-wrapper {
  &-rtl {
    direction: rtl;
  }
}

.@{table-prefix-cls} {
  &-rtl {
    direction: rtl;
  }

  table {
    .@{table-wrapepr-rtl-cls} & {
      text-align: right;
    }
  }

  // ============================ Header ============================
  &-thead {
    > tr {
      > th {
        &[colspan]:not([colspan='1']) {
          .@{table-wrapepr-rtl-cls} & {
            text-align: center;
          }
        }

        .@{table-wrapepr-rtl-cls} & {
          text-align: right;
        }
      }
    }
  }

  // ============================= Body =============================
  &-tbody {
    > tr {
      // ========================= Nest Table ===========================
      .@{table-prefix-cls}-wrapper:only-child {
        .@{table-prefix-cls}-rtl {
          margin: -@table-padding-vertical (@table-padding-horizontal + ceil(@font-size-sm * 1.4)) -@table-padding-vertical -@table-padding-horizontal;
        }
      }
    }
  }

  // ========================== Pagination ==========================
  &-pagination {
    .@{table-wrapepr-cls}.@{table-wrapepr-rtl-cls} & {
      float: left;
    }

    &-left {
      .@{table-wrapepr-cls}.@{table-wrapepr-rtl-cls} & {
        float: left;
      }
    }

    &-right {
      .@{table-wrapepr-cls}.@{table-wrapepr-rtl-cls} & {
        float: right;
      }
    }

    &-center {
      .@{table-wrapepr-cls}.@{table-wrapepr-rtl-cls} & {
        float: initial;
        text-align: center;
      }
    }
  }

  // ================================================================
  // =                           Function                           =
  // ================================================================

  // ============================ Sorter ============================
  &-column-sorter {
    .@{table-wrapepr-rtl-cls} & {
      margin-right: @padding-xs;
      margin-left: 0;
    }
  }

  // ============================ Filter ============================
  &-filter-column-title {
    .@{table-wrapepr-rtl-cls} & {
      padding: @table-padding-vertical @table-padding-horizontal @table-padding-vertical 2.3em;
    }
  }

  &-thead tr th.@{table-prefix-cls}-column-has-sorters {
    .@{table-prefix-cls}-filter-column-title {
      .@{table-prefix-cls}-rtl & {
        padding: 0 0 0 2.3em;
      }
    }
  }

  &-filter-trigger-container {
    .@{table-wrapepr-rtl-cls} & {
      right: auto;
      left: 0;
    }
  }

  // Dropdown
  &-filter-dropdown {
    // Checkbox
    &,
    &-submenu {
      .@{ant-prefix}-checkbox-wrapper + span {
        .@{ant-prefix}-dropdown-rtl &,
        .@{ant-prefix}-dropdown-menu-submenu-rtl& {
          padding-right: 8px;
          padding-left: 0;
        }
      }
    }
  }

  // ========================== Selections ==========================
  &-selection {
    .@{table-wrapepr-rtl-cls} & {
      text-align: center;
    }

    &-extra {
      .@{table-wrapepr-rtl-cls} & {
        right: auto;
        left: @table-selection-extra-right;
      }
    }
  }

  // ========================== Expandable ==========================
  &-row-indent {
    .@{table-wrapepr-rtl-cls} & {
      float: right;
    }
  }

  &-row-expand-icon {
    .@{table-wrapepr-rtl-cls} & {
      float: right;
    }

    .@{table-prefix-cls}-row-indent + & {
      .@{table-wrapepr-rtl-cls} & {
        margin-right: 0;
        margin-left: @padding-xs;
      }
    }

    &::after {
      .@{table-wrapepr-rtl-cls} & {
        transform: rotate(-90deg);
      }
    }

    &-collapsed::before {
      .@{table-wrapepr-rtl-cls} & {
        transform: rotate(180deg);
      }
    }

    &-collapsed::after {
      .@{table-wrapepr-rtl-cls} & {
        transform: rotate(0deg);
      }
    }
  }
}

.@{tab-prefix-cls} {
  &-small {
    > .@{tab-prefix-cls}-nav {
      .@{tab-prefix-cls}-tab {
        padding: @tabs-horizontal-padding-sm;
        font-size: @tabs-title-font-size-sm;
      }
    }
  }

  &-large {
    > .@{tab-prefix-cls}-nav {
      .@{tab-prefix-cls}-tab {
        padding: @tabs-horizontal-padding-lg;
        font-size: @tabs-title-font-size-lg;
      }
    }
  }

  &-card {
    &.@{tab-prefix-cls}-small {
      > .@{tab-prefix-cls}-nav {
        .@{tab-prefix-cls}-tab {
          padding: @tabs-card-horizontal-padding-sm;
        }
      }
    }

    &.@{tab-prefix-cls}-large {
      > .@{tab-prefix-cls}-nav {
        .@{tab-prefix-cls}-tab {
          padding: @tabs-card-horizontal-padding-lg;
        }
      }
    }
  }
}

@tab-prefix-cls: ~'@{ant-prefix}-tabs';

.@{tab-prefix-cls}-rtl {
  direction: rtl;

  .@{tab-prefix-cls}-nav {
    .@{tab-prefix-cls}-tab {
      margin: @tabs-horizontal-margin-rtl;

      &:last-of-type {
        margin-left: 0;
      }

      .@{iconfont-css-prefix} {
        margin-right: 0;
        margin-left: @margin-sm;
      }

      .@{tab-prefix-cls}-tab-remove {
        margin-right: @margin-xs;
        margin-left: -@margin-xss;

        .@{iconfont-css-prefix} {
          margin: 0;
        }
      }
    }
  }

  &.@{tab-prefix-cls}-left {
    > .@{tab-prefix-cls}-nav {
      order: 1;
    }
    > .@{tab-prefix-cls}-content-holder {
      order: 0;
    }
  }

  &.@{tab-prefix-cls}-right {
    > .@{tab-prefix-cls}-nav {
      order: 0;
    }
    > .@{tab-prefix-cls}-content-holder {
      order: 1;
    }
  }

  // ====================== Card ======================
  &.@{tab-prefix-cls}-card {
    &.@{tab-prefix-cls}-top,
    &.@{tab-prefix-cls}-bottom {
      > .@{tab-prefix-cls}-nav {
        button.@{tab-prefix-cls}-tab:not(:last-of-type) {
          margin: 0 0 0 @tabs-card-gutter;
        }
      }
    }
  }
}

.@{tab-prefix-cls}-dropdown {
  &-rtl {
    direction: rtl;
  }
  &-menu-item {
    .@{tab-prefix-cls}-dropdown-rtl & {
      text-align: right;
    }
  }
}

.@{tab-prefix-cls} {
  // ========================== Top & Bottom ==========================
  &-top,
  &-bottom {
    flex-direction: column;

    > .@{tab-prefix-cls}-nav,
    > div > .@{tab-prefix-cls}-nav {
      margin: @tabs-bar-margin;

      &::before {
        position: absolute;
        right: 0;
        left: 0;
        border-bottom: @border-width-base @border-style-base @border-color-split;
        content: '';
      }

      .@{tab-prefix-cls}-ink-bar {
        height: 2px;

        &-animated {
          transition: width @animation-duration-slow, left @animation-duration-slow,
            right @animation-duration-slow;
        }
      }

      .@{tab-prefix-cls}-nav-wrap {
        &::before,
        &::after {
          top: 0;
          bottom: 0;
          width: 30px;
        }

        &::before {
          left: 0;
          box-shadow: inset 10px 0 8px -8px fade(@shadow-color, 8%);
        }
        &::after {
          right: 0;
          box-shadow: inset -10px 0 8px -8px fade(@shadow-color, 8%);
        }

        &.@{tab-prefix-cls}-nav-wrap-ping-left::before {
          opacity: 1;
        }
        &.@{tab-prefix-cls}-nav-wrap-ping-right::after {
          opacity: 1;
        }
      }
    }
  }

  &-top {
    > .@{tab-prefix-cls}-nav,
    > div > .@{tab-prefix-cls}-nav {
      &::before {
        bottom: 0;
      }

      .@{tab-prefix-cls}-ink-bar {
        bottom: 0;
      }
    }
  }

  &-bottom {
    > .@{tab-prefix-cls}-nav,
    > div > .@{tab-prefix-cls}-nav {
      order: 1;
      margin-top: @margin-md;
      margin-bottom: 0;

      &::before {
        top: 0;
      }

      .@{tab-prefix-cls}-ink-bar {
        top: 0;
      }
    }

    > .@{tab-prefix-cls}-content-holder,
    > div > .@{tab-prefix-cls}-content-holder {
      order: 0;
    }
  }

  // ========================== Left & Right ==========================
  &-left,
  &-right {
    > .@{tab-prefix-cls}-nav,
    > div > .@{tab-prefix-cls}-nav {
      flex-direction: column;
      min-width: 50px;

      // >>>>>>>>>>> Tab
      .@{tab-prefix-cls}-tab {
        margin: @tabs-vertical-margin;
        padding: @tabs-vertical-padding;
        text-align: center;

        &:last-of-type {
          margin-bottom: 0;
        }
      }

      // >>>>>>>>>>> Nav
      .@{tab-prefix-cls}-nav-wrap {
        flex-direction: column;

        &::before,
        &::after {
          right: 0;
          left: 0;
          height: 30px;
        }

        &::before {
          top: 0;
          box-shadow: inset 0 10px 8px -8px fade(@shadow-color, 8%);
        }
        &::after {
          bottom: 0;
          box-shadow: inset 0 -10px 8px -8px fade(@shadow-color, 8%);
        }

        &.@{tab-prefix-cls}-nav-wrap-ping-top::before {
          opacity: 1;
        }
        &.@{tab-prefix-cls}-nav-wrap-ping-bottom::after {
          opacity: 1;
        }
      }

      // >>>>>>>>>>> Ink Bar
      .@{tab-prefix-cls}-ink-bar {
        width: 2px;

        &-animated {
          transition: height @animation-duration-slow, top @animation-duration-slow;
        }
      }

      .@{tab-prefix-cls}-nav-list,
      .@{tab-prefix-cls}-nav-operations {
        flex-direction: column;
      }
    }
  }

  &-left {
    > .@{tab-prefix-cls}-nav,
    > div > .@{tab-prefix-cls}-nav {
      .@{tab-prefix-cls}-ink-bar {
        right: 0;
      }
    }

    > .@{tab-prefix-cls}-content-holder,
    > div > .@{tab-prefix-cls}-content-holder {
      margin-left: -@border-width-base;
      border-left: @border-width-base @border-style-base @border-color-split;

      > .@{tab-prefix-cls}-content > .@{tab-prefix-cls}-tabpane {
        padding-left: @padding-lg;
      }
    }
  }

  &-right {
    > .@{tab-prefix-cls}-nav,
    > div > .@{tab-prefix-cls}-nav {
      order: 1;

      .@{tab-prefix-cls}-ink-bar {
        left: 0;
      }
    }

    > .@{tab-prefix-cls}-content-holder,
    > div > .@{tab-prefix-cls}-content-holder {
      order: 0;
      margin-right: -@border-width-base;
      border-right: @border-width-base @border-style-base @border-color-split;

      > .@{tab-prefix-cls}-content > .@{tab-prefix-cls}-tabpane {
        padding-right: @padding-lg;
      }
    }
  }
}

.@{tab-prefix-cls}-dropdown {
  .reset-component;

  position: absolute;
  top: -9999px;
  left: -9999px;
  z-index: @zindex-dropdown;
  display: block;

  &-hidden {
    display: none;
  }

  &-menu {
    max-height: 200px;
    margin: 0;
    padding: @dropdown-edge-child-vertical-padding 0;
    overflow-x: hidden;
    overflow-y: auto;
    text-align: left;
    list-style-type: none;
    background-color: @dropdown-menu-bg;
    background-clip: padding-box;
    border-radius: @border-radius-base;
    outline: none;
    box-shadow: @box-shadow-base;

    &-item {
      min-width: 120px;
      margin: 0;
      padding: @dropdown-vertical-padding @control-padding-horizontal;
      overflow: hidden;
      color: @text-color;
      font-weight: normal;
      font-size: @dropdown-font-size;
      line-height: @dropdown-line-height;
      white-space: nowrap;
      text-overflow: ellipsis;
      cursor: pointer;
      transition: all 0.3s;

      &:hover {
        background: @item-hover-bg;
      }

      &-disabled {
        &,
        &:hover {
          color: @disabled-color;
          background: transparent;
          cursor: not-allowed;
        }
      }
    }
  }
}

.@{tab-prefix-cls}-card {
  > .@{tab-prefix-cls}-nav,
  > div > .@{tab-prefix-cls}-nav {
    .@{tab-prefix-cls}-tab {
      margin: 0;
      padding: @tabs-card-horizontal-padding;
      background: @tabs-card-head-background;
      border: @border-width-base @border-style-base @border-color-split;
      transition: all @animation-duration-slow @ease-in-out;

      &-active {
        color: @tabs-card-active-color;
        background: @component-background;
      }
    }

    .@{tab-prefix-cls}-ink-bar {
      visibility: hidden;
    }
  }

  // ========================== Top & Bottom ==========================
  &.@{tab-prefix-cls}-top,
  &.@{tab-prefix-cls}-bottom {
    > .@{tab-prefix-cls}-nav,
    > div > .@{tab-prefix-cls}-nav {
      .@{tab-prefix-cls}-tab:not(:last-of-type) {
        margin-right: @tabs-card-gutter;
      }
    }
  }

  &.@{tab-prefix-cls}-top {
    > .@{tab-prefix-cls}-nav,
    > div > .@{tab-prefix-cls}-nav {
      .@{tab-prefix-cls}-tab {
        border-radius: @border-radius-base @border-radius-base 0 0;

        &-active {
          border-bottom-color: @component-background;
        }
      }
    }
  }
  &.@{tab-prefix-cls}-bottom {
    > .@{tab-prefix-cls}-nav,
    > div > .@{tab-prefix-cls}-nav {
      .@{tab-prefix-cls}-tab {
        border-radius: 0 0 @border-radius-base @border-radius-base;

        &-active {
          border-top-color: @component-background;
        }
      }
    }
  }

  // ========================== Left & Right ==========================
  &.@{tab-prefix-cls}-left,
  &.@{tab-prefix-cls}-right {
    > .@{tab-prefix-cls}-nav,
    > div > .@{tab-prefix-cls}-nav {
      .@{tab-prefix-cls}-tab:not(:last-of-type) {
        margin-bottom: @tabs-card-gutter;
      }
    }
  }

  &.@{tab-prefix-cls}-left {
    > .@{tab-prefix-cls}-nav,
    > div > .@{tab-prefix-cls}-nav {
      .@{tab-prefix-cls}-tab {
        border-radius: @border-radius-base 0 0 @border-radius-base;

        &-active {
          border-right-color: @component-background;
        }
      }
    }
  }
  &.@{tab-prefix-cls}-right {
    > .@{tab-prefix-cls}-nav,
    > div > .@{tab-prefix-cls}-nav {
      .@{tab-prefix-cls}-tab {
        border-radius: 0 @border-radius-base @border-radius-base 0;

        &-active {
          border-left-color: @component-background;
        }
      }
    }
  }
}

@tab-prefix-cls: ~'@{ant-prefix}-tabs';

.@{tab-prefix-cls} {
  .reset-component;

  display: flex;
  overflow: hidden;

  // ========================== Navigation ==========================
  > .@{tab-prefix-cls}-nav,
  > div > .@{tab-prefix-cls}-nav {
    position: relative;
    display: flex;
    flex: none;
    align-items: center;

    .@{tab-prefix-cls}-nav-wrap {
      position: relative;
      display: inline-block;
      display: flex;
      flex: auto;
      align-self: stretch;
      overflow: hidden;
      white-space: nowrap;
      transform: translate(0); // Fix chrome render bug

      // >>>>> Ping shadow
      &::before,
      &::after {
        position: absolute;
        z-index: 1;
        opacity: 0;
        transition: opacity @animation-duration-slow;
        content: '';
        pointer-events: none;
      }
    }

    .@{tab-prefix-cls}-nav-list {
      position: relative;
      display: flex;
      transition: transform @animation-duration-slow;
    }

    // >>>>>>>> Operations
    .@{tab-prefix-cls}-nav-operations {
      display: flex;
      align-self: stretch;

      &-hidden {
        position: absolute;
        visibility: hidden;
        pointer-events: none;
      }
    }

    .@{tab-prefix-cls}-nav-more {
      position: relative;
      padding: @tabs-card-horizontal-padding;
      background: transparent;
      border: 0;

      &::after {
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        height: 5px;
        transform: translateY(100%);
        content: '';
      }
    }

    .@{tab-prefix-cls}-nav-add {
      min-width: @tabs-card-height;
      padding: 0 @padding-xs;
      background: @tabs-card-head-background;
      border: @border-width-base @border-style-base @border-color-split;
      border-radius: @border-radius-base @border-radius-base 0 0;
      outline: none;
      cursor: pointer;
      transition: all @animation-duration-slow @ease-in-out;

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

      &:active,
      &:focus {
        color: @tabs-active-color;
      }
    }
  }

  &-extra-content {
    flex: none;
  }

  &-centered {
    > .@{tab-prefix-cls}-nav,
    > div > .@{tab-prefix-cls}-nav {
      .@{tab-prefix-cls}-nav-wrap {
        &:not([class*='@{tab-prefix-cls}-nav-wrap-ping']) {
          justify-content: center;
        }
      }
    }
  }

  // ============================ InkBar ============================
  &-ink-bar {
    position: absolute;
    background: @tabs-ink-bar-color;
    pointer-events: none;
  }

  // ============================= Tabs =============================
  &-tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin: @tabs-horizontal-margin;
    padding: @tabs-horizontal-padding;
    font-size: @tabs-title-font-size;
    background: transparent;
    border: 0;
    outline: none;
    cursor: pointer;

    &:last-of-type {
      margin-right: 0;
      margin-left: 0;
    }

    &-btn,
    &-remove {
      &:focus,
      &:active {
        color: @tabs-active-color;
      }
    }

    &-btn {
      outline: none;
    }

    &-remove {
      flex: none;
      margin-right: -@margin-xss;
      margin-left: @margin-xs;
      color: @text-color-secondary;
      font-size: @font-size-sm;
      background: transparent;
      border: none;
      outline: none;
      cursor: pointer;
      transition: all @animation-duration-slow;

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

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

    &&-active &-btn {
      color: @tabs-highlight-color;
      font-weight: 500;
    }

    &&-disabled {
      color: @disabled-color;
      cursor: not-allowed;
    }

    & &-remove .@{iconfont-css-prefix} {
      margin: 0;
    }

    .@{iconfont-css-prefix} {
      margin-right: @margin-sm;
    }
  }

  // =========================== TabPanes ===========================
  &-content {
    &-holder {
      flex: auto;
      min-width: 0;
      min-height: 0;
    }

    display: flex;
    width: 100%;

    &-animated {
      transition: margin @animation-duration-slow;
    }
  }

  &-tabpane {
    flex: none;
    width: 100%;
    outline: none;
  }
}

@tag-prefix-cls: ~'@{ant-prefix}-tag';

.@{tag-prefix-cls} {
  .reset-component;

  display: inline-block;
  height: auto;
  margin-right: 8px;
  padding: 0 7px;
  font-size: @tag-font-size;
  line-height: @tag-line-height;
  white-space: nowrap;
  background: @tag-default-bg;
  border: @border-width-base @border-style-base @border-color-base;
  border-radius: @border-radius-base;
  cursor: default;
  opacity: 1;
  transition: all 0.3s @ease-in-out-circ;

  &: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;
  }

  &-close-icon {
    .iconfont-size-under-12px(10px);

    margin-left: 3px;
    color: @text-color-secondary;
    cursor: pointer;
    transition: all 0.3s @ease-in-out-circ;

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

  &-has-color {
    border-color: transparent;
    &,
    a,
    a:hover,
    .@{iconfont-css-prefix}-close,
    .@{iconfont-css-prefix}-close:hover {
      color: @text-color-inverse;
    }
  }

  &-checkable {
    background-color: transparent;
    border-color: transparent;
    cursor: pointer;
    &:not(&-checked):hover {
      color: @primary-color;
    }
    &:active,
    &-checked {
      color: @text-color-inverse;
    }
    &-checked {
      background-color: @primary-6;
    }
    &:active {
      background-color: @primary-7;
    }
  }

  &-hidden {
    display: none;
  }

  // mixin to iterate over colors and create CSS class for each one
  .make-color-classes(@i: length(@preset-colors)) when (@i > 0) {
    .make-color-classes(@i - 1);
    @color: extract(@preset-colors, @i);
    @lightColor: '@{color}-1';
    @lightBorderColor: '@{color}-3';
    @darkColor: '@{color}-6';
    &-@{color} {
      color: @@darkColor;
      background: @@lightColor;
      border-color: @@lightBorderColor;
    }
    &-@{color}-inverse {
      color: @text-color-inverse;
      background: @@darkColor;
      border-color: @@darkColor;
    }
  }

  .make-status-color-classes(@color, @status) {
    @lightColor: '@{color}-1';
    @lightBorderColor: '@{color}-3';
    @darkColor: '@{color}-6';
    &-@{status} {
      color: @@darkColor;
      background: @@lightColor;
      border-color: @@lightBorderColor;
    }
  }

  .make-color-classes();

  .make-status-color-classes('green', success);
  .make-status-color-classes('blue', processing);
  .make-status-color-classes('red', error);
  .make-status-color-classes('orange', warning);

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

@tag-prefix-cls: ~'@{ant-prefix}-tag';

.@{tag-prefix-cls} {
  &-rtl {
    margin-right: 0;
    margin-left: 8px;
    direction: rtl;
    text-align: right;
  }

  &-close-icon {
    .@{tag-prefix-cls}-rtl & {
      margin-right: 3px;
      margin-left: 0;
    }
  }

  > .@{iconfont-css-prefix} + span,
  > span + .@{iconfont-css-prefix} {
    .@{tag-prefix-cls}-rtl& {
      margin-right: 7px;
      margin-left: 0;
    }
  }
}

@timeline-prefix-cls: ~'@{ant-prefix}-timeline';

.@{timeline-prefix-cls} {
  .reset-component;

  margin: 0;
  padding: 0;
  list-style: none;

  &-item {
    position: relative;
    margin: 0;
    padding-bottom: @timeline-item-padding-bottom;
    font-size: @font-size-base;
    list-style: none;

    &-tail {
      position: absolute;
      top: 10px;
      left: 4px;
      height: ~"calc(100% - 10px)";
      border-left: @timeline-width solid @timeline-color;
    }

    &-pending &-head {
      font-size: @font-size-sm;
      background-color: transparent;
    }

    &-pending &-tail {
      display: none;
    }

    &-head {
      position: absolute;
      width: 10px;
      height: 10px;
      background-color: @timeline-dot-bg;
      border: @timeline-dot-border-width solid transparent;
      border-radius: 100px;

      &-blue {
        color: @primary-color;
        border-color: @primary-color;
      }

      &-red {
        color: @error-color;
        border-color: @error-color;
      }

      &-green {
        color: @success-color;
        border-color: @success-color;
      }

      &-gray {
        color: @disabled-color;
        border-color: @disabled-color;
      }
    }

    &-head-custom {
      position: absolute;
      top: 5.5px;
      left: 5px;
      width: auto;
      height: auto;
      margin-top: 0;
      padding: 3px 1px;
      line-height: 1;
      text-align: center;
      border: 0;
      border-radius: 0;
      transform: translate(-50%, -50%);
    }

    &-content {
      position: relative;
      top: -(@font-size-base * @line-height-base - @font-size-base) + 1px;
      margin: 0 0 0 @margin-lg + 2px;
      word-break: break-word;
    }

    &-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}-label {
    .@{timeline-prefix-cls}-item {
      &-tail,
      &-head,
      &-head-custom {
        left: 50%;
      }

      &-head {
        margin-left: -4px;

        &-custom {
          margin-left: 1px;
        }
      }

      &-left {
        .@{timeline-prefix-cls}-item-content {
          left: ~"calc(50% - 4px)";
          width: ~"calc(50% - 14px)";
          text-align: left;
        }
      }

      &-right {
        .@{timeline-prefix-cls}-item-content {
          width: ~"calc(50% - 12px)";
          margin: 0;
          text-align: right;
        }
      }
    }
  }

  &.@{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 {
        // stylelint-disable-next-line function-calc-no-invalid
        left: ~"calc(100% - 4px - @timeline-width)";
      }
      .@{timeline-prefix-cls}-item-content {
        width: ~"calc(100% - 18px)";
      }
    }
  }

  &&-pending &-item-last &-item-tail {
    display: block;
    height: ~"calc(100% - 14px)";
    border-left: 2px dotted @timeline-color;
  }

  &&-reverse &-item-last &-item-tail {
    display: none;
  }

  &&-reverse &-item-pending {
    .@{timeline-prefix-cls}-item-tail {
      top: 15px;
      display: block;
      height: ~"calc(100% - 15px)";
      border-left: 2px dotted @timeline-color;
    }
    .@{timeline-prefix-cls}-item-content {
      min-height: 48px;
    }
  }
  &.@{timeline-prefix-cls}-label {
    .@{timeline-prefix-cls}-item-label {
      position: absolute;
      top: -(@font-size-base * @line-height-base - @font-size-base) + 1px;
      width: ~"calc(50% - 12px)";
      text-align: right;
    }
    .@{timeline-prefix-cls}-item-right {
      .@{timeline-prefix-cls}-item-label {
        left: ~"calc(50% + 14px)";
        width: ~"calc(50% - 14px)";
        text-align: left;
      }
    }
  }
}

@timeline-prefix-cls: ~'@{ant-prefix}-timeline';

.@{timeline-prefix-cls} {
  &-rtl {
    direction: rtl;
  }

  &-item {
    &-tail {
      .@{timeline-prefix-cls}-rtl & {
        right: 4px;
        left: auto;
        border-right: @timeline-width solid @timeline-color;
        border-left: none;
      }
    }

    &-head-custom {
      .@{timeline-prefix-cls}-rtl & {
        right: 5px;
        left: auto;
        transform: translate(50%, -50%);
      }
    }

    &-content {
      .@{timeline-prefix-cls}-rtl & {
        margin: 0 18px 0 0;
      }
    }
  }

  &.@{timeline-prefix-cls}-alternate,
  &.@{timeline-prefix-cls}-right,
  &.@{timeline-prefix-cls}-label {
    .@{timeline-prefix-cls}-item {
      &-tail,
      &-head,
      &-head-custom {
        .@{timeline-prefix-cls}-rtl& {
          right: 50%;
          left: auto;
        }
      }

      &-head {
        .@{timeline-prefix-cls}-rtl& {
          margin-right: -4px;
          margin-left: 0;
        }

        &-custom {
          .@{timeline-prefix-cls}-rtl& {
            margin-right: 1px;
            margin-left: 0;
          }
        }
      }

      &-left {
        .@{timeline-prefix-cls}-item-content {
          .@{timeline-prefix-cls}-rtl& {
            right: ~"calc(50% - 4px)";
            left: auto;
            text-align: right;
          }
        }
      }

      &-right {
        .@{timeline-prefix-cls}-item-content {
          .@{timeline-prefix-cls}-rtl& {
            text-align: left;
          }
        }
      }
    }
  }

  &.@{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 {
        .@{timeline-prefix-cls}-rtl& {
          right: 0;
          left: auto;
        }
      }

      .@{timeline-prefix-cls}-item-content {
        .@{timeline-prefix-cls}-rtl& {
          width: 100%;
          margin-right: 18px;
          text-align: right;
        }
      }
    }
  }

  &&-pending &-item-last &-item-tail {
    .@{timeline-prefix-cls}-rtl& {
      border-right: 2px dotted @timeline-color;
      border-left: none;
    }
  }

  &&-reverse &-item-pending {
    .@{timeline-prefix-cls}-item-tail {
      .@{timeline-prefix-cls}-rtl& {
        border-right: 2px dotted @timeline-color;
        border-left: none;
      }
    }
  }

  &.@{timeline-prefix-cls}-label {
    .@{timeline-prefix-cls}-item-label {
      .@{timeline-prefix-cls}-rtl& {
        text-align: left;
      }
    }
    .@{timeline-prefix-cls}-item-right {
      .@{timeline-prefix-cls}-item-label {
        .@{timeline-prefix-cls}-rtl& {
          right: ~"calc(50% + 14px)";
          text-align: right;
        }
      }
    }
  }
}

@tooltip-prefix-cls: ~'@{ant-prefix}-tooltip';

@tooltip-arrow-shadow-width: 3px;

@tooltip-arrow-rotate-width: sqrt(@tooltip-arrow-width * @tooltip-arrow-width * 2) +
  @tooltip-arrow-shadow-width * 2;

@tooltip-arrow-offset-vertical: 5px; // 8 - 3px
@tooltip-arrow-offset-horizontal: 13px; // 16 - 3px

// Base class
.@{tooltip-prefix-cls} {
  .reset-component;

  position: absolute;
  z-index: @zindex-tooltip;
  display: block;
  max-width: @tooltip-max-width;
  visibility: visible;

  &-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 {
    min-width: 30px;
    min-height: 32px;
    padding: 6px 8px;
    color: @tooltip-color;
    text-align: left;
    text-decoration: none;
    word-wrap: break-word;
    background-color: @tooltip-bg;
    border-radius: @border-radius-base;
    box-shadow: @box-shadow-base;
  }

  // Arrows
  &-arrow {
    position: absolute;
    display: block;
    width: @tooltip-arrow-rotate-width;
    height: @tooltip-arrow-rotate-width;
    overflow: hidden;
    background: transparent;
    pointer-events: none;

    &-content {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      display: block;
      width: @tooltip-arrow-width;
      height: @tooltip-arrow-width;
      margin: auto;
      background-color: @tooltip-bg;
      content: '';
      pointer-events: auto;
    }
  }

  &-placement-top &-arrow,
  &-placement-topLeft &-arrow,
  &-placement-topRight &-arrow {
    bottom: @tooltip-distance - @tooltip-arrow-rotate-width;

    &-content {
      box-shadow: @tooltip-arrow-shadow-width @tooltip-arrow-shadow-width 7px fade(@black, 7%);
      transform: translateY(-@tooltip-arrow-rotate-width / 2) rotate(45deg);
    }
  }

  &-placement-top &-arrow {
    left: 50%;
    transform: translateX(-50%);
  }

  &-placement-topLeft &-arrow {
    left: @tooltip-arrow-offset-horizontal;
  }

  &-placement-topRight &-arrow {
    right: @tooltip-arrow-offset-horizontal;
  }

  &-placement-right &-arrow,
  &-placement-rightTop &-arrow,
  &-placement-rightBottom &-arrow {
    left: @tooltip-distance - @tooltip-arrow-rotate-width;

    &-content {
      box-shadow: -@tooltip-arrow-shadow-width @tooltip-arrow-shadow-width 7px fade(@black, 7%);
      transform: translateX(@tooltip-arrow-rotate-width / 2) rotate(45deg);
    }
  }

  &-placement-right &-arrow {
    top: 50%;
    transform: translateY(-50%);
  }

  &-placement-rightTop &-arrow {
    top: @tooltip-arrow-offset-vertical;
  }

  &-placement-rightBottom &-arrow {
    bottom: @tooltip-arrow-offset-vertical;
  }

  &-placement-left &-arrow,
  &-placement-leftTop &-arrow,
  &-placement-leftBottom &-arrow {
    right: @tooltip-distance - @tooltip-arrow-rotate-width;

    &-content {
      box-shadow: @tooltip-arrow-shadow-width -@tooltip-arrow-shadow-width 7px fade(@black, 7%);
      transform: translateX(-@tooltip-arrow-rotate-width / 2) rotate(45deg);
    }
  }

  &-placement-left &-arrow {
    top: 50%;
    transform: translateY(-50%);
  }

  &-placement-leftTop &-arrow {
    top: @tooltip-arrow-offset-vertical;
  }

  &-placement-leftBottom &-arrow {
    bottom: @tooltip-arrow-offset-vertical;
  }

  &-placement-bottom &-arrow,
  &-placement-bottomLeft &-arrow,
  &-placement-bottomRight &-arrow {
    top: @tooltip-distance - @tooltip-arrow-rotate-width;

    &-content {
      box-shadow: -@tooltip-arrow-shadow-width -@tooltip-arrow-shadow-width 7px fade(@black, 7%);
      transform: translateY(@tooltip-arrow-rotate-width / 2) rotate(45deg);
    }
  }

  &-placement-bottom &-arrow {
    left: 50%;
    transform: translateX(-50%);
  }

  &-placement-bottomLeft &-arrow {
    left: @tooltip-arrow-offset-horizontal;
  }

  &-placement-bottomRight &-arrow {
    right: @tooltip-arrow-offset-horizontal;
  }
}

.generator-tooltip-preset-color(@i: length(@preset-colors)) when (@i > 0) {
  .generator-tooltip-preset-color(@i - 1);
  @color: extract(@preset-colors, @i);
  @lightColor: '@{color}-6';
  .@{tooltip-prefix-cls}-@{color} {
    .@{tooltip-prefix-cls}-inner {
      background-color: @@lightColor;
    }
    .@{tooltip-prefix-cls}-arrow {
      &-content {
        background-color: @@lightColor;
      }
    }
  }
}
.generator-tooltip-preset-color();

@tooltip-prefix-cls: ~'@{ant-prefix}-tooltip';

// Base class
.@{tooltip-prefix-cls} {
  &-rtl {
    direction: rtl;
  }
  // Wrapper for the tooltip content
  &-inner {
    .@{tooltip-prefix-cls}-rtl & {
      text-align: right;
    }
  }
}

@table-prefix-cls: ~'@{ant-prefix}-table';
@input-prefix-cls: ~'@{ant-prefix}-input';

.@{transfer-prefix-cls}-customize-list {
  .@{transfer-prefix-cls}-list {
    flex: 1 1 50%;
    width: auto;
    height: auto;
    min-height: @transfer-list-height;
  }

  // =================== Hook Components ===================
  .@{table-prefix-cls}-wrapper {
    .@{table-prefix-cls}-small {
      border: 0;
      border-radius: 0;

      > .@{table-prefix-cls}-content {
        // Header background color
        > .@{table-prefix-cls}-body > table > .@{table-prefix-cls}-thead > tr > th {
          background: @table-header-bg;
        }

        .@{table-prefix-cls}-row:last-child td {
          border-bottom: @border-width-base @border-style-base @border-color-split;
        }
      }

      .@{table-prefix-cls}-body {
        margin: 0;
      }
    }

    .@{table-prefix-cls}-pagination.@{ant-prefix}-pagination {
      margin: 16px 0 4px;
    }
  }
  .@{input-prefix-cls} {
    &[disabled] {
      background-color: transparent;
    }
  }
}

@transfer-prefix-cls: ~'@{ant-prefix}-transfer';

@transfer-header-vertical-padding: ceil(
  (@transfer-header-height - 1px - @font-size-base * @line-height-base) / 2
);

.@{transfer-prefix-cls} {
  .reset-component;

  position: relative;
  display: flex;
  align-items: stretch;

  &-disabled {
    .@{transfer-prefix-cls}-list {
      background: @transfer-disabled-bg;
    }
  }

  &-list {
    display: flex;
    flex-direction: column;
    width: 180px;
    height: @transfer-list-height;
    border: @border-width-base @border-style-base @border-color-base;
    border-radius: @border-radius-base;

    &-with-pagination {
      width: 250px;
      height: auto;
    }

    &-search {
      padding-right: 24px;
      padding-left: @control-padding-horizontal-sm;
      &-action {
        position: absolute;
        top: @transfer-list-search-icon-top;
        right: 12px;
        bottom: 12px;
        width: 28px;
        color: @disabled-color;
        line-height: @input-height-base;
        text-align: center;

        .@{iconfont-css-prefix} {
          color: @disabled-color;
          transition: all 0.3s;
          &:hover {
            color: @text-color-secondary;
          }
        }
        span& {
          pointer-events: none;
        }
      }
    }

    &-header {
      display: flex;
      flex: none;
      align-items: center;
      height: @transfer-header-height;
      // border-top is on the transfer dom. We should minus 1px for this
      padding: (@transfer-header-vertical-padding - 1px) @control-padding-horizontal
        @transfer-header-vertical-padding;
      color: @text-color;
      background: @component-background;
      border-bottom: @border-width-base @border-style-base @border-color-split;
      border-radius: @border-radius-base @border-radius-base 0 0;

      > *:not(:last-child) {
        margin-right: 4px;
      }

      > * {
        flex: none;
      }

      &-title {
        flex: auto;
        overflow: hidden;
        white-space: nowrap;
        text-align: right;
        text-overflow: ellipsis;
      }

      &-dropdown {
        transform: translateY(10%);
        cursor: pointer;
        .iconfont-size-under-12px(10px);
      }
    }

    &-body {
      display: flex;
      flex: auto;
      flex-direction: column;
      overflow: hidden;
      font-size: @font-size-base;

      &-search-wrapper {
        position: relative;
        flex: none;
        padding: @padding-sm;
      }
    }

    &-content {
      flex: auto;
      margin: 0;
      padding: 0;
      overflow: auto;
      list-style: none;
      &-item {
        display: flex;
        align-items: center;
        min-height: @transfer-item-height;
        padding: @transfer-item-padding-vertical @control-padding-horizontal;
        overflow: hidden;
        line-height: @transfer-item-height - 2 * @transfer-item-padding-vertical;
        transition: all 0.3s;

        > *:not(:last-child) {
          margin-right: 8px;
        }

        > * {
          flex: none;
        }

        &-text {
          flex: auto;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }

        &-remove {
          .operation-unit();
          position: relative;
          color: @border-color-base;

          &::after {
            position: absolute;
            top: -@transfer-item-padding-vertical;
            right: -50%;
            bottom: -@transfer-item-padding-vertical;
            left: -50%;
            content: '';
          }

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

      &-item:not(&-item-disabled) {
        &:hover {
          background-color: @transfer-item-hover-bg;
          cursor: pointer;
        }

        &.@{transfer-prefix-cls}-list-content-item-checked:hover {
          background-color: darken(@item-active-bg, 2%);
        }
      }

      // Do not change hover style when `oneWay` mode
      &-show-remove &-item:not(&-item-disabled):hover {
        background: transparent;
        cursor: default;
      }

      &-item-checked {
        background-color: @item-active-bg;
      }

      &-item-disabled {
        color: @btn-disable-color;
        cursor: not-allowed;
      }
    }

    &-pagination {
      flex: none;
      align-self: flex-end;
      padding: @padding-xs 0;
    }

    &-body-not-found {
      flex: none;
      width: 100%;
      margin: auto 0;
      color: @disabled-color;
      text-align: center;
    }

    &-footer {
      border-top: @border-width-base @border-style-base @border-color-split;
    }
  }

  &-operation {
    display: flex;
    flex: none;
    flex-direction: column;
    align-self: center;
    margin: 0 8px;
    overflow: hidden;
    vertical-align: middle;

    .@{ant-prefix}-btn {
      display: block;

      &:first-child {
        margin-bottom: 4px;
      }

      .@{iconfont-css-prefix} {
        font-size: 12px;
      }
    }
  }

  .@{ant-prefix}-empty-image {
    max-height: @transfer-header-height / 2 - 22;
  }
}

@transfer-prefix-cls: ~'@{ant-prefix}-transfer';

.@{transfer-prefix-cls} {
  &-rtl {
    direction: rtl;
  }

  &-list {
    &-search {
      .@{transfer-prefix-cls}-rtl & {
        padding-right: @control-padding-horizontal-sm;
        padding-left: 24px;
      }
      &-action {
        .@{transfer-prefix-cls}-rtl & {
          right: auto;
          left: 12px;
        }
      }
    }

    &-header {
      > *:not(:last-child) {
        .@{transfer-prefix-cls}-rtl & {
          margin-right: 0;
          margin-left: 4px;
        }
      }

      .@{transfer-prefix-cls}-rtl & {
        right: 0;
        left: auto;
      }
      &-title {
        .@{transfer-prefix-cls}-rtl & {
          text-align: left;
        }
      }
    }

    &-content {
      &-item {
        > *:not(:last-child) {
          .@{transfer-prefix-cls}-rtl & {
            margin-right: 0;
            margin-left: 8px;
          }
        }
      }
    }

    &-footer {
      .@{transfer-prefix-cls}-rtl & {
        right: 0;
        left: auto;
      }
    }
  }
}

@tree-prefix-cls: ~'@{ant-prefix}-tree';
@tree-node-prefix-cls: ~'@{tree-prefix-cls}-treenode';
@select-tree-prefix-cls: ~'@{ant-prefix}-select-tree';
@tree-motion: ~'@{ant-prefix}-motion-collapse';

.antTreeSwitcherIcon(@type: 'tree-default-open-icon') {
  .@{tree-prefix-cls}-switcher-icon,
  .@{select-tree-prefix-cls}-switcher-icon {
    .iconfont-size-under-12px(10px);
    display: inline-block;
    vertical-align: baseline;
    svg {
      transition: transform 0.3s;
    }
  }
}

.antTreeShowLineIcon(@type) {
  .@{tree-prefix-cls}-switcher-icon,
  .@{tree-select-prefix-cls}-switcher-icon {
    display: inline-block;
    font-weight: normal;
    font-size: 12px;
    svg {
      transition: transform 0.3s;
    }
  }
}

.antTreeFn(@custom-tree-prefix-cls) {
  @custom-tree-node-prefix-cls: ~'@{custom-tree-prefix-cls}-treenode';
  .@{custom-tree-prefix-cls} {
    .reset-component;
    background: @tree-bg;
    border-radius: @border-radius-base;
    transition: background-color 0.3s;

    &-focused:not(:hover):not(&-active-focused) {
      background: @primary-1;
    }

    // =================== Virtual List ===================
    &-list-holder-inner {
      align-items: flex-start;
    }

    &.@{custom-tree-prefix-cls}-block-node {
      .@{custom-tree-prefix-cls}-list-holder-inner {
        align-items: stretch;

        // >>> Title
        .@{custom-tree-prefix-cls}-node-content-wrapper {
          flex: auto;
        }
      }
    }

    // ===================== TreeNode =====================
    .@{custom-tree-node-prefix-cls} {
      display: flex;
      align-items: flex-start;
      padding: 0 0 (@padding-xs / 2) 0;
      outline: none;
      // Disabled
      &-disabled {
        // >>> Title
        .@{custom-tree-prefix-cls}-node-content-wrapper {
          color: @disabled-color;
          cursor: not-allowed;

          &:hover {
            background: transparent;
          }
        }
      }

      &-active .@{custom-tree-prefix-cls}-node-content-wrapper {
        background: @tree-node-hover-bg;
      }
    }

    // >>> Indent
    &-indent {
      align-self: stretch;
      white-space: nowrap;
      user-select: none;

      &-unit {
        display: inline-block;
        width: @tree-title-height;
      }
    }

    // >>> Switcher
    & &-switcher {
      .antTreeSwitcherIcon();
      flex: none;

      width: @tree-title-height;
      height: @tree-title-height;
      margin: 0;
      line-height: @tree-title-height;
      text-align: center;
      cursor: pointer;

      &-noop {
        cursor: default;
      }

      &_close {
        .@{custom-tree-prefix-cls}-switcher-icon {
          svg {
            transform: rotate(-90deg);
          }
        }
      }

      &-loading-icon {
        color: @primary-color;
      }

      &-leaf-line {
        z-index: 1;
        display: inline-block;
        width: 100%;
        height: 100%;
        &::before {
          position: absolute;
          height: @tree-title-height;
          margin-left: -1px;
          border-left: 1px solid @normal-color;
          content: ' ';
        }
        &::after {
          position: absolute;
          width: @tree-title-height - 14px;
          height: @tree-title-height - 10px;
          margin-left: -1px;
          border-bottom: 1px solid @normal-color;
          content: ' ';
        }
      }
    }

    // >>> Checkbox
    & &-checkbox {
      top: initial;
      margin: ((@tree-title-height - @checkbox-size) / 2) 8px 0 0;
    }

    // >>> Title
    & &-node-content-wrapper {
      min-height: @tree-title-height;
      margin: 0;
      padding: 0 4px;
      color: inherit;
      line-height: @tree-title-height;
      background: transparent;
      border-radius: @border-radius-base;
      cursor: pointer;
      transition: all 0.3s;

      &:hover {
        background-color: @tree-node-hover-bg;
      }

      &.@{custom-tree-prefix-cls}-node-selected {
        background-color: @tree-node-selected-bg;
      }

      // Icon
      .@{custom-tree-prefix-cls}-iconEle {
        display: inline-block;
        width: @tree-title-height;
        height: @tree-title-height;
        line-height: @tree-title-height;
        text-align: center;
        vertical-align: top;
        &:empty {
          display: none;
        }
      }
    }

    // ==================== Draggable =====================
    &-node-content-wrapper[draggable='true'] {
      line-height: @tree-title-height - 4px;
      border-top: 2px transparent solid;
      border-bottom: 2px transparent solid;
      user-select: none;
    }

    .@{custom-tree-node-prefix-cls}.drag-over {
      > [draggable] {
        color: white;
        background-color: @primary-color;
        opacity: 0.8;
      }
    }
    .@{custom-tree-node-prefix-cls}.drag-over-gap-top {
      > [draggable] {
        border-top-color: @primary-color;
      }
    }
    .@{custom-tree-node-prefix-cls}.drag-over-gap-bottom {
      > [draggable] {
        border-bottom-color: @primary-color;
      }
    }

    // ==================== Show Line =====================
    &-show-line {
      // ================ Indent lines ================
      .@{custom-tree-prefix-cls}-indent {
        &-unit {
          position: relative;
          height: 100%;

          &::before {
            position: absolute;
            top: ~"calc(100% - 4px)";
            right: -@tree-title-height / 2;
            bottom: -@tree-title-height - 4px;
            border-right: 1px solid @border-color-base;
            content: '';
          }

          &-end {
            &::before {
              display: none;
            }
          }
        }
      }

      /* Motion should hide line of measure */
      .@{custom-tree-node-prefix-cls}-motion:not(.@{tree-motion}-leave):not(.@{tree-motion}-appear-active) {
        .@{custom-tree-prefix-cls}-indent-unit {
          &::before {
            display: none;
          }
        }
      }

      // ============== Cover Background ==============
      .@{custom-tree-prefix-cls}-switcher {
        z-index: 1;
        background: @component-background;
      }
    }
  }
}

.@{tree-node-prefix-cls}-leaf-last {
  .@{tree-prefix-cls}-switcher {
    &-leaf-line {
      &::before {
        height: @tree-title-height - 10px !important;
      }
    }
  }
}

@tree-prefix-cls: ~'@{ant-prefix}-tree';

.@{tree-prefix-cls}.@{tree-prefix-cls}-directory {
  // ================== TreeNode ==================
  .@{tree-prefix-cls}-treenode {
    position: relative;

    // Hover color
    &::before {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 4px;
      left: 0;
      transition: background-color 0.3s;
      content: '';
      pointer-events: none;
    }

    &:hover {
      &::before {
        background: @item-hover-bg;
      }
    }

    // Elements
    > * {
      z-index: 1;
    }

    // >>> Switcher
    .@{tree-prefix-cls}-switcher {
      transition: color 0.3s;
    }

    // >>> Title
    .@{tree-prefix-cls}-node-content-wrapper {
      border-radius: 0;
      user-select: none;

      &:hover {
        background: transparent;
      }

      &.@{tree-prefix-cls}-node-selected {
        color: @tree-directory-selected-color;
        background: transparent;
      }
    }

    // ============= Selected =============
    &-selected {
      &:hover::before,
      &::before {
        background: @tree-directory-selected-bg;
      }

      // >>> Switcher
      .@{tree-prefix-cls}-switcher {
        color: @tree-directory-selected-color;
      }

      // >>> Title
      .@{tree-prefix-cls}-node-content-wrapper {
        color: @tree-directory-selected-color;
        background: transparent;
      }
    }
  }
}

@tree-prefix-cls: ~'@{ant-prefix}-tree';
@tree-node-prefix-cls: ~'@{tree-prefix-cls}-treenode';

.antCheckboxFn(@checkbox-prefix-cls: ~'@{ant-prefix}-tree-checkbox');

.antTreeFn(@tree-prefix-cls);

@tree-prefix-cls: ~'@{ant-prefix}-tree';
@select-tree-prefix-cls: ~'@{ant-prefix}-select-tree';
@tree-node-prefix-cls: ~'@{tree-prefix-cls}-treenode';

.@{tree-prefix-cls} {
  &-rtl {
    direction: rtl;
  }

  // ===================== TreeNode =====================
  .@{tree-node-prefix-cls} {
    &-rtl {
      direction: rtl;
    }
  }

  // >>> Switcher
  & &-switcher {
    &_close {
      .@{tree-prefix-cls}-switcher-icon {
        svg {
          .@{tree-prefix-cls}-rtl& {
            transform: rotate(90deg);
          }
        }
      }
    }
  }
  // ==================== Show Line =====================
  &-show-line {
    // ================ Indent lines ================
    .@{tree-prefix-cls}-indent {
      &-unit {
        &::before {
          .@{tree-prefix-cls}-rtl& {
            right: auto;
            left: -@tree-title-height / 2;
            border-right: none;
            border-left: 1px solid @border-color-base;
          }
        }
      }
    }
  }
  // >>> Checkbox
  & &-checkbox {
    .@{tree-prefix-cls}-rtl& {
      margin: ((@tree-title-height - @checkbox-size) / 2) 0 0 8px;
    }
  }
}

.@{select-tree-prefix-cls} {
  // >>> Checkbox
  & &-checkbox {
    .@{tree-prefix-cls}-select-dropdown-rtl & {
      margin: ((@tree-title-height - @checkbox-size) / 2) 0 0 8px;
    }
  }
}

@tree-select-prefix-cls: ~'@{ant-prefix}-tree-select';
@select-tree-prefix-cls: ~'@{ant-prefix}-select-tree';

.antCheckboxFn(@checkbox-prefix-cls: ~'@{select-tree-prefix-cls}-checkbox');

.@{tree-select-prefix-cls} {
  // ======================= Dropdown =======================
  &-dropdown {
    padding: @padding-xs (@padding-xs / 2) 0;

    &-rtl {
      direction: rtl;
    }
    // ======================== Tree ========================
    .@{select-tree-prefix-cls} {
      border-radius: 0;

      &-list-holder-inner {
        align-items: stretch;

        .@{select-tree-prefix-cls}-treenode {
          padding-bottom: @padding-xs;

          .@{select-tree-prefix-cls}-node-content-wrapper {
            flex: auto;
          }
        }
      }
    }
  }
}

// ========================== Tree ==========================
.antTreeFn(@select-tree-prefix-cls);

// change switcher icon rotation in rtl direction
.@{select-tree-prefix-cls} {
  // >>> Switcher
  & &-switcher {
    &_close {
      .@{select-tree-prefix-cls}-switcher-icon {
        svg {
          .@{tree-select-prefix-cls}-dropdown-rtl & {
            transform: rotate(90deg);
          }
        }
      }
    }
  }
}

@typography-prefix-cls: ~'@{ant-prefix}-typography';

// =============== Basic ===============
.@{typography-prefix-cls} {
  color: @text-color;
  overflow-wrap: break-word;

  &&-secondary {
    color: @text-color-secondary;
  }

  &&-warning {
    color: @warning-color;
  }

  &&-danger {
    color: @error-color;
  }

  &&-disabled {
    color: @disabled-color;
    cursor: not-allowed;
    user-select: none;
  }

  // Tag
  div&,
  p {
    .typography-paragraph();
  }

  h1&,
  h1 {
    .typography-title-1();
  }
  h2&,
  h2 {
    .typography-title-2();
  }
  h3&,
  h3 {
    .typography-title-3();
  }
  h4&,
  h4 {
    .typography-title-4();
  }

  h1&,
  h2&,
  h3&,
  h4& {
    .@{typography-prefix-cls} + & {
      margin-top: @typography-title-margin-top;
    }
  }

  div,
  ul,
  li,
  p,
  h1,
  h2,
  h3,
  h4 {
    + h1,
    + h2,
    + h3,
    + h4 {
      margin-top: @typography-title-margin-top;
    }
  }

  a&-ellipsis,
  span&-ellipsis {
    display: inline-block;
  }

  a&,
  a {
    .operation-unit();

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

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

  code {
    margin: 0 0.2em;
    padding: 0.2em 0.4em 0.1em;
    font-size: 85%;
    background: rgba(150, 150, 150, 0.1);
    border: 1px solid rgba(100, 100, 100, 0.2);
    border-radius: 3px;
  }

  kbd {
    margin: 0 0.2em;
    padding: 0.15em 0.4em 0.1em;
    font-size: 90%;
    background: rgba(150, 150, 150, 0.06);
    border: 1px solid rgba(100, 100, 100, 0.2);
    border-bottom-width: 2px;
    border-radius: 3px;
  }

  mark {
    padding: 0;
    background-color: @gold-3;
  }

  u,
  ins {
    text-decoration: underline;
    text-decoration-skip-ink: auto;
  }

  s,
  del {
    text-decoration: line-through;
  }

  strong {
    font-weight: 600;
  }

  // Operation
  &-expand,
  &-edit,
  &-copy {
    .operation-unit();

    margin-left: 4px;
  }

  &-copy-success {
    &,
    &:hover,
    &:focus {
      color: @success-color;
    }
  }

  // Text input area
  &-edit-content {
    position: relative;

    div& {
      left: -@input-padding-horizontal - 1px;
      margin-top: -@input-padding-vertical-base - 1px;
      // stylelint-disable-next-line function-calc-no-invalid
      margin-bottom: ~"calc(1em - @input-padding-vertical-base - 2px)";
    }

    &-confirm {
      position: absolute;
      right: 10px;
      bottom: 8px;
      color: @text-color-secondary;
      pointer-events: none;
    }

    // Fix Editable Textarea flash in Firefox
    textarea {
      -moz-transition: none;
    }
  }

  // list
  ul,
  ol {
    margin: 0 0 1em 0;
    padding: 0;

    li {
      margin: 0 0 0 20px;
      padding: 0 0 0 4px;
    }
  }

  ul {
    list-style-type: circle;

    ul {
      list-style-type: disc;
    }
  }

  ol {
    list-style-type: decimal;
  }

  // ============ Ellipsis ============
  &-ellipsis-single-line {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

    // https://blog.csdn.net/iefreer/article/details/50421025
    a&,
    span& {
      vertical-align: bottom;
    }
  }

  &-ellipsis-multiple-line {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    /*! autoprefixer: ignore next */
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

@typography-prefix-cls: ~'@{ant-prefix}-typography';

.@{typography-prefix-cls} {
  &-rtl {
    direction: rtl;
  }

  // Operation
  &-expand,
  &-edit,
  &-copy {
    .@{typography-prefix-cls}-rtl & {
      margin-right: 4px;
      margin-left: 0;
    }
  }

  &-expand {
    .@{typography-prefix-cls}-rtl & {
      float: left;
    }
  }

  // Text input area
  &-edit-content {
    div& {
      &.@{typography-prefix-cls}-rtl {
        right: -@input-padding-horizontal - 1px;
        left: auto;
      }
    }

    &-confirm {
      .@{typography-prefix-cls}-rtl & {
        right: auto;
        left: 10px;
      }
    }
  }

  // list
  ul,
  ol {
    li {
      .@{typography-prefix-cls}-rtl& {
        margin: 0 20px 0 0;
        padding: 0 4px 0 0;
      }
    }
  }
}

@upload-prefix-cls: ~'@{ant-prefix}-upload';
@upload-item: ~'@{ant-prefix}-upload-list-item';
@upload-picture-card-size: 104px;
@upload-picture-card-border-style: @border-style-base;

.@{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;
  }

  &&-disabled {
    cursor: not-allowed;
  }

  &&-select-picture-card {
    display: table;
    float: left;
    width: @upload-picture-card-size;
    height: @upload-picture-card-size;
    margin-right: 8px;
    margin-bottom: 8px;
    text-align: center;
    vertical-align: top;
    background-color: @background-color-light;
    border: @border-width-base dashed @border-color-base;
    border-radius: @border-radius-base;
    cursor: pointer;
    transition: border-color 0.3s ease;

    > .@{upload-prefix-cls} {
      display: table-cell;
      width: 100%;
      height: 100%;
      padding: @padding-xs;
      text-align: center;
      vertical-align: middle;
    }

    &:hover {
      border-color: @primary-color;
      .@{upload-prefix-cls}-disabled& {
        border-color: @border-color-base;
      }
    }
  }

  &&-drag {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    background: @background-color-light;
    border: @border-width-base dashed @border-color-base;
    border-radius: @border-radius-base;
    cursor: pointer;
    transition: border-color 0.3s;

    .@{upload-prefix-cls} {
      padding: @padding-md 0;
    }

    &.@{upload-prefix-cls}-drag-hover:not(.@{upload-prefix-cls}-disabled) {
      border-color: @primary-7;
    }

    &.@{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} {
        color: @primary-5;
        font-size: 48px;
      }

      margin-bottom: 20px;
    }
    p.@{upload-prefix-cls}-text {
      margin: 0 0 4px;
      color: @heading-color;
      font-size: @font-size-lg;
    }
    p.@{upload-prefix-cls}-hint {
      color: @text-color-secondary;
      font-size: @font-size-base;
    }

    .@{iconfont-css-prefix}-plus {
      color: @disabled-color;
      font-size: 30px;
      transition: all 0.3s;
      &:hover {
        color: @text-color-secondary;
      }
    }
    &:hover .@{iconfont-css-prefix}-plus {
      color: @text-color-secondary;
    }
  }

  &-picture-card-wrapper {
    .clearfix;

    display: inline-block;
    width: 100%;
  }
}

.@{upload-prefix-cls}-list {
  .reset-component;
  .clearfix;
  line-height: @line-height-base;
  &-item-list-type-text {
    &:hover {
      .@{upload-prefix-cls}-list-item-name-icon-count-1 {
        padding-right: 14px;
      }
      .@{upload-prefix-cls}-list-item-name-icon-count-2 {
        padding-right: 28px;
      }
    }
  }
  &-item {
    position: relative;
    height: @line-height-base * @font-size-base;
    margin-top: @margin-xs;
    font-size: @font-size-base;
    &-name {
      display: inline-block;
      width: 100%;
      padding-left: @font-size-base + 8px;
      overflow: hidden;
      line-height: @line-height-base;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    &-name-icon-count-1 {
      padding-right: 14px;
    }

    &-card-actions {
      position: absolute;
      right: 0;

      &-btn {
        opacity: 0;
      }
      &-btn.@{ant-prefix}-btn-sm {
        height: 20px;
        line-height: 1;
      }

      &.picture {
        top: 22px;
        line-height: 0;
      }

      &-btn:focus,
      &.picture &-btn {
        opacity: 1;
      }

      .@{iconfont-css-prefix} {
        color: @upload-actions-color;
      }
    }

    &-info {
      height: 100%;
      padding: 0 12px 0 4px;
      transition: background-color 0.3s;

      > span {
        display: block;
        width: 100%;
        height: 100%;
      }

      .@{iconfont-css-prefix}-loading,
      .@{upload-prefix-cls}-text-icon {
        .@{iconfont-css-prefix} {
          position: absolute;
          top: @font-size-base / 2 - 2px;
          color: @text-color-secondary;
          font-size: @font-size-base;
        }
      }
    }

    .@{iconfont-css-prefix}-close {
      .iconfont-size-under-12px(10px);

      position: absolute;
      top: 6px;
      right: 4px;
      color: @text-color-secondary;
      line-height: 0;
      cursor: pointer;
      opacity: 0;
      transition: all 0.3s;

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

    &:hover &-info {
      background-color: @item-hover-bg;
    }

    &:hover .@{iconfont-css-prefix}-close {
      opacity: 1;
    }

    &:hover &-card-actions-btn {
      opacity: 1;
    }

    &-error,
    &-error .@{upload-prefix-cls}-text-icon > .@{iconfont-css-prefix},
    &-error &-name {
      color: @error-color;
    }

    &-error &-card-actions {
      .@{iconfont-css-prefix} {
        color: @error-color;
      }
      &-btn {
        opacity: 1;
      }
    }

    &-progress {
      position: absolute;
      bottom: -12px;
      width: 100%;
      padding-left: @font-size-base + 12px;
      font-size: @font-size-base;
      line-height: 0;
    }
  }

  &-picture,
  &-picture-card {
    .@{upload-item} {
      position: relative;
      height: 66px;
      padding: @padding-xs;
      border: @border-width-base @upload-picture-card-border-style @border-color-base;
      border-radius: @border-radius-base;

      &: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 {
      position: absolute;
      top: 8px;
      left: 8px;
      width: 48px;
      height: 48px;
      line-height: 54px;
      text-align: center;
      opacity: 0.8;

      .@{iconfont-css-prefix} {
        font-size: 26px;
      }
    }

    // Adjust the color of the error icon : https://github.com/ant-design/ant-design/pull/24160
    .@{upload-item}-error .@{upload-item}-thumbnail {
      .@{iconfont-css-prefix} {
        svg path {
          &[fill='#e6f7ff'] {
            fill: color(~`colorPalette('@{error-color}', 1) `);
          }

          &[fill='#1890ff'] {
            fill: @error-color;
          }
        }
      }
    }

    .@{upload-item}-icon {
      position: absolute;
      top: 50%;
      left: 50%;
      font-size: 26px;
      transform: translate(-50%, -50%);

      .@{iconfont-css-prefix} {
        font-size: 26px;
      }
    }

    .@{upload-item}-image {
      max-width: 100%;
    }

    .@{upload-item}-thumbnail img {
      display: block;
      width: 48px;
      height: 48px;
      overflow: hidden;
    }

    .@{upload-item}-name {
      display: inline-block;
      box-sizing: border-box;
      max-width: 100%;
      margin: 0 0 0 8px;
      padding-right: 8px;
      padding-left: 48px;
      overflow: hidden;
      line-height: 44px;
      white-space: nowrap;
      text-overflow: ellipsis;
      transition: all 0.3s;
    }

    .@{upload-item}-name-icon-count-1 {
      padding-right: 18px;
    }

    .@{upload-item}-name-icon-count-2 {
      padding-right: 36px;
    }

    .@{upload-item}-uploading .@{upload-item}-name {
      line-height: 28px;
    }

    .@{upload-item}-progress {
      bottom: 14px;
      width: ~'calc(100% - 24px)';
      margin-top: 0;
      padding-left: 56px;
    }

    .@{iconfont-css-prefix}-close {
      position: absolute;
      top: 8px;
      right: 8px;
      line-height: 1;
      opacity: 1;
    }
  }

  &-picture-card {
    &.@{upload-prefix-cls}-list::after {
      display: none;
    }

    &-container {
      float: left;
      width: @upload-picture-card-size;
      height: @upload-picture-card-size;
      margin: 0 @margin-xs @margin-xs 0;
    }

    .@{upload-item} {
      float: left;
      width: @upload-picture-card-size;
      height: @upload-picture-card-size;
      margin: 0 @margin-xs @margin-xs 0;
    }

    .@{upload-item}-info {
      position: relative;
      height: 100%;
      overflow: hidden;

      &::before {
        position: absolute;
        z-index: 1;
        width: 100%;
        height: 100%;
        background-color: fade(@black, 50%);
        opacity: 0;
        transition: all 0.3s;
        content: ' ';
      }
    }

    .@{upload-item}:hover .@{upload-item}-info::before {
      opacity: 1;
    }

    .@{upload-item}-actions {
      position: absolute;
      top: 50%;
      left: 50%;
      z-index: 10;
      white-space: nowrap;
      transform: translate(-50%, -50%);
      opacity: 0;
      transition: all 0.3s;

      .@{iconfont-css-prefix}-eye,
      .@{iconfont-css-prefix}-download,
      .@{iconfont-css-prefix}-delete {
        z-index: 10;
        width: 16px;
        margin: 0 4px;
        color: @text-color-dark;
        font-size: 16px;
        cursor: pointer;
        transition: all 0.3s;

        &:hover {
          color: @text-color-inverse;
        }
      }
    }

    .@{upload-item}-info:hover + .@{upload-item}-actions,
    .@{upload-item}-actions:hover {
      opacity: 1;
    }

    .@{upload-item}-thumbnail,
    .@{upload-item}-thumbnail img {
      position: static;
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .@{upload-item}-name {
      display: none;
      margin: 8px 0 0;
      padding: 0;
      line-height: @line-height-base;
      text-align: center;
    }

    .@{upload-item}-file + .@{upload-item}-name {
      position: absolute;
      bottom: 10px;
      display: block;
    }

    .@{upload-item}-uploading {
      &.@{upload-item} {
        background-color: @background-color-light;
      }

      .@{upload-item}-info {
        height: auto;

        &::before,
        .@{iconfont-css-prefix}-eye,
        .@{iconfont-css-prefix}-delete {
          display: none;
        }
      }
    }

    .@{upload-item}-progress {
      bottom: 32px;
      padding-left: 0;
    }
  }

  .@{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: 0.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;
    padding: 0;
    opacity: 0;
  }
}

@keyframes uploadAnimateOut {
  to {
    height: 0;
    margin: 0;
    padding: 0;
    opacity: 0;
  }
}

@keyframes uploadAnimateInlineIn {
  from {
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
    opacity: 0;
  }
}

@keyframes uploadAnimateInlineOut {
  to {
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
    opacity: 0;
  }
}

@upload-prefix-cls: ~'@{ant-prefix}-upload';
@upload-item: ~'@{ant-prefix}-upload-list-item';

.@{upload-prefix-cls} {
  &-rtl {
    direction: rtl;
  }

  &&-select-picture-card {
    .@{upload-prefix-cls}-rtl& {
      float: right;
      margin-right: 0;
      margin-left: 8px;
    }
  }
}

.@{upload-prefix-cls}-list {
  &-rtl {
    direction: rtl;
  }
  &-item-list-type-text {
    &:hover {
      .@{upload-prefix-cls}-list-item-name-icon-count-1 {
        .@{upload-prefix-cls}-list-rtl & {
          padding-right: 22px;
          padding-left: 14px;
        }
      }
      .@{upload-prefix-cls}-list-item-name-icon-count-2 {
        .@{upload-prefix-cls}-list-rtl & {
          padding-right: 22px;
          padding-left: 28px;
        }
      }
    }
  }
  &-item {
    &-name {
      .@{upload-prefix-cls}-list-rtl & {
        padding-right: @font-size-base + 8px;
        padding-left: 0;
      }
    }

    &-name-icon-count-1 {
      .@{upload-prefix-cls}-list-rtl & {
        padding-left: 14px;
      }
    }

    &-card-actions {
      .@{upload-prefix-cls}-list-rtl & {
        right: auto;
        left: 0;
      }
      .@{iconfont-css-prefix} {
        .@{upload-prefix-cls}-list-rtl & {
          padding-right: 0;
          padding-left: 5px;
        }
      }
    }

    &-info {
      .@{upload-prefix-cls}-list-rtl & {
        padding: 0 4px 0 12px;
      }
    }

    .@{iconfont-css-prefix}-close {
      .@{upload-prefix-cls}-list-rtl & {
        right: auto;
        left: 4px;
      }
    }

    &-error &-card-actions {
      .@{iconfont-css-prefix} {
        .@{upload-prefix-cls}-list-rtl & {
          padding-right: 0;
          padding-left: 5px;
        }
      }
    }

    &-progress {
      .@{upload-prefix-cls}-list-rtl & {
        padding-right: @font-size-base + 12px;
        padding-left: 0;
      }
    }
  }

  &-picture,
  &-picture-card {
    .@{upload-item}-thumbnail {
      .@{upload-prefix-cls}-list-rtl& {
        right: 8px;
        left: auto;
      }
    }

    .@{upload-item}-icon {
      .@{upload-prefix-cls}-list-rtl& {
        right: 50%;
        left: auto;
        transform: translate(50%, -50%);
      }
    }

    .@{upload-item}-name {
      .@{upload-prefix-cls}-list-rtl& {
        margin: 0 8px 0 0;
        padding-right: 48px;
        padding-left: 8px;
      }
    }

    .@{upload-item}-name-icon-count-1 {
      .@{upload-prefix-cls}-list-rtl& {
        padding-right: 48px;
        padding-left: 18px;
      }
    }

    .@{upload-item}-name-icon-count-2 {
      .@{upload-prefix-cls}-list-rtl& {
        padding-right: 48px;
        padding-left: 36px;
      }
    }

    .@{upload-item}-progress {
      .@{upload-prefix-cls}-list-rtl& {
        padding-right: 56px;
        padding-left: 0;
      }
    }

    .@{iconfont-css-prefix}-close {
      .@{upload-prefix-cls}-list-rtl& {
        right: auto;
        left: 8px;
      }
    }
  }

  &-picture-card {
    &-container {
      .@{upload-prefix-cls}-list-rtl & {
        float: right;
        margin: 0 0 8px 8px;
      }
    }

    .@{upload-item} {
      .@{upload-prefix-cls}-list-rtl& {
        float: right;
        margin: 0 0 8px 8px;
      }
    }

    .@{upload-item}-actions {
      .@{upload-prefix-cls}-list-rtl& {
        right: 50%;
        left: auto;
        transform: translate(50%, -50%);
      }
    }

    .@{upload-item}-file + .@{upload-item}-name {
      .@{upload-prefix-cls}-list-rtl& {
        margin: 8px 0 0;
        padding: 0;
      }
    }

    .@{upload-item}-info {
      .@{upload-prefix-cls}-list-rtl& {
        padding: 0;
      }
    }
  }
}