@import url(~antd/lib/badge/style/index-pure.less);
@import '../../style/themes/index';

@badge-prefix-cls: ~'@{ant-prefix}-badge';
@number-prefix-cls: ~'@{ant-prefix}-scroll-number';
@badge-dot-xxs-size: 5px;

.@{badge-prefix-cls} {
	&-dot {
		background: @error-color;
	}

	&-count {
		box-shadow: 0 0 0 1px solid;
	}
	.@{number-prefix-cls}-custom-component {
		background-color: @component-background;
		width: @badge-height;
		height: @badge-height;

		svg {
			width: @badge-height;
			height: @badge-height;
		}
	}

	&-success {
		.@{badge-prefix-cls}-dot {
			background-color: @success-color;
		}
		.@{number-prefix-cls}-custom-component {
			border-radius: 100%;

			svg {
				color: @success-color;
			}
		}
	}

	&-error {
		.@{number-prefix-cls}-custom-component {
			border-radius: 100%;

			svg {
				color: @error-color;
			}
		}
	}

	&-warning {
		.@{badge-prefix-cls}-dot {
			background-color: @warning-color;
		}
		.@{number-prefix-cls}-custom-component {
			border-radius: 100%;

			svg {
				color: @warning-color;
			}
		}
	}
	&-danger {
		.@{number-prefix-cls}-custom-component {
			border-radius: 100%;

			svg {
				color: @error-color;
			}
		}
	}

	&-information {
		.@{badge-prefix-cls}-status-dot {
			background-color: @blue-base;
		}
		.@{number-prefix-cls}-custom-component {
			border-radius: 100%;

			svg {
				color: @blue-base;
			}
		}
	}

	&-sm {
		.@{number-prefix-cls}-custom-component {
			width: @badge-height-sm;
			height: @badge-height-sm;
			svg {
				width: @badge-height-sm;
				height: @badge-height-sm;
			}
		}
	}

	&-xxs &-dot {
		min-width: @badge-dot-xxs-size;
		width: @badge-dot-xxs-size;
		height: @badge-dot-xxs-size;
	}
	&-status {
		&-text {
			font-size: @font-size-sm;
		}
	}

	.make-color-classes(@i: length(@bdesign-preset-colors)) when (@i > 0) {
		.make-color-classes(@i - 1);
		@color: extract(@bdesign-preset-colors, @i);
		@darkColor: '@{color}-60';
		&-@{color} {
			.@{badge-prefix-cls}-status-dot {
				background: @@darkColor!important;
			}
		}
	}
	.make-color-classes();
}

.@{number-prefix-cls} {
	&-only {
		height: 100%;
	}
}