.radio-button {
	-fx-label-padding: 0.0em 0.0em 0.0em 0.416667em;

	> .radio {
		-fx-background-color: -ControlStrongStrokeColorDefaultBrush, #ededed;
		-fx-background-insets: 0, 1;
		-fx-background-radius: 20, 19;
		-fx-pref-width: 20;
		-fx-pref-height: 20;
		-fx-text-fill: -fx-text-base-color;
		-fx-alignment: CENTER;
		-fx-content-display: LEFT;

		> .dot {
			-fx-background-color: transparent;
			-fx-background-radius: 14;
			-fx-max-width: 12;
			-fx-max-height: 12;
			transition: -fx-max-width 0.2s, -fx-max-height 0.2s;
		}
	}

	&:hover > .radio {
		-fx-background-color: -ControlStrongStrokeColorDefaultBrush, #e5e5e5;
		-fx-text-fill: #1b1b1b;
	}
	&:armed > .radio {
		-fx-background-color: #b9b9b9, #dcdcdc;
		-fx-text-fill: #5d5d5d;

		> .dot {
			-fx-background-color: #ffffff;
			-fx-max-width: 10;
			-fx-max-height: 10;
			transition: -fx-max-width 0.2s, -fx-max-height 0.2s;
		}
	}
	&:selected > .radio {
		-fx-background-color: -fx-accent, -fx-accent;

		> .dot {
			-fx-background-color: #ffffff;
		}
	}
	&:selected:hover > .radio > .dot {
		-fx-max-width: 14;
		-fx-max-height: 14;
		transition: -fx-max-width 0.2s, -fx-max-height 0.2s;
	}
	&:selected:armed > .radio > .dot {
		-fx-max-width: 10;
		-fx-max-height: 10;
		transition: -fx-max-width 0.2s, -fx-max-height 0.2s;
	}

	/* TODO focus style */
	&:focus-visible > .radio {
	}
	&:focus-visible:hover > .radio {
	}
}
