/* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
/* stylelint-disable no-duplicate-selectors */
/* stylelint-disable */
/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
.ant-upload {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  color: rgba(0, 0, 0, 0.65);
  font-size: 14px;
  font-variant: tabular-nums;
  line-height: 1.5;
  list-style: none;
  font-feature-settings: 'tnum';
  outline: 0;
}
.ant-upload p {
  margin: 0;
}
.ant-upload-btn {
  display: block;
  width: 100%;
  outline: none;
}
.ant-upload input[type='file'] {
  cursor: pointer;
}
.ant-upload.ant-upload-select {
  display: inline-block;
}
.ant-upload.ant-upload-disabled {
  cursor: not-allowed;
}
.ant-upload.ant-upload-select-picture-card {
  display: table;
  float: left;
  width: 104px;
  height: 104px;
  margin-right: 8px;
  margin-bottom: 8px;
  text-align: center;
  vertical-align: top;
  background-color: #fafafa;
  border: 1px dashed #d9d9d9;
  border-radius: 4px;
  cursor: pointer;
  transition: border-color 0.3s ease;
}
.ant-upload.ant-upload-select-picture-card > .ant-upload {
  display: table-cell;
  width: 100%;
  height: 100%;
  padding: 8px;
  text-align: center;
  vertical-align: middle;
}
.ant-upload.ant-upload-select-picture-card:hover {
  border-color: #1890ff;
}
.ant-upload.ant-upload-drag {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  background: #fafafa;
  border: 1px dashed #d9d9d9;
  border-radius: 4px;
  cursor: pointer;
  transition: border-color 0.3s;
}
.ant-upload.ant-upload-drag .ant-upload {
  padding: 16px 0;
}
.ant-upload.ant-upload-drag.ant-upload-drag-hover:not(.ant-upload-disabled) {
  border-color: #096dd9;
}
.ant-upload.ant-upload-drag.ant-upload-disabled {
  cursor: not-allowed;
}
.ant-upload.ant-upload-drag .ant-upload-btn {
  display: table;
  height: 100%;
}
.ant-upload.ant-upload-drag .ant-upload-drag-container {
  display: table-cell;
  vertical-align: middle;
}
.ant-upload.ant-upload-drag:not(.ant-upload-disabled):hover {
  border-color: #40a9ff;
}
.ant-upload.ant-upload-drag p.ant-upload-drag-icon {
  margin-bottom: 20px;
}
.ant-upload.ant-upload-drag p.ant-upload-drag-icon .anticon {
  color: #40a9ff;
  font-size: 48px;
}
.ant-upload.ant-upload-drag p.ant-upload-text {
  margin: 0 0 4px;
  color: rgba(0, 0, 0, 0.85);
  font-size: 16px;
}
.ant-upload.ant-upload-drag p.ant-upload-hint {
  color: rgba(0, 0, 0, 0.45);
  font-size: 14px;
}
.ant-upload.ant-upload-drag .anticon-plus {
  color: rgba(0, 0, 0, 0.25);
  font-size: 30px;
  transition: all 0.3s;
}
.ant-upload.ant-upload-drag .anticon-plus:hover {
  color: rgba(0, 0, 0, 0.45);
}
.ant-upload.ant-upload-drag:hover .anticon-plus {
  color: rgba(0, 0, 0, 0.45);
}
.ant-upload-picture-card-wrapper {
  zoom: 1;
  display: inline-block;
  width: 100%;
}
.ant-upload-picture-card-wrapper::before,
.ant-upload-picture-card-wrapper::after {
  display: table;
  content: '';
}
.ant-upload-picture-card-wrapper::after {
  clear: both;
}
.ant-upload-list {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  color: rgba(0, 0, 0, 0.65);
  font-size: 14px;
  font-variant: tabular-nums;
  line-height: 1.5;
  list-style: none;
  font-feature-settings: 'tnum';
  zoom: 1;
}
.ant-upload-list::before,
.ant-upload-list::after {
  display: table;
  content: '';
}
.ant-upload-list::after {
  clear: both;
}
.ant-upload-list-item-list-type-text:hover .ant-upload-list-item-name-icon-count-1 {
  padding-right: 14px;
}
.ant-upload-list-item-list-type-text:hover .ant-upload-list-item-name-icon-count-2 {
  padding-right: 28px;
}
.ant-upload-list-item {
  position: relative;
  height: 22px;
  margin-top: 8px;
  font-size: 14px;
}
.ant-upload-list-item-name {
  display: inline-block;
  width: 100%;
  padding-left: 22px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.ant-upload-list-item-name-icon-count-1 {
  padding-right: 14px;
}
.ant-upload-list-item-card-actions {
  position: absolute;
  right: 0;
  opacity: 0;
}
.ant-upload-list-item-card-actions.picture {
  top: 25px;
  line-height: 1;
  opacity: 1;
}
.ant-upload-list-item-card-actions .anticon {
  padding-right: 6px;
  color: rgba(0, 0, 0, 0.45);
}
.ant-upload-list-item-info {
  height: 100%;
  padding: 0 12px 0 4px;
  transition: background-color 0.3s;
}
.ant-upload-list-item-info > span {
  display: block;
  width: 100%;
  height: 100%;
}
.ant-upload-list-item-info .anticon-loading,
.ant-upload-list-item-info .anticon-paper-clip {
  position: absolute;
  top: 5px;
  color: rgba(0, 0, 0, 0.45);
  font-size: 14px;
}
.ant-upload-list-item .anticon-close {
  display: inline-block;
  font-size: 12px;
  font-size: 10px \9;
  transform: scale(0.83333333) rotate(0deg);
  position: absolute;
  top: 6px;
  right: 4px;
  color: rgba(0, 0, 0, 0.45);
  line-height: 0;
  cursor: pointer;
  opacity: 0;
  transition: all 0.3s;
}
:root .ant-upload-list-item .anticon-close {
  font-size: 12px;
}
.ant-upload-list-item .anticon-close:hover {
  color: rgba(0, 0, 0, 0.65);
}
.ant-upload-list-item:hover .ant-upload-list-item-info {
  background-color: #e6f7ff;
}
.ant-upload-list-item:hover .anticon-close {
  opacity: 1;
}
.ant-upload-list-item:hover .ant-upload-list-item-card-actions {
  opacity: 1;
}
.ant-upload-list-item-error,
.ant-upload-list-item-error .anticon-paper-clip,
.ant-upload-list-item-error .ant-upload-list-item-name {
  color: #f5222d;
}
.ant-upload-list-item-error .ant-upload-list-item-card-actions {
  opacity: 1;
}
.ant-upload-list-item-error .ant-upload-list-item-card-actions .anticon {
  color: #f5222d;
}
.ant-upload-list-item-progress {
  position: absolute;
  bottom: -12px;
  width: 100%;
  padding-left: 26px;
  font-size: 14px;
  line-height: 0;
}
.ant-upload-list-picture .ant-upload-list-item,
.ant-upload-list-picture-card .ant-upload-list-item {
  position: relative;
  height: 66px;
  padding: 8px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
}
.ant-upload-list-picture .ant-upload-list-item:hover,
.ant-upload-list-picture-card .ant-upload-list-item:hover {
  background: transparent;
}
.ant-upload-list-picture .ant-upload-list-item-error,
.ant-upload-list-picture-card .ant-upload-list-item-error {
  border-color: #f5222d;
}
.ant-upload-list-picture .ant-upload-list-item-info,
.ant-upload-list-picture-card .ant-upload-list-item-info {
  padding: 0;
}
.ant-upload-list-picture .ant-upload-list-item:hover .ant-upload-list-item-info,
.ant-upload-list-picture-card .ant-upload-list-item:hover .ant-upload-list-item-info {
  background: transparent;
}
.ant-upload-list-picture .ant-upload-list-item-uploading,
.ant-upload-list-picture-card .ant-upload-list-item-uploading {
  border-style: dashed;
}
.ant-upload-list-picture .ant-upload-list-item-thumbnail,
.ant-upload-list-picture-card .ant-upload-list-item-thumbnail {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 48px;
  height: 48px;
  font-size: 26px;
  line-height: 54px;
  text-align: center;
  opacity: 0.8;
}
.ant-upload-list-picture .ant-upload-list-item-icon,
.ant-upload-list-picture-card .ant-upload-list-item-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 26px;
  transform: translate(-50%, -50%);
}
.ant-upload-list-picture .ant-upload-list-item-image,
.ant-upload-list-picture-card .ant-upload-list-item-image {
  max-width: 100%;
}
.ant-upload-list-picture .ant-upload-list-item-thumbnail img,
.ant-upload-list-picture-card .ant-upload-list-item-thumbnail img {
  display: block;
  width: 48px;
  height: 48px;
  overflow: hidden;
}
.ant-upload-list-picture .ant-upload-list-item-name,
.ant-upload-list-picture-card .ant-upload-list-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;
}
.ant-upload-list-picture .ant-upload-list-item-name-icon-count-1,
.ant-upload-list-picture-card .ant-upload-list-item-name-icon-count-1 {
  padding-right: 18px;
}
.ant-upload-list-picture .ant-upload-list-item-name-icon-count-2,
.ant-upload-list-picture-card .ant-upload-list-item-name-icon-count-2 {
  padding-right: 36px;
}
.ant-upload-list-picture .ant-upload-list-item-uploading .ant-upload-list-item-name,
.ant-upload-list-picture-card .ant-upload-list-item-uploading .ant-upload-list-item-name {
  line-height: 28px;
}
.ant-upload-list-picture .ant-upload-list-item-progress,
.ant-upload-list-picture-card .ant-upload-list-item-progress {
  bottom: 14px;
  width: calc(100% - 24px);
  margin-top: 0;
  padding-left: 56px;
}
.ant-upload-list-picture .anticon-close,
.ant-upload-list-picture-card .anticon-close {
  position: absolute;
  top: 8px;
  right: 8px;
  line-height: 1;
  opacity: 1;
}
.ant-upload-list-picture-card.ant-upload-list::after {
  display: none;
}
.ant-upload-list-picture-card-container {
  float: left;
  width: 104px;
  height: 104px;
  margin: 0 8px 8px 0;
}
.ant-upload-list-picture-card .ant-upload-list-item {
  float: left;
  width: 104px;
  height: 104px;
  margin: 0 8px 8px 0;
}
.ant-upload-list-picture-card .ant-upload-list-item-info {
  position: relative;
  height: 100%;
  overflow: hidden;
}
.ant-upload-list-picture-card .ant-upload-list-item-info::before {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: all 0.3s;
  content: ' ';
}
.ant-upload-list-picture-card .ant-upload-list-item:hover .ant-upload-list-item-info::before {
  opacity: 1;
}
.ant-upload-list-picture-card .ant-upload-list-item-actions {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 10;
  white-space: nowrap;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: all 0.3s;
}
.ant-upload-list-picture-card .ant-upload-list-item-actions .anticon-eye-o,
.ant-upload-list-picture-card .ant-upload-list-item-actions .anticon-download,
.ant-upload-list-picture-card .ant-upload-list-item-actions .anticon-delete {
  z-index: 10;
  width: 16px;
  margin: 0 4px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s;
}
.ant-upload-list-picture-card .ant-upload-list-item-actions .anticon-eye-o:hover,
.ant-upload-list-picture-card .ant-upload-list-item-actions .anticon-download:hover,
.ant-upload-list-picture-card .ant-upload-list-item-actions .anticon-delete:hover {
  color: #fff;
}
.ant-upload-list-picture-card .ant-upload-list-item-info:hover + .ant-upload-list-item-actions,
.ant-upload-list-picture-card .ant-upload-list-item-actions:hover {
  opacity: 1;
}
.ant-upload-list-picture-card .ant-upload-list-item-thumbnail,
.ant-upload-list-picture-card .ant-upload-list-item-thumbnail img {
  position: static;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ant-upload-list-picture-card .ant-upload-list-item-name {
  display: none;
  margin: 8px 0 0;
  padding: 0;
  line-height: 1.5;
  text-align: center;
}
.ant-upload-list-picture-card .anticon-picture + .ant-upload-list-item-name {
  position: absolute;
  bottom: 10px;
  display: block;
}
.ant-upload-list-picture-card .ant-upload-list-item-uploading.ant-upload-list-item {
  background-color: #fafafa;
}
.ant-upload-list-picture-card .ant-upload-list-item-uploading .ant-upload-list-item-info {
  height: auto;
}
.ant-upload-list-picture-card .ant-upload-list-item-uploading .ant-upload-list-item-info::before,
.ant-upload-list-picture-card .ant-upload-list-item-uploading .ant-upload-list-item-info .anticon-eye-o,
.ant-upload-list-picture-card .ant-upload-list-item-uploading .ant-upload-list-item-info .anticon-delete {
  display: none;
}
.ant-upload-list-picture-card .ant-upload-list-item-uploading-text {
  margin-top: 18px;
  color: rgba(0, 0, 0, 0.45);
}
.ant-upload-list-picture-card .ant-upload-list-item-progress {
  bottom: 32px;
  padding-left: 0;
}
.ant-upload-list .ant-upload-success-icon {
  color: #52c41a;
  font-weight: bold;
}
.ant-upload-list .ant-upload-animate-enter,
.ant-upload-list .ant-upload-animate-leave,
.ant-upload-list .ant-upload-animate-inline-enter,
.ant-upload-list .ant-upload-animate-inline-leave {
  animation-duration: 0.3s;
  animation-fill-mode: cubic-bezier(0.78, 0.14, 0.15, 0.86);
}
.ant-upload-list .ant-upload-animate-enter {
  animation-name: uploadAnimateIn;
}
.ant-upload-list .ant-upload-animate-leave {
  animation-name: uploadAnimateOut;
}
.ant-upload-list .ant-upload-animate-inline-enter {
  animation-name: uploadAnimateInlineIn;
}
.ant-upload-list .ant-upload-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;
  }
}
/* 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();
/* 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;
}

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

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

body {
  margin: 0; // 1
  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;
  }

  &[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();
}
// mixins for clearfix
// ------------------------
.clearfix() {
  zoom: 1;
  &::before,
  &::after {
    display: table;
    content: '';
  }
  &::after {
    clear: both;
  }
}

.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, support ie
.iconfont-size-under-12px(@size, @rotate: 0deg) {
  display: inline-block;
  @font-scale: unit(@size / 12px);

  font-size: 12px;
  // IE9
  font-size: ~'@{size} \9';
  transform: scale(@font-scale) rotate(@rotate);
  :root & {
    font-size: @font-size-sm; // reset IE9 and above
  }
}

@import '../themes/index';
@import '../mixins/iconfont';

.@{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;
}

@import '../themes/index';

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

.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);
  }
}

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

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

[ant-click-animating-without-extra-node='true']::after,
.ant-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;
  }
}

.swing-motion(@className, @keyframeName) {
  .@{className}-enter,
  .@{className}-appear {
    .motion-common();

    animation-play-state: paused;
  }
  .@{className}-enter.@{className}-enter-active,
  .@{className}-appear.@{className}-appear-active {
    animation-name: ~'@{keyframeName}In';
    animation-play-state: running;
  }
}

.swing-motion(swing, antSwing);

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

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

@import '../mixins/motion';
@import 'motion/fade';
@import 'motion/move';
@import 'motion/other';
@import 'motion/slide';
@import 'motion/swing';
@import 'motion/zoom';

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

@import '../../style/themes/index';

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

@import '../themes/index';

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

@import '../../style/themes/index';
@import '../../style/mixins/index';

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

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

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

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

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

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

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

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

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

  &-close-icon {
    position: absolute;
    top: 8px;
    right: 16px;
    padding: 0;
    overflow: hidden;
    font-size: @font-size-sm;
    line-height: 22px;
    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: 15px 15px 15px 64px;
    color: @alert-text-color;
    line-height: @line-height-base;
    border-radius: @border-radius-base;
  }

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

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

  &-with-description &-close-icon {
    position: absolute;
    top: 16px;
    right: 16px;
    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 {
    height: 0 !important;
    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;
  }
}

@import '../../style/themes/index';
@import '../../style/mixins/index';

@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: @component-background;
  }

  &-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: 7px 0 7px 16px;
    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;
  }
}

@import '../../style/themes/index';
@import '../../style/mixins/index';
@import '../../input/style/mixin';

@input-prefix-cls: ~'@{ant-prefix}-input';
@select-prefix-cls: ~'@{ant-prefix}-select';
@autocomplete-prefix-cls: ~'@{select-prefix-cls}-auto-complete';

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

  &.@{select-prefix-cls} {
    .@{select-prefix-cls} {
      &-selection {
        border: 0;
        box-shadow: none;
        &__rendered {
          height: 100%;
          margin-right: 0;
          margin-left: 0;
          line-height: @input-height-base;
        }
        &__placeholder {
          margin-right: (@input-padding-horizontal-base + 1px);
          margin-left: (@input-padding-horizontal-base + 1px);
        }

        &--single {
          height: auto;
        }
      }
    }

    // Fix https://github.com/ant-design/ant-design/issues/7800
    .@{select-prefix-cls}-search--inline {
      position: static;
      float: left;
    }

    &-allow-clear {
      .@{select-prefix-cls}-selection:hover .@{select-prefix-cls}-selection__rendered {
        margin-right: 0 !important;
      }
    }

    .@{input-prefix-cls} {
      height: @input-height-base;
      line-height: @line-height-base;
      background: transparent;
      border-width: @border-width-base;
      &:focus,
      &:hover {
        .hover;
      }
      &[disabled] {
        .disabled;

        background-color: transparent;
      }
    }

    &-lg {
      .@{select-prefix-cls}-selection__rendered {
        line-height: @input-height-lg;
      }
      .@{input-prefix-cls} {
        height: @input-height-lg;
        padding-top: @input-padding-vertical-lg;
        padding-bottom: @input-padding-vertical-lg;
      }
    }

    &-sm {
      .@{select-prefix-cls}-selection__rendered {
        line-height: @input-height-sm;
      }
      .@{input-prefix-cls} {
        height: @input-height-sm;
        padding-top: @input-padding-vertical-sm;
        padding-bottom: @input-padding-vertical-sm;
      }
    }
  }
}

// https://github.com/ant-design/ant-design/issues/14156
.@{input-prefix-cls}-group > .@{autocomplete-prefix-cls} {
  .@{select-prefix-cls}-search__field.@{input-prefix-cls}-affix-wrapper {
    display: inline;
    float: none;
  }
}

@import '../../style/themes/index';
@import '../../style/mixins/index';

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

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

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

// input status
// == when focus or actived
.active(@color: @outline-color) {
  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, 20%);
}

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

.disabled() {
  color: @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%;
  height: @input-height-base;
  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 {
    .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-selection {
        margin: -1px;
        background-color: inherit;
        border: @border-width-base @border-style-base transparent;
        box-shadow: none;
      }

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

    // Expand addon icon click area
    // https://github.com/ant-design/ant-design/issues/3714
    > i:only-child::after {
      position: absolute;
      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-selection {
      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-selection {
      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-selection--single {
    height: @input-height-lg;
  }

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

  .@{inputClass}-affix-wrapper {
    display: table-cell;
    float: left;
    width: 100%;
  }

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

    & > *: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-selection,
    & > .@{ant-prefix}-calendar-picker .@{ant-prefix}-input,
    & > .@{ant-prefix}-select-auto-complete .@{ant-prefix}-input,
    & > .@{ant-prefix}-cascader-picker .@{ant-prefix}-input,
    & > .@{ant-prefix}-mention-wrapper .@{ant-prefix}-mention-editor,
    & > .@{ant-prefix}-time-picker .@{ant-prefix}-time-picker-input,
    & > .@{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;
    }

    & > *:first-child,
    & > .@{ant-prefix}-select:first-child > .@{ant-prefix}-select-selection,
    & > .@{ant-prefix}-calendar-picker:first-child .@{ant-prefix}-input,
    & > .@{ant-prefix}-select-auto-complete:first-child .@{ant-prefix}-input,
    & > .@{ant-prefix}-cascader-picker:first-child .@{ant-prefix}-input,
    & > .@{ant-prefix}-mention-wrapper:first-child .@{ant-prefix}-mention-editor,
    & > .@{ant-prefix}-time-picker:first-child .@{ant-prefix}-time-picker-input {
      border-top-left-radius: @border-radius-base;
      border-bottom-left-radius: @border-radius-base;
    }

    & > *:last-child,
    & > .@{ant-prefix}-select:last-child > .@{ant-prefix}-select-selection,
    & > .@{ant-prefix}-calendar-picker:last-child .@{ant-prefix}-input,
    & > .@{ant-prefix}-select-auto-complete:last-child .@{ant-prefix}-input,
    & > .@{ant-prefix}-cascader-picker:last-child .@{ant-prefix}-input,
    & > .@{ant-prefix}-cascader-picker-focused:last-child .@{ant-prefix}-input,
    & > .@{ant-prefix}-mention-wrapper:last-child .@{ant-prefix}-mention-editor,
    & > .@{ant-prefix}-time-picker:last-child .@{ant-prefix}-time-picker-input {
      border-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-affix-wrapper(@inputClass) {
  position: relative;
  display: inline-block;
  width: 100%;
  text-align: start;

  &:hover .@{inputClass}:not(.@{inputClass}-disabled) {
    .hover();
  }

  .@{inputClass} {
    position: relative;
    text-align: inherit;
  }

  // Should not break align of icon & text
  // https://github.com/ant-design/ant-design/issues/18087
  // https://github.com/ant-design/ant-design/issues/17414
  // https://github.com/ant-design/ant-design/pull/17684
  // https://codesandbox.io/embed/pensive-paper-di2wk
  // https://codesandbox.io/embed/nifty-benz-gb7ml
  .@{inputClass}-prefix,
  .@{inputClass}-suffix {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: flex;
    align-items: center;
    color: @input-color;
    line-height: 0;
    transform: translateY(-50%);

    :not(.anticon) {
      line-height: @line-height-base;
    }
  }

  .@{inputClass}-disabled ~ .@{inputClass}-suffix {
    .anticon {
      color: @disabled-color;
      cursor: not-allowed;
    }
  }

  .@{inputClass}-prefix {
    left: @input-padding-horizontal-base + 1px;
  }

  .@{inputClass}-suffix {
    right: @input-padding-horizontal-base + 1px;
  }

  .@{inputClass}:not(:first-child) {
    padding-left: @input-padding-horizontal-base + @input-affix-width;
  }

  .@{inputClass}:not(:last-child) {
    padding-right: @input-padding-horizontal-base + @input-affix-width;
  }

  &.@{inputClass}-affix-wrapper-input-with-clear-btn .@{inputClass}:not(:last-child) {
    padding-right: @input-padding-horizontal-base + @input-affix-with-clear-btn-width;
  }

  &.@{inputClass}-affix-wrapper-textarea-with-clear-btn .@{inputClass} {
    padding-right: 22px;
  }
}

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

@import '../../style/themes/index';
@import '../../style/mixins/index';
@import '../../input/style/mixin';

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

.selection__clear() {
  position: absolute;
  top: 50%;
  right: @control-padding-horizontal - 1px;
  z-index: 1;
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-top: -6px;
  color: @disabled-color;
  font-size: @font-size-sm;
  font-style: normal;
  line-height: 12px;
  text-align: center;
  text-transform: none;
  background: @component-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} {
  .reset-component;

  position: relative;
  display: inline-block;
  outline: 0;

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

  > ul > li > a {
    padding: 0;
    background-color: @component-background;
  }

  // arrow
  &-arrow {
    .iconfont-mixin();

    position: absolute;
    top: 50%;
    right: @control-padding-horizontal - 1px;
    margin-top: -@font-size-sm / 2;
    color: @disabled-color;
    font-size: @font-size-sm;
    line-height: 1;
    transform-origin: 50% 50%;

    & &-icon svg {
      transition: transform 0.3s;
    }
  }

  &-selection {
    display: block;
    box-sizing: border-box;
    background-color: @select-background;
    border: @border-width-base @border-style-base @select-border-color;
    // strange align fix for chrome but works
    // https://gw.alipayobjects.com/zos/rmsportal/VFTfKXJuogBAXcvfAUWJ.gif
    border-top-width: @border-width-base + 0.02px;
    border-radius: @border-radius-base;
    outline: none;
    transition: all 0.3s @ease-in-out;
    user-select: none;

    &:hover {
      .hover;
    }

    .@{select-prefix-cls}-focused &,
    &:focus,
    &:active {
      .active;
    }

    &__clear {
      .selection__clear();
    }

    &:hover &__clear {
      opacity: 1;
    }

    &-selected-value {
      float: left;
      max-width: 100%;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }

  &-no-arrow &-selection-selected-value {
    padding-right: 0;
  }

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

  &-disabled &-selection {
    background: @input-disabled-bg;
    cursor: not-allowed;
    &:hover,
    &:focus,
    &:active {
      border-color: @select-border-color;
      box-shadow: none;
    }

    &__clear {
      display: none;
      visibility: hidden;
      pointer-events: none;
    }
  }

  &-disabled &-selection--multiple &-selection__choice {
    padding-right: 10px;
    color: fade(@black, 33%);
    background: @background-color-base;
    &__remove {
      display: none;
    }
  }

  &-selection--single {
    position: relative;
    height: @input-height-base;
    cursor: pointer;

    .@{select-prefix-cls}-selection__rendered {
      margin-right: 24px;
    }
  }

  &-no-arrow {
    .@{select-prefix-cls}-selection__rendered {
      margin-right: @control-padding-horizontal - 1px;
    }
  }

  &-selection__rendered {
    position: relative;
    display: block;
    margin-right: @control-padding-horizontal - 1px;
    margin-left: @control-padding-horizontal - 1px;
    line-height: @input-height-base - 2px;
    // https://github.com/ant-design/ant-design/issues/3481#issuecomment-254721026
    &::after {
      display: inline-block;
      width: 0;
      visibility: hidden;
      content: '.';
      pointer-events: none;
    }
  }

  &-lg {
    font-size: @font-size-lg;
    .@{select-prefix-cls}-selection--single {
      height: @input-height-lg;
    }
    .@{select-prefix-cls}-selection__rendered {
      line-height: @input-height-lg - 2px;
    }
    .@{select-prefix-cls}-selection--multiple {
      min-height: @input-height-lg;
      .@{select-prefix-cls}-selection__rendered {
        li {
          height: @input-height-lg - 8px;
          line-height: @input-height-lg - 8px;
        }
      }
      .@{select-prefix-cls}-selection__clear,
      .@{select-prefix-cls}-arrow {
        top: @input-height-lg / 2;
      }
    }
  }

  &-sm {
    .@{select-prefix-cls}-selection--single {
      height: @input-height-sm;
    }
    .@{select-prefix-cls}-selection__rendered {
      margin-left: @control-padding-horizontal-sm - 1px;
      line-height: @input-height-sm - 2px;
    }
    .@{select-prefix-cls}-selection--multiple {
      min-height: @input-height-sm;
      .@{select-prefix-cls}-selection__rendered {
        li {
          height: @input-height-sm - 8px;
          line-height: @input-height-sm - 10px;
        }
      }
      .@{select-prefix-cls}-selection__clear,
      .@{select-prefix-cls}-arrow {
        top: @input-height-sm / 2;
      }
    }
    .@{select-prefix-cls}-selection__clear,
    .@{select-prefix-cls}-arrow {
      right: @control-padding-horizontal-sm;
    }
  }

  &-disabled &-selection__choice__remove {
    color: @disabled-color;
    cursor: default;
    &:hover {
      color: @disabled-color;
    }
  }

  &-search__field__wrap {
    position: relative;
    display: inline-block;
  }

  &-selection__placeholder,
  &-search__field__placeholder {
    // for TreeSelect compatibility
    position: absolute;
    top: 50%;
    right: 9px;
    left: 0;
    max-width: 100%;
    height: 20px;
    margin-top: -10px;
    overflow: hidden;
    color: @input-placeholder-color;
    line-height: 20px;
    white-space: nowrap;
    text-align: left;
    text-overflow: ellipsis;
  }

  &-search__field__placeholder {
    left: @control-padding-horizontal;
  }

  &-search__field__mirror {
    position: absolute;
    top: 0;
    left: 0;
    white-space: pre;
    opacity: 0;
    pointer-events: none;
  }

  &-search--inline {
    position: absolute;
    width: 100%;
    height: 100%;

    .@{select-prefix-cls}-search__field__wrap {
      width: 100%;
      height: 100%;
    }

    .@{select-prefix-cls}-search__field {
      width: 100%;
      height: 100%;
      font-size: 100%;
      line-height: 1;
      background: transparent;
      border-width: 0;
      border-radius: @border-radius-base;
      outline: 0;
    }

    > i {
      float: right;
    }
  }

  &-selection--multiple {
    min-height: @input-height-base;
    padding-bottom: 3px;
    cursor: text;
    .clearfix;

    .@{select-prefix-cls}-search--inline {
      position: static;
      float: left;
      width: auto;
      max-width: 100%;
      padding: 0;
      .@{select-prefix-cls}-search__field {
        width: 0.75em;
        max-width: 100%;
        padding: 1px;
      }
    }

    .@{select-prefix-cls}-selection__rendered {
      height: auto;
      margin-bottom: -3px;
      margin-left: 5px;
    }

    .@{select-prefix-cls}-selection__placeholder {
      margin-left: 6px;
    }

    > ul > li,
    .@{select-prefix-cls}-selection__rendered > ul > li {
      height: @input-height-base - 8px;
      // for tree-select
      margin-top: 3px;
      line-height: @input-height-base - 8px - 2px;
    }

    .@{select-prefix-cls}-selection__choice {
      position: relative;
      float: left;
      max-width: 99%;
      margin-right: 4px;
      padding: 0 20px 0 10px;
      overflow: hidden;
      color: @tag-default-color;
      background-color: @tag-default-bg;
      border: 1px solid @border-color-split;
      border-radius: @border-radius-sm;
      cursor: default;
      transition: padding 0.3s @ease-in-out;
      &__disabled {
        padding: 0 10px;
      }
    }

    .@{select-prefix-cls}-selection__choice__content {
      display: inline-block;
      max-width: 100%;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      transition: margin 0.3s @ease-in-out;
    }

    .@{select-prefix-cls}-selection__choice__remove {
      .iconfont-mixin();

      position: absolute;
      right: 4px;
      display: inline-block;
      color: @text-color-secondary;
      font-weight: bold;
      font-size: @font-size-sm;
      line-height: inherit;
      cursor: pointer;
      transition: all 0.3s;
      .iconfont-size-under-12px(10px);
      &:hover {
        color: @icon-color-hover;
      }
    }

    .@{select-prefix-cls}-selection__clear,
    .@{select-prefix-cls}-arrow {
      top: @input-height-base / 2;
    }
  }

  &-allow-clear &-selection--multiple &-selection__rendered,
  &-show-arrow &-selection--multiple &-selection__rendered {
    margin-right: 20px; // In case that clear button will overlap content
  }

  &-open {
    .@{select-prefix-cls}-arrow {
      &-icon svg {
        transform: rotate(180deg);
      }
    }
    .@{select-prefix-cls}-selection {
      .active();
    }
  }

  &-combobox {
    .@{select-prefix-cls}-arrow {
      display: none;
    }
    .@{select-prefix-cls}-search--inline {
      float: none;
      width: 100%;
      height: 100%;
    }
    .@{select-prefix-cls}-search__field__wrap {
      width: 100%;
      height: 100%;
    }
    .@{select-prefix-cls}-search__field {
      position: relative;
      z-index: 1;
      width: 100%;
      height: 100%;
      box-shadow: none;
      transition: all 0.3s @ease-in-out, height 0s;
    }
  }
  &-combobox&-allow-clear &-selection:hover &-selection__rendered,
  &-combobox&-show-arrow &-selection:hover &-selection__rendered {
    margin-right: 20px; // In case that clear button will overlap content
  }
}

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

  position: absolute;
  top: -9999px;
  left: -9999px;
  z-index: @zindex-dropdown;
  box-sizing: border-box;
  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;
  }

  &-menu {
    max-height: 250px;
    margin-bottom: 0;
    padding: @select-dropdown-edge-child-vertical-padding 0; //Change
    padding-left: 0; // Override default ul/ol
    overflow: auto;
    list-style: none;
    outline: none;

    &-item-group-list {
      margin: 0;
      padding: 0;

      > .@{select-prefix-cls}-dropdown-menu-item {
        padding-left: 20px;
      }
    }

    &-item-group-title {
      height: 32px;
      padding: 0 @control-padding-horizontal;
      color: @text-color-secondary;
      font-size: @font-size-sm;
      line-height: 32px;
    }

    &-item-group-list &-item:first-child:not(:last-child),
    &-item-group:not(:last-child) &-item-group-list &-item:last-child {
      border-radius: 0;
    }

    &-item {
      position: relative;
      display: block;
      padding: @select-dropdown-vertical-padding @control-padding-horizontal;
      overflow: hidden;
      color: @text-color;
      font-weight: normal;
      font-size: @select-dropdown-font-size;
      line-height: @select-dropdown-line-height;
      white-space: nowrap;
      text-overflow: ellipsis;
      cursor: pointer;
      transition: background 0.3s ease;

      &:hover:not(&-disabled) {
        background-color: @item-hover-bg;
      }

      &:first-child {
        & when (@select-dropdown-edge-child-vertical-padding = 0) {
          border-radius: @border-radius-base @border-radius-base 0 0;
        }
      }

      &:last-child {
        & when (@select-dropdown-edge-child-vertical-padding = 0) {
          border-radius: 0 0 @border-radius-base @border-radius-base;
        }
      }

      &-selected {
        color: @text-color;
        font-weight: @select-item-selected-font-weight;
        background-color: @select-item-selected-bg;
      }

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

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

      &-active:not(&-disabled) {
        background-color: @select-item-active-bg;
      }

      &-divider {
        height: 1px;
        margin: 1px 0;
        overflow: hidden;
        line-height: 0;
        background-color: @border-color-split;
      }
    }
  }

  &&--multiple {
    .@{select-prefix-cls}-dropdown-menu-item {
      padding-right: @control-padding-horizontal + 20;
      & .@{select-prefix-cls}-selected-icon {
        position: absolute;
        top: 50%;
        right: @control-padding-horizontal;
        color: transparent;
        font-weight: bold;
        font-size: 12px;
        text-shadow: 0 0.1px 0, 0.1px 0 0, 0 -0.1px 0, -0.1px 0;
        transform: translateY(-50%);
        transition: all 0.2s;
      }

      &:hover .@{select-prefix-cls}-selected-icon {
        color: fade(@black, 87%);
      }

      &-disabled .@{select-prefix-cls}-selected-icon {
        display: none;
      }

      &-selected .@{select-prefix-cls}-selected-icon,
      &-selected:hover .@{select-prefix-cls}-selected-icon {
        display: inline-block;
        color: @primary-color;
      }
    }
  }

  // Patch for popup adjust
  // https://github.com/ant-design/ant-design/issues/14422
  &--empty&--multiple &-menu-item {
    padding-right: @control-padding-horizontal;
  }

  &-container-open,
  &-open {
    .@{select-prefix-cls}-dropdown {
      display: block;
    }
  }
}

@import '../../style/themes/index';
@import '../../style/mixins/index';

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

.@{empty-prefix-cls} {
  margin: 0 8px;
  font-size: @empty-font-size;
  line-height: 22px;
  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;
    }
  }
}

// Compatibility for browsers.

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

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

@import '../../style/themes/index';
@import '../../style/mixins/index';
@import './mixin';

// Input styles
.@{ant-prefix}-input {
  .reset-component;
  .input;
}

//== Style for input-group: input with label, with button or dropdown...
.@{ant-prefix}-input-group {
  .reset-component;
  .input-group(~'@{ant-prefix}-input');
  &-wrapper {
    display: inline-block;
    width: 100%;
    text-align: start;
    vertical-align: top; // https://github.com/ant-design/ant-design/issues/6403
  }
}

// Input with affix: prefix or suffix
.@{ant-prefix}-input-affix-wrapper {
  .reset-component;
  .input-affix-wrapper(~'@{ant-prefix}-input');

  // https://github.com/ant-design/ant-design/issues/6144
  .@{ant-prefix}-input {
    min-height: 100%; // use min-height, assume that no smaller height to override
  }
}

.@{ant-prefix}-input-password-icon {
  color: @text-color-secondary;
  cursor: pointer;
  transition: all 0.3s;

  &:hover {
    color: #333;
  }
}

.@{ant-prefix}-input-clear-icon {
  .clear-icon;
  vertical-align: 0;
}

.@{ant-prefix}-input-textarea-clear-icon {
  .clear-icon;
  position: absolute;
  top: 0;
  right: 0;
  margin: 8px 8px 0 0;
}

@import './search-input';

@import '../../style/themes/index';
@import '../../style/mixins/index';
@import '../../button/style/mixin';
@import './mixin';

@search-prefix: ~'@{ant-prefix}-input-search';

.@{search-prefix} {
  &-icon {
    color: @text-color-secondary;
    cursor: pointer;
    transition: all 0.3s;
    &:hover {
      color: fade(@black, 80%);
    }
  }

  &-enter-button {
    input {
      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;
      }
    }
  }
}

@import '../../style/themes/index';
@import '../../style/mixins/index';
@import './mixin';

@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/12978
  // 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 - 0.001;
  .btn;
  .btn-default;

  // Make sure that the target of Button's click event always be `button`
  // Ref: https://github.com/ant-design/ant-design/issues/7034
  > i,
  > span {
    display: inline-block;
    transition: margin-left 0.3s @ease-in-out;
    pointer-events: none;
  }

  &-primary {
    .btn-primary;

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

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

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

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

  &-ghost {
    .btn-ghost;
  }

  &-dashed {
    .btn-dashed;
  }

  &-danger {
    .btn-danger;
  }

  &-link {
    .btn-link;
  }

  &-icon-only {
    .btn-square(@btn-prefix-cls);

    > i {
      vertical-align: middle;
    }
  }

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

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

  &&-loading:not(&-circle):not(&-circle-outline):not(&-icon-only) {
    padding-left: 29px;
    .@{iconfont-css-prefix}:not(:last-child) {
      margin-left: -14px;
    }
  }

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

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

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

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

  &-background-ghost {
    color: @component-background;
    background: transparent !important;
    border-color: @component-background;
  }

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

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

  &-background-ghost&-link {
    .button-variant-ghost(@link-color; transparent);

    color: @component-background;
  }

  &-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
  &:empty {
    vertical-align: top;
  }
}

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

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

.button-disabled(@color: @btn-disable-color; @background: @btn-disable-bg; @border: @btn-disable-border) {
  &-disabled,
  &.disabled,
  &[disabled] {
    &,
    &:hover,
    &:focus,
    &:active,
    &.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 {
    .button-color(
      @color; ~`colorPalette('@{background}', 5) `; ~`colorPalette('@{background}', 5) `
    );
  }

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

  .button-disabled();
}

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

  &:hover,
  &:focus {
    .button-color(
      ~`colorPalette('@{btn-primary-bg}', 5) `; @background; ~`colorPalette('@{btn-primary-bg}', 5)
        `
    );
  }
  &:active,
  &.active {
    .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) {
      .button-color(~`colorPalette('@{color}', 5) `; transparent; transparent);
    }
    & when not(@border = transparent) {
      .button-color(~`colorPalette('@{color}', 5) `; transparent; ~`colorPalette('@{color}', 5) `);
    }
  }
  &:active,
  &.active {
    & when (@border = transparent) {
      .button-color(~`colorPalette('@{color}', 7) `; transparent; transparent);
    }
    & when not(@border = transparent) {
      .button-color(~`colorPalette('@{color}', 7) `; transparent; ~`colorPalette('@{color}', 7) `);
    }
  }
  .button-disabled();
}
.button-color(@color; @background; @border) {
  color: @color;
  background-color: @background;
  border-color: @border;
  // a inside Button which only work in Chrome
  // http://stackoverflow.com/a/17253457
  > a:only-child {
    color: currentColor;
    &::after {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background: transparent;
      content: '';
    }
  }
}
.button-group-base(@btnClassName) {
  position: relative;
  display: inline-block;
  > .@{btnClassName},
  > span > .@{btnClassName} {
    position: relative;
    &:hover,
    &:focus,
    &:active,
    &.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-lg; @btn-font-size-lg; 0);
    line-height: @btn-height-lg - 2px;
  }
  &-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-sm; @font-size-base; 0);
    line-height: @btn-height-sm - 2px;
    > .@{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-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,
  &[disabled] {
    cursor: not-allowed;
    > * {
      pointer-events: none;
    }
  }
  &-lg {
    .button-size(@btn-height-lg; @btn-padding-lg; @btn-font-size-lg; @btn-border-radius-base);
  }
  &-sm {
    .button-size(@btn-height-sm; @btn-padding-sm; @btn-font-size-sm; @btn-border-radius-sm);
  }
}
// primary button style
.btn-primary() {
  .button-variant-primary(@btn-primary-color; @btn-primary-bg);
}
// default button style
.btn-default() {
  .button-variant-other(@btn-default-color; @btn-default-bg; @btn-default-border);
  &:hover,
  &:focus,
  &:active,
  &.active {
    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);
}
// link button style
.btn-link() {
  .button-variant-other(@link-color, transparent, transparent);
  box-shadow: none;
  &:hover,
  &:focus,
  &:active {
    border-color: transparent;
  }
  .button-disabled(@disabled-color; transparent; transparent);
}
// round button
.btn-round(@btnClassName: btn) {
  .button-size(@btn-circle-size; 0 @btn-circle-size / 2; @font-size-base; @btn-circle-size);
  &.@{btnClassName}-lg {
    .button-size(
      @btn-circle-size-lg; 0 @btn-circle-size-lg / 2; @btn-font-size-lg; @btn-circle-size-lg
    );
  }
  &.@{btnClassName}-sm {
    .button-size(
      @btn-circle-size-sm; 0 @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; @font-size-base + 2px; @btn-border-radius-base);
  &.@{btnClassName}-lg {
    .square(@btn-square-size-lg);
    .button-size(@btn-square-size-lg; 0; @btn-font-size-lg + 2px; @btn-border-radius-base);
  }
  &.@{btnClassName}-sm {
    .square(@btn-square-size-sm);
    .button-size(@btn-square-size-sm; 0; @font-size-base; @btn-border-radius-base);
  }
}
// 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;
  }
}

@import '../../style/themes/index';
@import '../../style/mixins/index';

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

@import '../../style/themes/index';
@import '../../style/mixins/index';

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

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

@import './responsive';

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

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

@import '../../style/themes/index';
@import '../../style/mixins/index';

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

  &-dot-status {
    line-height: 1;
  }

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

@import '../../style/themes/index';
@import '../../style/mixins/index';

@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 {
      margin-left: 4px;
    }
  }

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

@import '../../style/themes/index';
@import '../../style/mixins/index';

@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;
  line-height: 0; // Fix display inline-block gap
  list-style: none;
  background: @menu-bg;
  outline: none;
  box-shadow: @box-shadow-base;
  transition: background 0.3s, width 0.2s;
  .clearfix;

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

  &-hidden {
    display: none;
  }

  &-item-group-title {
    padding: 8px 16px;
    color: @menu-item-group-title-color;
    font-size: @font-size-base;
    line-height: @line-height-base;
    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 {
    display: block;
    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;
    padding: 0;
    border-right: 0;
    transform-origin: 0 0;

    .@{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: 0 20px;
    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: 10px;
      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;
      }
    }
  }

  & > &-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;
      background: @menu-popup-bg;
      border-radius: @border-radius-base;

      .submenu-title-wrapper {
        padding-right: 20px;
      }

      &::before {
        position: absolute;
        top: -7px;
        right: 0;
        bottom: 0;
        left: 0;
        opacity: 0.0001;
        content: ' ';
      }
    }

    > .@{menu-prefix-cls} {
      background-color: @menu-bg;
      border-radius: @border-radius-base;
      &-submenu-title::after {
        transition: transform 0.3s @ease-in-out;
      }
    }

    &-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.
          // Since `linear-gradient` not work on IE9, we should hack it.
          // ref: https://github.com/ant-design/ant-design/issues/15910
          background: @menu-bg;
          background: ~'@{menu-item-color} \9';
          background-image: linear-gradient(to right, @menu-item-color, @menu-item-color);
          background-image: ~'none \9';
          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);
        }
      }
    }

    &-inline > .@{menu-prefix-cls}-submenu-title .@{menu-prefix-cls}-submenu-arrow {
      &::before {
        transform: rotate(-45deg) translateX(2px);
      }
      &::after {
        transform: rotate(45deg) translateX(-2px);
      }
    }

    &-open {
      &.@{menu-prefix-cls}-submenu-inline
        > .@{menu-prefix-cls}-submenu-title
        .@{menu-prefix-cls}-submenu-arrow {
        transform: translateY(-2px);
        &::after {
          transform: rotate(-45deg) translateX(-2px);
        }
        &::before {
          transform: rotate(45deg) translateX(2px);
        }
      }
    }
  }

  &-vertical &-submenu-selected,
  &-vertical-left &-submenu-selected,
  &-vertical-right &-submenu-selected {
    color: @menu-highlight-color;
    > a {
      color: @menu-highlight-color;
    }
  }

  &-horizontal {
    line-height: 46px;
    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 {
        display: block;
        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;
      font-size: @menu-item-font-size;
      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;
    }
  }

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

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

@import './dark';

.@{menu-prefix-cls} {
  // dark theme
  &-dark,
  &-dark &-sub {
    color: @menu-dark-color;
    background: @menu-dark-bg;
    .@{menu-prefix-cls}-submenu-title .@{menu-prefix-cls}-submenu-arrow {
      opacity: 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;
    box-shadow: 0 2px 8px fade(@black, 45%) inset;
  }

  &-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 {
    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 {
      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 &-item-selected {
    color: @menu-dark-highlight-color;
    border-right: 0;
    &::after {
      border-right: 0;
    }
    > a,
    > 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 {
      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;
        }
      }
    }
  }
}

@import '../../style/themes/index';
@import '../../style/mixins/index';

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

    &::before {
      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;

    &::before {
      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;

    &::before {
      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;

    &::before {
      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;

    &::before {
      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;
  }
}

@import '../../style/themes/index';
@import '../../style/mixins/index';

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

  &-menu {
    position: relative;
    margin: 0;
    padding: @dropdown-edge-child-vertical-padding 0;
    text-align: left;
    list-style-type: none;
    background-color: @component-background;
    background-clip: padding-box;
    border-radius: @border-radius-base;
    outline: none;
    box-shadow: @box-shadow-base;
    -webkit-transform: translate3d(0, 0, 0);

    &-item-group-title {
      padding: 5px @control-padding-horizontal;
      color: @text-color-secondary;
      transition: all 0.3s;
    }

    &-submenu-popup {
      position: absolute;
      z-index: @zindex-dropdown;

      > .@{dropdown-prefix-cls}-menu {
        transform-origin: 0 0;
      }

      ul,
      li {
        list-style: none;
      }

      ul {
        margin-right: 0.3em;
        margin-left: 0.3em;
        padding: 0;
      }
    }

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

      > .anticon:first-child,
      > span > .anticon:first-child {
        min-width: 12px;
        margin-right: 8px;
        font-size: @font-size-sm;
      }

      > a {
        display: block;
        margin: -@dropdown-vertical-padding -@control-padding-horizontal;
        padding: @dropdown-vertical-padding @control-padding-horizontal;
        color: @text-color;
        transition: all 0.3s;
      }

      &: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: @component-background;
          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 {
          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: 26px;
    }

    &-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: @component-background;
        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 {
  > .@{iconfont-css-prefix}.@{iconfont-css-prefix}-down {
    .iconfont-size-under-12px(10px);
  }
}

.@{dropdown-prefix-cls}-button {
  white-space: nowrap;

  &.@{ant-prefix}-btn-group > .@{ant-prefix}-btn:last-child:not(:first-child) {
    padding-right: @padding-xs;
    padding-left: @padding-xs;
  }
  .@{iconfont-css-prefix}.@{iconfont-css-prefix}-down {
    .iconfont-size-under-12px(10px);
  }
}

// https://github.com/ant-design/ant-design/issues/4903
.@{dropdown-prefix-cls}-menu-dark {
  &,
  .@{dropdown-prefix-cls}-menu {
    background: @menu-dark-bg;
  }
  .@{dropdown-prefix-cls}-menu-item,
  .@{dropdown-prefix-cls}-menu-submenu-title,
  .@{dropdown-prefix-cls}-menu-item > a {
    color: @text-color-secondary-dark;
    .@{dropdown-prefix-cls}-menu-submenu-arrow::after {
      color: @text-color-secondary-dark;
    }
    &:hover {
      color: @text-color-inverse;
      background: transparent;
    }
  }
  .@{dropdown-prefix-cls}-menu-item-selected {
    &,
    &:hover,
    > a {
      color: @text-color-inverse;
      background: @primary-color;
    }
  }
}

@import '../../style/themes/index';
@import '../../style/mixins/index';

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

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

  border-top: @border-width-base @border-style-base @border-color-base;
  outline: none;

  .@{ant-prefix}-select&-year-select {
    min-width: 90px;

    &.@{ant-prefix}-select-sm {
      min-width: 70px;
    }
  }

  .@{ant-prefix}-select&-month-select {
    min-width: 80px;
    margin-left: 8px;

    &.@{ant-prefix}-select-sm {
      min-width: 70px;
    }
  }

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

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

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

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

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

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

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

  table,
  th,
  td {
    border: 0;
  }

  td {
    position: relative;
  }

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

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

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

  &-month,
  &-date {
    text-align: center;
    transition: all 0.3s;
  }

  &-value {
    display: block;
    width: 24px;
    height: 24px;
    margin: 0 auto;
    padding: 0;
    color: @text-color;
    line-height: 24px;
    background: transparent;
    border-radius: @border-radius-sm;
    transition: all 0.3s;

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

    &:active {
      color: @text-color-inverse;
      background: @primary-color;
    }
  }

  &-month-panel-cell &-value {
    width: 48px;
  }

  &-today &-value,
  &-month-panel-current-cell &-value {
    box-shadow: 0 0 0 1px @primary-color inset;
  }

  &-selected-day &-value,
  &-month-panel-selected-cell &-value {
    color: @text-color-inverse;
    background: @primary-color;
  }

  &-disabled-cell-first-of-row &-value {
    border-top-left-radius: @border-radius-base;
    border-bottom-left-radius: @border-radius-base;
  }

  &-disabled-cell-last-of-row &-value {
    border-top-right-radius: @border-radius-base;
    border-bottom-right-radius: @border-radius-base;
  }

  &-last-month-cell &-value,
  &-next-month-btn-day &-value {
    color: @disabled-color;
  }

  &-month-panel-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;
  }

  &-content {
    position: absolute;
    bottom: -9px;
    left: 0;
    width: 100%;
  }

  &-fullscreen {
    border-top: 0;
  }

  &-fullscreen &-table {
    table-layout: fixed;
  }

  &-fullscreen &-header {
    .@{ant-prefix}-radio-group {
      margin-left: 16px;
    }
    label.@{ant-prefix}-radio-button {
      height: @input-height-base;
      line-height: @input-height-base - 2px;
    }
  }

  &-fullscreen &-month,
  &-fullscreen &-date {
    display: block;
    height: 116px;
    margin: 0 4px;
    padding: 4px 8px;
    color: @text-color;
    text-align: left;
    border-top: 2px solid @border-color-split;
    transition: background 0.3s;

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

    &:active {
      background: @primary-2;
    }
  }

  &-fullscreen &-column-header {
    padding-right: 12px;
    padding-bottom: 5px;
    text-align: right;
  }

  &-fullscreen &-value {
    width: auto;
    text-align: right;
    background: transparent;
  }

  &-fullscreen &-today &-value {
    color: @text-color;
  }

  &-fullscreen &-month-panel-current-cell &-month,
  &-fullscreen &-today &-date {
    background: transparent;
    border-top-color: @primary-color;
  }

  &-fullscreen &-month-panel-current-cell &-value,
  &-fullscreen &-today &-value {
    box-shadow: none;
  }

  &-fullscreen &-month-panel-selected-cell &-month,
  &-fullscreen &-selected-day &-date {
    background: @primary-1;
  }

  &-fullscreen &-month-panel-selected-cell &-value,
  &-fullscreen &-selected-day &-value {
    color: @primary-color;
  }

  &-fullscreen &-last-month-cell &-date,
  &-fullscreen &-next-month-btn-day &-date {
    color: @disabled-color;
  }

  &-fullscreen &-content {
    position: static;
    width: auto;
    height: 88px;
    overflow-y: auto;
  }

  &-disabled-cell &-date {
    &,
    &:hover {
      cursor: not-allowed;
    }
  }

  &-disabled-cell:not(&-today) &-date {
    &,
    &:hover {
      background: transparent;
    }
  }

  &-disabled-cell &-value {
    width: auto;
    color: @disabled-color;
    border-radius: 0;
    cursor: not-allowed;
  }
}

@import '../../style/themes/index';
@import '../../style/mixins/index';

@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-focused-outline: 3px solid fade(@radio-dot-color, 6%);

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

  display: inline-block;
}

// 一般状态
.@{radio-prefix-cls}-wrapper {
  .reset-component;

  position: relative;
  display: inline-block;
  margin-right: 8px;
  white-space: nowrap;
  cursor: pointer;
}

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

  position: relative;
  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: 0 0 0 3px fade(@radio-dot-color, 8%);
  }

  &-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: fade(@black, 20%);
    }
  }

  .@{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;
  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: 0;
  cursor: pointer;
  transition: color 0.3s, background 0.3s, border-color 0.3s;

  a {
    color: @radio-button-color;
  }

  > .@{radio-prefix-cls}-button {
    display: block;
    width: 0;
    height: 0;
    margin-left: 0;
  }

  .@{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: 0;
      left: -1px;
      display: block;
      width: 1px;
      height: 100%;
      background-color: @border-color-base;
      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 {
    outline: @radio-focused-outline;
  }

  .@{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;
    box-shadow: -1px 0 0 0 @radio-dot-color;

    &::before {
      background-color: @radio-dot-color !important;
      opacity: 0.1;
    }

    &:first-child {
      border-color: @radio-dot-color;
      box-shadow: none !important;
    }

    &:hover {
      color: @radio-button-hover-color;
      border-color: @radio-button-hover-color;
      box-shadow: -1px 0 0 0 @radio-button-hover-color;
    }

    &:active {
      color: @radio-button-active-color;
      border-color: @radio-button-active-color;
      box-shadow: -1px 0 0 0 @radio-button-active-color;
    }

    &:focus-within {
      outline: @radio-focused-outline;
    }
  }

  .@{radio-group-prefix-cls}-solid &-checked:not(&-disabled) {
    color: @component-background;
    background: @radio-dot-color;
    border-color: @radio-dot-color;
    &:hover {
      color: @component-background;
      background: @radio-button-hover-color;
      border-color: @radio-button-hover-color;
    }
    &:active {
      color: @component-background;
      background: @radio-button-active-color;
      border-color: @radio-button-active-color;
    }
    &:focus-within {
      outline: @radio-focused-outline;
    }
  }

  &-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: @text-color-inverse;
    background-color: tint(@black, 90%);
    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;
  }
}

@import '../../style/themes/index';
@import '../../style/mixins/index';

@card-prefix-cls: ~'@{ant-prefix}-card';
@card-head-height: 48px;
@card-hover-border: fade(@black, 9%);
@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;
  transition: all 0.3s;

  &-hoverable {
    cursor: pointer;
    &:hover {
      border-color: @card-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: @font-size-lg;
    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: -17px;
      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: @text-color;
    font-weight: normal;
    font-size: @font-size-base;
  }

  &-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;
    &-hoverable {
      &:hover {
        position: relative;
        z-index: 1;
        box-shadow: @box-shadow-base;
      }
    }
  }

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

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

  &-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: 12px 0;
      color: @text-color-secondary;
      text-align: center;

      > span {
        position: relative;
        display: block;
        min-width: 32px;
        font-size: @font-size-base;
        line-height: 22px;
        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;
    }

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

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

@import './size';

@card-head-height-sm: 36px;
@card-padding-base-sm: @card-padding-base / 2;
@card-head-padding-sm: @card-head-padding / 2;
@card-head-font-size-sm: @font-size-base;

.@{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;
  }
}

@import '../../style/themes/index';
@import '../../style/mixins/index';

@tab-prefix-cls: ~'@{ant-prefix}-tabs';

// card style
.@{tab-prefix-cls} {
  &&-card &-card-bar &-nav-container {
    height: @tabs-card-height;
  }
  &&-card &-card-bar &-ink-bar {
    visibility: hidden;
  }
  &&-card &-card-bar &-tab {
    height: @tabs-card-height;
    margin: 0;
    margin-right: @tabs-card-gutter;
    padding: 0 16px;
    line-height: @tabs-card-height - 2px;
    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;
    transition: all 0.3s @ease-in-out;
  }
  &&-card &-card-bar &-tab-active {
    height: @tabs-card-height;
    color: @tabs-card-active-color;
    background: @component-background;
    border-color: @border-color-split;
    border-bottom: @border-width-base solid @component-background;

    &::before {
      border-top: @tabs-card-tab-active-border-top;
    }
  }
  &&-card &-card-bar &-tab-disabled {
    color: @tabs-card-active-color;
    color: @disabled-color;
  }
  &&-card &-card-bar &-tab-inactive {
    padding: 0;
  }
  &&-card &-card-bar &-nav-wrap {
    margin-bottom: 0;
  }
  &&-card &-card-bar &-tab &-close-x {
    width: 16px;
    height: 16px;
    height: @font-size-base;
    margin-right: -5px;
    margin-left: 3px;
    overflow: hidden;
    color: @text-color-secondary;
    font-size: @font-size-sm;
    vertical-align: middle;
    transition: all 0.3s;
    &:hover {
      color: @heading-color;
    }
  }

  &&-card &-card-content > &-tabpane,
  &&-editable-card &-card-content > &-tabpane {
    transition: none !important;
    &-inactive {
      overflow: hidden;
    }
  }

  &&-card &-card-bar &-tab:hover .@{iconfont-css-prefix}-close {
    opacity: 1;
  }

  &-extra-content {
    line-height: @tabs-title-font-size * @line-height-base + extract(@tabs-horizontal-padding, 1) *
      2;

    .@{tab-prefix-cls}-new-tab {
      position: relative;
      width: 20px;
      height: 20px;
      color: @text-color;
      font-size: 12px;
      line-height: 20px;
      text-align: center;
      border: @border-width-base @border-style-base @border-color-split;
      border-radius: @border-radius-sm;
      cursor: pointer;
      transition: all 0.3s;
      &:hover {
        color: @tabs-card-active-color;
        border-color: @tabs-card-active-color;
      }
      svg {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto;
      }
    }
  }

  // https://github.com/ant-design/ant-design/issues/17865
  &&-large &-extra-content {
    line-height: @tabs-title-font-size-lg * @line-height-base +
      extract(@tabs-horizontal-padding-lg, 1) * 2;
  }

  // https://github.com/ant-design/ant-design/issues/17865
  &&-small &-extra-content {
    line-height: @tabs-title-font-size-sm * @line-height-base +
      extract(@tabs-horizontal-padding-sm, 1) * 2;
  }

  // https://github.com/ant-design/ant-design/issues/17865
  &&-card &-extra-content {
    line-height: @tabs-card-height;
  }

  // https://github.com/ant-design/ant-design/issues/4669
  &-vertical&-card &-card-bar&-left-bar,
  &-vertical&-card &-card-bar&-right-bar {
    .@{tab-prefix-cls}-nav-container {
      height: 100%;
    }
    .@{tab-prefix-cls}-tab {
      margin-bottom: 8px;
      border-bottom: @border-width-base @border-style-base @border-color-split;
      &-active {
        padding-bottom: 4px;
      }
      &:last-child {
        margin-bottom: 8px;
      }
    }
    .@{tab-prefix-cls}-new-tab {
      width: 90%;
    }
  }

  &-vertical&-card&-left &-card-bar&-left-bar {
    .@{tab-prefix-cls}-nav-wrap {
      margin-right: 0;
    }
    .@{tab-prefix-cls}-tab {
      margin-right: 1px;
      border-right: 0;
      border-radius: @border-radius-base 0 0 @border-radius-base;
      &-active {
        margin-right: -1px;
        padding-right: 18px;
      }
    }
  }

  &-vertical&-card&-right &-card-bar&-right-bar {
    .@{tab-prefix-cls}-nav-wrap {
      margin-left: 0;
    }
    .@{tab-prefix-cls}-tab {
      margin-left: 1px;
      border-left: 0;
      border-radius: 0 @border-radius-base @border-radius-base 0;
      &-active {
        margin-left: -1px;
        padding-left: 18px;
      }
    }
  }

  // https://github.com/ant-design/ant-design/issues/9104
  & &-card-bar&-bottom-bar &-tab {
    height: auto;
    border-top: 0;
    border-bottom: @border-width-base @border-style-base @border-color-split;
    border-radius: 0 0 @border-radius-base @border-radius-base;
  }

  & &-card-bar&-bottom-bar &-tab-active {
    padding-top: 1px;
    padding-bottom: 0;
    color: @primary-color;
  }
}

@import '../../style/themes/index';
@import '../../style/mixins/index';
@import './card-style';

@tab-prefix-cls: ~'@{ant-prefix}-tabs';

// Hidden content
.tabs-hidden-content() {
  height: 0;
  padding: 0 !important;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  input {
    visibility: hidden;
  }
}

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

  position: relative;
  overflow: hidden;
  .clearfix;

  &-ink-bar {
    position: absolute;
    bottom: 1px;
    left: 0;
    z-index: 1;
    box-sizing: border-box;
    width: 0;
    height: 2px;
    background-color: @tabs-ink-bar-color;
    transform-origin: 0 0;
  }

  &-bar {
    margin: @tabs-bar-margin;
    border-bottom: @border-width-base @border-style-base @border-color-split;
    outline: none;
    transition: padding 0.3s @ease-in-out;
  }

  &-nav-container {
    position: relative;
    box-sizing: border-box;
    margin-bottom: -1px;
    overflow: hidden;
    font-size: @tabs-title-font-size;
    line-height: @line-height-base;
    white-space: nowrap;
    transition: padding 0.3s @ease-in-out;
    .clearfix;

    &-scrolling {
      padding-right: @tabs-scrolling-size;
      padding-left: @tabs-scrolling-size;
    }
  }

  // https://github.com/ant-design/ant-design/issues/9104
  &-bottom &-bottom-bar {
    margin-top: 16px;
    margin-bottom: 0;
    border-top: @border-width-base @border-style-base @border-color-split;
    border-bottom: none;
  }

  &-bottom &-bottom-bar &-ink-bar {
    top: 1px;
    bottom: auto;
  }

  &-bottom &-bottom-bar &-nav-container {
    margin-top: -1px;
    margin-bottom: 0;
  }

  &-tab-prev,
  &-tab-next {
    position: absolute;
    z-index: 2;
    width: 0;
    height: 100%;
    color: @text-color-secondary;
    text-align: center;
    background-color: transparent;
    border: 0;
    cursor: pointer;
    opacity: 0;
    transition: width 0.3s @ease-in-out, opacity 0.3s @ease-in-out, color 0.3s @ease-in-out;
    user-select: none;
    pointer-events: none;

    &.@{tab-prefix-cls}-tab-arrow-show {
      width: @tabs-scrolling-size;
      height: 100%;
      opacity: 1;
      pointer-events: auto;
    }

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

    &-icon {
      position: absolute;
      top: 50%;
      left: 50%;
      font-weight: bold;
      font-style: normal;
      font-variant: normal;
      line-height: inherit;
      text-align: center;
      text-transform: none;
      transform: translate(-50%, -50%);

      &-target {
        display: block;
        .iconfont-size-under-12px(10px);
      }
    }
  }

  &-tab-btn-disabled {
    cursor: not-allowed;
    &,
    &:hover {
      color: @disabled-color;
    }
  }

  &-tab-next {
    right: 2px;
  }

  &-tab-prev {
    left: 0;
    :root & {
      filter: none;
    }
  }

  &-nav-wrap {
    margin-bottom: -1px;
    overflow: hidden;
  }

  &-nav-scroll {
    overflow: hidden;
    white-space: nowrap;
  }

  &-nav {
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    margin: 0;
    padding-left: 0;
    list-style: none;
    transition: transform 0.3s @ease-in-out;

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

    &::after {
      clear: both;
    }

    .@{tab-prefix-cls}-tab {
      position: relative;
      display: inline-block;
      box-sizing: border-box;
      height: 100%;
      margin: @tabs-horizontal-margin;
      padding: @tabs-horizontal-padding;
      text-decoration: none;
      cursor: pointer;
      transition: color 0.3s @ease-in-out;

      &::before {
        position: absolute;
        top: -1px;
        left: 0;
        width: 100%;
        border-top: 2px solid transparent;
        border-radius: @border-radius-base @border-radius-base 0 0;
        transition: all 0.3s;
        content: '';
        pointer-events: none;
      }

      &:last-child {
        margin-right: 0;
      }

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

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

      .@{iconfont-css-prefix} {
        margin-right: 8px;
      }

      &-active {
        color: @tabs-highlight-color;
        font-weight: 500;
      }

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

  .@{tab-prefix-cls}-large-bar {
    .@{tab-prefix-cls}-nav-container {
      font-size: @tabs-title-font-size-lg;
    }
    .@{tab-prefix-cls}-tab {
      padding: @tabs-horizontal-padding-lg;
    }
  }

  .@{tab-prefix-cls}-small-bar {
    .@{tab-prefix-cls}-nav-container {
      font-size: @tabs-title-font-size-sm;
    }
    .@{tab-prefix-cls}-tab {
      padding: @tabs-horizontal-padding-sm;
    }
  }

  // Create an empty element to avoid margin collapsing
  // https://github.com/ant-design/ant-design/issues/18103
  &-content::before {
    display: block;
    overflow: hidden;
    content: '';
  }

  // Horizontal Content
  .@{tab-prefix-cls}-top-content,
  .@{tab-prefix-cls}-bottom-content {
    width: 100%;

    > .@{tab-prefix-cls}-tabpane {
      flex-shrink: 0;
      width: 100%;
      -webkit-backface-visibility: hidden;
      opacity: 1;
      transition: opacity 0.45s;
    }

    > .@{tab-prefix-cls}-tabpane-inactive {
      .tabs-hidden-content();
    }

    &.@{tab-prefix-cls}-content-animated {
      display: flex;
      flex-direction: row;
      transition: margin-left 0.3s @ease-in-out;
      will-change: margin-left;
    }
  }

  // Vertical Bar
  .@{tab-prefix-cls}-left-bar,
  .@{tab-prefix-cls}-right-bar {
    height: 100%;
    border-bottom: 0;

    .@{tab-prefix-cls}-tab-arrow-show {
      width: 100%;
      height: @tabs-scrolling-size;
    }

    .@{tab-prefix-cls}-tab {
      display: block;
      float: none;
      margin: @tabs-vertical-margin;
      padding: @tabs-vertical-padding;

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

    .@{tab-prefix-cls}-extra-content {
      text-align: center;
    }

    .@{tab-prefix-cls}-nav-scroll {
      width: auto;
    }

    .@{tab-prefix-cls}-nav-container,
    .@{tab-prefix-cls}-nav-wrap {
      height: 100%;
    }

    .@{tab-prefix-cls}-nav-container {
      margin-bottom: 0;

      &.@{tab-prefix-cls}-nav-container-scrolling {
        padding: @tabs-scrolling-size 0;
      }
    }

    .@{tab-prefix-cls}-nav-wrap {
      margin-bottom: 0;
    }

    .@{tab-prefix-cls}-nav {
      width: 100%;
    }

    .@{tab-prefix-cls}-ink-bar {
      top: 0;
      bottom: auto;
      left: auto;
      width: 2px;
      height: 0;
    }

    .@{tab-prefix-cls}-tab-next {
      right: 0;
      bottom: 0;
      width: 100%;
      height: @tabs-scrolling-size;
    }

    .@{tab-prefix-cls}-tab-prev {
      top: 0;
      width: 100%;
      height: @tabs-scrolling-size;
    }
  }

  // Vertical Content
  .@{tab-prefix-cls}-left-content,
  .@{tab-prefix-cls}-right-content {
    width: auto;
    margin-top: 0 !important;
    overflow: hidden;
  }

  // Vertical - Left
  .@{tab-prefix-cls}-left-bar {
    float: left;
    margin-right: -1px;
    margin-bottom: 0;
    border-right: @border-width-base @border-style-base @border-color-split;
    .@{tab-prefix-cls}-tab {
      text-align: right;
    }
    .@{tab-prefix-cls}-nav-container {
      margin-right: -1px;
    }
    .@{tab-prefix-cls}-nav-wrap {
      margin-right: -1px;
    }
    .@{tab-prefix-cls}-ink-bar {
      right: 1px;
    }
  }
  .@{tab-prefix-cls}-left-content {
    padding-left: 24px;
    border-left: @border-width-base @border-style-base @border-color-split;
  }

  // Vertical - Right
  .@{tab-prefix-cls}-right-bar {
    float: right;
    margin-bottom: 0;
    margin-left: -1px;
    border-left: @border-width-base @border-style-base @border-color-split;
    .@{tab-prefix-cls}-nav-container {
      margin-left: -1px;
    }
    .@{tab-prefix-cls}-nav-wrap {
      margin-left: -1px;
    }
    .@{tab-prefix-cls}-ink-bar {
      left: 1px;
    }
  }
  .@{tab-prefix-cls}-right-content {
    padding-right: 24px;
    border-right: @border-width-base @border-style-base @border-color-split;
  }
}

.@{tab-prefix-cls}-top .@{tab-prefix-cls}-ink-bar-animated,
.@{tab-prefix-cls}-bottom .@{tab-prefix-cls}-ink-bar-animated {
  transition: transform 0.3s @ease-in-out, width 0.2s @ease-in-out, left 0.3s @ease-in-out;
}

.@{tab-prefix-cls}-left .@{tab-prefix-cls}-ink-bar-animated,
.@{tab-prefix-cls}-right .@{tab-prefix-cls}-ink-bar-animated {
  transition: transform 0.3s @ease-in-out, height 0.2s @ease-in-out, top 0.3s @ease-in-out;
}

// No animation
.tabs-no-animation() {
  > .@{tab-prefix-cls}-content-animated {
    margin-left: 0 !important;
    transform: none !important;
  }
  > .@{tab-prefix-cls}-tabpane-inactive {
    .tabs-hidden-content();
  }
}

.no-flex,
.@{tab-prefix-cls}-no-animation {
  > .@{tab-prefix-cls}-content {
    .tabs-no-animation();
  }
}

.@{tab-prefix-cls}-left-content,
.@{tab-prefix-cls}-right-content {
  .tabs-no-animation();
}

@import '../../style/mixins/index';

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

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

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

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

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

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

@import '../../style/themes/index';
@import '../../style/mixins/index';
@import './mixin';

// Grid system
.@{ant-prefix}-row {
  .make-row();

  display: block;
  box-sizing: border-box;
}

.@{ant-prefix}-row + .@{ant-prefix}-row::before {
  clear: both;
}

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

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

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

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

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

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

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

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

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

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

.@{ant-prefix}-col {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
}

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

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

.make-grid(-xs);

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

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

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

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

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

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

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

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

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

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

@import '../../style/themes/index';
@import '../../style/mixins/index';

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

  .slick-slider {
    position: relative;
    display: block;
    box-sizing: border-box;
    -webkit-touch-callout: none;
    -ms-touch-action: pan-y;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
  }
  .slick-list {
    position: relative;
    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;
    [dir='rtl'] & {
      float: right;
    }
    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;
    display: block;
    width: 100%;
    height: @carousel-dot-height;
    margin: 0;
    padding: 0;
    text-align: center;
    list-style: none;
    &-bottom {
      bottom: 12px;
    }
    &-top {
      top: 12px;
    }
    li {
      position: relative;
      display: inline-block;
      margin: 0 2px;
      padding: 0;
      text-align: center;
      vertical-align: top;
      button {
        display: block;
        width: @carousel-dot-width;
        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 button {
        width: @carousel-dot-active-width;
        background: @component-background;
        opacity: 1;
        &:hover,
        &:focus {
          opacity: 1;
        }
      }
    }
  }
}

.@{ant-prefix}-carousel-vertical {
  .slick-dots {
    top: 50%;
    bottom: auto;
    width: @carousel-dot-height;
    height: auto;
    transform: translateY(-50%);
    &-left {
      left: 12px;
    }
    &-right {
      right: 12px;
    }
    li {
      margin: 0 2px;
      vertical-align: baseline;
      button {
        width: @carousel-dot-height;
        height: @carousel-dot-width;
      }
      &.slick-active button {
        width: @carousel-dot-height;
        height: @carousel-dot-active-width;
      }
    }
  }
}

@import '../../style/themes/index';
@import '../../style/mixins/index';
@import '../../input/style/mixin';

@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: @component-background;
    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;
    }

    &-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: @component-background;
    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 @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;
      }
    }
    &-active:not(&-disabled) {
      &,
      &:hover {
        font-weight: @select-item-selected-font-weight;
        background-color: @background-color-light;
      }
    }
    &-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;
    }
  }
}

@import '../../style/mixins/index';

.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-sm;
      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;
      background-color: @checkbox-check-color;
      border: @checkbox-border-width @border-style-base @border-color-base;
      border-radius: @border-radius-sm;
      // 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: 8px;
      &:last-child {
        margin-right: 0;
      }
    }
    &-item + &-item {
      margin-left: 0;
    }
  }

  // 半选状态
  .@{checkbox-prefix-cls}-indeterminate {
    .@{checkbox-inner-prefix-cls} {
      background-color: @component-background;
      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;
  }
}

@import '../../style/themes/index';
@import '../../style/mixins/index';

@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: 22px;
      cursor: pointer;
      transition: all 0.3s;

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

        position: absolute;
        top: 50%;
        left: @padding-md;
        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;
  }

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

@import '../../style/themes/index';
@import '../../style/mixins/index';

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

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

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

  &-avatar {
    position: relative;
    flex-shrink: 0;
    margin-right: 12px;
    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: 4px;
      font-size: @comment-font-size-base;
      & > a,
      & > span {
        padding-right: 8px;
        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 {
      white-space: pre-wrap;
    }
  }

  &-actions {
    margin-top: 12px;
    padding-left: 0;
    > li {
      display: inline-block;
      color: @comment-action-color;
      > span {
        padding-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;
  }
}

@import '../../button/style/mixin';

.@{calendar-prefix-cls}-picker-container {
  .reset-component;

  position: absolute;
  z-index: @zindex-picker;
  font-family: @font-family;

  &.slide-up-enter.slide-up-enter-active&-placement-topLeft,
  &.slide-up-enter.slide-up-enter-active&-placement-topRight,
  &.slide-up-appear.slide-up-appear-active&-placement-topLeft,
  &.slide-up-appear.slide-up-appear-active&-placement-topRight {
    animation-name: antSlideDownIn;
  }

  &.slide-up-enter.slide-up-enter-active&-placement-bottomLeft,
  &.slide-up-enter.slide-up-enter-active&-placement-bottomRight,
  &.slide-up-appear.slide-up-appear-active&-placement-bottomLeft,
  &.slide-up-appear.slide-up-appear-active&-placement-bottomRight {
    animation-name: antSlideUpIn;
  }

  &.slide-up-leave.slide-up-leave-active&-placement-topLeft,
  &.slide-up-leave.slide-up-leave-active&-placement-topRight {
    animation-name: antSlideDownOut;
  }

  &.slide-up-leave.slide-up-leave-active&-placement-bottomLeft,
  &.slide-up-leave.slide-up-leave-active&-placement-bottomRight {
    animation-name: antSlideUpOut;
  }
}

.@{calendar-prefix-cls}-picker {
  .reset-component;

  position: relative;
  display: inline-block;
  outline: none;
  cursor: text;
  transition: opacity 0.3s;

  &-input {
    outline: none;

    &.@{ant-prefix}-input {
      line-height: @line-height-base;
    }
  }

  &-input.@{ant-prefix}-input-sm {
    padding-top: 0;
    padding-bottom: 0;
  }

  &:hover &-input:not(.@{ant-prefix}-input-disabled) {
    border-color: @input-hover-border-color;
  }

  &:focus &-input:not(.@{ant-prefix}-input-disabled) {
    .active();
  }

  &-clear,
  &-icon {
    position: absolute;
    top: 50%;
    right: @control-padding-horizontal;
    z-index: 1;
    width: 14px;
    height: 14px;
    margin-top: -7px;
    font-size: @font-size-sm;
    line-height: 14px;
    transition: all 0.3s;
    user-select: none;
  }

  &-clear {
    z-index: 2;
    color: @disabled-color;
    font-size: @font-size-base;
    background: @input-bg;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    &:hover {
      color: @text-color-secondary;
    }
  }

  &:hover &-clear {
    opacity: 1;
    pointer-events: auto;
  }

  &-icon {
    display: inline-block;
    color: @disabled-color;
    font-size: @font-size-base;
    line-height: 1;
  }

  .@{ant-prefix}-input-disabled + &-icon {
    cursor: not-allowed;
  }

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

.calendarLeftArrow() {
  height: 100%;

  &::before,
  &::after {
    position: relative;
    top: -1px;
    display: inline-block;
    width: 8px;
    height: 8px;
    vertical-align: middle;
    border: 0 solid #aaa;
    border-width: 1.5px 0 0 1.5px;
    border-radius: 1px;
    transform: rotate(-45deg) scale(0.8);
    transition: all 0.3s;
    content: '';
  }

  &:hover::before,
  &:hover::after {
    border-color: @text-color;
  }

  &::after {
    display: none;
  }
}

.calendarLeftDoubleArrow() {
  .calendarLeftArrow;

  &::after {
    position: relative;
    left: -3px;
    display: inline-block;
  }
}

.calendarRightArrow() {
  .calendarLeftArrow;

  &::before,
  &::after {
    transform: rotate(135deg) scale(0.8);
  }
}

.calendarRightDoubleArrow() {
  .calendarRightArrow;

  &::before {
    position: relative;
    left: 3px;
  }

  &::after {
    display: inline-block;
  }
}

.calendarPanelHeader(@calendar-prefix-cls) {
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-bottom: @border-width-base @border-style-base @border-color-split;
  user-select: none;

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

  .@{calendar-prefix-cls}-century-select,
  .@{calendar-prefix-cls}-decade-select,
  .@{calendar-prefix-cls}-year-select,
  .@{calendar-prefix-cls}-month-select {
    display: inline-block;
    padding: 0 2px;
    color: @heading-color;
    font-weight: 500;
    line-height: 40px;
  }

  .@{calendar-prefix-cls}-century-select-arrow,
  .@{calendar-prefix-cls}-decade-select-arrow,
  .@{calendar-prefix-cls}-year-select-arrow,
  .@{calendar-prefix-cls}-month-select-arrow {
    display: none;
  }

  .@{calendar-prefix-cls}-prev-century-btn,
  .@{calendar-prefix-cls}-next-century-btn,
  .@{calendar-prefix-cls}-prev-decade-btn,
  .@{calendar-prefix-cls}-next-decade-btn,
  .@{calendar-prefix-cls}-prev-month-btn,
  .@{calendar-prefix-cls}-next-month-btn,
  .@{calendar-prefix-cls}-prev-year-btn,
  .@{calendar-prefix-cls}-next-year-btn {
    position: absolute;
    top: 0;
    display: inline-block;
    padding: 0 5px;
    color: @text-color-secondary;
    font-size: 16px;
    font-family: Arial, 'Hiragino Sans GB', 'Microsoft Yahei', 'Microsoft Sans Serif', sans-serif;
    line-height: 40px;
  }

  .@{calendar-prefix-cls}-prev-century-btn,
  .@{calendar-prefix-cls}-prev-decade-btn,
  .@{calendar-prefix-cls}-prev-year-btn {
    left: 7px;
    .calendarLeftDoubleArrow;
  }

  .@{calendar-prefix-cls}-next-century-btn,
  .@{calendar-prefix-cls}-next-decade-btn,
  .@{calendar-prefix-cls}-next-year-btn {
    right: 7px;
    .calendarRightDoubleArrow;
  }

  .@{calendar-prefix-cls}-prev-month-btn {
    left: 29px;
    .calendarLeftArrow;
  }

  .@{calendar-prefix-cls}-next-month-btn {
    right: 29px;
    .calendarRightArrow;
  }
}

.calendar-selected-cell() {
  .@{calendar-prefix-cls}-date {
    color: @text-color-inverse;
    background: @primary-color;
    border: @border-width-base @border-style-base transparent;

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

.@{calendar-prefix-cls} {
  position: relative;
  width: 280px;
  font-size: @font-size-base;
  line-height: @line-height-base;
  text-align: left;
  list-style: none;
  background-color: @component-background;
  background-clip: padding-box;
  border: @border-width-base @border-style-base @border-color-inverse;
  border-radius: @border-radius-base;
  outline: none;
  box-shadow: @box-shadow-base;

  &-input-wrap {
    height: 34px;
    padding: 6px @control-padding-horizontal - 2px;
    border-bottom: @border-width-base @border-style-base @border-color-split;
  }

  &-input {
    width: 100%;
    height: 22px;
    color: @input-color;
    background: @input-bg;
    border: 0;
    outline: 0;
    cursor: auto;
    .placeholder;
  }

  &-week-number {
    width: 286px;

    &-cell {
      text-align: center;
    }
  }

  &-header {
    .calendarPanelHeader(@calendar-prefix-cls);
  }

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

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

  table,
  th,
  td {
    text-align: center;
    border: 0;
  }

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

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

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

  &-cell {
    height: 30px;
    padding: 3px 0;
  }

  &-date {
    display: block;
    width: 24px;
    height: 24px;
    margin: 0 auto;
    padding: 0;
    color: @text-color;
    line-height: 22px;
    text-align: center;
    background: transparent;
    border: @border-width-base @border-style-base transparent;
    border-radius: @border-radius-sm;
    transition: background 0.3s ease;

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

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

    &:active {
      color: @text-color-inverse;
      background: @primary-5;
    }
  }

  &-today &-date {
    color: @primary-color;
    font-weight: bold;
    border-color: @primary-color;
  }

  &-selected-day &-date {
    background: @primary-2;
  }

  &-last-month-cell &-date,
  &-next-month-btn-day &-date {
    &,
    &:hover {
      color: @disabled-color;
      background: transparent;
      border-color: transparent;
    }
  }

  &-disabled-cell &-date {
    position: relative;
    width: auto;
    color: @disabled-color;
    background: @disabled-bg;
    border: @border-width-base @border-style-base transparent;
    border-radius: 0;
    cursor: not-allowed;

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

  &-disabled-cell&-selected-day &-date::before {
    position: absolute;
    top: -1px;
    left: 5px;
    width: 24px;
    height: 24px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: @border-radius-sm;
    content: '';
  }

  &-disabled-cell&-today &-date {
    position: relative;
    padding-right: 5px;
    padding-left: 5px;
    &::before {
      position: absolute;
      top: -1px;
      left: 5px;
      width: 24px;
      height: 24px;
      border: @border-width-base @border-style-base @disabled-color;
      border-radius: @border-radius-sm;
      content: ' ';
    }
  }

  &-disabled-cell-first-of-row &-date {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
  }

  &-disabled-cell-last-of-row &-date {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
  }

  &-footer {
    padding: 0 12px;
    line-height: 38px;
    border-top: @border-width-base @border-style-base @border-color-split;
    &:empty {
      border-top: 0;
    }
    &-btn {
      display: block;
      text-align: center;
    }
    &-extra {
      text-align: left;
    }
  }

  .@{calendar-prefix-cls}-today-btn,
  .@{calendar-prefix-cls}-clear-btn {
    display: inline-block;
    margin: 0 0 0 8px;
    text-align: center;
    &-disabled {
      color: @disabled-color;
      cursor: not-allowed;
    }
    &:only-child {
      margin: 0;
    }
  }

  .@{calendar-prefix-cls}-clear-btn {
    position: absolute;
    top: 7px;
    right: 5px;
    display: none;
    width: 20px;
    height: 20px;
    margin: 0;
    overflow: hidden;
    line-height: 20px;
    text-align: center;
    text-indent: -76px;
  }

  .@{calendar-prefix-cls}-clear-btn::after {
    display: inline-block;
    width: 20px;
    color: @disabled-color;
    font-size: @font-size-base;
    line-height: 1;
    text-indent: 43px;
    transition: color 0.3s ease;
  }

  .@{calendar-prefix-cls}-clear-btn:hover::after {
    color: @text-color-secondary;
  }

  .@{calendar-prefix-cls}-ok-btn {
    .btn;
    .btn-primary;
    .button-size(@btn-height-sm; @btn-padding-sm; @font-size-base; @border-radius-base);

    line-height: @btn-height-sm - 2px;

    .button-disabled();
  }
}

@input-box-height: 34px;

.@{calendar-prefix-cls}-range-picker-input {
  width: 44%;
  height: 99%;
  text-align: center;
  background-color: transparent;
  border: 0;
  outline: 0;
  .placeholder();

  &[disabled] {
    cursor: not-allowed;
  }
}

.@{calendar-prefix-cls}-range-picker-separator {
  display: inline-block;
  min-width: 10px;
  height: 100%;
  color: @text-color-secondary;
  white-space: nowrap;
  text-align: center;
  vertical-align: top;
  pointer-events: none;
  .@{ant-prefix}-input-disabled & {
    color: @disabled-color;
  }
}

.@{calendar-prefix-cls}-range {
  width: 552px;
  overflow: hidden;

  .@{calendar-prefix-cls}-date-panel {
    &::after {
      display: block;
      clear: both;
      height: 0;
      visibility: hidden;
      content: '.';
    }
  }
  &-part {
    position: relative;
    width: 50%;
  }

  &-left {
    float: left;
    .@{calendar-prefix-cls} {
      &-time-picker-inner {
        border-right: 1px solid @border-color-split;
      }
    }
  }

  &-right {
    float: right;
    .@{calendar-prefix-cls} {
      &-time-picker-inner {
        border-left: 1px solid @border-color-split;
      }
    }
  }

  &-middle {
    position: absolute;
    left: 50%;
    z-index: 1;
    height: @input-box-height;
    margin: 1px 0 0 0;
    padding: 0 200px 0 0;
    color: @text-color-secondary;
    line-height: @input-box-height;
    text-align: center;
    transform: translateX(-50%);
    pointer-events: none;
  }

  &-right .@{calendar-prefix-cls}-date-input-wrap {
    margin-left: -90px;
  }

  &.@{calendar-prefix-cls}-time &-middle {
    padding: 0 10px 0 0;
    transform: translateX(-50%);
  }

  .@{calendar-prefix-cls}-today
    :not(.@{calendar-prefix-cls}-disabled-cell)
    :not(.@{calendar-prefix-cls}-last-month-cell)
    :not(.@{calendar-prefix-cls}-next-month-btn-day) {
    .@{calendar-prefix-cls}-date {
      color: @primary-color;
      background: @primary-2;
      border-color: @primary-color;
    }
  }

  .@{calendar-prefix-cls}-selected-start-date,
  .@{calendar-prefix-cls}-selected-end-date {
    .calendar-selected-cell;
  }

  &.@{calendar-prefix-cls}-time &-right .@{calendar-prefix-cls}-date-input-wrap {
    margin-left: 0;
  }

  .@{calendar-prefix-cls}-input-wrap {
    position: relative;
    height: @input-box-height;
  }

  .@{calendar-prefix-cls}-input,
  .@{calendar-timepicker-prefix-cls}-input {
    .input;
    height: @input-height-sm;
    padding-right: 0;
    padding-left: 0;
    line-height: @input-height-sm;
    border: 0;
    box-shadow: none;

    &:focus {
      box-shadow: none;
    }
  }

  .@{calendar-timepicker-prefix-cls}-icon {
    display: none;
  }

  &.@{calendar-prefix-cls}-week-number {
    width: 574px;

    .@{calendar-prefix-cls}-range-part {
      width: 286px;
    }
  }

  .@{calendar-prefix-cls}-year-panel,
  .@{calendar-prefix-cls}-month-panel,
  .@{calendar-prefix-cls}-decade-panel {
    top: @input-box-height;
  }
  .@{calendar-prefix-cls}-month-panel .@{calendar-prefix-cls}-year-panel {
    top: 0;
  }
  .@{calendar-prefix-cls}-decade-panel-table,
  .@{calendar-prefix-cls}-year-panel-table,
  .@{calendar-prefix-cls}-month-panel-table {
    height: 208px;
  }

  .@{calendar-prefix-cls}-in-range-cell {
    position: relative;
    border-radius: 0;
    > div {
      position: relative;
      z-index: 1;
    }
    &::before {
      position: absolute;
      top: 4px;
      right: 0;
      bottom: 4px;
      left: 0;
      display: block;
      background: @item-active-bg;
      border: 0;
      border-radius: 0;
      content: '';
    }
  }

  .@{calendar-prefix-cls}-footer-extra {
    float: left;
  }

  // `div` for selector specificity
  div&-quick-selector {
    text-align: left;

    > a {
      margin-right: 8px;
    }
  }

  .@{calendar-prefix-cls},
  .@{calendar-prefix-cls}-month-panel,
  .@{calendar-prefix-cls}-year-panel,
  .@{calendar-prefix-cls}-decade-panel {
    &-header {
      border-bottom: 0;
    }
    &-body {
      border-top: @border-width-base @border-style-base @border-color-split;
    }
  }

  &.@{calendar-prefix-cls}-time {
    .@{calendar-timepicker-prefix-cls} {
      top: 68px;
      z-index: 2; // cover .ant-calendar-range .ant-calendar-in-range-cell > div (z-index: 1)
      width: 100%;
      height: 207px;
      &-panel {
        height: 267px;
        margin-top: -34px;
      }

      &-inner {
        height: 100%;
        padding-top: 40px;
        background: none;
      }

      &-combobox {
        display: inline-block;
        height: 100%;
        background-color: @component-background;
        border-top: @border-width-base @border-style-base @border-color-split;
      }
      &-select {
        height: 100%;
        ul {
          max-height: 100%;
        }
      }
    }
    .@{calendar-prefix-cls}-footer .@{calendar-prefix-cls}-time-picker-btn {
      margin-right: 8px;
    }
    .@{calendar-prefix-cls}-today-btn {
      height: 22px;
      margin: 8px 12px;
      line-height: 22px;
    }
  }

  &-with-ranges.@{calendar-prefix-cls}-time .@{calendar-timepicker-prefix-cls} {
    height: 233px;
  }
}

.@{calendar-prefix-cls}-range.@{calendar-prefix-cls}-show-time-picker {
  .@{calendar-prefix-cls}-body {
    border-top-color: transparent;
  }
}

.@{calendar-timepicker-prefix-cls} {
  position: absolute;
  top: 40px;
  width: 100%;
  background-color: @component-background;

  &-panel {
    position: absolute;
    z-index: @zindex-picker;
    width: 100%;
  }

  &-inner {
    position: relative;
    display: inline-block;
    width: 100%;
    overflow: hidden;
    font-size: @font-size-base;
    line-height: 1.5;
    text-align: left;
    list-style: none;
    background-color: @component-background;
    background-clip: padding-box;
    outline: none;
  }
  &-combobox {
    width: 100%;
  }

  &-column-1,
  &-column-1 &-select {
    width: 100%;
  }
  &-column-2 &-select {
    width: 50%;
  }
  &-column-3 &-select {
    width: 33.33%;
  }
  &-column-4 &-select {
    width: 25%;
  }

  &-input-wrap {
    display: none;
  }

  &-select {
    position: relative; // Fix chrome weird render bug
    float: left;
    height: 226px;
    overflow: hidden;
    font-size: @font-size-base;
    border-right: @border-width-base @border-style-base @border-color-split;

    &:hover {
      overflow-y: auto;
    }

    &:first-child {
      margin-left: 0;
      border-left: 0;
    }

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

    ul {
      width: 100%;
      max-height: 206px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    li {
      width: 100%;
      height: 24px;
      margin: 0;
      line-height: 24px;
      text-align: center;
      list-style: none;
      cursor: pointer;
      transition: all 0.3s;
      user-select: none;

      &:last-child::after {
        display: block;
        height: 202px;
        content: '';
      }

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

      &:focus {
        color: @primary-color;
        font-weight: 600;
        outline: none;
      }
    }

    li&-option-selected {
      font-weight: 600;
      background: @time-picker-selected-bg;
    }

    li&-option-disabled {
      color: @btn-disable-color;
      &:hover {
        background: transparent;
        cursor: not-allowed;
      }
    }
  }
}

.@{calendar-prefix-cls}-time {
  .@{calendar-prefix-cls}-day-select {
    display: inline-block;
    padding: 0 2px;
    color: @heading-color;
    font-weight: 500;
    line-height: 34px;
  }

  .@{calendar-prefix-cls}-footer {
    position: relative;
    height: auto;

    &-btn {
      text-align: right;
    }

    .@{calendar-prefix-cls}-today-btn {
      float: left;
      margin: 0;
    }

    .@{calendar-prefix-cls}-time-picker-btn {
      display: inline-block;
      margin-right: 8px;

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

.@{calendar-prefix-cls}-month-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: @zindex-picker-panel;
  background: @component-background;
  border-radius: @border-radius-base;
  outline: none;

  > div {
    display: flex;
    flex-direction: column;
    // TODO: this is a useless wrapper, and we need to remove it in rc-calendar
    height: 100%;
  }
}

.@{calendar-prefix-cls}-month-panel-hidden {
  display: none;
}

.@{calendar-prefix-cls}-month-panel-header {
  .calendarPanelHeader(~'@{calendar-prefix-cls}-month-panel');
  position: relative;
}

.@{calendar-prefix-cls}-month-panel-body {
  flex: 1;
}

.@{calendar-prefix-cls}-month-panel-footer {
  border-top: @border-width-base @border-style-base @border-color-split;
  .@{calendar-prefix-cls}-footer-extra {
    padding: 0 12px;
  }
}

.@{calendar-prefix-cls}-month-panel-table {
  width: 100%;
  height: 100%;
  table-layout: fixed;
  border-collapse: separate;
}

.@{calendar-prefix-cls}-month-panel-selected-cell .@{calendar-prefix-cls}-month-panel-month {
  color: @text-color-inverse;
  background: @primary-color;

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

.@{calendar-prefix-cls}-month-panel-cell {
  text-align: center;

  &-disabled .@{calendar-prefix-cls}-month-panel-month {
    &,
    &:hover {
      color: @disabled-color;
      background: @disabled-bg;
      cursor: not-allowed;
    }
  }
}

.@{calendar-prefix-cls}-month-panel-month {
  display: inline-block;
  height: 24px;
  margin: 0 auto;
  padding: 0 8px;
  color: @text-color;
  line-height: 24px;
  text-align: center;
  background: transparent;
  border-radius: @border-radius-sm;
  transition: background 0.3s ease;

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

.@{calendar-prefix-cls}-year-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: @zindex-picker-panel;
  background: @component-background;
  border-radius: @border-radius-base;
  outline: none;

  > div {
    display: flex;
    flex-direction: column;
    // TODO: this is a useless wrapper, and we need to remove it in rc-calendar
    height: 100%;
  }
}

.@{calendar-prefix-cls}-year-panel-hidden {
  display: none;
}

.@{calendar-prefix-cls}-year-panel-header {
  .calendarPanelHeader(~'@{calendar-prefix-cls}-year-panel');
  position: relative;
}

.@{calendar-prefix-cls}-year-panel-body {
  flex: 1;
}

.@{calendar-prefix-cls}-year-panel-footer {
  border-top: @border-width-base @border-style-base @border-color-split;
  .@{calendar-prefix-cls}-footer-extra {
    padding: 0 12px;
  }
}

.@{calendar-prefix-cls}-year-panel-table {
  width: 100%;
  height: 100%;
  table-layout: fixed;
  border-collapse: separate;
}

.@{calendar-prefix-cls}-year-panel-cell {
  text-align: center;
}

.@{calendar-prefix-cls}-year-panel-year {
  display: inline-block;
  height: 24px;
  margin: 0 auto;
  padding: 0 8px;
  color: @text-color;
  line-height: 24px;
  text-align: center;
  background: transparent;
  border-radius: @border-radius-sm;
  transition: background 0.3s ease;

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

.@{calendar-prefix-cls}-year-panel-selected-cell .@{calendar-prefix-cls}-year-panel-year {
  color: @text-color-inverse;
  background: @primary-color;

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

.@{calendar-prefix-cls}-year-panel-last-decade-cell,
.@{calendar-prefix-cls}-year-panel-next-decade-cell {
  .@{calendar-prefix-cls}-year-panel-year {
    color: @disabled-color;
    user-select: none;
  }
}

.@{calendar-prefix-cls}-decade-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: @zindex-picker-panel;
  display: flex;
  flex-direction: column;
  background: @component-background;
  border-radius: @border-radius-base;
  outline: none;
}

.@{calendar-prefix-cls}-decade-panel-hidden {
  display: none;
}

.@{calendar-prefix-cls}-decade-panel-header {
  .calendarPanelHeader(~'@{calendar-prefix-cls}-decade-panel');
  position: relative;
}

.@{calendar-prefix-cls}-decade-panel-body {
  flex: 1;
}

.@{calendar-prefix-cls}-decade-panel-footer {
  border-top: @border-width-base @border-style-base @border-color-split;
  .@{calendar-prefix-cls}-footer-extra {
    padding: 0 12px;
  }
}

.@{calendar-prefix-cls}-decade-panel-table {
  width: 100%;
  height: 100%;
  table-layout: fixed;
  border-collapse: separate;
}

.@{calendar-prefix-cls}-decade-panel-cell {
  white-space: nowrap;
  text-align: center;
}

.@{calendar-prefix-cls}-decade-panel-decade {
  display: inline-block;
  height: 24px;
  margin: 0 auto;
  padding: 0 6px;
  color: @text-color;
  line-height: 24px;
  text-align: center;
  background: transparent;
  border-radius: @border-radius-sm;
  transition: background 0.3s ease;

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

.@{calendar-prefix-cls}-decade-panel-selected-cell .@{calendar-prefix-cls}-decade-panel-decade {
  color: @text-color-inverse;
  background: @primary-color;

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

.@{calendar-prefix-cls}-decade-panel-last-century-cell,
.@{calendar-prefix-cls}-decade-panel-next-century-cell {
  .@{calendar-prefix-cls}-decade-panel-decade {
    color: @disabled-color;
    user-select: none;
  }
}

.@{calendar-prefix-cls}-month {
  .@{calendar-prefix-cls}-month-header-wrap {
    position: relative;
    height: 288px;
  }
  .@{calendar-prefix-cls}-month-panel,
  .@{calendar-prefix-cls}-year-panel {
    top: 0;
    height: 100%;
  }
}

.@{calendar-prefix-cls}-week-number {
  &-cell {
    opacity: 0.5;
  }
  .@{calendar-prefix-cls}-body tr {
    cursor: pointer;
    transition: all 0.3s;
    &:hover {
      background: @primary-1;
    }
    &.@{calendar-prefix-cls}-active-week {
      font-weight: bold;
      background: @primary-2;
    }
    .@{calendar-prefix-cls}-selected-day .@{calendar-prefix-cls}-date,
    .@{calendar-prefix-cls}-selected-day:hover .@{calendar-prefix-cls}-date {
      color: @text-color;
      background: transparent;
    }
  }
}

@import '../../style/themes/index';
@import '../../style/mixins/index';
@import '../../input/style/mixin';

@timepicker-prefix-cls: ~'@{ant-prefix}-time-picker';
@timepicker-item-height: 32px;

.@{timepicker-prefix-cls}-panel {
  .reset-component;

  position: absolute;
  z-index: @zindex-picker;
  font-family: @font-family;

  &-inner {
    position: relative;
    left: -2px;
    font-size: @font-size-base;
    text-align: left;
    list-style: none;
    background-color: @component-background;
    background-clip: padding-box;
    border-radius: @border-radius-base;
    outline: none;
    box-shadow: @box-shadow-base;
  }

  &-input {
    width: 100%;
    max-width: @time-picker-panel-column-width * 3 - @control-padding-horizontal - 2px;
    margin: 0;
    padding: 0;
    line-height: normal;
    border: 0;
    outline: 0;
    cursor: auto;

    .placeholder;

    &-wrap {
      position: relative;
      padding: 7px 2px 7px @control-padding-horizontal;
      border-bottom: @border-width-base @border-style-base @border-color-split;
    }

    &-invalid {
      border-color: @error-color;
    }
  }

  &-narrow &-input-wrap {
    max-width: @time-picker-panel-column-width * 2;
  }

  &-select {
    position: relative; // Fix chrome weird render bug
    float: left;
    width: @time-picker-panel-column-width;
    max-height: @timepicker-item-height * 6;
    overflow: hidden;
    font-size: @font-size-base;
    border-left: @border-width-base @border-style-base @border-color-split;

    &:hover {
      overflow-y: auto;
    }

    &:first-child {
      margin-left: 0;
      border-left: 0;
    }

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

    &:only-child {
      width: 100%;
    }

    ul {
      // use fixed width instead of 100%
      // to fix strange render bug in safari: https://github.com/ant-design/ant-design/issues/17842
      width: @time-picker-panel-column-width;
      margin: 0;
      padding: 0 0 @timepicker-item-height * 5;
      list-style: none;
    }

    li {
      width: 100%;
      height: @timepicker-item-height;
      margin: 0;
      padding: 0 0 0 @control-padding-horizontal;
      line-height: @timepicker-item-height;
      text-align: left;
      list-style: none;
      cursor: pointer;
      transition: all 0.3s;
      user-select: none;

      &:focus {
        color: @primary-color;
        font-weight: 600;
        outline: none;
      }
    }

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

    li&-option-selected {
      font-weight: 600;
      background: @time-picker-selected-bg;
      &:hover {
        background: @time-picker-selected-bg;
      }
    }

    li&-option-disabled {
      color: @btn-disable-color;
      &:hover {
        background: transparent;
        cursor: not-allowed;
      }
      &:focus {
        color: @btn-disable-color;
        font-weight: inherit;
      }
    }
  }

  &-combobox {
    .clearfix;
  }

  &-addon {
    padding: 8px;
    border-top: @border-width-base @border-style-base @border-color-split;
  }

  &.slide-up-enter.slide-up-enter-active&-placement-topLeft,
  &.slide-up-enter.slide-up-enter-active&-placement-topRight,
  &.slide-up-appear.slide-up-appear-active&-placement-topLeft,
  &.slide-up-appear.slide-up-appear-active&-placement-topRight {
    animation-name: antSlideDownIn;
  }

  &.slide-up-enter.slide-up-enter-active&-placement-bottomLeft,
  &.slide-up-enter.slide-up-enter-active&-placement-bottomRight,
  &.slide-up-appear.slide-up-appear-active&-placement-bottomLeft,
  &.slide-up-appear.slide-up-appear-active&-placement-bottomRight {
    animation-name: antSlideUpIn;
  }

  &.slide-up-leave.slide-up-leave-active&-placement-topLeft,
  &.slide-up-leave.slide-up-leave-active&-placement-topRight {
    animation-name: antSlideDownOut;
  }

  &.slide-up-leave.slide-up-leave-active&-placement-bottomLeft,
  &.slide-up-leave.slide-up-leave-active&-placement-bottomRight {
    animation-name: antSlideUpOut;
  }
}

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

  position: relative;
  display: inline-block;
  width: 128px;
  outline: none;
  cursor: text;
  transition: opacity 0.3s;

  &-input {
    .input;
    &[disabled] {
      .disabled;
    }
  }

  &-open {
    opacity: 0;
  }

  &-icon,
  &-clear {
    position: absolute;
    top: 50%;
    right: @control-padding-horizontal - 1px;
    z-index: 1;
    width: 14px;
    height: 14px;
    margin-top: -7px;
    color: @disabled-color;
    line-height: 14px;
    transition: all 0.3s @ease-in-out;
    user-select: none;
    .@{timepicker-prefix-cls}-clock-icon {
      display: block;
      color: @disabled-color;
      line-height: 1;
    }
  }

  &-clear {
    z-index: 2;
    background: @input-bg;
    opacity: 0;
    pointer-events: none;
    &:hover {
      color: @text-color-secondary;
    }
  }
  &:hover &-clear {
    opacity: 1;
    pointer-events: auto;
  }

  &-large &-input {
    .input-lg;
  }

  &-small &-input {
    .input-sm;
  }

  &-small &-icon,
  &-small &-clear {
    right: @control-padding-horizontal-sm - 1px;
  }
}

// Fix cursor height in safari
// https://stackoverflow.com/q/3843408/3040605
// https://browserstrangeness.github.io/css_hacks.html#safari
@media not all and (min-resolution: 0.001dpcm) {
  @supports (-webkit-appearance: none) and (stroke-color: transparent) {
    .@{ant-prefix}-input {
      line-height: @line-height-base;
    }
  }
}

@import '../../style/themes/index';
@import '../../style/mixins/index';

@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: 20px;
  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;
  }

  .@{iconfont-css-prefix}-close {
    .iconfont-size-under-12px(10px);

    margin-left: 3px;
    color: @text-color-secondary;
    font-weight: bold;
    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;
    &: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-color-classes();
}

@import '../../style/themes/default';
@import '../../style/mixins/index';

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

@descriptions-default-padding: 16px 24px;
@descriptions-middle-padding: 12px 24px;
@descriptions-small-padding: 8px 16px;

.@{descriptions-prefix-cls} {
  &-title {
    margin-bottom: 20px;
    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: 16px;
    }
    &:last-child {
      border-bottom: none;
    }
  }

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

    &::after {
      position: relative;
      top: -0.5px;
      margin: 0 8px 0 2px;
      content: ' ';
    }
  }

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

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

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

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

@import '../../style/themes/index';
@import '../../style/mixins/index';

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

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

  background: @border-color-split;

  &,  /* for compatiable */
  &-vertical {
    position: relative;
    top: -0.06em;
    display: inline-block;
    width: 1px;
    height: 0.9em;
    margin: 0 8px;
    vertical-align: middle;
  }

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

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

  &-horizontal&-with-text-left,
  &-horizontal&-with-text-right {
    .@{divider-prefix-cls}-inner-text {
      display: inline-block;
      padding: 0 10px;
    }
  }

  &-horizontal&-with-text-left {
    &::before {
      top: 50%;
      width: 5%;
    }
    &::after {
      top: 50%;
      width: 95%;
    }
  }

  &-horizontal&-with-text-right {
    &::before {
      top: 50%;
      width: 95%;
    }
    &::after {
      top: 50%;
      width: 5%;
    }
  }

  &-inner-text {
    display: inline-block;
    padding: 0 24px;
  }

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

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

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

