@use "../../00-base/colors/colors";
@use "../../00-base/mixin/core.mixin";

/*** TODO: Hover Style ***/

.hoo-radio{
	&:checked,
	&:not(:checked){
		position: absolute;
		left: -9999px;
	}

	&:checked + label,
	&:not(:checked) + label{
		font-size: core.px2rem(16px);
		line-height: 20px;

		position: relative;

		display: flex;

		padding-left: 28px;

		cursor: pointer;

		color: colors.$neutral-700;
	}

	&:checked + label:before,
	&:not(:checked) + label:before{
		position: absolute;
		top: 0;
		left: 0;

		width: 18px;
		height: 18px;

		content: "";

		border: 1px colors.$neutral-450 solid;
		border-radius: 100%;
		background: #fff;
	}

	&:hover:checked + label:before{
		border-color: colors.$theme-900;
	}
	&:checked + label:before{
		border-color: colors.$theme-600;
	}
	&:active:checked + label:before{
		border-color: colors.$theme-600;
	}
	&:active:not(:checked) + label:before{
		border-color: colors.$theme-600;
	}

	&:checked + label:after,
	&:not(:checked) + label:after{
		position: absolute;
		top: 4px;
		left: 4px;

		width: 12px;
		height: 12px;

		content: "";
		transition: all .2s ease;

		border-radius: 100%;
		background: colors.$theme-600;
	}

	&:checked:hover + label:after,
	&:not(:checked):hover + label:after{
		position: absolute;
		top: 4px;
		left: 4px;

		width: 12px;
		height: 12px;

		content: "";
		transition: all .2s ease;

		border-radius: 100%;
		background: colors.$neutral-450;
	}

	// &:hover:checked + label:after,
	&:hover:not(:checked):hover + label:after{
		position: absolute;
		top: 4px;
		left: 4px;

		width: 12px;
		height: 12px;

		content: "";
		transition: all .2s ease;

		border-radius: 100%;
		background: colors.$neutral-450;
	}

	&:hover:checked + label:after{
		// ???
		// background-color: magenta
	}

	&:hover:checked + label:after{
		background: colors.$theme-900;
		// background: lime;
	}

	&:active:checked:hover + label:after,
	&:active:not(:checked):hover + label:after{
		position: absolute;
		top: 4px;
		left: 4px;

		width: 12px;
		height: 12px;

		content: "";
		transition: all .2s ease;

		border-radius: 100%;
		background: colors.$theme-600;
	}

	&:not(:checked) + label:after{
		transform: scale(0);

		opacity: 0;
	}

	&:hover:not(:disabled):not(:checked) + label:after,
	&:checked + label:after{
		transform: scale(1);

		opacity: 1;
	}
	&:disabled + label{
		color: colors.$neutral-400;
	}
	&:disabled + label:before{
		border-color: colors.$neutral-400;
	}
}