@import "../../styles/global.scss";
@import "../../styles/variables.scss";

.radio-button {
	width: fit-content;
	.radio-label {
		color: $color-core-ink-base;
		font-size: $size-core-body;
		line-height: 22px;
		display: flex;
		align-items: center;
		cursor: pointer;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
		.radio-input {
			display: none;
		}
		.custom-radio-input {
			position: relative;
			height: 14px;
			width: 14px;
			background-color: white;
			border-radius: 50%;
			margin-right: 8px;
			margin-bottom: 2px;
			border: 1px solid $color-core-grey-base;
			&::after {
				content: "";
				position: absolute;
				display: none;
			}
		}
		.custom-radio-input-checked {
			background-color: $color-font-blue;
			border: 1px solid $color-font-blue;
			&::after {
				display: block;
				top: 5px;
				left: 5px;
				width: 4px;
				height: 4px;
				border-radius: 50%;
				background: white;
			}
		}
		&:hover {
			.custom-radio-input {
				background-color: $color-core-blue-lighter;
				border: 1px solid $color-core-blue-lighter;
				&::after {
					display: block;
					top: 5px;
					left: 5px;
					width: 4px;
					height: 4px;
					border-radius: 50%;
					background: white;
				}
			}
			.custom-radio-input-checked {
				background-color: $color-core-blue-dark;
				border: 1px solid $color-core-blue-dark;
			}
		}
	}
	.radio-label-disabled {
		cursor: not-allowed;
		color: $color-core-ink-lightest;
		.custom-radio-input-checked {
			background-color: $color-core-blue-lighter;
			border: 1px solid $color-core-blue-lighter;
		}
		&:hover {
			.custom-radio-input {
				background-color: white;
				border: 1px solid $color-core-grey-base;
			}
			.custom-radio-input-checked {
				background-color: $color-core-blue-lighter;
				border: 1px solid $color-core-blue-lighter;
			}
		}
	}
}