n8n/packages/design-system/theme/src/radio-button.scss

@use "mixins/mixins";
@use "mixins/_button";
@use "./common/var";

@include mixins.b(radio-button) {
	position: relative;
	display: inline-block;
	outline: none;

	@include mixins.e(inner) {
		display: inline-block;
		line-height: 1;
		white-space: nowrap;
		vertical-align: middle;
		background: var.$button-default-background-color;
		border: var(--border-base);
		font-weight: var(--font-weight-bold);
		border-left: 0;
		color: var.$button-default-font-color;
		-webkit-appearance: none;
		text-align: center;
		box-sizing: border-box;
		outline: none;
		margin: 0;
		position: relative;
		cursor: pointer;
		transition: var.$all-transition;
		border-radius: 0;

		@include button.button-size(
			var.$button-padding-vertical,
			var.$button-padding-horizontal,
			var.$button-font-size
		);

		&:hover {
			color: var(--color-primary);
		}

		& [class*='el-icon-'] {
			line-height: 0.9;

			& + span {
				margin-left: 5px;
			}
		}
	}

	&:first-child {
		.el-radio-button__inner {
			border-left: var(--border-base);
			border-radius: var(--border-radius-base) 0 0 var(--border-radius-base);
			box-shadow: none !important;
		}
	}

	@include mixins.e(orig-radio) {
		opacity: 0;
		outline: none;
		position: absolute;
		z-index: -1;

		&:checked {
			& + .el-radio-button__inner {
				color: var.$radio-button-checked-font-color;
				background-color: var.$radio-button-checked-background-color;
				border-color: var.$radio-button-checked-border-color;
				box-shadow: -1px 0 0 0 var.$radio-button-checked-border-color;
			}
		}

		&:disabled {
			& + .el-radio-button__inner {
				color: var.$button-disabled-font-color;
				cursor: not-allowed;
				background-image: none;
				background-color: var.$button-disabled-background-color;
				border-color: var.$button-disabled-border-color;
				box-shadow: none;
			}
			&:checked + .el-radio-button__inner {
				background-color: var.$radio-button-disabled-checked-fill;
			}
		}
	}

	&:last-child {
		.el-radio-button__inner {
			border-radius: 0 var(--border-radius-base) var(--border-radius-base) 0;
		}
	}

	&:first-child:last-child {
		.el-radio-button__inner {
			border-radius: var(--border-radius-base);
		}
	}

	@include mixins.m(medium) {
		& .el-radio-button__inner {
			border-radius: 0;
			@include button.button-size(
				var.$button-medium-padding-vertical,
				var.$button-medium-padding-horizontal,
				var.$button-medium-font-size
			);
		}
	}
	@include mixins.m(small) {
		& .el-radio-button__inner {
			border-radius: 0;
			@include button.button-size(
				var.$button-small-padding-vertical,
				var.$button-small-padding-horizontal,
				var.$button-small-font-size
			);
		}
	}
	@include mixins.m(mini) {
		& .el-radio-button__inner {
			border-radius: 0;
			@include button.button-size(
				var.$button-mini-padding-vertical,
				var.$button-mini-padding-horizontal,
				var.$button-mini-font-size
			);
		}
	}

	&:focus:not(.is-focus):not(:active):not(.is-disabled) {
		/*获得焦点时 样式提醒*/
		box-shadow: 0 0 2px 2px var.$radio-button-checked-border-color;
	}
}