.Polaris-RadioButton {
	position: relative;
}
.Polaris-RadioButton__Input {
	margin: 0;
	padding: 0;
	opacity: 0;
	&:active+.Polaris-RadioButton__Backdrop {
		background: $radio-input-active-backdrop-bgcolor;
		box-shadow: $radio-input-active-backdrop-box-shadow;
		&:after {
			background: $radio-input-active-backdrop-after-bgcolor;
			@media (-ms-high-contrast:active) {
				border: 1px dashed buttonText;
			}	
		}
	}
	&:checked+.Polaris-RadioButton__Backdrop {
		background: $radio-input-checked-backdrop-bgcolor;
	}
	&:focus+.Polaris-RadioButton__Backdrop {
		background: $radio-input-focus-backdrop-bgcolor;
		box-shadow: $radio-input-focus-backdrop-box-shadow;
		&:after {
			background: $radio-input-focus-backdrop-after-bgcolor;
			@media (-ms-high-contrast:active) {
				border: 1px dashed buttonText;
			}	
		}
	}
	&:checked~.Polaris-RadioButton__Icon {
		transform: translate(-50%,-50%) scale(1);
		transition: all 0.3s;
	}
	&:disabled+.Polaris-RadioButton__Backdrop {
		background: $radio-input-disabled-backdrop-bgcolor;
		box-shadow: $radio-input-disabled-backdrop-box-shadow;
		@media (-ms-high-contrast:active) {
			color: grayText;
		}
		&:after {
			background: $radio-input-disabled-backdrop-after-bgcolor;
		}
	}
	&:disabled~.Polaris-RadioButton__Icon {
		background-color: $radio-input-disabled-icon;
	}
}
.Polaris-RadioButton__Backdrop {
	background-color: $radio-backdrop-bgcolor;
	border: $radio-backdrop-border;
	box-shadow: $radio-backdrop-box-shadow;
	border-radius: 3px;
	transition-property: box-shadow,background-color;
	transition-duration: .2s;
	transition-timing-function: cubic-bezier(.64,0,.35,1);
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	border-radius: $radio-backdrop-border-radius;
	@media (-ms-high-contrast:active) {
		background: transparent;
		border: 2px solid buttonText;
		transition: none;
		color: rgba(223,227,232,.3);
	}

	&:after {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		display: block;
		background: $radio-backdrop-after-bgcolor;
		border-radius: 2px;
		border-radius: $radio-backdrop-border-radius;
		@media (-ms-high-contrast:active) {
			top: -4px;
			right: -4px;
			bottom: -4px;
			left: -4px;
			background: none;
			border-radius: 4px;
		}
	}
}
.Polaris-RadioButton__Icon {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%) scale(0);
	transform-origin: 50% 50%;
	height: 50%;
	width: 50%;
	background: $radio-icon-bgcolor;
	border-radius: $radio-backdrop-border-radius;
	transition: all 0.3s;
	@media (-ms-high-contrast:active) {
		background: windowText;
	}
}