@import '../../style/themes/index';

// Preserve the typo for compatibility
// https://github.com/ant-design/ant-design/issues/14628
@dawer-prefix-cls: ~'@{ant-prefix}-drawer';

@drawer-prefix-cls: @dawer-prefix-cls;

.@{drawer-prefix-cls} {
  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;
  }
  .@{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;
    }
    &.@{drawer-prefix-cls}-open.no-mask {
      width: 0%;
    }
  }

  &-left {
    &.@{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;
    }
    &.@{drawer-prefix-cls}-open.no-mask {
      height: 0%;
    }
  }

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

  &-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: @component-background;
    background-clip: padding-box;
    border: 0;
  }

  &-close {
    position: absolute;
    top: 0;
    right: 0;
    z-index: @zindex-popup-close;
    display: block;
    width: 56px;
    height: 56px;
    padding: 0;
    color: @text-color-secondary;
    font-weight: 700;
    font-size: @font-size-lg;
    font-style: normal;
    line-height: 56px;
    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;
    }
  }

  &-header {
    position: relative;
    padding: @drawer-header-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;
  }

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

  &-body {
    padding: @drawer-body-padding;
    font-size: @font-size-base;
    line-height: @line-height-base;
    word-wrap: break-word;
  }
  &-wrapper-body {
    height: 100%;
    overflow: auto;
  }

  &-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;
  }
  &-open {
    &-content {
      box-shadow: @shadow-2;
    }
  }
}

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

