@use "@db-ui/foundations/build/styles/variables";
@use "@db-ui/foundations/build/styles/colors";
@use "../../styles/internal/form-components";

.db-radio {
	@include form-components.set-default-check-element(radio);

	input {
		border-color: currentcolor;
		border-radius: variables.$db-border-radius-full;

		@media screen and (prefers-reduced-motion: no-preference) {
			transition: border-width variables.$db-transition-duration-fast
				variables.$db-transition-timing-functional;
		}

		&:checked {
			// The radio element still has the default background for the dot on :hover when in checked state
			&:not(:disabled):is(:hover, :focus) {
				background-color: colors.$db-adaptive-bg-basic-transparent-full-default;
			}

			&:not([data-size="small"]) {
				border-width: calc(
					(
							#{form-components.$font-size-height} -
								#{variables.$db-sizing-2xs}
						) /
						2
				);
			}

			&[data-size="small"] {
				border-width: calc(
					(
							#{form-components.$font-size-height} -
								#{variables.$db-sizing-3xs}
						) /
						2
				);
			}
		}

		&:focus-visible {
			// Overwrite default border-radius
			border-radius: variables.$db-border-radius-full;
		}
	}
}