/*BUTTONS*/

:root{
--fsButton:16px;
--fwButton:600;
}


.switch{
  width:32px;
  height:18px;
  border-radius: 16px;
  display:inline-block;
  padding:1px;
  user-select: none;
}
.switchknob{
  width:16px;
  height:16px;
  border-radius: 16px;
  
 margin-left:14px;
}

.swprim{
  background-color:var(--ac-bg-primary-default);
}
.swprim .switchknob{
  background:var(--ac-fg-base);
}
.swprim:hover{
  background-color:var(--ac-bg-primary-hover);
}
.swprim.switch-dis{
 background-color:var(--ac-bg-primary-disabled);
}

.swneutral{
  background-color:var(--ac-bg-neutral-default);
}
.swneutral .switchknob{
  background:var(--ac-fg-base);
}
.swneutral:hover{
  background-color:var(--ac-bg-neutral-hover);
}
.swneutral.switch-dis{
 background-color:var(--ac-bg-neutral-disabled);
}



.switch-dis .switchknob{
 margin-left:0;
}

.radio{
  display:inline-block;
  width:20px;
  height:20px;
  border-radius:1000px;
  border:1px solid var(--ac-bd-neutral-light-default);
  padding:2px;
}
.radioknob{
 
  width:14px;
  height:14px;
  left:3px;
  top:3px;
  border-radius: 1000px;
}

.radio:hover .radioknob{
  background:var(--ac-bg-primary-hover);
}


.checkbox{
  display:inline-block;
  width:20px;
  height:20px;
  border-radius:4px;
  border:1px solid var(--ac-bd-neutral-light-default);
  padding:2px;
  box-shadow:var(--shadow-hard-small);
}
.checkboxknob{
 
  width:100%;
  height:100%;

}

.checkbox:hover .checkboxknob{
  background-color:var(--ac-bg-primary-hover);
}