@import '../../input/style/mixin';

.form-control-validation(@text-color: @input-color; @border-color: @input-border-color; @background-color: @input-bg) {
  .@{ant-prefix}-form-explain,
  .@{ant-prefix}-form-split {
    color: @text-color;
  }
  // 输入框的不同校验状态
  .@{ant-prefix}-input {
    &,
    &:hover {
      background-color: @background-color;
      border-color: @border-color;
    }

    &:focus {
      .active(@border-color);
    }

    &:not([disabled]):hover {
      border-color: @border-color;
    }
  }

  .@{ant-prefix}-calendar-picker-open .@{ant-prefix}-calendar-picker-input {
    .active(@border-color);
  }

  // Input prefix
  .@{ant-prefix}-input-affix-wrapper {
    .@{ant-prefix}-input {
      &,
      &:hover {
        background-color: @background-color;
        border-color: @border-color;
      }

      &:focus {
        .active(@border-color);
      }
    }

    &:hover .@{ant-prefix}-input:not(.@{ant-prefix}-input-disabled) {
      border-color: @border-color;
    }
  }

  .@{ant-prefix}-input-prefix {
    color: @text-color;
  }

  .@{ant-prefix}-input-group-addon {
    color: @text-color;
    background-color: @background-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;
  }
}

@import '../../style/themes/index';
@import '../../style/mixins/index';
@import '../../input/style/mixin';
@import '../../button/style/mixin';
@import '../../grid/style/mixin';
@import './mixin';

