.vtmn-checkbox[type='checkbox']{
  position:absolute;
  opacity:0;
}

.vtmn-checkbox[type='checkbox'] + label{
  position:relative;
  display:inline-flex;
  align-items:flex-start;
  font-family:'Roboto', 'system-ui', '-apple-system', sans-serif;
  font-size:1rem;
  line-height:1.5;
  cursor:pointer;
  -webkit-user-select:none;
     -moz-user-select:none;
          user-select:none;
  color:hsl(200, 100%, 4.7%);
}

.vtmn-checkbox[type='checkbox'] + label::before{
  content:'';
  border-width:0.125rem;
  border-style:solid;
  border-radius:0.0625rem;
  transition:box-shadow 200ms ease-out;
  -webkit-margin-before:0.1875rem;
          margin-block-start:0.1875rem;
  -webkit-margin-end:0.6875rem;
          margin-inline-end:0.6875rem;
  padding:0.4375rem;
  border-color:hsl(213, 10.6%, 59.2%);
}

.vtmn-checkbox[type='checkbox']:not(:focus-visible,
:checked,
:disabled):hover
  + label::before{
  box-shadow:0 0 0 0.4375rem hsla(200, 100%, 4.7%, 0.05);
}

.vtmn-checkbox[type='checkbox']:not(:focus-visible,
:checked,
:disabled):active
  + label::before{
  box-shadow:0 0 0 0.4375rem hsla(200, 100%, 4.7%, 0.15);
}

.vtmn-checkbox[type='checkbox']:not(:focus-visible):checked:not(:disabled):hover
  + label::before{
  box-shadow:0 0 0 0.4375rem hsla(200, 100%, 36.9%, 0.05);
}

.vtmn-checkbox[type='checkbox']:not(:focus-visible):checked:not(
    :disabled
  ):active
  + label::before{
  box-shadow:0 0 0 0.4375rem hsla(200, 100%, 36.9%, 0.15);
}

.vtmn-checkbox[type='checkbox']:not(:disabled):focus-visible + label::before{
  box-shadow:0 0 0 0.25rem hsl(210, 14.3%, 94.5%), 0 0 0 0.375rem hsl(200, 100%, 4.7%);
}

.vtmn-checkbox[type='checkbox']:checked + label::before{
  background-color:hsl(200, 100%, 36.9%);
  border-color:hsl(200, 100%, 36.9%);
}

.vtmn-checkbox[type='checkbox']:indeterminate + label::before{
  background-color:hsl(200, 100%, 36.9%);
  border-color:hsl(200, 100%, 36.9%);
}

.vtmn-checkbox[type='checkbox'] + label::after{
  content:'';
  -webkit-mask:url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.80351 10.8L14.2875 2.31484L12.5907 0.618038L5.80351 7.40644L2.40871 4.01164L0.711914 5.70844L5.80351 10.8Z'/%3E%3C/svg%3E");
          mask:url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.80351 10.8L14.2875 2.31484L12.5907 0.618038L5.80351 7.40644L2.40871 4.01164L0.711914 5.70844L5.80351 10.8Z'/%3E%3C/svg%3E");
  -webkit-mask-size:cover;
          mask-size:cover;
  position:absolute;
  block-size:1.125rem;
  inline-size:1.125rem;
  inset-block-start:0.4375rem;
  inset-inline-start:0.125rem;
  background-color:hsl(0, 0%, 100%);
  transition:all 0.2s;
}

.vtmn-checkbox[type='checkbox']:indeterminate + label::after{
  content:'';
  -webkit-mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.333 7.333h9.334v1.334H3.333V7.333z' stroke-width='10'/%3E%3C/svg%3E");
          mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.333 7.333h9.334v1.334H3.333V7.333z' stroke-width='10'/%3E%3C/svg%3E");
  -webkit-mask-size:cover;
          mask-size:cover;
  position:absolute;
  block-size:1.25rem;
  inline-size:1.25rem;
  inset-block-start:0.125rem;
  inset-inline-start:-0.0625rem;
  background-color:hsl(0, 0%, 100%);
}

.vtmn-checkbox[type='checkbox']:not(:checked) + label::after,
.vtmn-checkbox[type='checkbox']:not(:indeterminate) + label::after{
  opacity:0;
  transform:scale(0) rotate(45deg);
}

.vtmn-checkbox[type='checkbox']:checked + label::after,
.vtmn-checkbox[type='checkbox']:indeterminate + label::after{
  opacity:1;
  transform:scale(1) rotate(0);
}

.vtmn-checkbox[type='checkbox']:disabled + label{
  opacity:0.38;
  cursor:not-allowed;
}