.vtmn-toggle{
  display:flex;
  align-items:center;
}

.vtmn-toggle_switch{
  position:relative;
  display:inline-block;
  inline-size:3.5rem;
  block-size:2rem;
}

.vtmn-toggle_switch input[type='checkbox']{
  inline-size:100%;
  block-size:100%;
  cursor:pointer;
  margin:0;
  outline:none;
  opacity:0;
}

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

.vtmn-toggle_switch input[type='checkbox']:checked + span::before{
  transform:translateX(1.5rem);
}

.vtmn-toggle_switch input[type='checkbox']:checked + span::after{
  transform:translateX(1.5rem);
  opacity:1;
}

.vtmn-toggle_switch
  input[type='checkbox']:not([disabled]):hover
  + span::before{
  box-shadow:0 0 0 0.75rem hsla(200, 100%, 4.7%, 0.05);
}

.vtmn-toggle_switch
  input[type='checkbox']:not([disabled]):active
  + span::before{
  box-shadow:0 0 0 0.75rem hsla(200, 100%, 4.7%, 0.15);
}

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

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

.vtmn-toggle_switch input[type='checkbox']:focus-visible + span{
  outline:none;
  box-shadow:0 0 0 0.25rem hsl(210, 14.3%, 94.5%), 0 0 0 0.375rem hsl(200, 100%, 4.7%);
}

.vtmn-toggle_switch span{
  position:absolute;
  inset-block-start:0;
  inset-inline-start:0;
  inline-size:100%;
  block-size:100%;
  background-color:hsl(213, 10.6%, 59.2%);
  transition:background-color 0.2s ease-out, box-shadow 200ms ease-out;
  border-radius:16px;
  pointer-events:none;
}

.vtmn-toggle_switch span::before{
  position:absolute;
  content:'';
  block-size:1.5rem;
  inline-size:1.5rem;
  inset-inline-start:0.25rem;
  inset-block-start:0.25rem;
  background-color:hsl(
    0,
    0%,
    100%
  );
  transition:box-shadow 200ms ease-out, transform 0.2s ease-out, background-color 0.2s ease-out;
  border-radius:50%;
}

.vtmn-toggle_switch span::after{
  content:'';
  -webkit-mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' 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 viewBox='0 0 24 24' 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;
  inline-size:1.5rem;
  block-size:1.5rem;
  inset-block-start:0.625rem;
  inset-inline-start:0.5625rem;
  background-color:hsl(200, 100%, 36.9%);
  transition:box-shadow 200ms ease-out, transform 0.2s ease-out, background-color 0.2s ease-out;
  opacity:0;
}

.vtmn-toggle label{
  font-family:'Roboto', 'system-ui', '-apple-system', sans-serif;
  color:hsl(200, 100%, 4.7%);
  font-size:1rem;
  -webkit-margin-start:0.75rem;
          margin-inline-start:0.75rem;
}

.vtmn-toggle input[type='checkbox']:disabled{
  cursor:not-allowed;
}

.vtmn-toggle input[type='checkbox']:disabled + span{
  opacity:0.38;
}

.vtmn-toggle_size--small .vtmn-toggle_switch{
  inline-size:2.625rem;
  block-size:1.5rem;
}

.vtmn-toggle_size--small .vtmn-toggle_switch span::before{
  block-size:1rem;
  inline-size:1rem;
}

.vtmn-toggle_size--small label{
  font-size:0.875rem;
  -webkit-margin-start:0.5rem;
          margin-inline-start:0.5rem;
}

.vtmn-toggle_size--small span::after{
  inline-size:1.125rem;
  block-size:1.125rem;
  inset-block-start:0.5rem;
  inset-inline-start:0.4375rem;
}

.vtmn-toggle_size--small input[type='checkbox']:checked + span::before{
  transform:translateX(1.125rem);
}

.vtmn-toggle_size--small input[type='checkbox']:checked + span::after{
  transform:translateX(1.125rem);
}

.vtmn-toggle_size--small
  input[type='checkbox']:not([disabled]):hover
  + span::before{
  box-shadow:0 0 0 0.5rem hsla(200, 100%, 4.7%, 0.05);
}

.vtmn-toggle_size--small
  input[type='checkbox']:not([disabled]):active
  + span::before{
  box-shadow:0 0 0 0.5rem hsla(200, 100%, 4.7%, 0.15);
}

.vtmn-toggle_size--small
  input[type='checkbox']:not([disabled]):hover:checked
  + span::before{
  box-shadow:0 0 0 0.5rem hsla(200, 100%, 36.9%, 0.05);
}

.vtmn-toggle_size--small
  input[type='checkbox']:not([disabled]):active:checked
  + span::before{
  box-shadow:0 0 0 0.5rem hsla(200, 100%, 36.9%, 0.15);
}

.vtmn-toggle_size--medium .vtmn-toggle_switch{
  inline-size:3.5rem;
  block-size:2rem;
}

.vtmn-toggle_size--medium .vtmn-toggle_switch span::before{
  block-size:1.5rem;
  inline-size:1.5rem;
}

.vtmn-toggle_size--medium label{
  font-size:1rem;
  -webkit-margin-start:0.75rem;
          margin-inline-start:0.75rem;
}

.vtmn-toggle_size--medium span::after{
  block-size:1.5rem;
  inline-size:1.5rem;
  inset-block-start:0.625rem;
  inset-inline-start:0.5625rem;
}

.vtmn-toggle_size--medium input[type='checkbox']:checked + span::before{
  transform:translateX(1.5rem);
}

.vtmn-toggle_size--medium input[type='checkbox']:checked + span::after{
  transform:translateX(1.5rem);
}

.vtmn-toggle_switch--medium
  input[type='checkbox']:not([disabled]):hover
  + span::before{
  box-shadow:0 0 0 0.75rem hsla(200, 100%, 4.7%, 0.05);
}

.vtmn-toggle_switch--medium
  input[type='checkbox']:not([disabled]):active
  + span::before{
  box-shadow:0 0 0 0.75rem hsla(200, 100%, 4.7%, 0.15);
}

.vtmn-toggle_switch--medium
  input[type='checkbox']:not([disabled]):hover:checked
  + span::before{
  box-shadow:0 0 0 0.75rem hsla(200, 100%, 36.9%, 0.05);
}

.vtmn-toggle_switch--medium
  input[type='checkbox']:not([disabled]):active:checked
  + span::before{
  box-shadow:0 0 0 0.75rem hsla(200, 100%, 36.9%, 0.15);
}