@form-prefix-cls: ~'@{ant-prefix}-form';
@form-component-height: @input-height-base;
@form-component-max-height: @input-height-lg;
@form-feedback-icon-size: @font-size-base;
@form-help-margin-top: (@form-component-height - @form-component-max-height) / 2 + 2px;
@form-explain-font-size: @font-size-base;
// Extends additional 1px to fix precision issue.
// https://github.com/ant-design/ant-design/issues/12803
// https://github.com/ant-design/ant-design/issues/8220
@form-explain-precision: 1px;
@form-explain-height: floor(@form-explain-font-size * @line-height-base);

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

.@{form-prefix-cls}-item-required::before {
  display: inline-block;
  margin-right: 4px;
  color: @label-required-color;
  font-size: @font-size-base;
  font-family: SimSun, sans-serif;
  line-height: 1;
  content: '*';
  .@{form-prefix-cls}-hide-required-mark & {
    display: none;
  }
}

.@{form-prefix-cls}-item-label > label {
  color: @label-color;

  &::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-prefix-cls}-item-no-colon::after {
    content: ' ';
  }
}

// Form items
// You should wrap labels and controls in .@{form-prefix-cls}-item for optimum spacing
.@{form-prefix-cls}-item {
  label {
    position: relative;

    > .@{iconfont-css-prefix} {
      font-size: @font-size-base;
      vertical-align: top;
    }
  }

  .reset-component;

  margin-bottom: @form-item-margin-bottom;
  vertical-align: top;

  &-control {
    position: relative;
    line-height: @form-component-max-height;
    .clearfix;
  }

  &-children {
    position: relative;
  }

  &-with-help {
    margin-bottom: max(0, @form-item-margin-bottom - @form-explain-height - @form-help-margin-top);
  }

  &-label {
    display: inline-block;
    overflow: hidden;
    line-height: @form-component-max-height - 0.0001px;
    white-space: nowrap;
    text-align: right;
    vertical-align: middle;

    &-left {
      text-align: left;
    }
  }

  .@{ant-prefix}-switch {
    margin: 2px 0 4px;
  }
}

