// ============================================================================
// :: Radio
// ============================================================================
.a-radio {
	position: relative;

	+ .a-radio {
		margin-top: 1rem;
	}
}

// ============================================================================
// :: Elements
// ============================================================================
.a-radio__container {
	display: inline-flex;
	align-items: flex-start;

	cursor: pointer;
}

.a-radio__input {

	width: 0;
	margin: 0;
	padding: 0;

	opacity: 0;
	-webkit-appearance: none;
	outline: 0;

	&:checked ~ .a-radio__holder > span {
		opacity: 1;
	}

	&:hover:not(:checked) ~ .a-radio__holder::before,
	&:disabled ~ .a-radio__holder::before,
	&:disabled ~ .a-radio__text {
		opacity: 0.5;
	}

	&:checked + .a-radio__holder {
		border: transparent;

		transition: border 0s ease-in-out 0.3s;

		&::before {
			z-index: 10;

			background: $gradient-primary;
			border: 0.3rem solid $white;
			opacity: 1;

			transform: translateX(-50%) translateY(-50%) scale(0.8);
		}

		&::after {
			opacity: 1;

			transform: translate(-50%, -50%) scale(1);
		}
	}
}

.a-radio__holder {
	position: relative;

	display: inline-block;

	min-width: 2rem;
	height: 2rem;
	margin-right: 1rem;

	border: $border-default-m;
	border-radius: $border-radius-round;
	background-color: $background-color-white;
	color: $text-color-grey;

	transition: border 0s ease-in-out 0s;

	&::before {
		content: "";

		position: absolute;
		top: 50%;
		left: 50%;

		display: block;

		width: 100%;
		height: 100%;

		border-radius: inherit;
		background-color: $background-color-grey;
		opacity: 0;

		transform: translateX(-50%) translateY(-50%) scale(0.6);

		transition: opacity 0.2s ease-in-out;
	}

	&::after {
		content: "";

		position: absolute;
		top: 50%;
		left: 50%;
		z-index: 0;

		display: block;
		width: 100%;
		height: 100%;

		opacity: 0;

		background: $gradient-primary;
		border-radius: $border-radius-round;

		transform: translate(-50%, -50%) scale(0);
		transform-origin: center;
	}
}

.a-radio__text {
	font-family: $font-family-roboto;
	font-weight: $font-weight-thin;
}

.a-radio__info {
	display: block;

	margin-left: 3.6rem;
}

// ============================================================================
// :: States
// ============================================================================
.a-radio {

	&.is-error {

		.a-radio__holder {
			border: $border-error-m;

			&::before {
				background: $ui-color-error;
			}
		}

		.a-radio__error {
			display: flex;
			align-items: flex-end;
			margin-top: 1rem;

			font-family: $font-family-beausans;
			font-weight: $font-weight-semibold;
			line-height: $line-height-normalize;

			color: $ui-color-error;

			&::before {
				margin-right: 1rem;
			}
		}
	}
}

// ============================================================================
// :: Modifiers
// ============================================================================
.a-radio--extra-info {

	.a-radio__holder {
		margin-top: 0.5rem;
	}
}