/* 1. Container for the whole checkbox component */
.custom-checkbox {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    font-family: sans-serif;
    font-size: 1.6rem;
    user-select: none;
  }
  
  /* 2. Hide the default native checkbox */
  .custom-checkbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
  }
  
  /* 3. Create the custom checkbox box */
  .checkmark {
    position: relative;
    display: inline-block;
    height: 2rem;
    width: 2rem;
    background-color: var(--light-bg-secondary);
    border: .2rem solid var(--light-border-color);
    border-radius: .4rem; /* Gives it slightly rounded corners */
    margin-right: 1rem;
    transition: all 0.1s ease-in-out;
  }

  .custom-checkbox input:disabled ~ .checkmark,
   .custom-checkbox input:checked:disabled ~ .checkmark {
    background-color: var(--dark-text-secondary);
  }
  
  /* Hover effect on the box */
  .custom-checkbox:hover input ~ .checkmark {
    background-color: var(--light-bg-tertiary);
  }
  
  /* 4. Style when the checkbox is checked */
  .custom-checkbox input:checked ~ .checkmark {
    background-color: var(--dark-accent); /* Modern blue color */
    border-color: var(--dark-accent);
  }
  
  /* 5. Create the checkmark indicator (hidden by default) */
  .checkmark::after {
    content: "";
    position: absolute;
    display: none;
    
    /* Make a tiny white rectangle, then tilt it to look like a checkmark */
    left: .5rem;
    top: 0;
    width: .4rem;
    height: 1rem;
    border: solid white;
    border-width: 0 .2rem .2rem 0;
    transform: rotate(45deg);
  }
  
  /* Display the checkmark when checked */
  .custom-checkbox input:checked ~ .checkmark::after {
    display: block;
  }
  
  /* 6. Focus state for Accessibility (Keyboard users) */
  .custom-checkbox input:focus-visible ~ .checkmark {
    outline: .2rem solid var(--dark-accent);
    outline-offset: .2rem;
  }