.@{form-prefix-cls}-explain,
.@{form-prefix-cls}-extra {
  clear: both;
  min-height: @form-explain-height + @form-explain-precision;
  margin-top: @form-help-margin-top;
  color: @text-color-secondary;
  font-size: @form-explain-font-size;
  line-height: @line-height-base;
  transition: color 0.3s @ease-out; // sync input color transition
}

.@{form-prefix-cls}-explain {
  margin-bottom: -@form-explain-precision;
}

.@{form-prefix-cls}-extra {
  padding-top: 4px;
}

.@{form-prefix-cls}-text {
  display: inline-block;
  padding-right: 8px;
}

.@{form-prefix-cls}-split {
  display: block;
  text-align: center;
}

form {
  .has-feedback {
    .@{ant-prefix}-input {
      padding-right: @input-padding-horizontal-base + @input-affix-width;
    }

    // https://github.com/ant-design/ant-design/issues/19884
    .@{ant-prefix}-input-affix-wrapper {
      .@{ant-prefix}-input-suffix {
        padding-right: 18px;
      }
      .@{ant-prefix}-input {
        padding-right: @input-padding-horizontal-base + @input-affix-width * 2;
      }
      &.@{ant-prefix}-input-affix-wrapper-input-with-clear-btn {
        .@{ant-prefix}-input {
          padding-right: @input-padding-horizontal-base + @input-affix-width * 3;
        }
      }
    }

    // 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: (@form-component-height / 2) + @form-feedback-icon-size - 2px;
    }
    > .@{ant-prefix}-select .@{ant-prefix}-select-selection-selected-value,
    :not(.@{ant-prefix}-input-group-addon)
      > .@{ant-prefix}-select
      .@{ant-prefix}-select-selection-selected-value {
      padding-right: 42px;
    }

    .@{ant-prefix}-cascader-picker {
      &-arrow {
        margin-right: (@form-component-height / 2) + @form-feedback-icon-size - 13px;
      }
      &-clear {
        right: (@form-component-height / 2) + @form-feedback-icon-size - 2px;
      }
    }

    // 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: (@form-component-height / 2) + @form-feedback-icon-size - 2px;
      }
    }

    // Fix issue: https://github.com/ant-design/ant-design/issues/4783
    .@{ant-prefix}-calendar-picker,
    .@{ant-prefix}-time-picker {
      &-icon,
      &-clear {
        right: (@form-component-height / 2) + @form-feedback-icon-size - 2px;
      }
    }
  }

  .@{ant-prefix}-mentions,
  textarea.@{ant-prefix}-input {
    height: auto;
    margin-bottom: 4px;
  }

  // input[type=file]
  .@{ant-prefix}-upload {
    background: transparent;
  }

  input[type='radio'],
  input[type='checkbox'] {
    width: 14px;
    height: 14px;
  }

  // Radios and checkboxes on same line
  .@{ant-prefix}-radio-inline,
  .@{ant-prefix}-checkbox-inline {
    display: inline-block;
    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;
  }

  // fix input with addon position. https://github.com/ant-design/ant-design/issues/8243
  :not(.@{ant-prefix}-input-group-wrapper) > .@{ant-prefix}-input-group,
  .@{ant-prefix}-input-group-wrapper {
    display: inline-block;
    vertical-align: middle;
  }

  // https://github.com/ant-design/ant-design/issues/20616
  &:not(.@{form-prefix-cls}-vertical) {
    :not(.@{ant-prefix}-input-group-wrapper) > .@{ant-prefix}-input-group,
    .@{ant-prefix}-input-group-wrapper {
      position: relative;
      top: -1px;
    }
  }
}

// Form layout
//== Vertical Form
.make-vertical-layout-label() {
  display: block;
  margin: @form-vertical-label-margin;
  padding: @form-vertical-label-padding;
  line-height: @line-height-base;
  white-space: initial;
  text-align: left;

  label::after {
    display: none;
  }
}

.make-vertical-layout() {
  .@{form-prefix-cls}-item-label,
  .@{form-prefix-cls}-item-control-wrapper {
    display: block;
    width: 100%;
  }
  .@{form-prefix-cls}-item-label {
    .make-vertical-layout-label();
  }
}

.@{form-prefix-cls}-vertical .@{form-prefix-cls}-item-label,
  // when labelCol is 24, it is a vertical form
.@{ant-prefix}-col-24.@{form-prefix-cls}-item-label,
.@{ant-prefix}-col-xl-24.@{form-prefix-cls}-item-label {
  .make-vertical-layout-label();
}

.@{form-prefix-cls}-vertical {
  .@{form-prefix-cls}-item {
    padding-bottom: 8px;
  }
  .@{form-prefix-cls}-item-control {
    line-height: @line-height-base;
  }
  .@{form-prefix-cls}-explain {
    margin-top: 2px;
    margin-bottom: -4px - @form-explain-precision;
  }
  .@{form-prefix-cls}-extra {
    margin-top: 2px;
    margin-bottom: -4px;
  }
}

@media (max-width: @screen-xs-max) {
  .make-vertical-layout();
  .@{ant-prefix}-col-xs-24.@{form-prefix-cls}-item-label {
    .make-vertical-layout-label();
  }
}

@media (max-width: @screen-sm-max) {
  .@{ant-prefix}-col-sm-24.@{form-prefix-cls}-item-label {
    .make-vertical-layout-label();
  }
}

@media (max-width: @screen-md-max) {
  .@{ant-prefix}-col-md-24.@{form-prefix-cls}-item-label {
    .make-vertical-layout-label();
  }
}

@media (max-width: @screen-lg-max) {
  .@{ant-prefix}-col-lg-24.@{form-prefix-cls}-item-label {
    .make-vertical-layout-label();
  }
}

@media (max-width: @screen-xl-max) {
  .@{ant-prefix}-col-xl-24.@{form-prefix-cls}-item-label {
    .make-vertical-layout-label();
  }
}

//== Inline Form
.@{form-prefix-cls}-inline {
  .@{form-prefix-cls}-item {
    display: inline-block;
    margin-right: 16px;
    margin-bottom: 0;

    &-with-help {
      margin-bottom: @form-item-margin-bottom;
    }

    > .@{form-prefix-cls}-item-control-wrapper,
    > .@{form-prefix-cls}-item-label {
      display: inline-block;
      vertical-align: top;
    }
  }

  .@{form-prefix-cls}-text {
    display: inline-block;
  }

  .has-feedback {
    display: inline-block;
  }
}

// Validation state
.has-success,
.has-warning,
.has-error,
.is-validating {
  &.has-feedback .@{form-prefix-cls}-item-children-icon {
    position: absolute;
    top: 50%;
    right: 0;
    z-index: 1;
    width: @form-component-height;
    height: 20px;
    margin-top: -10px;
    font-size: @form-feedback-icon-size;
    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;
    }
  }
}

.has-success {
  &.has-feedback .@{form-prefix-cls}-item-children-icon {
    color: @success-color;
    animation-name: diffZoomIn1 !important;
  }
}

.has-warning {
  .form-control-validation(@warning-color; @warning-color; @form-warning-input-bg;);

  &.has-feedback .@{form-prefix-cls}-item-children-icon {
    color: @warning-color;
    animation-name: diffZoomIn3 !important;
  }

  //select
  .@{ant-prefix}-select {
    &-selection {
      border-color: @warning-color;
      &:hover {
        border-color: @warning-color;
      }
    }
    &-open .@{ant-prefix}-select-selection,
    &-focused .@{ant-prefix}-select-selection {
      .active(@warning-color);
    }
  }

  // arrow and icon
  .@{ant-prefix}-calendar-picker-icon::after,
  .@{ant-prefix}-time-picker-icon::after,
  .@{ant-prefix}-picker-icon::after,
  .@{ant-prefix}-select-arrow,
  .@{ant-prefix}-cascader-picker-arrow {
    color: @warning-color;
  }

  //input-number, timepicker
  .@{ant-prefix}-input-number,
  .@{ant-prefix}-time-picker-input {
    border-color: @warning-color;
    &-focused,
    &:focus {
      .active(@warning-color);
    }
    &:not([disabled]):hover {
      border-color: @warning-color;
    }
  }

  .@{ant-prefix}-cascader-picker {
    &:focus .@{ant-prefix}-cascader-input {
      .active(@warning-color);
    }
    &:hover .@{ant-prefix}-cascader-input {
      border-color: @warning-color;
    }
  }
}

.has-error {
  .form-control-validation(@error-color; @error-color; @form-error-input-bg;);

  &.has-feedback .@{form-prefix-cls}-item-children-icon {
    color: @error-color;
    animation-name: diffZoomIn2 !important;
  }

  //select
  .@{ant-prefix}-select {
    &-selection {
      border-color: @error-color;
      &:hover {
        border-color: @error-color;
      }
    }
    &-open .@{ant-prefix}-select-selection,
    &-focused .@{ant-prefix}-select-selection {
      .active(@error-color);
    }
  }

  .@{ant-prefix}-select.@{ant-prefix}-select-auto-complete {
    .@{ant-prefix}-input:focus {
      border-color: @error-color;
    }
  }

  .@{ant-prefix}-input-group-addon .@{ant-prefix}-select {
    &-selection {
      border-color: transparent;
      box-shadow: none;
    }
  }

  // arrow and icon
  .@{ant-prefix}-calendar-picker-icon::after,
  .@{ant-prefix}-time-picker-icon::after,
  .@{ant-prefix}-picker-icon::after,
  .@{ant-prefix}-select-arrow,
  .@{ant-prefix}-cascader-picker-arrow {
    color: @error-color;
  }

  //input-number, timepicker
  .@{ant-prefix}-input-number,
  .@{ant-prefix}-time-picker-input {
    border-color: @error-color;
    &-focused,
    &:focus {
      .active(@error-color);
    }
    &:not([disabled]):hover {
      border-color: @error-color;
    }
  }
  .@{ant-prefix}-mention-wrapper {
    .@{ant-prefix}-mention-editor {
      &,
      &:not([disabled]):hover {
        border-color: @error-color;
      }
    }
    &.@{ant-prefix}-mention-active:not([disabled]) .@{ant-prefix}-mention-editor,
    .@{ant-prefix}-mention-editor:not([disabled]):focus {
      .active(@error-color);
    }
  }

  .@{ant-prefix}-cascader-picker {
    &:focus .@{ant-prefix}-cascader-input {
      .active(@error-color);
    }
    &:hover .@{ant-prefix}-cascader-input {
      border-color: @error-color;
    }
  }

  // transfer
  .@{ant-prefix}-transfer {
    &-list {
      border-color: @error-color;

      &-search:not([disabled]) {
        border-color: @input-border-color;

        &:hover {
          .hover();
        }

        &:focus {
          .active();
        }
      }
    }
  }
}

.is-validating {
  &.has-feedback .@{form-prefix-cls}-item-children-icon {
    display: inline-block;
    color: @primary-color;
  }
}

.@{ant-prefix}-advanced-search-form {
  .@{form-prefix-cls}-item {
    margin-bottom: @form-item-margin-bottom;

    &-with-help {
      margin-bottom: @form-item-margin-bottom - @form-explain-height - @form-help-margin-top;
    }
  }
}

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

.show-help-motion(show-help, antShowHelp, 0.3s);

@keyframes antShowHelpIn {
  0% {
    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);
  }
}

@import '../../input/style/mixin';

.form-control-validation(@text-color: @input-color; @border-color: @input-border-color; @background-color: @input-bg) {
  .@{ant-prefix}-form-explain,
  .@{ant-prefix}-form-split {
    color: @text-color;
  }
  // 输入框的不同校验状态
  .@{ant-prefix}-input {
    &,
    &:hover {
      background-color: @background-color;
      border-color: @border-color;
    }

    &:focus {
      .active(@border-color);
    }

    &:not([disabled]):hover {
      border-color: @border-color;
    }
  }

  .@{ant-prefix}-calendar-picker-open .@{ant-prefix}-calendar-picker-input {
    .active(@border-color);
  }

  // Input prefix
  .@{ant-prefix}-input-affix-wrapper {
    .@{ant-prefix}-input {
      &,
      &:hover {
        background-color: @background-color;
        border-color: @border-color;
      }

      &:focus {
        .active(@border-color);
      }
    }

    &:hover .@{ant-prefix}-input:not(.@{ant-prefix}-input-disabled) {
      border-color: @border-color;
    }
  }

  .@{ant-prefix}-input-prefix {
    color: @text-color;
  }

  .@{ant-prefix}-input-group-addon {
    color: @text-color;
    background-color: @background-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;
  }
}

@import '../../style/themes/index';
@import '../../style/mixins/index';
@import '../../input/style/mixin';
@import '../../button/style/mixin';
@import '../../grid/style/mixin';
@import './mixin';

@form-prefix-cls: ~'@{ant-prefix}-form';
@form-component-height: @input-height-base;
@form-component-max-height: @input-height-lg;
@form-feedback-icon-size: @font-size-base;
@form-help-margin-top: (@form-component-height - @form-component-max-height) / 2 + 2px;
@form-explain-font-size: @font-size-base;
// Extends additional 1px to fix precision issue.
// https://github.com/ant-design/ant-design/issues/12803
// https://github.com/ant-design/ant-design/issues/8220
@form-explain-precision: 1px;
@form-explain-height: floor(@form-explain-font-size * @line-height-base);

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

.@{form-prefix-cls}-item-required::before {
  display: inline-block;
  margin-right: 4px;
  color: @label-required-color;
  font-size: @font-size-base;
  font-family: SimSun, sans-serif;
  line-height: 1;
  content: '*';
  .@{form-prefix-cls}-hide-required-mark & {
    display: none;
  }
}

.@{form-prefix-cls}-item-label > label {
  color: @label-color;

  &::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-prefix-cls}-item-no-colon::after {
    content: ' ';
  }
}

// Form items
// You should wrap labels and controls in .@{form-prefix-cls}-item for optimum spacing
.@{form-prefix-cls}-item {
  label {
    position: relative;

    > .@{iconfont-css-prefix} {
      font-size: @font-size-base;
      vertical-align: top;
    }
  }

  .reset-component;

  margin-bottom: @form-item-margin-bottom;
  vertical-align: top;

  &-control {
    position: relative;
    line-height: @form-component-max-height;
    .clearfix;
  }

  &-children {
    position: relative;
  }

  &-with-help {
    margin-bottom: max(0, @form-item-margin-bottom - @form-explain-height - @form-help-margin-top);
  }

  &-label {
    display: inline-block;
    overflow: hidden;
    line-height: @form-component-max-height - 0.0001px;
    white-space: nowrap;
    text-align: right;
    vertical-align: middle;

    &-left {
      text-align: left;
    }
  }

  .@{ant-prefix}-switch {
    margin: 2px 0 4px;
  }
}

.@{form-prefix-cls}-explain,
.@{form-prefix-cls}-extra {
  clear: both;
  min-height: @form-explain-height + @form-explain-precision;
  margin-top: @form-help-margin-top;
  color: @text-color-secondary;
  font-size: @form-explain-font-size;
  line-height: @line-height-base;
  transition: color 0.3s @ease-out; // sync input color transition
}

.@{form-prefix-cls}-explain {
  margin-bottom: -@form-explain-precision;
}

.@{form-prefix-cls}-extra {
  padding-top: 4px;
}

.@{form-prefix-cls}-text {
  display: inline-block;
  padding-right: 8px;
}

.@{form-prefix-cls}-split {
  display: block;
  text-align: center;
}

