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

.vtmn-checkbox[type='checkbox'] + label{
  position:relative;
  display:inline-flex;
  align-items:flex-start;
  font-family:var(--vtmn-typo_font-family);
  font-size:var(--vtmn-typo_text-2-font-size);
  line-height:var(--vtmn-typo_text-2-line-height);
  cursor:pointer;
  -webkit-user-select:none;
     -moz-user-select:none;
          user-select:none;
  color:var(--vtmn-semantic-color_content-primary);
}

.vtmn-checkbox[type='checkbox'] + label::before{
  content:'';
  border-width:0.125rem;
  border-style:solid;
  border-radius:0.0625rem;
  transition:var(--vtmn-transition_focus-visible);
  -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:var(--vtmn-semantic-color_content-inactive);
}

.vtmn-checkbox[type='checkbox']:not(:focus-visible,
:checked,
:disabled):hover
  + label::before{
  box-shadow:0 0 0 0.4375rem var(--vtmn-semantic-color_hover-secondary-transparent);
}

.vtmn-checkbox[type='checkbox']:not(:focus-visible,
:checked,
:disabled):active
  + label::before{
  box-shadow:0 0 0 0.4375rem var(--vtmn-semantic-color_active-secondary-transparent);
}

.vtmn-checkbox[type='checkbox']:not(:focus-visible):checked:not(:disabled):hover
  + label::before{
  box-shadow:0 0 0 0.4375rem var(--vtmn-semantic-color_hover-primary-transparent);
}

.vtmn-checkbox[type='checkbox']:not(:focus-visible):checked:not(
    :disabled
  ):active
  + label::before{
  box-shadow:0 0 0 0.4375rem var(--vtmn-semantic-color_active-primary-transparent);
}

.vtmn-checkbox[type='checkbox']:not(:disabled):focus-visible + label::before{
  box-shadow:var(--vtmn-shadow_focus-visible);
}

.vtmn-checkbox[type='checkbox']:checked + label::before,
.vtmn-checkbox[type='checkbox']:indeterminate + label::before{
  background-color:var(--vtmn-semantic-color_content-active);
  border-color:var(--vtmn-semantic-color_content-active);
}

.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:var(--vtmn-semantic-color_content-primary-reversed);
  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:var(--vtmn-semantic-color_content-primary-reversed);
}

.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:var(--vtmn-opacity_disabled-state);
  cursor:not-allowed;
}

@media screen and (min-width: 600px) and (max-width: 899px){
}

@media screen and (min-width: 900px) and (max-width: 1199px){
}

@media screen and (min-width: 1200px) and (max-width: 1799px){
}

@media screen and (min-width: 1800px){
}