fixup! fix(SelectableParticipant): restyle component

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>

src/components/BreakoutRoomsEditor/SelectableParticipant.vue

@@ -4,14 +4,12 @@
 -->
 
 <template>
-	<label :for="participant.attendeeId"
-		class="selectable-participant"
+	<label class="selectable-participant"
 		:class="{ 'selectable-participant--selected': selected }">
-		<input :id="participant.attendeeId"
-			v-model="modelProxy"
+		<input v-model="modelProxy"
 			:value="participant.attendeeId"
 			type="checkbox"
-			class="hidden-visually">
+			class="selectable-participant__checkbox">
 		<!-- Participant's avatar -->
 		<AvatarWrapper :id="participant.actorId"
 			:name="participant.displayName"
@@ -30,7 +28,7 @@
 			</span>
 		</span>
 
-		<IconCheck v-if="selected" class="selectable-participant__check-icon" :size="20" />
+		<IconCheck class="selectable-participant__check-icon" :size="20" />
 	</label>
 </template>
 
@@ -73,10 +71,6 @@ export default {
 				this.$emit('update:checked', value)
 			},
 		},
-
-		selected() {
-			return this.checked.includes(this.participant.attendeeId)
-		},
 	},
 }
 </script>
@@ -104,7 +98,7 @@ export default {
 		box-shadow: 0 0 0 4px var(--color-main-background);
 	}
 
-	&--selected {
+	&:has(input:checked) {
 		background-color: var(--color-primary-light);
 
 		&:hover,
@@ -115,6 +109,17 @@ export default {
 		}
 	}
 
+	&:has(input:checked) &__check-icon {
+		display: flex;
+	}
+
+	&__checkbox {
+		position: absolute;
+		top: 0;
+		left: 0;
+		z-index: -1;
+	}
+
 	&__content {
 		display: flex;
 		flex-direction: column;
@@ -130,6 +135,7 @@ export default {
 	}
 
 	&__check-icon {
+		display: none;
 		margin-left: auto;
 		width: var(--default-clickable-area);
 	}