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

@radio-border-color-base: @gray-30;
@radio-disabled-bg: @secondary-component-background;
@radio-button-focus-shadow: none;
@icon-prefix-cls: ~'@{ant-prefix}-icon';

span.@{radio-prefix-cls} + * {
	padding-right: 0;
	padding-left: @component-interval-base;
}

.@{radio-prefix-cls} {
	&-inner {
		border-color: @radio-border-color-base;
		&::after {
			position: absolute;
			top: ((@radio-size - @radio-dot-size) / 2) - @radio-border-width;
			left: ((@radio-size - @radio-dot-size) / 2) - @radio-border-width;
			display: block;
			margin-top: 0;
			margin-left: 0;
			transform: scale(0);
			opacity: 0;
			width: @radio-dot-size;
			height: @radio-dot-size;
			transition: all @radio-duration @ease-in-out-circ;
			content: ' ';
		}
	}
}

//hover状态
.@{radio-prefix-cls} {
	.@{radio-prefix-cls}-wrapper:hover &:not(&-checked):not(&-disabled) &-inner,
	&:hover &:not(&-checked):not(&-disabled) &-inner {
		border-color: @cloud-gray-50;
		// outline: 4px solid @cloud-gray-10;
		box-shadow: 0 0 0 4px @cloud-gray-10;
	}
}

// 选中状态
.@{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} {
		// Adding !important following antd style.
		background-color: @normal-background;
		border-color: @radio-dot-disabled-border-color !important;
	}
}

.@{radio-prefix-cls}-disabled.@{radio-prefix-cls}-checked {
	.@{radio-inner-prefix-cls} {
		border-color: @radio-dot-disabled-checked-border-color!important;
		background-color: @radio-dot-disabled-checked-border-color;

		&::after {
			background-color: @radio-dot-disabled-color;
		}
	}
}

.@{radio-prefix-cls}-wrapper {
	align-items: center;

	.@{radio-prefix-cls} {
		top: unset;
	}
}

// ======================= vertical ==========================
// Remove OnClick animation
.@{radio-prefix-cls} {
	&-input:focus + .@{radio-inner-prefix-cls} {
		box-shadow: initial;
	}

	&-checked::after {
		content: none;
	}
}

.@{radio-prefix-cls}-button-wrapper {
	border-top-width: 1px;
}
// ======================= Size ==========================

.@{radio-prefix-cls}-wrapper-small,
.@{radio-group-prefix-cls}-small .@{radio-prefix-cls}-wrapper {
	.@{radio-prefix-cls}-inner {
		&::after {
			top: ((@radio-size-sm - @radio-dot-size-sm) / 2) - @radio-border-width;
			left: ((@radio-size-sm - @radio-dot-size-sm) / 2) - @radio-border-width;
			width: @radio-dot-size-sm;
			height: @radio-dot-size-sm;
			border-radius: @radio-dot-size-sm;
		}

		width: @radio-size-sm;
		height: @radio-size-sm;
	}

	.@{icon-prefix-cls} {
		font-size: @font-size-base;
	}
	font-size: @font-size-sm;
}

