/* ===== Checkbox v2 (Common) =====
   Usage:
     <div data-skin="v2">
        ...
       <input type="checkbox" class="common-checkbox-v2">
     </div>
*/

[data-skin="v2"] .common-checkbox-v2 {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  width: 18px;                
  height: 18px;

  border: 2px solid #000;     
  border-radius: 3px;
  background-color: #fff;      
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 14px 14px;

  display: inline-block;
  position: relative;
  cursor: pointer;
  vertical-align: middle;
  margin: 0;
  padding: 0;

  pointer-events: auto;        
  transition: box-shadow .15s ease, transform .06s ease, border-color .15s ease;
}


[data-skin="v2"] .common-checkbox-v2:checked {
  background-color: #fff !important;  
  border-color: #000 !important;       
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'>\
  <path d='M4 9.5l3 3 7-7' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/>\
</svg>") !important;
}

/* Hover / Focus */
[data-skin="v2"] .common-checkbox-v2:hover {
  box-shadow: 0 0 0 3px rgba(0,0,0,.05);
}
[data-skin="v2"] .common-checkbox-v2:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0,0,0,.12);
}

/* Active press */
[data-skin="v2"] .common-checkbox-v2:active {
  transform: scale(0.98);
}

/* Disabled */
[data-skin="v2"] .common-checkbox-v2:disabled {
  opacity: .5;
  cursor: not-allowed;
  box-shadow: none;
}

/* Indeterminate (optional) */
[data-skin="v2"] .common-checkbox-v2:indeterminate {
  background-color: #fff !important;
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'>\
  <path d='M4 9h10' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round'/>\
</svg>") !important;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 12px 12px;
}


[data-skin="v2"] .common-checkbox-v2 {
  accent-color: #000;  /* will render a native black checkbox where supported */
}