@import '@resources/index.css';

.supt-modal-modules-helper-card {
	@mixin clamp padding-top, 16, 24, $xxs-breakpoint, $lg-breakpoint;
	@mixin clamp padding-right, 24, 32, $xxs-breakpoint, $lg-breakpoint;
	@mixin clamp padding-bottom, 16, 24, $xxs-breakpoint, $lg-breakpoint;
	@mixin clamp padding-left, 24, 32, $xxs-breakpoint, $lg-breakpoint;

	background-color: rgba(255 255 255 / 60%);
	border: 1.5px solid rgba(255 255 255 / 50%);
	border-radius: 18px;

	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 24px;

	transition: border-color 0.2s ease-in-out;
	cursor: pointer;

	&.-is-selected {
		border: 1.5px solid $color-pink;
	}

	&__group {
		@mixin clamp gap, 14, 24, $xxs-breakpoint, $lg-breakpoint;
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 14px;

		&__icon {
			width: 24px;
			height: 24px;
			min-width: 24px;
			min-height: 24px;
		}

		&__label {
			@extend %t-s-normal;
			color: $color-interface-grey-100;
			max-width: 418px;
		}
	}

	&__checkbox {
		&__label {
			&::before,
			&::after {
				content: '';
				position: absolute;
				width: 24px;
				height: 24px;
				top: calc((1.5em - 24px) / 2 - 1px);
				left: 0;
				z-index: 1;
				border-radius: 50%;
			}

			/* Checkbox styles */
			&::before {
				border: 1px solid $color-pink;
				outline: 2px solid transparent;
				transition: outline-color $transition-fast ease-in-out;
			}

			/* Checkbox styles when checked */
			&::after {
				opacity: 0;
				transition: opacity $transition-fast ease-out;

				width: 14px;
				height: 14px;
				top: calc((1.5em - 14px) / 2 - 1px);
				left: calc((24px - 14px) / 2);

				background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='a' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='14' height='14'%3E%3Cpath fill='%23D9D9D9' d='M0 0h14v14H0z'/%3E%3C/mask%3E%3Cg mask='url(%23a)'%3E%3Cpath d='M5.571 10.9664 1.7793 7.1747l1.3125-1.3125L5.571 8.3414l5.3375-5.3375 1.3125 1.3125-6.65 6.65Z' fill='%231C1B1F'/%3E%3C/g%3E%3C/svg%3E");
				background-position: center;
				background-repeat: no-repeat;
				background-size: contain;
			}
		}

		/* state: checked */
		.supt-checkbox__input:checked + .supt-checkbox__label {
			&::before {
				background-color: $color-pink;
				border-color: $color-pink;
			}

			&::after {
				opacity: 1;
			}
		}
	}

	&:hover {
		&:not(.-is-selected) {
			.supt-checkbox__input:not([disabled]) + .supt-checkbox__label {
				&::before {
					background-color: $color-pink-light;
				}
			}
		}
	}
}