// Large Size Radio, or Radios within Large Size Group
.@{radio-prefix-cls}-wrapper-large,
.@{radio-group-prefix-cls}-large .@{radio-prefix-cls}-wrapper {
	font-size: @radio-font-size-lg;

	.@{radio-prefix-cls} {
		font-size: @radio-font-size-lg;
	}

	.@{radio-prefix-cls}-inner {
		&::after {
			top: ((@radio-size-lg - @radio-dot-size-lg) / 2) - @radio-border-width;
			left: ((@radio-size-lg - @radio-dot-size-lg) / 2) - @radio-border-width;
			width: @radio-dot-size-lg;
			height: @radio-dot-size-lg;
			border-radius: @radio-dot-size-lg;
		}

		width: @radio-size-lg;
		height: @radio-size-lg;
	}

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

// XL Size Radio, or Radios within Xl Size Group
.@{radio-prefix-cls}-wrapper-xl,
.@{radio-group-prefix-cls}-xl .@{radio-prefix-cls}-wrapper {
	font-size: @radio-font-size-xl;

	.@{radio-prefix-cls} {
		font-size: @radio-font-size-xl;
	}

	.@{radio-prefix-cls}-inner {
		&::after {
			top: ((@radio-size-xl - @radio-dot-size-xl) / 2) - @radio-border-width;
			left: ((@radio-size-xl - @radio-dot-size-xl) / 2) - @radio-border-width;
			width: @radio-dot-size-xl;
			height: @radio-dot-size-xl;
			border-radius: @radio-dot-size-xl;
		}

		width: @radio-size-xl;
		height: @radio-size-xl;
	}
}

// xs Size Radio, or Radios within xs Size Group

.@{radio-group-prefix-cls} {
	white-space: nowrap;
	& .@{radio-prefix-cls}-button-wrapper {
		padding: 0 @radio-button-wrapper-padding;

		.@{icon-prefix-cls} {
			font-size: @font-size-lg;
		}
	}
	& .@{radio-prefix-cls}-button + span {
		display: inline-flex;
		align-items: center;
		height: 100%;
		gap: calc(@margin-xss + 2px);
	}

	&&-small .@{radio-prefix-cls}-button-wrapper {
		font-size: @font-size-sm;
		padding: 0 @radio-button-wrapper-padding-xs;
		.@{icon-prefix-cls} {
			font-size: @font-size-base;
		}
		.@{radio-prefix-cls}-button + span {
			gap: @margin-xss;
		}
	}

	&&-xs .@{radio-prefix-cls}-button-wrapper {
		height: @radio-button-size-xs;
		line-height: @radio-button-size-xs - 2 * @radio-border-width;
		padding: 0 @radio-button-wrapper-padding-xs;
		font-size: @font-size-sm;

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

		.@{radio-prefix-cls}-button + span {
			gap: @margin-xss;
		}
	}

	&&-large .@{radio-prefix-cls}-button-wrapper {
		padding: 0 @radio-button-wrapper-padding;
		font-size: @radio-font-size-lg;
		.@{icon-prefix-cls} {
			font-size: @font-size-lg;
		}
	}
}

// ======================= Outline Group ==========================
.@{radio-group-prefix-cls}.@{radio-group-prefix-cls}-outline {
	.@{radio-prefix-cls}-button-wrapper {
		&:not(&-disabled):not(&-checked):hover {
			color: @radio-button-color;
			border-color: @cloud-gray-50;
			&:before {
				background-color: @cloud-gray-50;
			}

			&
				+ .@{radio-prefix-cls}-button-wrapper:not(.@{radio-prefix-cls}-button-wrapper-disabled):not(.@{radio-prefix-cls}-button-wrapper-checked) {
				&:before {
					background-color: @cloud-gray-50;
				}
			}
		}
		&-checked:not(.@{radio-prefix-cls}-button-wrapper-disabled) {
			border-color: @primary-color!important;
			color: @primary-color!important;
		}
	}
}
// ======================= Solid Group ==========================
.@{radio-group-prefix-cls}.@{radio-group-prefix-cls}-solid {
	.@{radio-prefix-cls}-button-wrapper {
		border-color: transparent;

		&-checked:not(.@{radio-prefix-cls}-button-wrapper-disabled):hover {
			background: @primary-color;
			color: @white;
		}

		&-disabled.@{radio-prefix-cls}-button-wrapper-checked {
			background-color: @component-background-active;
		}

		// Separator
		&:not(:first-child)::before {
			top: 50%;
			height: 18px;
			transform: translateY(-50%);
			background-color: @border-color-split;
			transition: opacity 0.3s;
			padding: 0;
		}
	}

	.@{radio-prefix-cls}-button-wrapper-checked {
		&::before {
			opacity: 0;
		}
		& + .@{radio-prefix-cls}-button-wrapper::before {
			opacity: 0;
		}
	}
}

// // ======================= Container Group ==========================
.container-size(@radio-btn-size,@radio-button-comtainer-padding,@icon-size:@font-size-lg) {
	.@{radio-prefix-cls}-button-wrapper {
		height: @radio-btn-size;
		line-height: @radio-btn-size;
		border-top-width: 1px;
		.@{icon-prefix-cls} {
			font-size: @icon-size;
		}
		.@{radio-prefix-cls}-button {
			top: @radio-button-comtainer-padding - @radio-border-width;
			left: @radio-button-comtainer-padding - @radio-border-width;
			right: @radio-button-comtainer-padding - @radio-border-width;
			bottom: @radio-button-comtainer-padding - @radio-border-width;
			height: calc(@radio-btn-size - 2 * @radio-button-comtainer-padding);
		}
	}
}

.@{radio-group-prefix-cls}.@{radio-group-prefix-cls}-container {
	.@{radio-prefix-cls}-button-wrapper {
		// background-color: @normal-background;
		border-color: @cloud-gray-20;
		border-top-width: 1px;
		color: @radio-button-container-color;
		&:not(:last-child) {
			border-right-width: 0;
		}

		&:not(.@{radio-prefix-cls}-button-wrapper-disabled):hover {
			background-color: @white;

			& > .@{radio-prefix-cls}-button {
				background-color: @component-background-hover;
			}
		}

		&:before {
			content: none;
		}

		& > .@{radio-prefix-cls}-button {
			background-color: transparent;
			transition: background-color @radio-duration @ease-in-out-circ;
			top: @radio-button-wrapper-container-padding-md - @radio-border-width;
			left: @radio-button-wrapper-container-padding-md - @radio-border-width;
			right: @radio-button-wrapper-container-padding-md - @radio-border-width;
			bottom: @radio-button-wrapper-container-padding-md - @radio-border-width;
			width: initial;
			height: calc(@radio-button-size-md - 2 * @radio-button-wrapper-container-padding-md);
			border-radius: @border-radius-base;
			z-index: 0;

			& ~ * {
				position: relative;
			}
		}

		&-checked {
			color: @cloud-gray-100!important;
		}

		&-checked > .@{radio-prefix-cls}-button {
			background-color: @component-background-hover;
		}

		&-checked:not(.@{radio-prefix-cls}-wrapper-disabled).@{radio-prefix-cls}-button-wrapper:first-child {
			border-right-color: transparent;
		}

		&-disabled {
			color: @disabled-color;
			background-color: @white;
			.@{radio-prefix-cls}-button {
				background-color: @white;
			}
		}

		&-disabled.@{radio-prefix-cls}-button-wrapper-checked {
			color: @disabled-color!important;
			& > .@{radio-prefix-cls}-button {
				background-color: @component-background-hover;
			}
		}
	}

	&.@{radio-group-prefix-cls}-large {
		.container-size(@radio-button-size-lg,@radio-button-wrapper-container-padding-lg,@font-size-lg);
	}

	&.@{radio-group-prefix-cls}-small {
		.container-size(@radio-button-size-sm,@radio-button-wrapper-container-padding-sm,@font-size-base);
	}

	&.@{radio-group-prefix-cls}-xs {
		.container-size(@radio-button-size-xs,@radio-button-wrapper-container-padding-sm,@font-size-sm);
	}
}