form {
  .has-feedback {
    .@{ant-prefix}-input {
      padding-right: @input-padding-horizontal-base + @input-affix-width;
    }

    // https://github.com/ant-design/ant-design/issues/19884
    .@{ant-prefix}-input-affix-wrapper {
      .@{ant-prefix}-input-suffix {
        padding-right: 18px;
      }
      .@{ant-prefix}-input {
        padding-right: @input-padding-horizontal-base + @input-affix-width * 2;
      }
      &.@{ant-prefix}-input-affix-wrapper-input-with-clear-btn {
        .@{ant-prefix}-input {
          padding-right: @input-padding-horizontal-base + @input-affix-width * 3;
        }
      }
    }

    // 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: (@form-component-height / 2) + @form-feedback-icon-size - 2px;
    }
    > .@{ant-prefix}-select .@{ant-prefix}-select-selection-selected-value,
    :not(.@{ant-prefix}-input-group-addon)
      > .@{ant-prefix}-select
      .@{ant-prefix}-select-selection-selected-value {
      padding-right: 42px;
    }

    .@{ant-prefix}-cascader-picker {
      &-arrow {
        margin-right: (@form-component-height / 2) + @form-feedback-icon-size - 13px;
      }
      &-clear {
        right: (@form-component-height / 2) + @form-feedback-icon-size - 2px;
      }
    }

    // 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: (@form-component-height / 2) + @form-feedback-icon-size - 2px;
      }
    }

    // Fix issue: https://github.com/ant-design/ant-design/issues/4783
    .@{ant-prefix}-calendar-picker,
    .@{ant-prefix}-time-picker {
      &-icon,
      &-clear {
        right: (@form-component-height / 2) + @form-feedback-icon-size - 2px;
      }
    }
  }

  .@{ant-prefix}-mentions,
  textarea.@{ant-prefix}-input {
    height: auto;
    margin-bottom: 4px;
  }

  // input[type=file]
  .@{ant-prefix}-upload {
    background: transparent;
  }

  input[type='radio'],
  input[type='checkbox'] {
    width: 14px;
    height: 14px;
  }

  // Radios and checkboxes on same line
  .@{ant-prefix}-radio-inline,
  .@{ant-prefix}-checkbox-inline {
    display: inline-block;
    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;
  }

  // fix input with addon position. https://github.com/ant-design/ant-design/issues/8243
  :not(.@{ant-prefix}-input-group-wrapper) > .@{ant-prefix}-input-group,
  .@{ant-prefix}-input-group-wrapper {
    display: inline-block;
    vertical-align: middle;
  }

  // https://github.com/ant-design/ant-design/issues/20616
  &:not(.@{form-prefix-cls}-vertical) {
    :not(.@{ant-prefix}-input-group-wrapper) > .@{ant-prefix}-input-group,
    .@{ant-prefix}-input-group-wrapper {
      position: relative;
      top: -1px;
    }
  }
}

// Form layout
//== Vertical Form
.make-vertical-layout-label() {
  display: block;
  margin: @form-vertical-label-margin;
  padding: @form-vertical-label-padding;
  line-height: @line-height-base;
  white-space: initial;
  text-align: left;

  label::after {
    display: none;
  }
}

.make-vertical-layout() {
  .@{form-prefix-cls}-item-label,
  .@{form-prefix-cls}-item-control-wrapper {
    display: block;
    width: 100%;
  }
  .@{form-prefix-cls}-item-label {
    .make-vertical-layout-label();
  }
}

.@{form-prefix-cls}-vertical .@{form-prefix-cls}-item-label,
  // when labelCol is 24, it is a vertical form
.@{ant-prefix}-col-24.@{form-prefix-cls}-item-label,
.@{ant-prefix}-col-xl-24.@{form-prefix-cls}-item-label {
  .make-vertical-layout-label();
}

.@{form-prefix-cls}-vertical {
  .@{form-prefix-cls}-item {
    padding-bottom: 8px;
  }
  .@{form-prefix-cls}-item-control {
    line-height: @line-height-base;
  }
  .@{form-prefix-cls}-explain {
    margin-top: 2px;
    margin-bottom: -4px - @form-explain-precision;
  }
  .@{form-prefix-cls}-extra {
    margin-top: 2px;
    margin-bottom: -4px;
  }
}

@media (max-width: @screen-xs-max) {
  .make-vertical-layout();
  .@{ant-prefix}-col-xs-24.@{form-prefix-cls}-item-label {
    .make-vertical-layout-label();
  }
}

@media (max-width: @screen-sm-max) {
  .@{ant-prefix}-col-sm-24.@{form-prefix-cls}-item-label {
    .make-vertical-layout-label();
  }
}

@media (max-width: @screen-md-max) {
  .@{ant-prefix}-col-md-24.@{form-prefix-cls}-item-label {
    .make-vertical-layout-label();
  }
}

@media (max-width: @screen-lg-max) {
  .@{ant-prefix}-col-lg-24.@{form-prefix-cls}-item-label {
    .make-vertical-layout-label();
  }
}

@media (max-width: @screen-xl-max) {
  .@{ant-prefix}-col-xl-24.@{form-prefix-cls}-item-label {
    .make-vertical-layout-label();
  }
}

//== Inline Form
.@{form-prefix-cls}-inline {
  .@{form-prefix-cls}-item {
    display: inline-block;
    margin-right: 16px;
    margin-bottom: 0;

    &-with-help {
      margin-bottom: @form-item-margin-bottom;
    }

    > .@{form-prefix-cls}-item-control-wrapper,
    > .@{form-prefix-cls}-item-label {
      display: inline-block;
      vertical-align: top;
    }
  }

  .@{form-prefix-cls}-text {
    display: inline-block;
  }

  .has-feedback {
    display: inline-block;
  }
}

// Validation state
.has-success,
.has-warning,
.has-error,
.is-validating {
  &.has-feedback .@{form-prefix-cls}-item-children-icon {
    position: absolute;
    top: 50%;
    right: 0;
    z-index: 1;
    width: @form-component-height;
    height: 20px;
    margin-top: -10px;
    font-size: @form-feedback-icon-size;
    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;
    }
  }
}

.has-success {
  &.has-feedback .@{form-prefix-cls}-item-children-icon {
    color: @success-color;
    animation-name: diffZoomIn1 !important;
  }
}

.has-warning {
  .form-control-validation(@warning-color; @warning-color; @form-warning-input-bg;);

  &.has-feedback .@{form-prefix-cls}-item-children-icon {
    color: @warning-color;
    animation-name: diffZoomIn3 !important;
  }

  //select
  .@{ant-prefix}-select {
    &-selection {
      border-color: @warning-color;
      &:hover {
        border-color: @warning-color;
      }
    }
    &-open .@{ant-prefix}-select-selection,
    &-focused .@{ant-prefix}-select-selection {
      .active(@warning-color);
    }
  }

  // arrow and icon
  .@{ant-prefix}-calendar-picker-icon::after,
  .@{ant-prefix}-time-picker-icon::after,
  .@{ant-prefix}-picker-icon::after,
  .@{ant-prefix}-select-arrow,
  .@{ant-prefix}-cascader-picker-arrow {
    color: @warning-color;
  }

  //input-number, timepicker
  .@{ant-prefix}-input-number,
  .@{ant-prefix}-time-picker-input {
    border-color: @warning-color;
    &-focused,
    &:focus {
      .active(@warning-color);
    }
    &:not([disabled]):hover {
      border-color: @warning-color;
    }
  }

  .@{ant-prefix}-cascader-picker {
    &:focus .@{ant-prefix}-cascader-input {
      .active(@warning-color);
    }
    &:hover .@{ant-prefix}-cascader-input {
      border-color: @warning-color;
    }
  }
}

.has-error {
  .form-control-validation(@error-color; @error-color; @form-error-input-bg;);

  &.has-feedback .@{form-prefix-cls}-item-children-icon {
    color: @error-color;
    animation-name: diffZoomIn2 !important;
  }

  //select
  .@{ant-prefix}-select {
    &-selection {
      border-color: @error-color;
      &:hover {
        border-color: @error-color;
      }
    }
    &-open .@{ant-prefix}-select-selection,
    &-focused .@{ant-prefix}-select-selection {
      .active(@error-color);
    }
  }

  .@{ant-prefix}-select.@{ant-prefix}-select-auto-complete {
    .@{ant-prefix}-input:focus {
      border-color: @error-color;
    }
  }

  .@{ant-prefix}-input-group-addon .@{ant-prefix}-select {
    &-selection {
      border-color: transparent;
      box-shadow: none;
    }
  }

  // arrow and icon
  .@{ant-prefix}-calendar-picker-icon::after,
  .@{ant-prefix}-time-picker-icon::after,
  .@{ant-prefix}-picker-icon::after,
  .@{ant-prefix}-select-arrow,
  .@{ant-prefix}-cascader-picker-arrow {
    color: @error-color;
  }

  //input-number, timepicker
  .@{ant-prefix}-input-number,
  .@{ant-prefix}-time-picker-input {
    border-color: @error-color;
    &-focused,
    &:focus {
      .active(@error-color);
    }
    &:not([disabled]):hover {
      border-color: @error-color;
    }
  }
  .@{ant-prefix}-mention-wrapper {
    .@{ant-prefix}-mention-editor {
      &,
      &:not([disabled]):hover {
        border-color: @error-color;
      }
    }
    &.@{ant-prefix}-mention-active:not([disabled]) .@{ant-prefix}-mention-editor,
    .@{ant-prefix}-mention-editor:not([disabled]):focus {
      .active(@error-color);
    }
  }

  .@{ant-prefix}-cascader-picker {
    &:focus .@{ant-prefix}-cascader-input {
      .active(@error-color);
    }
    &:hover .@{ant-prefix}-cascader-input {
      border-color: @error-color;
    }
  }

  // transfer
  .@{ant-prefix}-transfer {
    &-list {
      border-color: @error-color;

      &-search:not([disabled]) {
        border-color: @input-border-color;

        &:hover {
          .hover();
        }

        &:focus {
          .active();
        }
      }
    }
  }
}

.is-validating {
  &.has-feedback .@{form-prefix-cls}-item-children-icon {
    display: inline-block;
    color: @primary-color;
  }
}

.@{ant-prefix}-advanced-search-form {
  .@{form-prefix-cls}-item {
    margin-bottom: @form-item-margin-bottom;

    &-with-help {
      margin-bottom: @form-item-margin-bottom - @form-explain-height - @form-help-margin-top;
    }
  }
}

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

.show-help-motion(show-help, antShowHelp, 0.3s);

@keyframes antShowHelpIn {
  0% {
    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);
  }
}

@import '../../style/themes/index';
@import '../../style/mixins/index';
@import '../../input/style/mixin';

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

.@{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);
  }

  &-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%;
      margin-top: -6px;
      text-align: center;
    }
    &:hover {
      height: 60% !important;
    }
  }

  &-handler-up-disabled,
  &-handler-down-disabled {
    cursor: not-allowed;
  }

  &-handler-up-disabled:hover &-handler-up-inner,
  &-handler-down-disabled:hover &-handler-down-inner {
    color: @disabled-color;
  }
}

@import '../../style/themes/index';
@import '../../style/mixins/index';

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

@import './light';

.@{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;
    }
  }
}

@import '../../style/themes/index';
@import '../../style/mixins/index';

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

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

  position: relative;

  * {
    outline: none;
  }

  &-pagination {
    margin-top: 24px;
    text-align: right;

    // https://github.com/ant-design/ant-design/issues/20037
    .@{ant-prefix}-pagination-options {
      text-align: left;
    }
  }

  &-more {
    margin-top: 12px;
    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;

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

    &-meta {
      display: flex;
      flex: 1;
      align-items: flex-start;
      font-size: 0;
      &-avatar {
        margin-right: @list-item-meta-avatar-margin-right;
      }
      &-content {
        flex: 1 0;
      }
      &-title {
        margin-bottom: 4px;
        color: @text-color;
        font-size: @font-size-base;
        line-height: 22px;
        > a {
          color: @text-color;
          transition: all 0.3s;
          &:hover {
            color: @primary-color;
          }
        }
      }
      &-description {
        color: @text-color-secondary;
        font-size: @font-size-base;
        line-height: 22px;
      }
    }
    &-action {
      flex: 0 0 auto;
      margin-left: 48px;
      padding: 0;
      font-size: 0;
      list-style: none;
      & > li {
        position: relative;
        display: inline-block;
        padding: 0 8px;
        color: @text-color-secondary;
        font-size: @font-size-base;
        line-height: 22px;
        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: 12px;
    padding-bottom: 12px;
  }

  &-empty {
    padding: 16px 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;
  }

  &-loading &-spin-nested-loading {
    min-height: 32px;
  }

  &-something-after-last-item .@{ant-prefix}-spin-container > &-items > &-item:last-child {
    border-bottom: 1px solid @border-color-split;
  }

  &-lg &-item {
    padding-top: 16px;
    padding-bottom: 16px;
  }

  &-sm &-item {
    padding-top: 8px;
    padding-bottom: 8px;
  }

  &-vertical &-item {
    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 16px;
        &:first-child {
          padding-left: 0;
        }
      }
    }
  }

  &-grid .@{ant-prefix}-col > &-item {
    display: block;
    max-width: 100%;
    margin-bottom: 16px;
    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;
      }
    }
  }
}

@import './bordered';
@import './responsive';

.@{list-prefix-cls}-bordered {
  border: 1px solid @border-color-base;
  border-radius: @border-radius-base;
  .@{list-prefix-cls}-header {
    padding-right: 24px;
    padding-left: 24px;
  }

  .@{list-prefix-cls}-footer {
    padding-right: 24px;
    padding-left: 24px;
  }

  .@{list-prefix-cls}-item {
    padding-right: 24px;
    padding-left: 24px;
    border-bottom: 1px solid @border-color-split;
  }

  .@{list-prefix-cls}-pagination {
    margin: 16px 24px;
  }

  &.@{list-prefix-cls}-sm {
    .@{list-prefix-cls}-item {
      padding-right: 16px;
      padding-left: 16px;
    }
    .@{list-prefix-cls}-header,
    .@{list-prefix-cls}-footer {
      padding: 8px 16px;
    }
  }

  &.@{list-prefix-cls}-lg {
    .@{list-prefix-cls}-header,
    .@{list-prefix-cls}-footer {
      padding: 16px 24px;
    }
  }
}

@media screen and (max-width: @screen-md) {
  .@{list-prefix-cls} {
    &-item {
      &-action {
        margin-left: 24px;
      }
    }
  }

  .@{list-prefix-cls}-vertical {
    .@{list-prefix-cls}-item {
      &-extra {
        margin-left: 24px;
      }
    }
  }
}

@media screen and (max-width: @screen-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;
      }
    }
  }
}

@import '../../style/themes/index';
@import '../../style/mixins/index';

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

@import '../../style/themes/index';
@import '../../style/mixins/index';
@import '../../input/style/mixin';

@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: @component-background;
    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 {
        .iconfont-size-under-12px(12px);

        color: @primary-color;
        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;

    a {
      color: @text-color;
      user-select: none;
    }

    &:hover a {
      border-color: @primary-5;
    }

    .@{pagination-prefix-cls}-item-link {
      display: block;
      height: 100%;
      font-size: 12px;
      text-align: center;
      background-color: @component-background;
      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;
      a,
      .@{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;

    &-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;
      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: @component-background;
      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;
    &-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: darken(@disabled-bg, 10%);
        border-color: transparent;
        a {
          color: #fff;
        }
      }
    }

    .@{pagination-prefix-cls}-item-link {
      &,
      &:hover,
      &:focus {
        color: @text-color-secondary;
        background: @disabled-bg;
        border-color: @border-color-base;
        cursor: not-allowed;
      }
    }

    .@{pagination-prefix-cls}-jump-prev,
    .@{pagination-prefix-cls}-jump-next {
      &:focus,
      &:hover {
        .@{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;
  }
}

@import '../../style/themes/index';
@import '../../style/mixins/index';
@import '../../input/style/mixin';

@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;
    .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: @component-background;
    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: 22px;
        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: @component-background;
            cursor: not-allowed;
          }
        }

        &-selected {
          color: @text-color;
          font-weight: @select-item-selected-font-weight;
          background-color: @background-color-light;
        }

        &-active {
          background-color: @item-active-bg;
        }
      }
    }
  }
}

@import '../../style/themes/index';
@import '../../style/mixins/index';

@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: @component-background;
    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 {
    overflow: hidden;
    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;
  }
}

@dialog-prefix-cls: ~'@{ant-prefix}-modal';
@table-prefix-cls: ~'@{ant-prefix}-table';
@modal-footer-padding-vertical: 10px;
@modal-footer-padding-horizontal: 16px;

.@{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: @font-size-lg;
    line-height: 22px;
    word-wrap: break-word;
  }

  &-content {
    position: relative;
    background-color: @component-background;
    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: @text-color-secondary;
    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: 56px;
      height: 56px;
      font-size: @font-size-lg;
      font-style: normal;
      line-height: 56px;
      text-align: center;
      text-transform: none;
      text-rendering: auto;
    }

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

  &-header {
    padding: 16px 24px;
    color: @text-color;
    background: @modal-header-bg;
    border-bottom: @border-width-base @border-style-base @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: @border-width-base @border-style-base @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;
    }
  }
}

@import '../../style/mixins/index';

@confirm-prefix-cls: ~'@{ant-prefix}-modal-confirm';

.@{confirm-prefix-cls} {
  .@{ant-prefix}-modal-header {
    display: none;
  }

  .@{ant-prefix}-modal-close {
    display: none;
  }

  .@{ant-prefix}-modal-body {
    padding: 32px 32px 24px;
  }

  &-body-wrapper {
    .clearfix();
  }

  &-body {
    .@{confirm-prefix-cls}-title {
      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;
  }
}

@import '../../style/themes/index';
@import '../../style/mixins/index';

@notification-prefix-cls: ~'@{ant-prefix}-notification';
@notification-width: 384px;
@notification-padding-vertical: 16px;
@notification-padding-horizontal: 24px;
@notification-padding: @notification-padding-vertical @notification-padding-horizontal;
@notification-margin-bottom: 16px;

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

  position: fixed;
  z-index: @zindex-notification;
  width: @notification-width;
  max-width: ~'calc(100vw - 32px)';
  margin-right: 24px;

  &-topLeft,
  &-bottomLeft {
    margin-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;
  }

  &-notice {
    position: relative;
    margin-bottom: @notification-margin-bottom;
    padding: @notification-padding;
    overflow: hidden;
    line-height: 1.5;
    background: @component-background;
    border-radius: @border-radius-base;
    box-shadow: @shadow-2;

    &-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 {
        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;
    padding-bottom: @notification-padding;
    opacity: 1;
  }
  100% {
    max-height: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
  }
}

@import '../../style/themes/index';
@import '../../style/mixins/index';

@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: inherit;
  }

  &.has-breadcrumb {
    padding-top: @page-header-padding-breadcrumb;
  }

  &.has-footer {
    padding-bottom: 0;
  }

  &-back {
    float: left;
    margin: 8px 0;
    margin-right: 16px;
    font-size: 16px;
    line-height: 1;
    &-button {
      .operation-unit();
      color: @page-header-back-color;
      cursor: pointer;
    }
  }

  .@{ant-prefix}-divider-vertical {
    height: 14px;
    margin: 0 12px;
    vertical-align: middle;
  }

  .@{ant-prefix}-breadcrumb + &-heading {
    margin-top: 8px;
  }

  &-heading {
    width: 100%;
    overflow: hidden;
    &-title {
      display: block;
      float: left;
      margin-bottom: 0;
      padding-right: 12px;
      color: @heading-color;
      font-weight: 600;
      font-size: @heading-4-size;
      line-height: 32px;
    }

    .@{ant-prefix}-avatar {
      float: left;
      margin-right: 12px;
    }

    &-sub-title {
      float: left;
      margin: 5px 0;
      margin-right: 12px;
      color: @text-color-secondary;
      font-size: 14px;
      line-height: 22px;
    }

    &-tags {
      float: left;
      margin: 4px 0;
    }

    &-extra {
      float: right;
      > * {
        margin-left: 8px;
      }
      > *:first-child {
        margin-left: 0;
      }
    }
  }

  &-content {
    padding-top: 12px;
    overflow: hidden;
  }

  &-footer {
    margin-top: 16px;
    .@{ant-prefix}-tabs-bar {
      margin-bottom: 1px;
      border-bottom: 0;
      .@{ant-prefix}-tabs-nav .@{ant-prefix}-tabs-tab {
        padding: 8px;
        font-size: 16px;
      }
    }
  }

  @media (max-width: @screen-sm) {
    &-heading {
      &-extra {
        display: block;
        float: unset;
        width: 100%;
        padding-top: 12px;
        overflow: hidden;
      }
    }
  }
}

@import '../../style/themes/default';

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

@import '../../style/themes/index';
@import '../../style/mixins/index';

@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: 32px;
    margin: 0; // reset heading margin
    padding: 5px @padding-md 4px;
    color: @heading-color;
    font-weight: 500;
    border-bottom: 1px solid @border-color-split;
  }

  &-inner-content {
    padding: 12px @padding-md;
    color: @popover-color;
  }

  &-message {
    position: relative;
    padding: 4px 0 12px;
    color: @popover-color;
    font-size: @font-size-base;
    > .@{iconfont-css-prefix} {
      position: absolute;
      top: 8px; // 4px for padding-top, 4px for vertical middle;
      color: @warning-color;
      font-size: @font-size-base;
    }
    &-title {
      padding-left: @font-size-base + 8px;
    }
  }

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

@import '../../style/themes/index';
@import '../../style/mixins/index';

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

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

  display: inline-block;

  &-line {
    position: relative;
    width: 100%;
    font-size: @font-size-base;
  }

  &-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: 1em;
    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;
    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;
  }
}

@import '../../style/themes/index';
@import '../../style/mixins/index';

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

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

  display: inline-block;
  margin: 0;
  padding: 0;
  color: @rate-star-color;
  font-size: 20px;
  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: scale(1.1);
      }
    }

    &-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-left: 8px;
    font-size: @font-size-base;
  }
}

@import '../../style/themes/default';
@import '../../style/mixins/index';

@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: 72px;
    }
  }

  &-title {
    color: @heading-color;
    font-size: 24px;
    line-height: 1.8;
    text-align: center;
  }

  &-subtitle {
    color: @text-color-secondary;
    font-size: 14px;
    line-height: 1.6;
    text-align: center;
  }

  &-extra {
    margin-top: 32px;
    text-align: center;
    > * {
      margin-right: 8px;
      &:last-child {
        margin-right: 0;
      }
    }
  }

  &-content {
    margin-top: 24px;
    padding: 24px 40px;
    background-color: @background-color-light;
  }
}

@import '../../style/themes/index';
@import '../../style/mixins/index';

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

@skeleton-to-color: shade(@skeleton-color, 5%);

.@{skeleton-prefix-cls} {
  display: table;
  width: 100%;

  &-header {
    display: table-cell;
    padding-right: 16px;
    vertical-align: top;

    // Avatar
    .@{skeleton-avatar-prefix-cls} {
      display: inline-block;
      vertical-align: top;
      background: @skeleton-color;

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

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

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

  &-content {
    display: table-cell;
    width: 100%;
    vertical-align: top;

    // Title
    .@{skeleton-title-prefix-cls} {
      width: 100%;
      height: 16px;
      margin-top: 16px;
      background: @skeleton-color;

      + .@{skeleton-paragraph-prefix-cls} {
        margin-top: 24px;
      }
    }

    // paragraph
    .@{skeleton-paragraph-prefix-cls} {
      padding: 0;

      > li {
        width: 100%;
        height: 16px;
        list-style: none;
        background: @skeleton-color;

        &:last-child:not(:first-child):not(:nth-child(2)) {
          width: 61%;
        }

        + li {
          margin-top: 16px;
        }
      }
    }
  }

  &-with-avatar &-content {
    // Title
    .@{skeleton-title-prefix-cls} {
      margin-top: 12px;

      + .@{skeleton-paragraph-prefix-cls} {
        margin-top: 28px;
      }
    }
  }

  // With active animation
  &.@{skeleton-prefix-cls}-active {
    & .@{skeleton-prefix-cls}-content {
      .@{skeleton-title-prefix-cls},
      .@{skeleton-paragraph-prefix-cls} > li {
        .skeleton-color();
      }
    }

    .@{skeleton-avatar-prefix-cls} {
      .skeleton-color();
    }
  }
}

.avatar-size(@size) {
  width: @size;
  height: @size;
  line-height: @size;

  &.@{skeleton-avatar-prefix-cls}-circle {
    border-radius: 50%;
  }
}

.skeleton-color() {
  background: linear-gradient(
    90deg,
    @skeleton-color 25%,
    @skeleton-to-color 37%,
    @skeleton-color 63%
  );
  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%;
  }
}

@import '../../style/themes/index';
@import '../../style/mixins/index';

@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-sm;
    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: 14px;
    height: 14px;
    margin-top: -5px;
    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);

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

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

@import '../../style/themes/index';
@import '../../style/mixins/index';

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

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

  &-title {
    margin-bottom: 4px;
    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 {
      &-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;
    }
  }
}

@import '../../style/themes/index';
@import '../../style/mixins/index';

@steps-prefix-cls: ~'@{ant-prefix}-steps';
@process-icon-color: @primary-color;
@process-title-color: @heading-color;
@process-description-color: @text-color;
@process-tail-color: @border-color-split;
@process-icon-text-color: @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-background: @component-background;
@steps-nav-arrow-color: fade(@black, 25%);
@steps-nav-active-color: @primary-color;

@steps-icon-size: 32px;
@steps-small-icon-size: 24px;
@steps-dot-size: 8px;
@steps-current-dot-size: 10px;
@steps-desciption-max-width: 140px;
@steps-nav-content-max-width: auto;

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

  display: flex;
  width: 100%;
  font-size: 0;
}

.@{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-right: 8px;
    font-size: @font-size-lg;
    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: -1px;
      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-icon-size;
    &::after {
      position: absolute;
      top: @steps-icon-size / 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;
  }
}

// ===================== 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,
        &-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;
  }
}

@import 'custom-icon';
@import 'small';
@import 'vertical';
@import 'label-placement';
@import 'progress-dot';
@import 'nav';
@import 'compatibility';

