/*
 * WebCheck — casilla de verificación.
 *
 * Aquí solo va el aspecto, y todo por variables que escribe el control: sin valores de
 * reserva en los `var()`, porque el control las escribe siempre todas.
 */

.web-check {
  display: flex;
  align-items: center;
  gap: var(--web-check-gap);
  width: 100%;
  height: 100%;
  min-width: 0;
  box-sizing: border-box;
  cursor: pointer;
  user-select: none;
}

/* Con la etiqueta a la izquierda no se cambia el orden del DOM —el <input> sigue delante,
   que es lo que leen los lectores de pantalla—: se cambia solo cómo se pintan. */
.web-check[data-label-position="left"] {
  flex-direction: row-reverse;
  justify-content: flex-end;
}

.web-check__input {
  flex: none;
  width: var(--web-check-size);
  height: var(--web-check-size);
  margin: 0;
  accent-color: var(--web-check-accent);
  cursor: inherit;
}

.web-check__text {
  min-width: 0;
  color: var(--web-check-text-color);
  font-size: var(--web-check-text-size);
  font-weight: var(--web-check-text-weight);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Deshabilitada: se ve, pero se ve que no se puede tocar. */
.web-check:has(.web-check__input:disabled) {
  cursor: default;
  opacity: 0.55;
}