@import (reference) "./variables.less";

.@{radio-prefix} {
	.appearance();
	.touch-action();
	.outline();

	position: relative;
	display: inline-block;
	width: @radio-size;
	height: @radio-size;
	padding: 0;
	margin-block: calc(@radio-gap + @radio-border-width) @radio-gap;
	margin-inline: @radio-gap;
	background-color: var(--input-bg);
	border: @radio-border-width @border-style var(--input-border);
	border-radius: @radio-border-radius;
	font-size: @font-size-medium;
	vertical-align: middle;
	cursor: pointer;
	transition: @transition-speed-fast @transition-easing;
	transition-property: outline, border, background-color;
	z-index: 1;

	&::before {
		@c: (@radio-size + @radio-gap * 2);

		content: "";
		position: relative;
		display: block;
		inset-block-start: calc(-@radio-gap - (@radio-border-width * 2));
		inset-inline-start: calc(-@radio-gap - (@radio-border-width * 2));
		width: calc(@c + (@radio-border-width * 2));
		height: calc(@c + (@radio-border-width * 2));
	}

	&:hover,
	&:focus {
		border-color: var(--input-border-hover);
	}

	&:active {
		border-color: var(--input-border-active);
		border-width: @radio-border-width-focus;
	}

	&:where([checked], :checked) {
		border-color: var(--input-border-active);
		border-width: @radio-border-width-active;

		&:hover,
		&:focus {
			border-color: var(--input-border-active);
		}
	}

	&-wrapper {
		position: relative;
		display: inline-flex;
		align-items: flex-start;
		vertical-align: middle;
		z-index: 1;
	}

	&-label {
		.user-select();
		.touch-action();

		display: inline-block;
		padding-block: @radio-label-padding-block;
		padding-inline: @radio-label-padding-inline;
		font-size: @font-size-medium;
		color: var(--input-color);
		vertical-align: middle;
		cursor: pointer;
		transition: color @transition-speed-fast @transition-easing;
	}

	&:where([disabled], :disabled) {
		cursor: not-allowed;

		&,
		&:hover,
		&:focus,
		&:active {
			background-color: var(--input-bg-disabled);
			border-color: var(--input-border-disabled);
			border-width: @border-width-medium;

			&:where([checked], :checked) {
				border-width: @radio-border-width-active;
			}
		}

		& ~ .@{radio-prefix}-label {
			color: var(--text-disabled);
			cursor: not-allowed;
		}
	}
}