.@{steps-prefix-cls}-item-custom {
  .@{steps-prefix-cls}-item-icon {
    height: auto;
    background: none;
    border: 0;
    > .@{steps-prefix-cls}-icon {
      top: 0;
      left: 0.5px;
      width: @steps-icon-size;
      height: @steps-icon-size;
      font-size: 24px;
      line-height: @steps-icon-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;
      }
    }
  }
}

.@{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;
    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: block;
  .@{steps-prefix-cls}-item {
    display: block;
    overflow: visible;
    &-icon {
      float: left;
      margin-right: 16px;
    }
    &-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: 16px;
    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: 12px;
      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;
      &::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: 2px;
      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: '';
        }
      }
    }
    &-content {
      width: @steps-desciption-max-width;
    }
    &-process .@{steps-prefix-cls}-item-icon {
      width: @steps-current-dot-size;
      height: @steps-current-dot-size;
      line-height: @steps-current-dot-size;
      .@{steps-prefix-cls}-icon-dot {
        top: -1px;
      }
    }
  }
}

.@{steps-prefix-cls}-vertical.@{steps-prefix-cls}-dot {
  .@{steps-prefix-cls}-item-icon {
    margin-top: 8px;
    margin-left: 0;
  }
  // 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: 3px;
      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}-flex-not-supported {
  &.@{steps-prefix-cls}-horizontal.@{steps-prefix-cls}-label-horizontal {
    .@{steps-prefix-cls}-item {
      margin-left: -16px;
      padding-left: 16px;
      background: @steps-background;
    }

    &.@{steps-prefix-cls}-small .@{steps-prefix-cls}-item {
      margin-left: -12px;
      padding-left: 12px;
    }
  }

  &.@{steps-prefix-cls}-dot {
    .@{steps-prefix-cls}-item {
      &:last-child {
        overflow: hidden;

        .@{steps-prefix-cls}-icon-dot::after {
          right: -200px;
          width: 200px;
        }
      }

      .@{steps-prefix-cls}-icon-dot::before,
      .@{steps-prefix-cls}-icon-dot::after {
        position: absolute;
        top: 0;
        left: -10px;
        width: 10px;
        height: 8px;
        background: @steps-background;
        content: '';
      }

      .@{steps-prefix-cls}-icon-dot::after {
        right: -10px;
        left: auto;
      }
    }

    .@{steps-prefix-cls}-item-wait
      .@{steps-prefix-cls}-item-icon
      > .@{steps-prefix-cls}-icon
      .@{steps-prefix-cls}-icon-dot {
      background: #ccc;
    }
  }
}

@import '../../style/themes/index';
@import '../../style/mixins/index';

@switch-prefix-cls: ~'@{ant-prefix}-switch';
@switch-duration: 0.36s;

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

  position: relative;
  display: inline-block;
  box-sizing: border-box;
  min-width: 44px;
  height: @switch-height;
  line-height: @switch-height - 2px;
  vertical-align: middle;
  background-color: @disabled-color;
  border: 1px solid transparent;
  border-radius: 100px;
  cursor: pointer;
  transition: all @switch-duration;
  user-select: none;

  &-inner {
    display: block;
    margin-right: 6px;
    margin-left: 24px;
    color: @text-color-inverse;
    font-size: @font-size-sm;
  }

  &-loading-icon,
  &::after {
    position: absolute;
    top: 1px;
    left: 1px;
    width: @switch-height - 4px;
    height: @switch-height - 4px;
    background-color: @component-background;
    border-radius: 18px;
    cursor: pointer;
    transition: all @switch-duration @ease-in-out-circ;
    content: ' ';
  }

  &::after {
    box-shadow: 0 2px 4px 0 @switch-shadow-color;
  }

  &:not(&-disabled):active::before,
  &:not(&-disabled):active::after {
    width: 24px;
  }

  &-loading-icon {
    z-index: 1;
    display: none;
    font-size: 12px;
    // loading default use animation
    // animation: loadingCircle 1s infinite linear;
    background: transparent;
    svg {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      margin: auto;
    }
  }

  &-loading &-loading-icon {
    display: inline-block;
    color: @text-color;
  }

  &-checked&-loading &-loading-icon {
    color: @switch-color;
  }

  &:focus {
    outline: 0;
    box-shadow: 0 0 0 2px fade(@switch-color, 20%);
  }

  &:focus:hover {
    box-shadow: none;
  }

  &-small {
    min-width: 28px;
    height: @switch-sm-height;
    line-height: @switch-sm-height - 2px;

    .@{switch-prefix-cls}-inner {
      margin-right: 3px;
      margin-left: 18px;
      font-size: @font-size-sm;
    }

    &::after {
      width: @switch-sm-height - 4px;
      height: @switch-sm-height - 4px;
    }

    &:active::before,
    &:active::after {
      width: 16px;
    }
  }

  &-small &-loading-icon {
    width: @switch-sm-height - 4px;
    height: @switch-sm-height - 4px;
  }

  &-small&-checked {
    .@{switch-prefix-cls}-inner {
      margin-right: 18px;
      margin-left: 3px;
    }
  }

  &-small&-checked &-loading-icon {
    left: 100%;
    margin-left: @switch-sm-checked-margin-left;
  }

  &-small&-loading &-loading-icon {
    font-weight: bold;
    // animation: AntSwitchSmallLoadingCircle 1s infinite linear;
    transform: scale(0.66667);
  }

  &-checked {
    background-color: @switch-color;

    .@{switch-prefix-cls}-inner {
      margin-right: 24px;
      margin-left: 6px;
    }

    &::after {
      left: 100%;
      margin-left: -1px;
      transform: translateX(-100%);
    }
  }

  &-checked &-loading-icon {
    left: 100%;
    margin-left: -19px;
  }

  &-loading,
  &-disabled {
    cursor: not-allowed;
    opacity: @switch-disabled-opacity;
    * {
      cursor: not-allowed;
    }
    &::before,
    &::after {
      cursor: not-allowed;
    }
  }
}

@keyframes AntSwitchSmallLoadingCircle {
  0% {
    transform: rotate(0deg) scale(0.66667);
    transform-origin: 50% 50%;
  }
  100% {
    transform: rotate(360deg) scale(0.66667);
    transform-origin: 50% 50%;
  }
}

@import '../../style/themes/index';
@import '../../style/mixins/index';

@table-prefix-cls: ~'@{ant-prefix}-table';
@table-header-icon-color: #bfbfbf;
@table-header-sort-active-bg: darken(@table-header-bg, 3%);
@table-header-filter-active-bg: darken(@table-header-sort-active-bg, 5%);
@table-selection-column-width: 60px;

.@{table-prefix-cls}-wrapper {
  .clearfix;
}

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

  position: relative;
  clear: both;

  &-body {
    transition: opacity 0.3s;
  }

  &-empty &-body {
    // https://github.com/ant-design/ant-design/issues/11135
    overflow-x: auto !important;
    // https://github.com/ant-design/ant-design/issues/17175
    overflow-y: hidden !important;
  }

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

  &-layout-fixed table {
    table-layout: fixed;
  }

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

    .@{iconfont-css-prefix}-filter,
    .@{table-prefix-cls}-filter-icon {
      position: absolute;
      top: 0;
      right: 0;
      width: 28px;
      height: 100%;
      color: @table-header-icon-color;
      font-size: @font-size-sm;
      text-align: center;
      cursor: pointer;
      transition: all 0.3s;

      > svg {
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -@font-size-sm / 2 + 1px;
        margin-left: -@font-size-sm / 2;
      }
    }

    .@{table-prefix-cls}-filter-selected.@{iconfont-css-prefix} {
      color: @primary-color;
    }

    .@{table-prefix-cls}-column-sorter {
      display: table-cell;
      vertical-align: middle;

      .@{table-prefix-cls}-column-sorter-inner {
        height: 1em;
        margin-top: 0.35em;
        margin-left: 0.57142857em;
        color: @table-header-icon-color;
        line-height: 1em;
        text-align: center;
        transition: all 0.3s;

        .@{table-prefix-cls}-column-sorter-up,
        .@{table-prefix-cls}-column-sorter-down {
          .iconfont-size-under-12px(11px);

          display: block;
          height: 1em;
          line-height: 1em;
          transition: all 0.3s;
          &.on {
            color: @primary-color;
          }
        }

        &-full {
          margin-top: -0.15em;

          .@{table-prefix-cls}-column-sorter-up,
          .@{table-prefix-cls}-column-sorter-down {
            height: 0.5em;
            line-height: 0.5em;
          }

          .@{table-prefix-cls}-column-sorter-down {
            margin-top: 0.125em;
          }
        }
      }
    }

    &.@{table-prefix-cls}-column-has-actions {
      position: relative;
      background-clip: padding-box; // For Firefox background bug, https://github.com/ant-design/ant-design/issues/12628
      /* stylelint-disable-next-line */
      -webkit-background-clip: border-box; // For Chrome extra space: https://github.com/ant-design/ant-design/issues/14926

      &.@{table-prefix-cls}-column-has-filters {
        // https://github.com/ant-design/ant-design/issues/12650
        padding-right: 30px !important;

        .@{iconfont-css-prefix}-filter,
        .@{table-prefix-cls}-filter-icon {
          &.@{table-prefix-cls}-filter-open {
            color: @text-color-secondary;
            background: @table-header-filter-active-bg;
          }
        }
        // Very complicated styles logic but necessary
        &:hover {
          .@{iconfont-css-prefix}-filter,
          .@{table-prefix-cls}-filter-icon {
            &:hover {
              color: @text-color-secondary;
              background: @table-header-filter-active-bg;
            }
            &:active {
              color: @text-color;
            }
          }
        }
      }

      &.@{table-prefix-cls}-column-has-sorters {
        cursor: pointer;
        &:hover {
          background: @table-header-sort-active-bg;
          .@{iconfont-css-prefix}-filter,
          .@{table-prefix-cls}-filter-icon {
            background: @table-header-sort-active-bg;
          }
        }
        &:active {
          .@{table-prefix-cls}-column-sorter-up:not(.on),
          .@{table-prefix-cls}-column-sorter-down:not(.on) {
            color: @text-color-secondary;
          }
        }
      }
    }

    .@{table-prefix-cls}-header-column {
      display: inline-block;
      max-width: 100%;
      vertical-align: top;

      .@{table-prefix-cls}-column-sorters {
        display: table;

        > .@{table-prefix-cls}-column-title {
          display: table-cell;
          vertical-align: middle;
        }

        > *:not(.@{table-prefix-cls}-column-sorter) {
          position: relative;
        }
        &::before {
          position: absolute;
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
          background: transparent;
          transition: all 0.3s;
          content: '';
        }
        &:hover::before {
          background: rgba(0, 0, 0, 0.04);
        }
      }
    }

    &.@{table-prefix-cls}-column-has-sorters {
      user-select: none;
    }
  }

  &-thead > tr:first-child > th {
    &:first-child {
      border-top-left-radius: @table-border-radius-base;
    }

    &:last-child {
      border-top-right-radius: @table-border-radius-base;
    }
  }

  &-thead > tr:not(:last-child) > th {
    &[colspan] {
      border-bottom: 0;
    }
  }

  &-tbody > tr > td {
    border-bottom: @border-width-base @border-style-base @border-color-split;
    transition: all 0.3s, border 0s;
  }

  &-thead > tr,
  &-tbody > tr {
    transition: all 0.3s, height 0s;
    &.@{table-prefix-cls}-row-hover,
    &:hover {
      &:not(.@{table-prefix-cls}-expanded-row):not(.@{table-prefix-cls}-row-selected) > td {
        background: @table-row-hover-bg;
      }
    }
    &.@{table-prefix-cls}-row-selected > td {
      &.@{table-prefix-cls}-column-sort {
        background: @table-body-selected-sort-bg;
      }
    }
    &:hover {
      &.@{table-prefix-cls}-row-selected > td {
        background: @table-selected-row-hover-bg;
        &.@{table-prefix-cls}-column-sort {
          background: @table-body-selected-sort-bg;
        }
      }
    }
  }

  &-thead > tr:hover {
    background: none;
  }

  &-footer {
    position: relative;
    padding: @table-padding-vertical @table-padding-horizontal;
    color: @table-footer-color;
    background: @table-footer-bg;
    border-top: @border-width-base @border-style-base @border-color-split;
    border-radius: 0 0 @table-border-radius-base @table-border-radius-base;
    &::before {
      position: absolute;
      top: -1px;
      left: 0;
      width: 100%;
      height: 1px;
      background: @table-footer-bg;
      content: '';
    }
  }

  &.@{table-prefix-cls}-bordered &-footer {
    border: @border-width-base @border-style-base @border-color-split;
  }

  &-title {
    position: relative;
    top: 1px;
    padding: @table-padding-vertical 0;
    border-radius: @table-border-radius-base @table-border-radius-base 0 0;
  }

  &.@{table-prefix-cls}-bordered &-title {
    padding-right: @table-padding-horizontal;
    padding-left: @table-padding-horizontal;
    border: @border-width-base @border-style-base @border-color-split;
  }

  &-title + &-content {
    position: relative;
    border-radius: @table-border-radius-base @table-border-radius-base 0 0;

    .@{table-prefix-cls}-bordered & {
      &,
      table,
      .@{table-prefix-cls}-thead > tr:first-child > th {
        border-radius: 0;
      }
    }
  }

  // https://github.com/ant-design/ant-design/issues/4373
  &-without-column-header &-title + &-content,
  &-without-column-header table {
    border-radius: 0;
  }

  // https://github.com/ant-design/ant-design/issues/14834
  &-without-column-header&-bordered&-empty &-placeholder {
    border-top: 1px solid @border-color-split;
    border-radius: @border-radius-base;
  }

  &-tbody > tr.@{table-prefix-cls}-row-selected td {
    color: @table-selected-row-color;
    background: @table-selected-row-bg;
  }

  &-thead > tr > th.@{table-prefix-cls}-column-sort {
    background: @table-header-sort-bg;
  }

  &-tbody > tr > td.@{table-prefix-cls}-column-sort {
    background: @table-body-sort-bg;
  }

  &-thead > tr > th,
  &-tbody > tr > td {
    padding: @table-padding-vertical @table-padding-horizontal;
    overflow-wrap: break-word;
  }

  &-expand-icon-th,
  &-row-expand-icon-cell {
    width: 50px;
    min-width: 50px;
    text-align: center;
  }

  &-header {
    overflow: hidden;
    background: @table-header-bg;
  }

  &-header table {
    border-radius: @table-border-radius-base @table-border-radius-base 0 0;
  }

  &-loading {
    position: relative;
    .@{table-prefix-cls}-body {
      background: @component-background;
      opacity: 0.5;
    }
    .@{table-prefix-cls}-spin-holder {
      position: absolute;
      top: 50%;
      left: 50%;
      height: 20px;
      margin-left: -30px;
      line-height: 20px;
    }
    .@{table-prefix-cls}-with-pagination {
      margin-top: -20px;
    }
    .@{table-prefix-cls}-without-pagination {
      margin-top: 10px;
    }
  }

  &-bordered {
    .@{table-prefix-cls}-header > table,
    .@{table-prefix-cls}-body > table,
    .@{table-prefix-cls}-fixed-left table,
    .@{table-prefix-cls}-fixed-right table {
      border: @border-width-base @border-style-base @border-color-split;
      border-right: 0;
      border-bottom: 0;
    }

    &.@{table-prefix-cls}-empty {
      .@{table-prefix-cls}-placeholder {
        border-right: @border-width-base @border-style-base @border-color-split;
        border-left: @border-width-base @border-style-base @border-color-split;
      }
    }

    &.@{table-prefix-cls}-fixed-header {
      .@{table-prefix-cls}-header > table {
        border-bottom: 0;
      }

      .@{table-prefix-cls}-body > table {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
      }

      .@{table-prefix-cls}-header + .@{table-prefix-cls}-body > table,
      .@{table-prefix-cls}-body-inner > table {
        border-top: 0;
      }
    }

    .@{table-prefix-cls}-thead > tr:not(:last-child) > th {
      border-bottom: @border-width-base @border-style-base @border-color-split;
    }

    .@{table-prefix-cls}-thead > tr > th,
    .@{table-prefix-cls}-tbody > tr > td {
      border-right: @border-width-base @border-style-base @border-color-split;
    }
  }

  &-placeholder {
    position: relative;
    z-index: 1;
    margin-top: -1px;
    padding: @table-padding-vertical @table-padding-horizontal;
    color: @disabled-color;
    font-size: @font-size-base;
    text-align: center;
    background: @component-background;
    border-top: @border-width-base @border-style-base @border-color-split;
    border-bottom: @border-width-base @border-style-base @border-color-split;
    border-radius: 0 0 @border-radius-base @border-radius-base;
  }

  &-pagination.@{ant-prefix}-pagination {
    float: right;
    margin: 16px 0;
  }

  &-filter-dropdown {
    position: relative;
    min-width: 96px;
    margin-left: -8px;
    background: @component-background;
    border-radius: @border-radius-base;
    box-shadow: @box-shadow-base;

    .@{ant-prefix}-dropdown-menu {
      // https://github.com/ant-design/ant-design/issues/4916
      // https://github.com/ant-design/ant-design/issues/19542
      max-height: ~'calc(100vh - 130px)';
      overflow-x: hidden;
      border: 0;
      border-radius: @border-radius-base @border-radius-base 0 0;
      box-shadow: none;

      &-item > label + span {
        padding-right: 0;
      }

      &-sub {
        border-radius: @border-radius-base;
        box-shadow: @box-shadow-base;
      }

      .@{ant-prefix}-dropdown-submenu-contain-selected {
        .@{ant-prefix}-dropdown-menu-submenu-title::after {
          color: @primary-color;
          font-weight: bold;
          text-shadow: 0 0 2px @primary-2;
        }
      }
    }

    .@{ant-prefix}-dropdown-menu-item {
      overflow: hidden;
    }

    > .@{ant-prefix}-dropdown-menu > .@{ant-prefix}-dropdown-menu-item:last-child,
    > .@{ant-prefix}-dropdown-menu
      > .@{ant-prefix}-dropdown-menu-submenu:last-child
      .@{ant-prefix}-dropdown-menu-submenu-title {
      border-radius: 0;
    }

    &-btns {
      padding: 7px 8px;
      overflow: hidden;
      border-top: @border-width-base @border-style-base @border-color-split;
    }

    &-link {
      color: @link-color;
      &:hover {
        color: @link-hover-color;
      }
      &:active {
        color: @link-active-color;
      }
      &.confirm {
        float: left;
      }
      &.clear {
        float: right;
      }
    }
  }

  &-selection {
    white-space: nowrap;

    &-select-all-custom {
      margin-right: 4px !important;
    }

    .@{iconfont-css-prefix}-down {
      color: @table-header-icon-color;
      transition: all 0.3s;
    }

    &-menu {
      min-width: 96px;
      margin-top: 5px;
      margin-left: -30px;
      background: @component-background;
      border-radius: @border-radius-base;
      box-shadow: @box-shadow-base;

      .@{ant-prefix}-action-down {
        color: @table-header-icon-color;
      }
    }

    &-down {
      display: inline-block;
      padding: 0;
      line-height: 1;
      cursor: pointer;
      &:hover .@{iconfont-css-prefix}-down {
        color: fade(@black, 60%);
      }
    }
  }

  &-row {
    &-expand-icon {
      .operation-unit();

      display: inline-block;
      width: 17px;
      height: 17px;
      color: inherit;
      line-height: 13px;
      text-align: center;
      background: @component-background;
      border: @border-width-base @border-style-base @border-color-split;
      border-radius: @border-radius-sm;
      outline: none;
      transition: all 0.3s;
      user-select: none;

      &:focus,
      &:hover,
      &:active {
        border-color: currentColor;
      }
    }

    &-expanded::after {
      content: '-';
    }

    &-collapsed::after {
      content: '+';
    }

    &-spaced {
      visibility: hidden;
      &::after {
        content: '.';
      }
    }

    &-cell-ellipsis,
    &-cell-ellipsis .@{table-prefix-cls}-column-title {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    &-cell-ellipsis .@{table-prefix-cls}-column-title {
      display: block;
    }

    &-cell-break-word {
      word-wrap: break-word;
      word-break: break-word;
    }
  }

  tr&-expanded-row {
    &,
    &:hover {
      background: @table-expanded-row-bg;
    }

    td > .@{table-prefix-cls}-wrapper {
      margin: -@table-padding-vertical -@table-padding-horizontal -@table-padding-vertical - 1px;
    }
  }

  .@{table-prefix-cls}-row-indent + .@{table-prefix-cls}-row-expand-icon {
    margin-right: 8px;
  }

  &-scroll {
    overflow: auto;
    overflow-x: hidden;
    table {
      min-width: 100%;

      // https://github.com/ant-design/ant-design/issues/14545
      // https://github.com/ant-design/ant-design/issues/19491
      .@{table-prefix-cls}-fixed-columns-in-body:not([colspan]) {
        color: transparent;
        & > * {
          visibility: hidden;
        }
      }
    }
  }

  &-body-inner {
    height: 100%;
  }

  &-fixed-header > &-content > &-scroll > &-body {
    position: relative;
    background: @component-background;
  }

  &-fixed-header &-body-inner {
    overflow: scroll;
  }

  &-fixed-header &-scroll &-header {
    margin-bottom: -20px;
    padding-bottom: 20px;
    overflow: scroll;
    // Workaround for additional scroll bar on the table header
    // https://github.com/ant-design/ant-design/issues/6515#issuecomment-419634369
    opacity: 0.9999;

    &::-webkit-scrollbar {
      border: 1px solid @border-color-split;
      border-width: 0 0 1px 0;
    }
  }

  &-hide-scrollbar {
    // https://github.com/ant-design/ant-design/issues/4637
    // https://stackoverflow.com/a/54101063
    // https://github.com/react-component/table/pull/333
    scrollbar-color: transparent transparent;
    min-width: unset;

    &::-webkit-scrollbar {
      // set min width to window chrome scrollbar
      // https://github.com/ant-design/ant-design/issues/19952#issuecomment-559367149
      min-width: inherit;
      background-color: transparent;
    }
  }

  // optimize header style of borderd table after hide extra scrollbar
  &-bordered&-fixed-header &-scroll &-header {
    &::-webkit-scrollbar {
      border: 1px solid @border-color-split;
      border-width: 1px 1px 1px 0;
    }
    &.@{table-prefix-cls}-hide-scrollbar
      .@{table-prefix-cls}-thead
      > tr:only-child
      > th:last-child {
      border-right-color: transparent;
    }
  }

  &-fixed-left,
  &-fixed-right {
    position: absolute;
    top: 0;
    z-index: @zindex-table-fixed;
    overflow: hidden;
    border-radius: 0;
    transition: box-shadow 0.3s ease;
    table {
      width: auto;
      background: @component-background;
    }
  }

  &-fixed-header &-fixed-left &-body-outer &-fixed,
  &-fixed-header &-fixed-right &-body-outer &-fixed {
    border-radius: 0;
  }

  &-fixed-left {
    left: 0;
    box-shadow: 6px 0 6px -4px @shadow-color;
    .@{table-prefix-cls}-header {
      overflow-y: hidden;
    }
    // hide scrollbar in left fixed columns
    .@{table-prefix-cls}-body-inner {
      margin-right: -20px;
      padding-right: 20px;
    }
    .@{table-prefix-cls}-fixed-header & .@{table-prefix-cls}-body-inner {
      padding-right: 0;
    }
    &,
    table {
      border-radius: @table-border-radius-base 0 0 0;
    }
    .@{table-prefix-cls}-thead > tr > th:last-child {
      border-top-right-radius: 0;
    }
  }

  &-fixed-right {
    right: 0;
    box-shadow: -6px 0 6px -4px @shadow-color;
    &,
    table {
      border-radius: 0 @table-border-radius-base 0 0;
    }
    // hide expand row content in right-fixed Table
    // https://github.com/ant-design/ant-design/issues/1898
    .@{table-prefix-cls}-expanded-row {
      color: transparent;
      pointer-events: none;
    }
    .@{table-prefix-cls}-thead > tr > th:first-child {
      border-top-left-radius: 0;
    }
  }

  &&-scroll-position-left &-fixed-left {
    box-shadow: none;
  }

  &&-scroll-position-right &-fixed-right {
    box-shadow: none;
  }

  // ========================== Row Selection ==========================
  colgroup {
    > col.@{table-prefix-cls}-selection-col {
      width: @table-selection-column-width;
    }
  }

  &-thead > tr > th.@{table-prefix-cls}-selection-column-custom {
    .@{table-prefix-cls}-selection {
      margin-right: -15px;
    }
  }

  &-thead > tr > th.@{table-prefix-cls}-selection-column,
  &-tbody > tr > td.@{table-prefix-cls}-selection-column {
    text-align: center;

    .@{ant-prefix}-radio-wrapper {
      margin-right: 0;
    }
  }

  &-row[class*='@{table-prefix-cls}-row-level-0'] .@{table-prefix-cls}-selection-column > span {
    display: inline-block;
  }
}

.@{table-prefix-cls}-filter-dropdown,
.@{table-prefix-cls}-filter-dropdown-submenu {
  .@{ant-prefix}-checkbox-wrapper + span {
    padding-left: 8px;
  }
}

/**
* Another fix of Firefox:
*/
@supports (-moz-appearance: meterbar) {
  // https://github.com/ant-design/ant-design/issues/12628
  .@{table-prefix-cls}-thead > tr > th.@{table-prefix-cls}-column-has-actions {
    background-clip: padding-box;
  }
}

@import './size';

