.calculation-switch {
    display: inline-block;
    position: relative;
    font-size: 14px;
    user-select: none;
}

.calculation-switch__field {
    display: block;
    width: 0;
    height: 0;
    position: absolute;
    z-index: -1;
    opacity: 0;
}

.calculation-switch__dott,
.calculation-switch__dott::before {
    width: var(--w);
    height: var(--h);
    display: inline-block;
    transition: .15s;
}

.calculation-switch__dott {
    --w: 37px;
    --h: 18px;
    position: relative;
    border-radius: var(--app-border-lg);
    background: var(--clr-neutral-200);
}

.calculation-switch__dott::before{
    --w: 14px;
    --h: 14px;
    --translate-x: 20px;
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    border-radius: 50%;
    background: var(--clr-neutral-400);
}

.calculation-switch__field:checked + .calculation-switch__dott:before {
    transform: translateX(var(--translate-x));
    background: var(--clr-neutral-200);
}

.calculation-switch__field:not(:disabled):active + .calculation-switch__dott:before {
    background: var(--clr-neutral-600);
}

.calculation-switch__field:checked + .calculation-switch__dott {
	background: var(--clr-primary);
}

.calculation-switch__field:not(:disabled) + .calculation-switch__dott {
	cursor: pointer;
}

.calculation-switch__field:disabled + .calculation-switch__dott {
	opacity: 0.4;
}

.calculation-switch__field:focus-visible + .calculation-switch__dott::before {
	box-shadow: inset 0px 0px 4px #ff5623;
}