@use '../../base/functions' as *;

$tinting: with-opacity(var(--action), 5);
$tinting-dark: with-opacity(var(--action), 5);
$tinting-destroy: with-opacity(var(--fail), 5);
$tinting-destroy-dark: with-opacity(var(--fail), 5);

.radios {
	display: flex;

	label {
		color: var(--ui-text);
	}

	input[type='radio'] + label {
		display: inline-block;
		cursor: pointer;
		position: relative;
		margin-right: 1.5rem;
		padding-left: 2.313rem;

		span {
			display: block;
			font-size: 0.875rem;
			margin-top: 0.25rem;
		}

		&::before,
		&::after {
			transition:
				border-color var(--transition-fast),
				background-color 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
		}

		&::before {
			content: '';
			display: block;
			width: 1.5rem;
			height: 1.5rem;
			margin-right: 0.875rem;
			position: absolute;
			top: -0.1875rem;
			left: 0;
			border-width: 0.125rem;
			border-style: solid;
			box-sizing: border-box;
			border-radius: 50%;
			border-color: var(--ui-stroke);
			background-color: var(--ui-fill);
		}

		&::after {
			content: '';
			display: block;
			position: absolute;
			top: 0.1875rem;
			left: 0.375rem;
			width: 0.75rem;
			height: 0.75rem;
			border-radius: 50%;
			transform: scale(0);
			opacity: 0;
			background-color: var(--action);
		}

		&:hover {
			&::before {
				border-width: 0.125rem;
				border-style: solid;
				border-color: var(--action);
			}

			&::after {
				top: 0.1875rem;
			}
		}

		&.adjust {
			padding-left: 2.375rem;

			&::before {
				top: -0.0625rem;
			}

			&::after {
				top: 0.313rem;
			}
		}
	}

	input[type='radio'] {
		position: absolute;
		opacity: 0;
		width: 1px;
		height: 1px;

		&:checked + label {
			&::before {
				border-width: 0.125rem;
				border-style: solid;
				background-color: $tinting-dark;
				border-color: var(--action);
			}

			&::after {
				transform: scale(1);
				opacity: 1;
			}
		}

		&:focus + label {
			&::before {
				border-width: 0.125rem;
				border-style: solid;
				background-color: $tinting-dark;
				border-color: var(--action);
			}
		}
	}

	&.danger {
		label {
			color: var(--fail);
		}

		input[type='radio'] + label {
			&::before {
				border-width: 0.125rem;
				border-style: solid;
				background-color: $tinting-dark;
				border-color: var(--fail);
			}

			&::after {
				background-color: var(--fail);
			}

			&:hover {
				&::before {
					border-width: 0.125rem;
					border-style: solid;
					border-color: var(--fail);
				}
			}
		}

		input[type='radio']:focus + label {
			&::before {
				border-width: 0.125rem;
				border-style: solid;
				background-color: $tinting-destroy-dark;
				border-color: var(--fail);
			}
		}
	}
}

.radio {
	+ label {
		display: inline-block;
		cursor: pointer;
		position: relative;
		padding-left: 1.875rem;
		margin-right: var(--padding-extra-large);

		span {
			display: block;
			font-size: 0.875rem;
			margin-top: 0.25rem;
		}

		&::before,
		&::after {
			transition:
				border-color var(--transition-fast),
				background-color 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
		}

		&::before {
			content: '';
			display: block;
			width: 1.5rem;
			height: 1.5rem;
			margin-right: 0.875rem;
			position: absolute;
			top: -0.1875rem;
			left: 0;
			border-width: 0.125rem;
			border-style: solid;
			box-sizing: border-box;
			border-radius: 50%;
			background-color: var(--ui-fill);
			border-color: var(--ui-stroke);
		}

		&::after {
			content: '';
			display: block;
			position: absolute;
			top: 0.1875rem;
			left: 0.375rem;
			width: 0.75rem;
			height: 0.75rem;
			border-radius: 50%;
			transform: scale(0);
			opacity: 0;
			background-color: var(--action);
		}

		&:hover {
			&::before {
				border-width: 0.125rem;
				border-style: solid;
				border-color: var(--action);
			}

			&::after {
				top: 0.1875rem;
			}
		}

		&.adjust {
			padding-left: 2.375rem;

			&::before {
				top: -0.0625rem;
			}

			&::after {
				top: 0.313rem;
			}
		}
	}
}

.radio {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;

	&:checked + label {
		&::before {
			border-width: 0.125rem;
			border-style: solid;
			background-color: $tinting-dark;
			border-color: var(--action);
		}

		&::after {
			transform: scale(1);
			opacity: 1;
		}
	}

	&:focus + label {
		&::before {
			border-width: 0.125rem;
			border-style: solid;
			background-color: $tinting-dark;
			border-color: var(--action);
		}
	}

	&.danger {
		label {
			color: var(--fail);
		}

		+ label {
			&::before {
				border-width: 0.125rem;
				border-style: solid;
				background-color: $tinting-destroy-dark;
				border-color: var(--fail);
			}

			&::after {
				background-color: var(--fail);
			}

			&:hover {
				&::before {
					border-width: 0.125rem;
					border-style: solid;
					border-color: var(--fail);
				}
			}
		}

		&:checked + label {
			&::before {
				border-width: 0.125rem;
				border-style: solid;
				background-color: $tinting-destroy-dark;
				border-color: var(--fail);
			}

			&::after {
				background-color: var(--fail);
			}

			&:hover {
				&::before {
					border: 0.125rem solid var(--fail);
				}
			}
		}

		&:focus + label {
			&::before {
				border-width: 0.125rem;
				border-style: solid;
				background-color: $tinting-destroy-dark;
				border-color: var(--fail);
			}
		}
	}
}