@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-prefix-cls}-middle {
  > .@{table-prefix-cls}-title,
  > .@{table-prefix-cls}-content > .@{table-prefix-cls}-footer {
    padding: @table-padding-vertical-md @table-padding-horizontal-md;
  }
  > .@{table-prefix-cls}-content {
    > .@{table-prefix-cls}-header > table,
    > .@{table-prefix-cls}-body > table,
    > .@{table-prefix-cls}-scroll > .@{table-prefix-cls}-header > table,
    > .@{table-prefix-cls}-scroll > .@{table-prefix-cls}-body > table,
    > .@{table-prefix-cls}-fixed-left > .@{table-prefix-cls}-header > table,
    > .@{table-prefix-cls}-fixed-right > .@{table-prefix-cls}-header > table,
    > .@{table-prefix-cls}-fixed-left
      > .@{table-prefix-cls}-body-outer
      > .@{table-prefix-cls}-body-inner
      > table,
    > .@{table-prefix-cls}-fixed-right
      > .@{table-prefix-cls}-body-outer
      > .@{table-prefix-cls}-body-inner
      > table {
      > .@{table-prefix-cls}-thead > tr > th,
      > .@{table-prefix-cls}-tbody > tr > td {
        padding: @table-padding-vertical-md @table-padding-horizontal-md;
      }
    }
  }

  tr.@{table-prefix-cls}-expanded-row td > .@{table-prefix-cls}-wrapper {
    margin: -@table-padding-vertical-md -@table-padding-horizontal / 2 -@table-padding-vertical-md -
      1px;
  }
}

.@{table-prefix-cls}-small {
  border: @border-width-base @border-style-base @border-color-split;
  border-radius: @table-border-radius-base;

  > .@{table-prefix-cls}-title,
  > .@{table-prefix-cls}-content > .@{table-prefix-cls}-footer {
    padding: @table-padding-vertical-sm @table-padding-horizontal-sm;
  }

  > .@{table-prefix-cls}-title {
    top: 0;
    border-bottom: @border-width-base @border-style-base @border-color-split;
  }

  > .@{table-prefix-cls}-content > .@{table-prefix-cls}-footer {
    background-color: transparent;
    border-top: @border-width-base @border-style-base @border-color-split;
    &::before {
      background-color: transparent;
    }
  }

  > .@{table-prefix-cls}-content {
    > .@{table-prefix-cls}-body {
      margin: 0 @table-padding-horizontal-sm;
    }

    > .@{table-prefix-cls}-header > table,
    > .@{table-prefix-cls}-body > table,
    > .@{table-prefix-cls}-scroll > .@{table-prefix-cls}-header > table,
    > .@{table-prefix-cls}-scroll > .@{table-prefix-cls}-body > table,
    > .@{table-prefix-cls}-fixed-left > .@{table-prefix-cls}-header > table,
    > .@{table-prefix-cls}-fixed-right > .@{table-prefix-cls}-header > table,
    > .@{table-prefix-cls}-fixed-left
      > .@{table-prefix-cls}-body-outer
      > .@{table-prefix-cls}-body-inner
      > table,
    > .@{table-prefix-cls}-fixed-right
      > .@{table-prefix-cls}-body-outer
      > .@{table-prefix-cls}-body-inner
      > table {
      border: 0;
      > .@{table-prefix-cls}-thead > tr > th,
      > .@{table-prefix-cls}-tbody > tr > td {
        padding: @table-padding-vertical-sm @table-padding-horizontal-sm;
      }
      > .@{table-prefix-cls}-thead > tr > th {
        background-color: @table-header-bg-sm;
      }
      > .@{table-prefix-cls}-thead > tr {
        border-bottom: @border-width-base @border-style-base @border-color-split;
      }
      > .@{table-prefix-cls}-thead > tr > th.@{table-prefix-cls}-column-sort {
        background-color: @table-body-sort-bg;
      }
    }

    > .@{table-prefix-cls}-scroll > .@{table-prefix-cls}-header > table,
    > .@{table-prefix-cls}-scroll > .@{table-prefix-cls}-body > table,
    > .@{table-prefix-cls}-fixed-left > .@{table-prefix-cls}-header > table,
    > .@{table-prefix-cls}-fixed-right > .@{table-prefix-cls}-header > table,
    > .@{table-prefix-cls}-fixed-left
      > .@{table-prefix-cls}-body-outer
      > .@{table-prefix-cls}-body-inner
      > table,
    > .@{table-prefix-cls}-fixed-right
      > .@{table-prefix-cls}-body-outer
      > .@{table-prefix-cls}-body-inner
      > table {
      padding: 0;
    }

    .@{table-prefix-cls}-header {
      background-color: @table-header-bg-sm;
      border-radius: @table-border-radius-base @table-border-radius-base 0 0;
    }

    .@{table-prefix-cls}-placeholder,
    .@{table-prefix-cls}-row:last-child td {
      border-bottom: 0;
    }
  }

  &.@{table-prefix-cls}-bordered {
    border-right: 0;

    .@{table-prefix-cls}-title {
      border: 0;
      border-right: @border-width-base @border-style-base @border-color-split;
      border-bottom: @border-width-base @border-style-base @border-color-split;
    }

    .@{table-prefix-cls}-content {
      border-right: @border-width-base @border-style-base @border-color-split;
    }

    .@{table-prefix-cls}-footer {
      border: 0;
      border-top: @border-width-base @border-style-base @border-color-split;
      &::before {
        display: none;
      }
    }

    .@{table-prefix-cls}-placeholder {
      border-right: 0;
      border-bottom: 0;
      border-left: 0;
    }

    .@{table-prefix-cls}-thead > tr > th.@{table-prefix-cls}-row-cell-last,
    .@{table-prefix-cls}-tbody > tr > td:last-child {
      border-right: none;
    }

    .@{table-prefix-cls}-fixed-left {
      .@{table-prefix-cls}-thead > tr > th:last-child,
      .@{table-prefix-cls}-tbody > tr > td:last-child {
        border-right: @border-width-base @border-style-base @border-color-split;
      }
    }

    .@{table-prefix-cls}-fixed-right {
      border-right: @border-width-base @border-style-base @border-color-split;
      border-left: @border-width-base @border-style-base @border-color-split;
    }
  }

  tr.@{table-prefix-cls}-expanded-row td > .@{table-prefix-cls}-wrapper {
    margin: -@table-padding-vertical-sm -@table-padding-horizontal / 2 -@table-padding-vertical-sm -
      1px;
  }

  // https://github.com/ant-design/ant-design/issues/19287#issuecomment-544368967
  &.@{table-prefix-cls}-fixed-header
    > .@{table-prefix-cls}-content
    > .@{table-prefix-cls}-scroll
    > .@{table-prefix-cls}-body {
    border-radius: 0 0 @table-border-radius-base @table-border-radius-base;
  }
}

@import '../../style/themes/index';
@import '../../style/mixins/index';

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

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

  margin: 0;
  padding: 0;
  list-style: none;

  &-item {
    position: relative;
    margin: 0;
    padding: 0 0 20px;
    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 18px;
      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}-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;
    }
  }
}

@import './index.less';

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

.@{transfer-prefix-cls}-customize-list {
  display: flex;

  .@{transfer-prefix-cls}-operation {
    flex: none;
    align-self: center;
  }

  .@{transfer-prefix-cls}-list {
    flex: auto;
    width: auto;
    height: auto;
    min-height: @transfer-list-height;

    &-body {
      &-with-search {
        padding-top: 0;
      }

      // Search box in customize mode do not need fix top
      &-search-wrapper {
        position: relative;
        padding-bottom: 0;
      }

      &-customize-wrapper {
        padding: 12px;
      }
    }
  }

  // =================== 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;
    }
  }
}

@import '../../style/themes/index';
@import '../../style/mixins/index';
@import '../../checkbox/style/mixin';
@import './customize.less';

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

@transfer-header-vertical-padding: (
    @transfer-header-height - 1px - @font-size-base * @line-height-base
  ) / 2;

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

  position: relative;

  &-disabled {
    .@{transfer-prefix-cls}-list {
      background: @transfer-disabled-bg;
    }
  }

  &-list {
    position: relative;
    display: inline-block;
    width: 180px;
    height: @transfer-list-height;
    padding-top: @transfer-header-height;
    vertical-align: middle;
    border: @border-width-base @border-style-base @border-color-base;
    border-radius: @border-radius-base;

    &-with-footer {
      padding-bottom: 34px;
    }

    &-search {
      padding: 0 24px 0 @control-padding-horizontal-sm;
      &-action {
        position: absolute;
        top: 12px;
        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 {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      // 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;
      overflow: hidden;
      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;

      &-title {
        position: absolute;
        right: 12px;
      }

      .@{ant-prefix}-checkbox-wrapper + span {
        padding-left: 8px;
      }
    }

    &-body {
      position: relative;
      height: 100%;
      font-size: @font-size-base;

      &-search-wrapper {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        padding: 12px;
      }
    }

    &-body-with-search {
      padding-top: @input-height-base + 24px;
    }

    &-content {
      height: 100%;
      margin: 0;
      padding: 0;
      overflow: auto;
      list-style: none;
      > .LazyLoad {
        animation: transferHighlightIn 1s;
      }

      &-item {
        min-height: 32px;
        padding: 6px @control-padding-horizontal;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        transition: all 0.3s;
        > span {
          padding-right: 0;
        }
        &-text {
          padding-left: 8px;
        }
      }

      &-item:not(&-item-disabled):hover {
        background-color: @item-hover-bg;
        cursor: pointer;
      }

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

    &-body-not-found {
      position: absolute;
      top: 50%;
      width: 100%;
      padding-top: 0;
      color: @disabled-color;
      text-align: center;
      transform: translateY(-50%);

      // with filter should offset the search box height
      .@{transfer-prefix-cls}-list-body-with-search & {
        margin-top: @input-height-base / 2;
      }
    }

    &-footer {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      border-top: @border-width-base @border-style-base @border-color-split;
      border-radius: 0 0 @border-radius-base @border-radius-base;
    }
  }

  &-operation {
    display: inline-block;
    margin: 0 8px;
    overflow: hidden;
    vertical-align: middle;

    .@{ant-prefix}-btn {
      display: block;

      &:first-child {
        margin-bottom: 4px;
      }

      .@{iconfont-css-prefix} {
        font-size: 12px;
      }
    }
  }
}

@keyframes transferHighlightIn {
  0% {
    background: @primary-2;
  }
  100% {
    background: transparent;
  }
}

@import '../../style/themes/index';
@import '../../style/mixins/index';
@import '../../tree/style/mixin';
@import '../../checkbox/style/mixin';

@select-prefix-cls: ~'@{ant-prefix}-select';
@select-tree-prefix-cls: ~'@{ant-prefix}-select-tree';

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

.@{select-tree-prefix-cls} {
  .reset-component;

  margin: 0;
  margin-top: -4px;
  padding: 0 4px;
  li {
    margin: 8px 0;
    padding: 0;
    white-space: nowrap;
    list-style: none;
    outline: 0;
    &.filter-node {
      > span {
        font-weight: 500;
      }
    }
    ul {
      margin: 0;
      padding: 0 0 0 18px;
    }
    .@{select-tree-prefix-cls}-node-content-wrapper {
      display: inline-block;
      width: ~'calc(100% - 24px)';
      margin: 0;
      padding: 3px 5px;
      color: @text-color;
      text-decoration: none;
      border-radius: @border-radius-sm;
      cursor: pointer;
      transition: all 0.3s;
      &:hover {
        background-color: @item-hover-bg;
      }
      &.@{select-tree-prefix-cls}-node-selected {
        background-color: @primary-2;
      }
    }
    span {
      &.@{select-tree-prefix-cls}-checkbox {
        margin: 0 4px 0 0;
        + .@{select-tree-prefix-cls}-node-content-wrapper {
          width: ~'calc(100% - 46px)';
        }
      }
      &.@{select-tree-prefix-cls}-switcher,
      &.@{select-tree-prefix-cls}-iconEle {
        display: inline-block;
        width: 24px;
        height: 24px;
        margin: 0;
        line-height: 22px;
        text-align: center;
        vertical-align: middle;
        border: 0 none;
        outline: none;
        cursor: pointer;
      }
      &.@{select-prefix-cls}-icon_loading {
        .@{select-prefix-cls}-switcher-loading-icon {
          position: absolute;
          left: 0;
          display: inline-block;
          color: @primary-color;
          font-size: 14px;
          transform: none;
          svg {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            margin: auto;
          }
        }
      }
      &.@{select-tree-prefix-cls}-switcher {
        position: relative;
        &.@{select-tree-prefix-cls}-switcher-noop {
          cursor: auto;
        }
        &.@{select-tree-prefix-cls}-switcher_open {
          .antTreeSwitcherIcon();
        }
        &.@{select-tree-prefix-cls}-switcher_close {
          .antTreeSwitcherIcon();
          .@{select-prefix-cls}-switcher-icon {
            svg {
              transform: rotate(-90deg);
            }
          }
        }

        &.@{select-tree-prefix-cls}-switcher_open,
        &.@{select-tree-prefix-cls}-switcher_close {
          .@{select-prefix-cls}-switcher-loading-icon {
            position: absolute;
            left: 0;
            display: inline-block;
            width: 24px;
            height: 24px;
            color: @primary-color;
            font-size: 14px;
            transform: none;
            svg {
              position: absolute;
              top: 0;
              right: 0;
              bottom: 0;
              left: 0;
              margin: auto;
            }
          }
        }
      }
    }
  }

  .@{select-tree-prefix-cls}-treenode-loading {
    .@{select-tree-prefix-cls}-iconEle {
      display: none;
    }
  }
  &-child-tree {
    display: none;
    &-open {
      display: block;
    }
  }
  li&-treenode-disabled {
    > span:not(.@{select-tree-prefix-cls}-switcher),
    > .@{select-tree-prefix-cls}-node-content-wrapper,
    > .@{select-tree-prefix-cls}-node-content-wrapper span {
      color: @disabled-color;
      cursor: not-allowed;
    }
    > .@{select-tree-prefix-cls}-node-content-wrapper:hover {
      background: transparent;
    }
  }
  &-icon__open {
    margin-right: 2px;
    vertical-align: top;
  }
  &-icon__close {
    margin-right: 2px;
    vertical-align: top;
  }
}

.@{select-prefix-cls}-tree-dropdown {
  .reset-component;
  .@{select-prefix-cls}-dropdown-search {
    position: sticky;
    top: 0;
    z-index: 1;
    display: block;
    padding: 4px;
    background: @component-background;
    .@{select-prefix-cls}-search__field__wrap {
      width: 100%;
    }
    .@{select-prefix-cls}-search__field {
      box-sizing: border-box;
      width: 100%;
      padding: 4px 7px;
      border: @border-width-base @border-style-base @border-color-base;
      border-radius: 4px;
      outline: none;
    }
    &.@{select-prefix-cls}-search--hide {
      display: none;
    }
  }
  .@{select-prefix-cls}-not-found {
    display: block;
    padding: 7px 16px;
    color: @disabled-color;
    cursor: not-allowed;
  }
}

@import '../../style/mixins/index';

@tree-prefix-cls: ~'@{ant-prefix}-tree';
@tree-select-prefix-cls: ~'@{ant-prefix}-select';

.antTreeSwitcherIcon(@type: 'tree-default-open-icon') {
  .@{tree-prefix-cls}-switcher-icon,
  .@{tree-select-prefix-cls}-switcher-icon {
    .iconfont-size-under-12px(10px);

    display: inline-block;
    font-weight: bold;
    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;
    }
  }
}

@import '../../style/themes/index';

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

.@{tree-prefix-cls} {
  &.@{tree-prefix-cls}-directory {
    position: relative;

    // Stretch selector width
    > li,
    .@{tree-prefix-cls}-child-tree > li {
      span {
        &.@{tree-prefix-cls}-switcher {
          position: relative;
          z-index: 1;

          &.@{tree-prefix-cls}-switcher-noop {
            pointer-events: none;
          }
        }

        &.@{tree-prefix-cls}-checkbox {
          position: relative;
          z-index: 1;
        }

        &.@{tree-prefix-cls}-node-content-wrapper {
          border-radius: 0;
          user-select: none;

          &:hover {
            background: transparent;

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

          &.@{tree-prefix-cls}-node-selected {
            color: @tree-directory-selected-color;
            background: transparent;
          }

          &::before {
            position: absolute;
            right: 0;
            left: 0;
            height: @tree-title-height;
            transition: all 0.3s;
            content: '';
          }

          > span {
            position: relative;
            z-index: 1;
          }
        }
      }

      &.@{tree-prefix-cls}-treenode-selected {
        > span {
          &.@{tree-prefix-cls}-switcher {
            color: @tree-directory-selected-color;
          }

          &.@{tree-prefix-cls}-checkbox {
            .@{tree-prefix-cls}-checkbox-inner {
              border-color: @primary-color;
            }

            &.@{tree-prefix-cls}-checkbox-checked {
              &::after {
                border-color: @checkbox-check-color;
              }

              .@{tree-prefix-cls}-checkbox-inner {
                background: @checkbox-check-color;

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

          &.@{tree-prefix-cls}-node-content-wrapper {
            &::before {
              background: @tree-directory-selected-bg;
            }
          }
        }
      }
    }
  }
}

@import '../../style/themes/index';
@import '../../style/mixins/index';
@import '../../checkbox/style/mixin';
@import './mixin';
@import './directory';

@tree-prefix-cls: ~'@{ant-prefix}-tree';
@tree-showline-icon-color: @text-color-secondary;
@tree-node-padding: 4px;

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

.@{tree-prefix-cls} {
  /* see https://github.com/ant-design/ant-design/issues/16259 */
  &-checkbox-checked::after {
    position: absolute;
    top: 16.67%;
    left: 0;
    width: 100%;
    height: 66.67%;
  }

  .reset-component;

  margin: 0;
  padding: 0;

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

  li {
    margin: 0;
    padding: @tree-node-padding 0;
    white-space: nowrap;
    list-style: none;
    outline: 0;
    span[draggable],
    span[draggable='true'] {
      line-height: @tree-title-height - 4px;
      border-top: 2px transparent solid;
      border-bottom: 2px transparent solid;
      user-select: none;
      /* Required to make elements draggable in old WebKit */
      -khtml-user-drag: element;
      -webkit-user-drag: element;
    }
    &.drag-over {
      > span[draggable] {
        color: white;
        background-color: @primary-color;
        opacity: 0.8;
      }
    }
    &.drag-over-gap-top {
      > span[draggable] {
        border-top-color: @primary-color;
      }
    }
    &.drag-over-gap-bottom {
      > span[draggable] {
        border-bottom-color: @primary-color;
      }
    }
    &.filter-node {
      > span {
        color: @highlight-color !important;
        font-weight: 500 !important;
      }
    }

    // When node is loading
    &.@{tree-prefix-cls}-treenode-loading {
      span {
        &.@{tree-prefix-cls}-switcher {
          &.@{tree-prefix-cls}-switcher_open,
          &.@{tree-prefix-cls}-switcher_close {
            .@{tree-prefix-cls}-switcher-loading-icon {
              position: absolute;
              left: 0;
              display: inline-block;
              width: 24px;
              height: @tree-title-height;
              color: @primary-color;
              font-size: 14px;
              transform: none;
              svg {
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                margin: auto;
              }
            }

            :root &::after {
              opacity: 0;
            }
          }
        }
      }
    }

    ul {
      margin: 0;
      padding: 0 0 0 @tree-child-padding;
    }
    .@{tree-prefix-cls}-node-content-wrapper {
      display: inline-block;
      height: @tree-title-height;
      margin: 0;
      padding: 0 5px;
      color: @text-color;
      line-height: @tree-title-height;
      text-decoration: none;
      vertical-align: top;
      border-radius: @border-radius-sm;
      cursor: pointer;
      transition: all 0.3s;
      &:hover {
        background-color: @tree-node-hover-bg;
      }
      &.@{tree-prefix-cls}-node-selected {
        background-color: @tree-node-selected-bg;
      }
    }
    span {
      &.@{tree-prefix-cls}-checkbox {
        top: initial;
        height: @tree-title-height;
        margin: 0 4px 0 2px;
        padding: ((@tree-title-height - 16px) / 2) 0;
      }
      &.@{tree-prefix-cls}-switcher,
      &.@{tree-prefix-cls}-iconEle {
        display: inline-block;
        width: 24px;
        height: @tree-title-height;
        margin: 0;
        line-height: @tree-title-height;
        text-align: center;
        vertical-align: top;
        border: 0 none;
        outline: none;
        cursor: pointer;
      }

      &.@{tree-prefix-cls}-iconEle:empty {
        display: none;
      }

      &.@{tree-prefix-cls}-switcher {
        position: relative;

        &.@{tree-prefix-cls}-switcher-noop {
          cursor: default;
        }
        &.@{tree-prefix-cls}-switcher_open {
          .antTreeSwitcherIcon();
        }
        &.@{tree-prefix-cls}-switcher_close {
          .antTreeSwitcherIcon();
          .@{tree-prefix-cls}-switcher-icon {
            svg {
              transform: rotate(-90deg);
            }
          }
        }
      }
    }
    &:last-child > span {
      &.@{tree-prefix-cls}-switcher,
      &.@{tree-prefix-cls}-iconEle {
        &::before {
          display: none;
        }
      }
    }
  }

  > li {
    &:first-child {
      padding-top: 7px;
    }
    &:last-child {
      padding-bottom: 7px;
    }
  }
  &-child-tree {
    // https://github.com/ant-design/ant-design/issues/14958
    > li {
      // Provide additional padding between top child node and parent node
      &:first-child {
        padding-top: 2 * @tree-node-padding;
      }

      // Hide additional padding between last child node and next parent node
      &:last-child {
        padding-bottom: 0;
      }
    }
  }
  li&-treenode-disabled {
    > span:not(.@{tree-prefix-cls}-switcher),
    > .@{tree-prefix-cls}-node-content-wrapper,
    > .@{tree-prefix-cls}-node-content-wrapper span {
      color: @disabled-color;
      cursor: not-allowed;
    }
    > .@{tree-prefix-cls}-node-content-wrapper:hover {
      background: transparent;
    }
  }
  &-icon__open {
    margin-right: 2px;
    vertical-align: top;
  }
  &-icon__close {
    margin-right: 2px;
    vertical-align: top;
  }
  // Tree with line
  &&-show-line {
    li {
      position: relative;
      span {
        &.@{tree-prefix-cls}-switcher {
          color: @tree-showline-icon-color;
          background: @component-background;
          &.@{tree-prefix-cls}-switcher-noop {
            .antTreeShowLineIcon('tree-doc-icon');
          }
          &.@{tree-prefix-cls}-switcher_open {
            .antTreeShowLineIcon('tree-showline-open-icon');
          }
          &.@{tree-prefix-cls}-switcher_close {
            .antTreeShowLineIcon('tree-showline-close-icon');
          }
        }
      }
    }
    li:not(:last-child)::before {
      position: absolute;
      left: 12px;
      width: 1px;
      height: 100%;
      height: calc(100% - 22px); // Remove additional height if support
      margin: 22px 0 0;
      border-left: 1px solid @border-color-base;
      content: ' ';
    }
  }

  &.@{tree-prefix-cls}-icon-hide {
    .@{tree-prefix-cls}-treenode-loading {
      .@{tree-prefix-cls}-iconEle {
        display: none;
      }
    }
  }

  &.@{tree-prefix-cls}-block-node {
    li {
      .@{tree-prefix-cls}-node-content-wrapper {
        width: ~'calc(100% - 24px)';
      }
      span {
        &.@{tree-prefix-cls}-checkbox {
          + .@{tree-prefix-cls}-node-content-wrapper {
            width: ~'calc(100% - 46px)';
          }
        }
      }
    }
  }
}

@import '../../style/themes/index';
@import '../../style/mixins/index';

@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: 8px;
      text-align: center;
      vertical-align: middle;
    }

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

  &&-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: 16px 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;
  &-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: 22px;
    margin-top: 8px;
    font-size: @font-size-base;
    &-name {
      display: inline-block;
      width: 100%;
      padding-left: @font-size-base + 8px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    &-name-icon-count-1 {
      padding-right: 14px;
    }

    &-card-actions {
      position: absolute;
      right: 0;
      opacity: 0;
      &.picture {
        top: 25px;
        line-height: 1;
        opacity: 1;
      }
      .anticon {
        padding-right: 6px;
        color: rgba(0, 0, 0, 0.45);
      }
    }

    &-info {
      height: 100%;
      padding: 0 12px 0 4px;
      transition: background-color 0.3s;

      > span {
        display: block;
        width: 100%;
        height: 100%;
      }

      .@{iconfont-css-prefix}-loading,
      .@{iconfont-css-prefix}-paper-clip {
        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 {
      opacity: 1;
    }

    &-error,
    &-error .@{iconfont-css-prefix}-paper-clip,
    &-error &-name {
      color: @error-color;
    }

    &-error &-card-actions {
      .anticon {
        color: @error-color;
      }
      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: 8px;
      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;
      font-size: 26px;
      line-height: 54px;
      text-align: center;
      opacity: 0.8;
    }

    .@{upload-item}-icon {
      position: absolute;
      top: 50%;
      left: 50%;
      font-size: 26px;
      transform: translate(-50%, -50%);
    }

    .@{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 8px 8px 0;
    }
    .@{upload-item} {
      float: left;
      width: @upload-picture-card-size;
      height: @upload-picture-card-size;
      margin: 0 8px 8px 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-o,
      .@{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;
    }

    .anticon-picture + .@{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-o,
        .@{iconfont-css-prefix}-delete {
          display: none;
        }
      }

      &-text {
        margin-top: 18px;
        color: @text-color-secondary;
      }
    }

    .@{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;
  }
}